summary | time | deliverables |
---|---|---|
Use float to add navigation and two image icons to the header of a website. |
1 hour |
1 HTML file, 1 CSS file, images |
- Fork this repository.
- Write the HTML necessary for the header and navigation.
- Use
float
to arrange the grain icons and the navigation items. - Run it through Markbot and make sure it passes all the checks.
- Typefaces:
Merriweather
- Text sizes:
2rem
,1.125rem
- Line height:
1.5
- Colours:
#d05c2e
,#a63f38
- Margins:
0
,0 0 .7rem
,.3rem
- Paddings:
0
,.5em 0 0
,.4rem 0
- Grain icon width:
40px
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 to Canvas using Markbot.
These challenges are here if you’d like to try a little more work—they are for extra experience and learning. They are completely optional and not graded. Show them to me if you’d like—I’d love to see them.
- Figure out how to use Flexbox and complete the layout using
display: flex
instead offloat