some fixes

src/index.html

@@ -54,7 +54,7 @@ <h3 class="header__nav-title">witch of mountain winds</h3>
           class="burger__close"
           src="./images/close.svg"
           alt="menu"
-          onclick="toggleOpenClass()"
+          onclick="handleBurgerNav()"
         >
       </div>
       <nav  class="burger__nav">
@@ -245,15 +245,30 @@ <h2 class="contact__title">Contact us</h2>
         <form class="contact__info-form" action="your-backend-url"
            method="POST" target="myFrame">
           <h3 class="contact__text">We will help you choose a product that suits you and answer your other questions</h3>
-          <input class="contact__info-form-element" type="text"
-             placeholder="   Name" name="name"
-              required>
-          <input class="contact__info-form-element" type="email"
-             placeholder="   Email" name="email"
-              required>
-          <textarea class="contact__info-form-message" placeholder="   Message"
-             name="message" rows="1"
-             required></textarea>
+          <input
+            class="contact__info-form-element"
+            type="text"
+            placeholder="Name"
+            name="name"
+            id="name"
+            required
+          >
+          <input
+            class="contact__info-form-element"
+            type="email"
+            placeholder="Email"
+            name="email"
+            id="email"
+            required
+          >
+          <textarea
+            class="contact__info-form-message"
+            placeholder="Message"
+            name="message"
+            rows="1"
+            id="message"
+            required
+          ></textarea>
           <button class="contact__info-button" type="submit">Send a message</button>
         </form>
       </div>
@@ -296,42 +311,21 @@ <h3 class="contact__text">We will help you choose a product that suits you and a
     </footer>
     <script type="text/javascript" src="scripts/main.js"></script>
     <script>
