Overview: On the screen I\'ll need you to draw 4 boxes with the following backgr
ID: 3705566 • Letter: O
Question
Overview:
On the screen I'll need you to draw 4 boxes with the following background colors IN THIS ORDER:
- red
-blue
- green
- purple
Each box has a height of 200px
At screen size of 639px or less all 4 boxes should take up 100% of the screen
Between 640px and 799px the boxes will be 75% of the screen size
Between 800px and 999px the boxes will be 50% of the screen and should have a 5px margin
Anything greater than 1000px the boxes should be 20% with a 10px margin
Anything 1440px or greater the boxes should flip (new order would be purple, green, blue, red) order and be right aligned.
Check the video on Slack to get a better understanding of what I mean
I'll be reviewing your code to see how you made this all work. Please submit your code (the HTML/CSS) by Wednesday 4/11.
Explanation / Answer
HTML/CSS Code:
<html>
<head>
<title>Boxes</title>
<style>
#red{
background : red;
}
#blue{
background : blue;
}
#green{
background : green;
}
#purple{
background : purple;
}
.box{
height : 200px;
display : block;
}
@media screen and (max-width: 639px) {
#outerDiv{
width : 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 799px) {
#outerDiv{
width : 75%;
}
}
@media screen and (min-width: 800px) and (max-width: 999px) {
#outerDiv{
width : 50%;
}
.box{
margin : 5px;
}
}
@media screen and (min-width: 1000px) {
#outerDiv{
width : 20%;
}
.box{
margin : 10px;
}
}
@media screen and (min-width: 1440px) {
#outerDiv{
position : absolute;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
#outerDiv > div{
width : 100%;
position: relative;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
}
</style>
</head>
<body>
<div id="outerDiv">
<div id="red" class="box"></div>
<div id="blue" class="box"></div>
<div id="green" class="box"></div>
<div id="purple" class="box"></div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.