/distributed-navigation

Use Flexbox to create a horizontal navigation with lots of different components.

Primary LanguageCSS

summary time deliverables
Use Flexbox to create a horizontal navigation with lots of different components.
1 hour
1 HTML file, 1 CSS file, images

Distributed navigation

Overview

  • Fork this repository.
  • Use Flexbox to create the navigation layout seen in the screenshots.
  • DO NOT change the HTML file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: sans-serif
  • Text sizes: 1.125rem
  • Line-heights: 1.5
  • Colours: #e2e2e2, #0074d9, #fff
  • Margins: .5rem
  • Paddings: 1rem, .75em 1em .6em
  • Image width: 2rem

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

  • Final screenshots in the “screenshots” folder.

Hand in

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