fixed form, few visual issues, implemented slider

src/index.html

@@ -116,6 +116,21 @@ <h1>Strategic Agency</h1>
           <img
             src="images/slider/slider1.png"
             alt="slider1"
+            class="slide active"
+          />
+          <img
+            src="images/slider/slider2.png"
+            alt="slider2"
+            class="slide"
+          />
+          <img
+            src="images/slider/slider3.png"
+            alt="slider3"
+            class="slide"
+          />
+          <img
+            src="images/slider/slider4.jpg"
+            alt="slider4"
             class="slide"
           />
 
@@ -147,6 +162,21 @@ <h1 class="slider__title">INTRO</h1>
           <img
             src="images/slider/slider1.png"
             alt="slider1"
+            class="slide-desktop active"
+          />
+          <img
+            src="images/slider/slider2.png"
+            alt="slider2"
+            class="slide-desktop"
+          />
+          <img
+            src="images/slider/slider3.png"
+            alt="slider3"
+            class="slide-desktop"
+          />
+          <img
+            src="images/slider/slider4.jpg"
+            alt="slider4"
             class="slide-desktop"
           />
 

src/scripts/main.js

@@ -1 +1,54 @@
 'use strict';
+
+document.addEventListener("DOMContentLoaded", () => {
+
+  const mobileSlides = document.querySelectorAll(".header__slider--mobile .slide");
+  const desktopSlides = document.querySelectorAll(".header__slider--desktop .slide-desktop");
+
+
+  const mobilePrevButton = document.querySelector(".header__slider--mobile .prev");
+  const mobileNextButton = document.querySelector(".header__slider--mobile .next");
+  const desktopPrevButton = document.querySelector(".header__slider--desktop .prev-desktop");
+  const desktopNextButton = document.querySelector(".header__slider--desktop .next-desktop");
+
+
+  let mobileCurrentIndex = 0;
+  let desktopCurrentIndex = 0;
+
+
+  function changeSlide(slides, currentIndex, direction) {
+
+    slides[currentIndex].classList.remove("active");
+
+
+    if (direction === "next") {
+      currentIndex = (currentIndex + 1) % slides.length;
+    } else if (direction === "prev") {
+      currentIndex = (currentIndex - 1 + slides.length) % slides.length;
+    }
+
+
+    slides[currentIndex].classList.add("active");
+
+    return currentIndex;
+  }
+
+
+  mobileNextButton.addEventListener("click", () => {
+    mobileCurrentIndex = changeSlide(mobileSlides, mobileCurrentIndex, "next");
+  });
+
+  mobilePrevButton.addEventListener("click", () => {
+    mobileCurrentIndex = changeSlide(mobileSlides, mobileCurrentIndex, "prev");
+  });
+
+
+  desktopNextButton.addEventListener("click", () => {
+    desktopCurrentIndex = changeSlide(desktopSlides, desktopCurrentIndex, "next");
+  });
+
+  desktopPrevButton.addEventListener("click", () => {
+    desktopCurrentIndex = changeSlide(desktopSlides, desktopCurrentIndex, "prev");
+  });
+});
+

src/styles/_fonts.scss

@@ -154,7 +154,7 @@ header {
     line-height: 19.5px;
     letter-spacing: 3px;
     color: $c-lightgray;
-    text-align: center;
+    text-align: left;
   }
 
   h2 {
@@ -179,6 +179,10 @@ header {
     p {
       color: $c-darkblue;
     }
+
+    h4 {
+      text-align: center;
+    }
   }
 }
 

src/styles/blocks/expertise.scss

@@ -42,6 +42,8 @@
     width: 280px;
     height: 305px;
 
+    @include hover(transform, scale(1.2));
+
     @include on-tablet {
       width: 362px;
     }

src/styles/blocks/footer.scss

@@ -26,7 +26,7 @@
 
     @include on-wide {
       flex-direction: row;
-      gap: 19.5%;
+      gap: 30%;
     }
   }
 
@@ -89,6 +89,10 @@
     &__map {
       position: relative;
 
+      @include on-wide {
+        white-space: nowrap;
+      }
+
       &::after {
         content: '';
         position: absolute;

src/styles/blocks/form.scss

@@ -9,7 +9,7 @@
   &__field {
     position: relative;
     background-color: $c-header-bg;
-    border-bottom: solid 2px $c-white;
+    border-bottom: solid 2.5px $c-white;
     border-top: none;
     border-left: none;
     border-right: none;
@@ -27,7 +27,7 @@
     }
 
     &:hover {
-      border-bottom: solid 2px $c-blue;
+      border-bottom: solid 2.5px $c-blue;
     }
 
     &:focus {
@@ -39,8 +39,38 @@
       height: 48px;
       padding-top: 10px;
       text-wrap: wrap;
-      resize: none;
-      overflow: hidden;
+      resize: vertical;
+      overflow-y: scroll;
+      scrollbar-width: none;
+    }
+
+    &:-webkit-autofill {
+      background-color: $c-header-bg !important;
+      color: $c-white !important;
+      -webkit-text-fill-color: $c-white !important;
+      font-family: Poppins, sans-serif !important;
+      font-size: 15px !important;
+      font-weight: 600 !important;
+      box-shadow: 0 0 0 1000px $c-header-bg inset !important;
+      border-bottom: solid 2.5px $c-white !important;
+      transition:
+        background-color 0s,
+        color 0s,
+        box-shadow 0s;
+    }
+
+    &:-moz-autofill,
+    &:-ms-autofill {
+      background-color: $c-header-bg !important;
+      color: $c-white !important;
+      font-family: Poppins, sans-serif !important;
+      font-size: 15px !important;
+      font-weight: 600 !important;
+    }
+
+    &:not(:-webkit-autofill) {
+      color: $c-white !important;
+      -webkit-text-fill-color: $c-white !important;
     }
   }
 

src/styles/blocks/menu.scss

@@ -48,7 +48,7 @@
       }
 
       &:hover::after {
-        width: 12%;
+        width: 100%;
       }
     }
   }
@@ -61,3 +61,7 @@ body:has(.menu:target) {
 body:has(.menu:target) .slider {
   visibility: hidden;
 }
+
+body:has(.menu:target) .slider-desktop {
+  visibility: hidden;
+}

src/styles/blocks/slider-desktop.scss

@@ -9,6 +9,10 @@
     width: 50%;
     right: 0;
   }
+
+  &__wrap {
+    width: 266px;
+  }
 }
 
 .slide-desktop {
@@ -17,6 +21,16 @@
   object-fit: cover;
   border-bottom-right-radius: 30px;
   border-top-left-radius: 30px;
+  display: block;
+  position: absolute;
+  z-index: 0;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.slide-desktop.active {
+  z-index: 1;
+  opacity: 1;
 }
 
 .button-container-desktop {
@@ -91,7 +105,7 @@
   z-index: 2;
 
   @include on-wide {
-    left: 36.6%;
+    left: 37.7%;
   }
 
   @include on-big {

src/styles/blocks/slider.scss

@@ -35,10 +35,18 @@
   object-fit: cover;
   width: 100vw;
   height: 390px;
-  z-index: 1;
   border-radius: 30px;
   bottom: 0.1px;
   left: 0.1px;
+  display: block;
+  z-index: 0;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.slide.active {
+  z-index: 1;
+  opacity: 1;
 }
 
 .slider {

src/styles/blocks/testimonials.scss

@@ -46,6 +46,8 @@
     align-items: center;
     gap: 32px;
 
+    @include hover(transform, scale(1.2));
+
     @include on-tablet {
       width: 558px;
       height: 478px;