24 - Responisve Website Finished

Author: jonathanedempsey

24 - Responisve Website/responsive-START.css

@@ -154,3 +154,66 @@ img {
 .gallery img {
   width: 100%;
 }
+
+@media (max-width: 1000px) {
+  .menu {
+    order: -1;
+    perspective: 800px;
+  }
+
+  [aria-controls="menu-list"] {
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  .menu ul {
+    max-height: 0;
+    transform: rotateX(90deg);
+    transition: all 0.5s;
+    overflow: hidden;
+  }
+
+  [aria-expanded="true"] ~ ul {
+    display: grid;
+    max-height: 500px;
+    transform: rotateX(0);
+  }
+
+  [aria-expanded="false"] .close {
+    display: none;
+  }
+
+  [aria-expanded="false"] .open {
+    display: inline-block;
+  }
+
+  [aria-expanded="true"] .close {
+    display: inline-block;
+  }
+
+  [aria-expanded="true"] .open {
+    display: none;
+  }
+}
+
+@media (max-width: 700px) {
+  .top {
+    grid-template-areas:
+      "hero hero"
+      "cta1 cta2"
+  }
+
+  /* About */
+  .about {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 500px) {
+  .top {
+    grid-template-areas:
+      "hero"
+      "cta1"
+      "cta2"
+  }
+}

24 - Responisve Website/responsive-START.html

@@ -102,8 +102,17 @@ <h2>Instant Grams</h2>
   </div>
 
   <script>
+    const navButton = document.querySelector('button[aria-expanded]');
+    function toggleNav({ target }) {
+      // console.log(target);
+      const expanded = target.getAttribute('aria-expanded') === 'true' || false;
+      // console.log(expanded);
+      navButton.setAttribute('aria-expanded', !expanded);
+    }
+
+    navButton.addEventListener('click', toggleNav);
   </script>
-  
+
 </body>
 
 </html>