ashtastic / header-icons

Use float to add navigation and two image icons to the header of a website.

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

Header icons

Overview

• 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.

---

Details

• 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

---

Goal

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.

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.

---

Optional challenges

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.

1. Figure out how to use flexbox and complete the layout using display: flex instead of float