readme and fixed burger

Author: Andrew-devcoder

README.md

@@ -1 +1,15 @@
-https://www.figma.com/file/nKuSCKtUVmeFaaCemi6RBu/web-design-(Community)-(Copy)?type=design&mode=design&t=K9kPFRzuW0jCJdiM-0
+#Project "Adventure".
+
+##Project Features
+-Simple yet stylish website
+-Using Flexbox to Create a Responsive Layout
+-Using SCSS to make working with CSS easier
+-Smooth hover effects to improve user experience
+-Responsive design for different screen sizes
+-Progressbar showing page progress
+
+##Layout
+The project used a layout found in the Figma community. [Link to the layout.](<https://www.figma.com/file/nKuSCKtUVmeFaaCemi6RBu/web-design-(Community)-(Copy)?type=design&mode=design&t=K9kPFRzuW0jCJdiM-0>)
+
+##Sreen Shot
+![Alt text](/screenshot/mobile.png?raw=true "Mobile")

css/style.min.css

@@ -41,6 +41,7 @@ <h2>Adventure</h2>
                         </ul>
                         <a class="button button__header" href="#">BOOK NOW</a>
                     </nav>
+                    <button class="button__burger"><span></span></button>
                 </div>
             </div>
         </header>

index.html

@@ -51,3 +51,17 @@ buttonToUp.addEventListener("click", () => {
         behavior: "smooth",
     });
 });
+
+// burger menu
+const burgerButton = document.querySelector(".button__burger");
+const listMenu = document.querySelector(".header__nav");
+
+burgerButton.addEventListener("click", () => {
+    burgerButton.classList.toggle("button__burger--active");
+
+    if (burgerButton.classList.contains("button__burger--active") === true) {
+        listMenu.classList.add("opacity");
+    } else {
+        listMenu.classList.remove("opacity");
+    }
+});

screenshot/127.0.0.1_5500_ (1).png

@@ -118,6 +118,65 @@
             }
         }
     }
+
+    &__burger {
+        display: none;
+        margin: 10px;
+        width: 32px;
+        height: 20px;
+        position: relative;
+        z-index: 2;
+        overflow: hidden;
+        background-color: transparent;
+
+        @media (max-width: 825px) {
+            display: block;
+        }
+
+        & span,
+        &::after,
+        &::before {
+            position: absolute;
+            left: 0;
+            height: 3px;
+            width: 100%;
+            transition: all 0.3s ease 0s;
+            background-color: #ffffff;
+            border-radius: 20px;
+        }
+
+        &::after,
+        &::before {
+            content: "";
+        }
+
+        &::before {
+            top: 0;
+        }
+
+        &::after {
+            bottom: 0;
+        }
+
+        & span {
+            top: 50%;
+            transform: scale(1) translate(0, -50%);
+        }
+
+        &--active {
+            & span {
+                transform: scale(0) translate(0, -50%);
+            }
+            &::before {
+                top: 50%;
+                transform: rotate(-45deg) translate(0, -50%);
+            }
+            &::after {
+                bottom: 50%;
+                transform: rotate(45deg) translate(0, 50%);
+            }
+        }
+    }
 }
 
 .visible {

screenshot/mobile.png

@@ -89,14 +89,28 @@
         }
 
         @media (max-width: 825px) {
-            display: none;
+            opacity: 0;
+            transition: all 0.2s ease-in;
         }
 
         ul {
             display: flex;
             flex-direction: row;
             gap: 20px;
 
+            @media (max-width: 825px) {
+                position: absolute;
+                top: 80px;
+                left: 0;
+                flex-direction: column;
+                width: 100%;
+                padding: 10px 0 10px 10px;
+                background: rgba(0, 0, 0, 0.8);
+                border-left: 12px solid #ffffff;
+                z-index: 999;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            }
+
             a {
                 font-weight: 800;
                 text-transform: uppercase;
@@ -120,3 +134,7 @@
         }
     }
 }
+
+.opacity {
+    opacity: 1;
+}

script.js

@@ -8,5 +8,4 @@
 @import "_discover";
 @import "_tours";
 @import "_scrollbar";
-@import "_burger";
 @import "_footer";