fix: autofill, form submit, card hover effects

src/index.html

@@ -485,10 +485,20 @@ <h2 class="testimonials__title">What people say</h2>
           </div>
           <div class="testimonials__inner">
             <article class="testimonials__article">
-              <img
-                src="./images/testimonials/tal-gilad.png"
-                alt="Tal Gilad"
-              />
+              <picture>
+                <source
+                  srcset="./images/testimonials/tal-gilad.avif"
+                  type="image/avif"
+                />
+                <source
+                  srcset="./images/testimonials/tal-gilad.webp"
+                  type="image/webp"
+                />
+                <img
+                  src="./images/testimonials/tal-gilad.png"
+                  alt="Tal Gilad"
+                />
+              </picture>
 
               <blockquote class="testimonials__quote">
                 AIR’s ideas are refreshing and out of the box. Authentic team
@@ -499,10 +509,20 @@ <h2 class="testimonials__title">What people say</h2>
             </article>
 
             <article class="testimonials__article">
-              <img
-                src="./images/testimonials/azadeh-hawkins.png"
-                alt="Azadeh Hawkins"
-              />
+              <picture>
+                <source
+                  srcset="./images/testimonials/azadeh-hawkins.avif"
+                  type="image/avif"
+                />
+                <source
+                  srcset="./images/testimonials/azadeh-hawkins.webp"
+                  type="image/webp"
+                />
+                <img
+                  src="./images/testimonials/azadeh-hawkins.png"
+                  alt="Azadeh Hawkins"
+                />
+              </picture>
 
               <blockquote class="testimonials__quote">
                 AIR is an exceptional agency that leads with creative talent,
@@ -513,10 +533,20 @@ <h2 class="testimonials__title">What people say</h2>
             </article>
 
             <article class="testimonials__article">
-              <img
-                src="./images/testimonials/michel-grover.png"
-                alt="Michel Grover"
-              />
+              <picture>
+                <source
+                  srcset="./images/testimonials/michel-grover.avif"
+                  type="image/avif"
+                />
+                <source
+                  srcset="./images/testimonials/michel-grover.webp"
+                  type="image/webp"
+                />
+                <img
+                  src="./images/testimonials/michel-grover.png"
+                  alt="Michel Grover"
+                />
+              </picture>
 
               <blockquote class="testimonials__quote">
                 AIR raises the agency bar to stratospheric heights on both
@@ -553,6 +583,16 @@ <h2 class="apply__title">Vision, Passion, Results</h2>
       class="footer"
     >
       <div class="container">
+        <div
+          class="alert alert-success"
+          role="alert"
+        >
+          <div class="alert-icon"></div>
+          <div class="alert-content">
+            Thank you for contacting us. We will get back to you as soon as
+            possible.
+          </div>
+        </div>
         <div class="footer__inner">
           <form
             class="footer__form"
@@ -564,6 +604,7 @@ <h3 class="footer__form-title">Send us a message</h3>
                 id="email"
                 type="email"
                 placeholder="Your email"
+                autocomplete="email"
                 required
               />
             </label>
@@ -573,6 +614,7 @@ <h3 class="footer__form-title">Send us a message</h3>
                 id="name"
                 type="text"
                 placeholder="Your name"
+                autocomplete="name"
                 required
               />
             </label>

src/scripts/form.js

@@ -0,0 +1,29 @@
+(function () {
+  function handleFormSubmit(formSelector, alertSelector, timeout = 2000) {
+    const form = document.querySelector(formSelector);
+    const alert = document.querySelector(alertSelector);
+
+    if (!form || !alert) {
+      console.error('Form or alert element not found');
+      return;
+    }
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+
+      const fields = form.querySelectorAll('input, textarea');
+
+      alert.style.transform = 'translateX(0)';
+
+      setTimeout(() => {
+        alert.style.transform = 'translateX(150%)';
+      }, timeout);
+
+      fields.forEach((field) => {
+        field.value = '';
+      });
+    });
+  }
+
+  handleFormSubmit('.footer__form', '.alert', 2000);
+})();

src/scripts/main.js

@@ -1,2 +1,3 @@
 import menu from './menu.js'
 import swiper from './swiper.js'
+import form from './form.js'

src/styles/components/footer.scss

@@ -4,9 +4,10 @@
   border-top-left-radius: $border-radius;
   border-top-right-radius: $border-radius;
   padding: 72px 0 80px;
+  position: relative;
+  overflow-x: hidden;
 
   @include on-tablet {
-    position: relative;
     top: -40px;
   }
 
@@ -214,4 +215,35 @@
       left: 0;
     }
   }
+
+  .alert {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    border-radius: 4px;
+    margin: 15px;
+    font-size: 20px;
+    line-height: 1.5;
+    top: 20px;
+    transform: translateX(150%);
+    transition: all 0.5s ease;
+    right: 0;
+
+    &-success {
+      background-color: #d4edda;
+      border: 1px solid #c3e6cb;
+      color: #155724;
+    }
+
+    &-icon {
+      margin-right: 15px;
+      background-image: url('../images/footer/success.svg');
+      background-repeat: no-repeat;
+      background-size: cover;
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+    }
+  }
 }

src/styles/components/services.scss

@@ -86,6 +86,8 @@
     padding: 32px;
     width: 100%;
 
+    @include card-hover-effect;
+
     @include on-tablet {
       width: calc(50% - 24px);
 

src/styles/components/testimonials.scss

@@ -1,7 +1,7 @@
 .testimonials {
   font-family: $font-primary;
   padding-bottom: 120px;
-  
+
   &__subtitle {
     font-weight: 700;
     font-size: 13px;
@@ -46,6 +46,8 @@
     text-align: center;
     padding: 32px 37px;
 
+    @include card-hover-effect;
+
     img {
       display: block;
       max-width: 250px;

src/styles/main.scss

@@ -34,3 +34,21 @@ main {
 .lock-scroll {
   overflow: hidden;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+textarea:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px $dark-bg inset !important;
+  -webkit-text-fill-color: white !important;
+  background-color: $dark-bg !important;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 22px;
+  border-bottom: 2px solid white !important;
+  transition: all 0.4s;
+}

src/styles/utils/_mixins.scss

@@ -99,3 +99,16 @@
     background-color: $color-link-bg;
   }
 }
+
+@mixin card-hover-effect {
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  transform: scale(1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  }
+}

src/styles/utils/_vars.scss

@@ -1,15 +1,15 @@
+$font-primary: 'Poppins', sans-serif;
+$font-secondary: 'Open Sans', sans-serif;
+$border-radius: 30px;
+$big-tablet-min-width: 1024px;
+$tablet-min-width: 640px;
+$desktop-min-width: 1600px;
+$white: #fff;
 $c-gray: #f2f6fa;
 $dark-bg: #2c2c2c;
-$white: #fff;
 $main-text-color: #6c788b;
 $color-text-dark: #334563;
 $color-title: #253757;
 $color-link-bg: #2060f6;
 $aside-menu-bg: #a6aab9;
 $subtitle-color: #c0cdd7;
-$font-primary: 'Poppins', sans-serif;
-$font-secondary: 'Open Sans', sans-serif;
-$border-radius: 30px;
-$big-tablet-min-width: 1024px;
-$tablet-min-width: 640px;
-$desktop-min-width: 1600px;