ixamxkamii / navigation-highlight

A code exercise to practice highlighting the current page in website navigation.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

summary time deliverables
A code exercise to practice highlighting the current page in website navigation.
1.5 hours
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.


Hand in

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

About

A code exercise to practice highlighting the current page in website navigation.


Languages

Language:HTML 77.1%Language:CSS 22.9%