On the screen I\'ll need you to draw 4 boxes with the following background color
ID: 3705622 • Letter: O
Question
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.
The right alligned step is of critical importance.
Explanation / Answer
<html>
<head>
<style>
body {
background-color: lightblue;
}
#red_box {
background-color:red;
height:200px;
}
#blue_box {
background-color:blue;
height:200px;
}
#green_box {
background-color:green;
height:200px;
}
#purple_box {
background-color:purple;
height:200px;
}
.class_width {
width:20%;
margin:10px 10px 10px 10px;
}
@media screen and (max-width: 639px) {
body {
background-color: lightgreen;
}
.class_width {
width:100%;
margin:0px 0px 0px 0px;
}
}
@media screen and (max-width: 799px)and (min-width: 640px) {
body {
background-color: lavender;
}
.class_width {
width:75%;
margin:0px 0px 0px 0px;
}
}
@media screen and (max-width: 999px)and (min-width: 800px) {
body {
background-color: lightblue;
}
.class_width {
width:50%;
margin:5px 5px 5px 5px;
}
@media screen and (min-width: 1000px) and (max-width: 1439px) {
body {
background-color: lightblue;
}
.class_width {
width:20%;
margin:10px 10px 10px 10px;
}
@media screen and (min-width: 1439px) {
#red_box {
background-color:purple;
height:200px;
}
#blue_box {
background-color:green;
height:200px;
}
#green_box {
background-color:blue;
height:200px;
}
#purple_box {
background-color:red;
height:200px;
}
}
</style>
</head>
<body>
<div id="demo"></div>
<div id="red_box" class="class_width"></div>
<div id="blue_box" class="class_width"></div>
<div id="green_box" class="class_width"></div>
<div id="purple_box" class="class_width"></div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.