reviews

src/partials/reviews.html

@@ -7,119 +7,119 @@ <h2>Reviews</h2>
           <picture>
             <source
               srcset="./img/reviewsphoneswithpics/logo1.png"
-              width="136px"
+
               media="(min-width: 320px)"
             />
             <source
               srcset="./img/reviewsphoneswithpics/logo1.png"
-              width="464px"
+
               media="(min-width: 1200px)"
             />
             <img
               class="reviews_img"
               src="./img/reviewsphoneswithpics/logo1.png"
               alt="Review 1"
-              width="136px"
+
             />
           </picture>
         </li>
         <li class="reviews__item">
           <picture>
             <source
-              srcset="./img/reviewsphoneswithpics/reviews1.png"
-              width="136px"
+              srcset="../img/reviewsphoneswithpics/rev1mob.png"
+
               media="(min-width: 320px)"
             />
             <source
-              srcset="./img/reviewsphoneswithpics/reviewsdsktp1.png"
-              width="464px"
+              srcset="../img/reviewsphoneswithpics/rev1desk.png"
+
               media="(min-width: 1200px)"
             />
             <img
               class="reviews_img"
-              src="./img/reviewsphoneswithpics/reviews1.png"
+              src="../img/reviewsphoneswithpics/rev1mob.png"
               alt="Review 1"
-              width="136px"
+
             />
           </picture>
         </li>
         <li class="reviews__item">
           <picture>
             <source
-              srcset="./img/reviewsphoneswithpics/mobreviews2.png"
-              width="136px"
+              srcset="../img/reviewsphoneswithpics/rev2mob.png"
+
               media="(min-width: 320px)"
             />
             <source
-              srcset="./img/reviewsphoneswithpics/reviewsdsktp2.png"
-              width="464px"
+              srcset="../img/reviewsphoneswithpics/rev2desk.png"
+
               media="(min-width: 1200px)"
             />
             <img
               class="reviews_img"
-              src="./img/reviewsphoneswithpics/mobreviews2.png"
+              src="../img/reviewsphoneswithpics/rev2mob.png"
               alt="Review 1"
-              width="136px"
+
             />
           </picture>
         </li>
         <li class="reviews__item">
           <picture>
             <source
-              srcset="./img/reviewsphoneswithpics/mobreviews3.png"
-              width="136px"
+              srcset="../img/reviewsphoneswithpics/rev3mob.png"
+
               media="(min-width: 320px)"
             />
             <source
-              srcset="./img/reviewsphoneswithpics/reviewsdsktp3.png"
-              width="464px"
+              srcset="../img/reviewsphoneswithpics/rev3desk.png"
+
               media="(min-width: 1200px)"
             />
             <img
               class="reviews_img"
-              src="./img/reviewsphoneswithpics/mobreviews3.png"
+              src="../img/reviewsphoneswithpics/rev3mob.png"
               alt="Review 1"
-              width="136px"
+
             />
           </picture>
         </li>
         <li class="reviews__item">
           <picture>
             <source
-              srcset="./img/reviewsphoneswithpics/mobreviews4.png"
-              width="136px"
+              srcset="../img/reviewsphoneswithpics/rev4mob.png"
+
               media="(min-width: 320px)"
             />
             <source
-              srcset="./img/reviewsphoneswithpics/reviewsdsktp4.png"
-              width="464px"
+              srcset="../img/reviewsphoneswithpics/rev4desk.png"
+
               media="(min-width: 1200px)"
             />
             <img
               class="reviews_img"
-              src="./img/reviewsphoneswithpics/mobreviews4.png"
+              src="../img/reviewsphoneswithpics/rev4mob.png"
               alt="Review 1"
-              width="136px"
+
             />
           </picture>
         </li>
         <li class="reviews__item">
           <picture>
             <source
-              srcset="./img/reviewsphoneswithpics/mobreviews5.png"
-              width="136px"
+              srcset="../img/reviewsphoneswithpics/rev5mob.png"
+
               media="(min-width: 320px)"
             />
             <source
-              srcset="./img/reviewsphoneswithpics/reviewsdsktp5.png"
-              width="464px"
+              srcset="../img/reviewsphoneswithpics/rev5desk.png"
+
               media="(min-width: 1200px)"
             />
             <img
               class="reviews_img"
