summary | time | deliverables |
---|---|---|
Practice adjusting grids & flexbox items using media queries. |
2 hours |
1 HTML file, 1 CSS file, images |
- Fork this repository.
- Create the responsive layout using CSS Grid, Flexbox & media queries.
- Some HTML & CSS boilerplate has been started for you.
- Text can be found inside the
content.txt
file. - Run it through Markbot and make sure it passes all the checks.
- Typefaces: (Already included in your HTML)
- Text sizes:
1rem
,1.125rem
,1.5rem
,2rem
- Colours:
#e2e2e2
,#3783a3
,#000
- Max lengths:
30em
- Gaps:
1rem
- Margins:
1.5rem
- Paddings:
.5em 1em .6em
,1rem
,.5rem
- Border thicknesses:
.2rem
- Corner radii:
.3rem
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.