adaptive+burger-menu

index.html

@@ -13,8 +13,10 @@
     <div class="wrapper">
         <header class="container">
             <span class="logo">logo</span>
+            
             <nav class="nav">
-                <ul class="items">
+                <button class="burger" onclick="toggleMenu()">☰</button>
+                <ul class="items menu" id="menu">
                     <li class="item active">
                         <a class="link" href="/">Home</a>
                     </li>

main.js

@@ -4,3 +4,13 @@ function checkEmail() {
     else if(!email.includes('.')) alert('Нет символа .');
     else alert('Все отлично!')
 };
+
+function toggleMenu() {
+  let menu = document.getElementById("menu");
+
+  if (menu.style.display === "flex") {
+    menu.style.display = "none";
+  } else {
+    menu.style.display = "flex";
+  }
+}

style.css

@@ -72,6 +72,13 @@ header nav ul li:not(.active):not(.btn) .link:hover {
 .btn a:hover {
     background: #a02604;
 }
+.burger {
+    display: none;
+    font-size: 30px;
+    border: none;
+    background: none;
+    cursor: pointer;
+}
 
 /* --------------------------------HERO----------------------------------- */
 .hero {
@@ -843,3 +850,112 @@ footer hr {
     text-align: center;
     padding-bottom: 30px;
 }
+
+/* ----------------------------------ADAPTIVE---------------------------------------- */
+
+@media (max-width: 1300px) {
+    .container {
+        width: 950px;
+    }
+    .hero_img {
+    top: 40px;
+    }
+    .games {
+        gap: 20px;
+    }
+    .hero_img {
+    width: 720px;
+    height: 720px;
+    }
+    .project_img {
+        max-width: 30%;
+        max-height: 30%;
+    }
+    .email_input {
+        right: 50px;
+    }
+    .email_h4,
+    .email_p {
+        width: 70%;
+    }
+    .email_btn {
+        right: -195px;
+        top: -53.5px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .container {
+        width: 800px;
+    }
+    .hero {
+        padding-top: 50px;
+        padding-bottom: 100px;
+        position: relative;
+        z-index: 1;
+    }
+    .hero_info {
+        width: 100%;
+        padding: 0px 0px 550px 0px;
+    }
+    .hero_img {
+        width: 600px;
+        height: 600px;
+        top: 220px;
+        left: 27%;
+    }
+    .projects_images {
+        flex-wrap: wrap;
+        margin-bottom: 50px;
+    }
+    .email_btn {
+        right: -200px;
+        top: -53.5px;
+    }
+}
+
+@media (max-width: 900px) {
+    .container {
+        width: 700px;
+    }
+    .email_block {
+        flex-direction: column;
+    }
+    .email_input {
+        right: -5px;
+        width: 600px;
+    }
+        .email_btn {
+        right: -470px;
+        top: -53.5px;
+    }
+    .items {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        top: 70px;
+        right: 20px;
+        background: white;
+        padding: 20px;
+        border-radius: 10px;
+    }
+
+    .burger {
+        display: block;
+    }
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.nav {
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100%;
+    position: relative;
+}
+.link {
+    color: #000;
+}
+
+}