-      function toggleOpenClass() {
         const element = document.getElementById('menu');
         const cartBox = document.getElementById('cartBox');
-
-        // Sprawdź, czy element istnieje
-        if (element && cartBox) {
-          // Sprawdź, czy element ma już klasę "open"
-          if (element.classList.contains('open')) {
-            // Jeśli ma, usuń ją
-            element.classList.remove('open');
-            console.error('remove');
-            // Przywróć widoczność logo i koszyka
-            document.querySelector('.logo').style.display = 'flex';
-            cartBox.style.display = 'block';
-            burger.style.display = 'none';
-            home.style.display = 'block';
-          } else {
-            // Jeśli nie ma, dodaj ją
-            element.classList.add('open');
-            console.error('add');
-            // Ukryj logo i koszyk
-            document.querySelector('.logo').style.display = 'none';
-            cartBox.style.display = 'none';
-            burger.style.display = 'block';
-            home.style.display = 'none';
-          }
-        } else {
-          console.error("Element 'menu' or 'cartBox' not found.");
-        }
+        const header = document.getElementById('home');
+        const burger = document.getElementById('burger');
+      function toggleOpenClass() {
+        header.style.display = 'none';
+        burger.style.display = 'block';
       }
       function handleBurgerNav() {
         cartBox.style.display = 'block';
             burger.style.display = 'none';
             home.style.display = 'block';
             document.querySelector('.logo').style.display = 'flex';
       }
+
     </script>
   </body>
 </html>

src/scripts/main.js

@@ -1,2 +1,82 @@
 /* eslint-disable no-console */
 'use strict';
+
+document.addEventListener('DOMContentLoaded', function() {
+  const submitButton = document.querySelector('.contact__info-button');
+
+  function submitForm(event) {
+    event.preventDefault();
+
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const message = document.getElementById('message').value;
+    const nameFrame = document.getElementById('name');
+    const emailFrame = document.getElementById('email');
+    const messageFrame = document.getElementById('message');
+    let valid = true;
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if (!emailRegex.test(email)) {
+      // alert('It is not an e-mail!');
+      emailFrame.style.border = '1px solid red';
+      document.getElementById('email').value = '';
+      document.getElementById('email').placeholder = 'It is not an e-mail!';
+
+      setTimeout(() => {
+        emailFrame.style.border = '';
+        document.getElementById('email').placeholder = 'Email';
+      }, 3000);
+
+      valid = false;
+    }
+
+    if (name.length < 2 || name.length > 20) {
+      nameFrame.style.border = '1px solid red';
+      document.getElementById('name').value = '';
+      // eslint-disable-next-line max-len
+      document.getElementById('name').placeholder = 'Name must be between 2 and 20 letters';
+
+      setTimeout(() => {
+        nameFrame.style.border = '';
+        document.getElementById('name').placeholder = 'Name';
+      }, 3000);
+
+      valid = false;
+    }
+
+    if (message.length < 5 || message.length > 90) {
+      messageFrame.style.border = '1px solid red';
+      document.getElementById('message').value = '';
+      // eslint-disable-next-line max-len
+      document.getElementById('message').placeholder = 'Message must be between 5 and 90 letters';
+
+      setTimeout(() => {
+        messageFrame.style.border = '';
+        document.getElementById('message').placeholder = 'Message';
+      }, 3000);
+
+      valid = false;
+    }
+
+    if (valid) {
+      // alert('Data send successfully.');
+      document.getElementById('name').value = '';
+      document.getElementById('email').value = '';
+      document.getElementById('message').value = '';
+      submitButton.style.backgroundColor = 'green';
+
+      setTimeout(() => {
+        submitButton.style.backgroundColor = '#333';
+      }, 3000);
+
+      return true;
+    }
+    submitButton.style.backgroundColor = 'red';
+
+    setTimeout(() => {
+      submitButton.style.backgroundColor = '#333';
+    }, 3000);
+  }
+
+  submitButton.addEventListener('click', submitForm);
+});

src/styles/aboutMe.scss

@@ -1,5 +1,5 @@
 .aboutMe {
-  width: 280px;
+  width: 270px;
   margin: 0 auto;
   &__imgBox {
     display: none;
@@ -21,12 +21,17 @@
   &__button {
     font-weight: 600;
     font-size: 16px;
-    color: #f2f2f2; // Change here
+    color: #f2f2f2;
     width: 100%;
     height: 60px;
     background-color: $c-gray;
     margin-top: 25px;
     margin-bottom: 100px;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 }
 
@@ -39,14 +44,13 @@
       width: 342px;
       margin-right: 30px;
     }
-    // ... (remaining styles)
   }
 }
 
 @media screen and (min-width: 1201px) {
   .logo {
     box-sizing: border-box;
-    border: solid 1px #344f10; // Change here
+    border: solid 1px #344f10;
     border-radius: 40px;
     height: 50px;
     width: 50px;

src/styles/aboutUs.scss

@@ -1,5 +1,5 @@
 .about-us {
-  width: 280px;
+  width: 270px;
   margin: 0 auto 100px;
 
   &__text {

src/styles/burger.scss

@@ -9,6 +9,7 @@
     width: 15px;
     height: 15px;
     margin: 10vw;
+    cursor: pointer;
   }
 
   &__nav {

src/styles/contact.scss

@@ -1,6 +1,6 @@
 .contact {
   margin: 100px auto;
-  width: 280px;
+  width: 270px;
   &__info-img {
     display: none;
   }
@@ -12,6 +12,11 @@
     font-size: 16px;
     line-height: 21px;
     width: 100%;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    &:hover {
+      transform: scale(1.1);
+    }
   }
   &__text {
     font-weight: 400;
@@ -33,8 +38,10 @@
     border-bottom: solid 1px $c-green;
     color: $c-gray;
     margin-bottom: 25px;
+    padding-left: 6px;
   }
   &__info-form-message {
+    padding-left: 6px;
     width: 100%;
     font-weight: 400;
     line-height: 21px;

src/styles/footer.scss

@@ -6,7 +6,7 @@
   padding-top: 30px;
   padding-bottom: 40px;
   &__content {
-    width: 280px;
+    width: 270px;
     height: 100%;
     margin: 0 auto;
   }

src/styles/header.scss

@@ -12,14 +12,19 @@
       max-height: 100%;
       max-width: 100%;
       align-self: center;
-      display: block; /* Add this line */
+      display: block;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+      &:hover {
+        transform: scale(1.1);
+      }
     }
     &-imgBox {
       width: 24px;
       height: 24px;
       align-items: center;
       justify-content: center;
-      display: flex; /* Add this line */
+      display: flex;
       &-logo {
         box-sizing: border-box;
         border: solid 1px #344f10;

src/styles/home.scss

@@ -4,7 +4,7 @@
     width: 100vw;
   }
   &__content {
-    width: 280px;
+    width: 270px;
     margin: 25px auto 100px;
     &-button {
       font-weight: 600;
@@ -13,6 +13,11 @@
       width: 100%;
       height: 60px;
       background-color: $c-gray;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+      &:hover {
+        transform: scale(1.1);
+      }
     }
     &-text {
       font-weight: 400;

src/styles/powder.scss

@@ -35,10 +35,13 @@
 @media screen and (min-width: 768px) and (max-width: 1200px) {
 
   .powder {
-    width: 740px;
+    width: calc((100vw - 740px) / 2 + 740px);
     margin: 0 auto;
+    margin-right: 0;
     margin-bottom: 100px;
     &__demo {
+      margin-left: calc(100vw - 740px);
+
       display: flex;
       &-ing {
         width: 98px;

src/styles/shop.scss

@@ -6,11 +6,16 @@
     font-weight: 600;
     font-size: 16px;
     color: #f2f2f2;
-    width: 280px;
+    width: 270px;
     height: 60px;
     background-color: $c-gray;
     margin: 0 auto;
-    margin-left: calc(50vw - 140px);
+    margin-left: calc(50vw - 135px);
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    &:hover {
+      transform: scale(1.1);
+    }
   }
   &__productCard-text {
     font-size: 18px;
@@ -28,7 +33,7 @@
     display: none;
   }
   &__content {
-    width: 280px;
+    width: 270px;
     margin: 0 auto;
   }
   &__title {