удаляет блок прогармм

eldarsarkynov · May 11, 2024 · b8f143f · b8f143f
1 parent d52e78a
commit b8f143f
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 103 deletions.
diff --git a/source/index.html b/source/index.html
@@ -73,13 +73,10 @@ <h2 class="visually-hidden">Реклама подбора программы п
             <source media="(min-width: 768px)" width="709" height="609" type="image/jpeg" srcset="images/index-can-tablet@1x.png, images/index-can-tablet@2x.png 2x">
             <img class="promo__background" src="images/index-can-mobile@1x.png" width="280" height="270" srcset="images/index-can-mobile@2x.png 2x" alt="Задний фон на зеленом цвете, кот облизывающий свои усы">
           </picture>
+          <a class="promo__link" href="catalog.html">Подобрать программу</a>
         </div>
       </div>
-      <div class="program">
-        <a class="program__link" href="catalog.html">Подобрать программу</a>
-      </div>
     </section>
-
     <section class="preview">
       <div class="preview__wrapper">
         <h2 class="visually-hidden">Описание программы питания</h2>
@@ -148,23 +145,23 @@ <h2 class="example__title">Живой пример</h2>
     <section class="slider">
       <div class="slider__wrapper">
         <h2 class="visually-hidden">Слайдер кота до и после</h2>
-        <div class="slider__before">
+        <div class="slider__after">
           <picture>
-            <source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
-            <source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
-            <img class="slider__cat-before" src="images/cat-before-mobile@1x.png" srcset="images/cat-before-mobile@2x.png 2x" width="280" height="256" alt="Фото толстого кота до питания">
+            <source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
+            <source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
+            <img class="slider__cat-after" src="images/cat-after-mobile@1x.png" srcset="images/cat-after-mobile@2x.png 2x" width="280" height="256" alt="Фото стройного кота после питания">
           </picture>
         </div>
         <div class="slider__scale">
           <button class="slider__toggle" type="button">
             <span class="visually-hidden">кнопка уменьшения цены</span>
           </button>
         </div>
-        <div class="slider__after">
+        <div class="slider__before">
           <picture>
-            <source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
-            <source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
-            <img class="slider__cat-after" src="images/cat-after-mobile@1x.png" srcset="images/cat-after-mobile@2x.png 2x" width="280" height="256" alt="Фото стройного кота после питания">
+            <source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
+            <source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
+            <img class="slider__cat-before" src="images/cat-before-mobile@1x.png" srcset="images/cat-before-mobile@2x.png 2x" width="280" height="256" alt="Фото толстого кота до питания">
           </picture>
         </div>
       </div>

diff --git a/source/styles/blocks/preview.scss b/source/styles/blocks/preview.scss
@@ -1,12 +1,10 @@
 .preview {
-  margin: 0;
+  margin-top: 200px;
   padding: 0;
-  background-color: none;
 
   @media (min-width: $tablet-width) {
     margin-top: 533px;
     padding: 0;
-    background-color: none;
   }
 }
 
@@ -138,7 +136,7 @@
   border-radius: 50%;
   background-color: $base-color-background;
   left: 0;
-  top: -5px;
+  top: -7px;
   position: absolute;
 
   @media (min-width: $tablet-width) {
@@ -225,15 +223,13 @@
   }
 }
 
-
-@media (min-width: $tablet-width) {
-  .preview__item--slim:hover::after,
-  :focus::after {
-    transform: scaleX(1.1);
-    transition: 0.2s;
-  }
+.preview__item--slim:hover::after,
+:focus::after {
+  transform: scaleX(1.1);
+  transition: 0.2s;
 }
 
+
 .preview__item--pro::after {
   content: "";
   position: absolute;
@@ -249,10 +245,8 @@
   }
 }
 
-@media (min-width: $tablet-width) {
-  .preview__item--pro:hover::after,
-  :focus::after {
-    transform: scaleX(1.1);
-    transition: 0.2s;
-  }
+.preview__item--pro:hover::after,
+:focus::after {
+  transform: scaleX(1.1);
+  transition: 0.2s;
 }
diff --git a/source/styles/blocks/program.scss b/source/styles/blocks/program.scss
diff --git a/source/styles/blocks/promo.scss b/source/styles/blocks/promo.scss
@@ -9,13 +9,9 @@
 
 @media (min-width: $tablet-width) {
   .promo {
-    font-family: "Oswald", sans-serif;
-    margin: 0;
-    padding: 0;
     min-width: 708px;
     display: flex;
     flex-direction: column;
-    position: relative;
   }
 }
 
@@ -46,6 +42,7 @@
   .promo__wrapper {
     width: 708px;
     margin: 0 auto;
+    position: relative;
   }
 }
 
@@ -70,15 +67,6 @@
   }
 }
 
-@media (min-width: $tablet-width) {
-  .promo__header {
-    margin: 0 auto;
-    padding: 0;
-    position: relative;
-    width: 708px;
-  }
-}
-
 .promo__slogan {
   font-size: 14px;
   line-height: 14px;
@@ -103,5 +91,31 @@
 .promo__background {
   display: block;
   margin: 0 auto;
-  padding-top: 22px;
+  padding-top: 29px;
+}
+
+.promo__link {
+  display: flex;
+  justify-content: center;
+  width: 280px;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: $base-color-button-text;
+  background-color: $base-color-background;
+  padding: 10px 0;
+  margin: 3px auto 0;
+  font-family: "Oswald";
+  font-size: 16px;
+  line-height: 20px;
+
+  @media (min-width: $tablet-width) {
+    font-size: 20px;
+    line-height: 26px;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: $base-color-button-text;
+    background-color: $base-color-background;
+    padding: 14px 26px;
+    position: absolute;
+  }
 }
diff --git a/source/styles/blocks/slider.scss b/source/styles/blocks/slider.scss
@@ -18,8 +18,13 @@
 }
 
 .slider__before {
-  width: 280px;
+  width: 50%;
   height: 256px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  background-color: transparent;
 }
 
 .slider__cat-before {
@@ -37,13 +42,8 @@
 }
 
 .slider__after {
-  width: var(--left);/* нужен для отодвигания ползунка */
+  width: 280px;
   height: 256px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;/* нужен для скрытия картинки */
-  background-color: transparent;
 }
 
 

diff --git a/source/styles/common/global.scss b/source/styles/common/global.scss
@@ -7,7 +7,3 @@ body {
   background-color: #ffffff;
 }
 
-img {
-  max-width: 100%;
-  height: auto;
-}