| summary | time | deliverables |
|---|---|---|
Use Flexbox and media queries to make a responsive website header. |
1 hour |
1 HTML file, 1 CSS file |
- Fork this repository.
- Create the layout that matches the screenshots.
- Use Flexbox to move and position the different elements.
- DO NOT change the HTML file.
- Run it through Markbot and make sure it passes all the checks.
- Typefaces:
Ubuntu(regular, bold) - Text sizes:
2rem,1.125rem - Colours:
#fff,#18294f,#6c8fe0 - Paddings:
5px,.3em 0 .5em,.5em .75em,0 .75rem - Margins:
.9rem - Standard media query widths:
25em,38em,60em,90em - Standard text sizes & line heights:
100%/1.3,110%/1.4,120%/1.5,130%/1.5
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
- Watch this video to see how it interacts.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.