summary: "A code exercise to practice highlighting the current page in website navigation." time: "1.5 hours" deliverables: "4 HTML files, 1 CSS file, images"

Navigation highlight

Overview

• Fork this repository.
• Create the index.html file to match the screenshots.
• Make the 3 other HTML pages & highlight the current page on all of them.
• The content for each page can be found inside the content.txt file.
• Run it through Markbot and make sure it passes all the checks.

Details

• Typefaces: Georgia, Sigmar One
• Text sizes: 3rem, 1.875rem, 1.125rem, .75rem
• Colours: #2f2d13, #cc1465, #ffe500, #b20953, #b2a212
• Line height: 1.5
• Paddings: .2em .5em .3em, 0 .75em, .75em
• Margins: .3em
• Corner radius: 4px

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 for grades using Markbot.