marisabrantley / rotating-navigation

This project involves having the entire website rotate when the hamburger icon is clicked and bringing in the navigation on the bottom left. The page shown was recreated from my Etsy Shop, Sadie Bloom Designs.

Home Page:https://marisabrantley.github.io/rotating-navigation/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rotating Navigation Project

This project involves having the entire website rotate when the hamburger icon is clicked and bringing in the navigation on the bottom left, as well as changing the icon to an "x".

The page shown was recreated from the About section on my Etsy Shop, Sadie Bloom Designs (www.sadiebloomdesigns.etsy.com).

Objective

  • Use CSS to style the elements with the show-nav container, including transition and transform.

  • Use JavaScript to add or remove classes in order for the transition to begin.

rotating-nav.mov

Launch

View the Rotating Navigation Project here: https://marisabrantley.github.io/rotating-navigation/

Class

Brad Traversy's Udemy Course "50 Projects in 50 Days"
https://www.udemy.com/course/50-projects-50-days/

About

This project involves having the entire website rotate when the hamburger icon is clicked and bringing in the navigation on the bottom left. The page shown was recreated from my Etsy Shop, Sadie Bloom Designs.

https://marisabrantley.github.io/rotating-navigation/


Languages

Language:HTML 64.8%Language:CSS 30.8%Language:JavaScript 4.3%