renamed folders and fixed airpod website design

Author: oyerohabib

airpods-design/assets/css/styles.css

@@ -0,0 +1,55 @@
+const showMenu = (toggleId, navId) =>{
+    const toggle = document.getElementById(toggleId),
+    nav = document.getElementById(navId)
+
+    if(toggle && nav){
+        toggle.addEventListener('click', ()=>{
+            nav.classList.toggle('show')
+        })
+    }
+}
+
+showMenu('nav-toggle','nav-menu')
+
+/*-- ANIMATE GSAP --*/
+
+/*TEXT*/ 
+gsap.from('.home__title', {opacity: 0, duration: 1.5, delay: .5, y: 50})
+gsap.from('.home__description', {opacity: 0, duration: 1.5, delay: .8, y: 50})
+
+/*IMG AIRPOD*/
+gsap.from('.airpod1', {opacity: 0, duration: 2, delay: 1.2, y: -40})
+gsap.from('.airpod2', {opacity: 0, duration: 2, delay: 1.4, y: 40})
+
+/*NAV*/
+gsap.from('.nav__logo', {opacity:0, duration: 2.5, delay: 1.5, y: 25});
+gsap.from('.nav__toggle', {opacity:0, duration: 2.5, delay: 1.7, y: 25});
+gsap.from('.nav__item', {opacity: 0, duration: 2.5, delay: 1.9, y: 25, ease:'expo.out', stagger: .3})
+gsap.from('.nav__btn', {opacity:0, duration: 2.5, delay: 2, y: 25});
+
+
+/*SCROLL*/
+gsap.from('.home__scroll', {opacity: 0, duration: 1.5, delay: 2.3, y: 30})
+
+
+
+/*-- ANIMATE SCROLLMAGIC --*/
+var animate = new TimelineMax({onUpdate:updatePercentage})
+var  controller = new ScrollMagic.Controller()
+
+/*DETAILS*/
+animate
+.from('.details__img', {opacity: 0, y: 25})
+.from('.details__box', {opacity: 0, y: 25, duration: 1, ease:'expo.out', stagger: .4})
+
+var scene = new ScrollMagic.Scene({
+    triggerElement: ".details__box",
+})
+
+.setTween(animate)
+.addTo(controller)
+
+function updatePercentage(){
+    animate.progress()
+}
+