Skip to content

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

Notifications You must be signed in to change notification settings

ltw-webdesign-1/distributed-navigation

Repository files navigation

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.

About

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

Resources

Stars

Watchers

Forks

Languages