In: Computer Science
Create 6 tags with text inside them (in a valid HTML page,) color each differently. All show up on the page at this point... it's better to try to have everything upfront and in the open 1st and later have them hide, hover, or whatever interaction they will do. See the video for the text, don't bother matching the colors in the video.
Validate the HTML. Bugs multiply as you make the page more complex; a CSS problem could actually be an HTML problem.
Find the CSS property to HIDE something using CSS (there are two different ones that would work.) Hide all the tags by default. Knowing how to hide things with CSS is extremely useful (not just necessary for this assignment.)
Using Media Queries show the proper tags depending upon the device changes:
show landscape when the device is in landscape orientation
show portrait when the device is in portrait orientation
show >300 wide when the device is over 300px wide
show >300 tall when the device is over 300px high
show HD TV when the device the exact aspect ratio is 16/9 (there is a feature for aspect ratio; in firefox to preview you will need the exact window size for that ratio, you do not have to use HD you can use smaller numbers; equation: width = height*16/9. Also, you can look at the video)
show big when the device is above in 400px width and height.
Optional: instead of px pixel units, try using rem units. If you do, you should look up what a root em unit is so you know how big they are.
Here is the code that will satisfy the conditions given above:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="d1 card">
<div class="card_heading">Heading 1</div>
<div class="card_text">Hidden With Opacity 0</br>Lorem
ipsum dolor sit amet consectetur adipisicing elit. Quia,
vero.
libero, ipsam tempore? Doloremque laborum cumque id adipisci
delectus eius.</div>
</div>
<div class="d2 card">
<div class="card_heading">Heading 2</div>
<div class="card_text">Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Dignissimos nam accusantium
reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci
delectus eius.</div>
</div>
<div class="d3 card">
<div class="card_heading">Heading 3</div>
<div class="card_text">Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Dignissimos nam accusantium
reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci
delectus eius.</div>
</div>
<div class="d4 card">
<div class="card_heading">Heading 4</div>
<div class="card_text">Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Dignissimos nam accusantium
reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci
delectus eius.</div>
</div>
<div class="d5 card">
<div class="card_heading">Heading 5</div>
<div class="card_text">Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Dignissimos nam accusantium
reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci
delectus eius.</div>
</div>
<div class="d6 card">
<div class="card_heading">Heading 6</div>
<div class="card_text">Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Dignissimos nam accusantium
reprehenderit sequi unde architecto
libero, ipsam tempore? Doloremque laborum cumque id adipisci
delectus eius.</div>
</div>
</div>
</body>
</html>
styles.css
*{
margin:0;
padding:0;
box-sizing: border-box;
}
@media (min-width:1000px){
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 80vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 30%;
padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 3rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
.d1{
background: chocolate;
opacity: 0;
transition: all 0.5s ease-out;
}
.d1:hover{
opacity: 1;
transition: all 0.5s ease-in;
}
.d2{
background: crimson;
visibility: hidden;
transition: all 0.5s ease-in;
}
.d2:hover{
visibility: visible;
transition: all 0.5s ease-in;
}
.d2 .card_heading,.d4 .card_text,.d2 .card_text,
.d6 .card_text,.d4 .card_heading,.d6 .card_heading
{
visibility: visible;
}
.d3{
background: cyan;
opacity: 0;
transition: all 0.5s ease-out;
}
.d3:hover{
opacity: 1;
transition: all 0.5s ease-in;
}
.d4{
background: darkgrey;
visibility: hidden;
transition: all 0.5s ease-in;
}
.d5{
background: darksalmon;
opacity: 0;
transition: all 0.5s ease-out;
}
.d5:hover{
opacity: 1;
transition: all 0.5s ease-in;
}
.d6{
background: darkseagreen;
visibility: hidden;
transition: all 0.5s ease-in;
}
.d4:hover{
visibility: visible;
transition: all 0.5s ease-in;
}
.d4:hover{
visibility: visible;
transition: all 0.5s ease-in;
}
.card_text{
padding: 1rem;
text-align: center;
overflow-y:hidden ;
}
@media( device-aspect-ratio : 16/9)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 90vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 60%;
padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 1rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
@media ( max-width : 720px) and (min-width:400px)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 90vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 60%;
padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 1rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
@media(max-width : 400px )
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 95vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 80%;
padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 1rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
@media(min-height : 720px) and (orientaion : potrait)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 80vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 40%;
padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 2rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
@media(min-width : 720px) and (max-width:1000px)
{
.wrapper{
position: relative;
margin:0 auto;
min-height: 100vh;
width: 80vw;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
}
.card{
margin:1em;
width: 40%;
padding:1.5em;
}
.card_heading{
font-weight: 800;
font-size: 2rem;
text-align: center;
padding: 1rem;
border-bottom: 0.05em solid black;
border-radius:40% ;
}
}
Output: When we Vary size of screen the content automatically adjusts.
1.
2.
3.
4.
5.
6.