add solution

src/index.html

@@ -393,11 +393,11 @@ <h2 class="vision__title">
     <footer class="footer" id="footer">
       <div class="container">
         <div class="footer__content">
-          <form action="#" method="get" class="form" id="contactForm">
+          <form onsubmit="this.reset(); return false" action="#" method="get" class="form">
               <h3 class="footer__title">
                 Send us  a message
               </h3>
-              <input required type="mail" placeholder="Your email" class="form__input">
+              <input required type="email" placeholder="Your email" class="form__input">
               <input required type="text" placeholder="Your name" class="form__input">
               <textarea required name="message" class="form__input" placeholder="Your message"></textarea>
               <button type="submit" class="button form__button">Send</button>

src/scripts/main.js

@@ -8,10 +8,3 @@ const swiper = new Swiper('.swiper', {
     prevEl: '.swiper-button-prev',
   },
 });
-
-document
-  .getElementById('contactForm')
-  .addEventListener('submit', function (event) {
-    event.preventDefault();
-    alert('Form submitted!');
-  });

src/styles/components/form.scss

@@ -18,7 +18,7 @@
     font-family: 'Poppins', sans-serif;
     font-size: 15px;
     font-weight: 600;
-
+    color: $white;
     background-color: inherit;
     width: 100%;
     height: 40px;
@@ -34,7 +34,6 @@
     &:focus {
       outline: none;
       border-bottom: 2px solid $mainBotton;
-      color: $white;
       // font-family: 'Poppins', sans-serif;
       // font-size: 15px;
       // font-weight: 600;

src/styles/utils/_mixins.scss

@@ -26,7 +26,7 @@
 }
 
 @mixin contentPaddingInline() {
-  padding-inline: 20px;
+  padding-inline: 14px;
 
   @include onTablet{
     padding-inline: 41px;