-              src="./img/reviewsphoneswithpics/mobreviews5.png"
+              src="../img/reviewsphoneswithpics/rev5mob.png"
               alt="Review 1"
-              width="136px"
+
             />
           </picture>
         </li>

src/scss/about.scss

@@ -75,6 +75,7 @@
       max-width: calc(100% + 8px);
       margin-top: 4px;
       padding: 0 16px;
+      text-shadow: 1px 1px 2px rgba(15,11,89,0.3);
     }
   }
 
@@ -144,6 +145,7 @@
   .about h2 {
     font-size: 32px;
     line-height: 48px;
+    text-shadow: 1px 1px 2px rgba(15,11,89,0.3);
   }
 
   .about p {
@@ -154,15 +156,21 @@
 
   .about_img {
     display: flex;
-    flex-direction: row; // Изменяем направление на строку
+    flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: 16px; // Добавляем промежуток между изображениями
+    gap: 16px;
+
+    img {
+      width: 464px;
+      height: auto;
+    }
   }
 
   .about_img_item {
+    width: 464px;
     display: flex;
-    flex-direction: column; // Изображение и текст в колонке
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -174,14 +182,14 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 16px;
+    gap: 40px;
 
     .about__content_img_bottom {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       justify-content: center;
-      gap: 30px;
+      gap: 16px;
       margin-bottom: 64px;
 
       p {
@@ -194,6 +202,18 @@
         margin-top: 0;
         padding: 0;
       }
+
+      > * {
+        flex: 0 0 299px;
+        max-width: 299px;
+        min-width: 299px;
+      }
+
+      img {
+        width: 299px;
+        height: auto;
+        object-fit: contain;
+      }
     }
   }
 

src/scss/advantages.scss

@@ -23,7 +23,7 @@
   font-weight: 600;
   line-height: 1.14;
   text-align: center;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  text-shadow: 1px 1px 2px rgba(15, 11, 89, 0.3);
   // margin-bottom: 24px;
 }
 
@@ -33,6 +33,7 @@
   height: 400px;
   overflow: hidden;
   margin-bottom: 8px;
+  outline: none;
 }
 
 #slider {
@@ -87,7 +88,7 @@
     font-weight: 600;
     line-height: 1.14;
     text-align: center;
-    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    text-shadow: 1px 1px 2px rgba(15, 11, 89, 0.3);
     margin-bottom: 16px;
   }
 
@@ -97,7 +98,7 @@
     font-weight: 500;
     line-height: 1.5;
     text-align: center;
-    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    text-shadow: 1px 1px 2px rgba(15, 11, 89, 0.3);
   }
 }
 
@@ -141,6 +142,7 @@
   justify-content: center;
   gap: 40px;
   margin-top: 30px;
+  outline: none;
 
   .slider-dots {
     display: flex;
@@ -170,6 +172,16 @@
     height: 24px;
     margin: 0;
     cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+
+    &:focus,
+    &:active,
+    &:-moz-focus-inner {
+      border: 0;
+      outline: none;
+    }
 
     &::after {
       display: none;
@@ -383,6 +395,7 @@
     gap: 40px;
     margin-top: 0;
     padding-top: 0;
+    outline: none;
 
     .slider-dots {
       display: flex;

src/scss/benefits.scss

@@ -88,7 +88,7 @@
   font: 20px, 600;
   line-height: 1.14;
   text-align: center;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  text-shadow: 1px 1px 2px rgba(15,11,89,0.3);
   padding-bottom: 4px;
 }
 
@@ -97,7 +97,7 @@
   font: 16px, 500;
   line-height: 24px;
   text-align: center;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  text-shadow: 1px 1px 2px rgba(15,11,89,0.3);
   max-width: 280px;
 }
 
@@ -139,6 +139,7 @@
     font-size: 32px;
     line-height: 48px;
     margin-bottom: 40px;
+    text-shadow: 1px 1px 2px rgba(15,11,89,0.3);
   }
 
   .benefits__list {

src/scss/gallery.scss

@@ -71,7 +71,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  width: 100%;
+  max-width: 240px;
   padding: 8px 16px;
   margin: 0 auto;
   padding-bottom: 20px;
@@ -210,4 +210,8 @@
     line-height: 48px;
     text-shadow: 1px 1px 2px rgba(15, 11, 89, 0.3);
   }
+
+  .slider-controls {
+    max-width: 97%;
+  }
 }