michaelarob / responsive-header

Use float and media queries to make a responsive website header.

summary	time	deliverables
Use float and media queries to make a responsive website header.	1 hour	1 HTML file, 1 CSS file

Responsive header

Overview

• Fork this repository.
• Create the layout that matches the screenshots.
• Use float with clearfixes 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.

---

Details

• Typefaces: Ubuntu
• Text sizes: 2rem, 1.125rem
• Colours: #fff, #18294f, #6c8fe0
• Paddings: 5px, .3em 0 .5em, .5em .75em, .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

---

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. Use flexbox and complete the layout using display: flex instead of float