Let's go! Time to get hairy with some css - we're digging into Grid and Flexbox now! Whoot!
You've got a simple HTML file and an empty CSS file - let's make them better! Follow the instructions below - don't forget to consult the curriculum if you're unsure on something!
Instructions:
-
Adjust the width of the .box class to 400px and change the background color to light blue.
-
Add a 10px padding to the top and bottom of the .box class.
-
Create a new class named .box-with-margin and add a margin of 30px.
-
Change the position of the .static-element class to relative.
-
Move the .relative-element 50px to the right using the left property.
-
Change the position property of the .absolute-element class to relative.
-
Set the top property of the .absolute-element class to 150px.
-
Adjust the position of the .fixed-element class so that it is fixed to the bottom right corner of the viewport.
-
Add a 1px solid border with a light gray color to the .column class.
-
Change the float property of the .column class to right.
-
Change the display property of the .container class to inline-flex.
-
Adjust the width of the .item class to 200px.
-
Add a 20px margin to the right of each .item class.
-
Create a grid layout for the .grid-container class with 4 columns and 3 rows.
-
Assign the .header, .sidebar, .main, and .footer classes to their respective grid areas in the .grid-container class.