summary: "Make a horizontal navigation using the CSS flow and display properties." time: "1 hour" deliverables: "1 HTML file, 1 CSS file"

Horizontal navigation

Overview

• Fork this repository.
• Create the index.html and main.css files.
• Make the navigation match the screenshots.
• Run it through Markbot and make sure it passes all the checks.

Details

• Typefaces: Bevan (from Google Fonts)
• Line height: 1.5
• Colours: #fff, #79756f, #595652, #713837, #f33
• Paddings: .6em, 0.5em 0.75em
• Margin: 0.3em

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.