Responsive Navigation

Description

Create a common navigation that is shared across the html pages. This navigation should be semantic, accessible, and visually appealing.  When the navigation is on the correct page use an additional class to mark the current page.

For inspiration visit:

• Super Simple Horizontal Navigation
• Horizontal Drop Down Menu Tutorial and Files
• 30 amazing css tutorials
• Photoshop Navigation tutorials

Requirements

Create three html pages:

1. index.html
2. about.html
3. contact.html

• Create a common navigation theme on each page. That is, navigation should look, work and feel exactly the same on each page.
• Research commom breakpoint values and apply three to your assignment: mobile, tablet and desktop.
• Mobile view should incorporate a vertical or stacked navigation while the other views implement a horizontal menu.
• Navigation on each page should link to the other pages.
• The current or active page link should be styled to indicate it's the page currently being viewed.
• Navigation links should incorporate styling for :hover and :active pseudo classes.
• Project files and folders should be organized and aptly named.
• The site adapts to different screen sizes or 'be responsive' and designed with a mobile first approach.
• Use placeholder content of at least 2 paragraphs with headers on each page.
• Site passes HTML and CSS validation

Rubric

Criteria	Pts
Navigation is responsive and implements 3 breakpoints	6
Navigation is consistent across all 3 pages	3
Mobile first approach applied	3
Project files are organized and named	3
Active page is indicated	3
Placeholder content used	3
HTML passes validation	3
CSS passes validation	3
Navigation style incorporates pseudo-classes appropriately	3
Total Points	30

Submission

Submit a 'zip' of your project folder. Use the naming convention below for your submission and be sure to use hyphens for the spaces and all lowercase lettering.

Example

username-mtm6130-responsive-nav.zip