/icon-navigation

Combine together grids, modular type & CSS components to make a responsive navigation with icons.

Primary LanguageCSS

summary time deliverables
Combine together grids, modular type & CSS components to make a responsive navigation with icons.
1 hour
1 HTML file, 4 CSS file, images

Icon navigation

Overview

  • Fork this repository.
  • Create a responsive masthead with navigation where the navigation has icons—it’s extremely similar to the “modular nav” assignment.
  • Make sure the navigation changes when hovered.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: Abhaya Libre from Google Fonts
  • Colours: #fff, #15114c, #423ca3
  • Expected class names: .masthead, .logo, .nav
  • Gridifier settings: defaults
  • Typografier settings: defaults
  • Modulifier settings: select all

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.