Task5 исправление

source/catalog.html

@@ -19,7 +19,7 @@
       <picture>
         <source width="70" height="59" type="image/svg+xml" media="(min-width: 1440px)" srcset="images/svg/logotype-desktop.svg">
         <source width="60" height="50" type="image/svg+xml" media="(min-width: 768px)" srcset="images/svg/logotype-tablet.svg">
-        <img class="logotype__pictore" src="images/svg/logotype.svg" width="33" height="38" alt="Логотип CAT ENERGY">
+        <img class="logotype__pictore" src="images/svg/logo-mobile.svg" width="33" height="38" alt="Логотип CAT ENERGY">
       </picture>
       <img class="logotype__name" src="images/svg/logotype-name.svg" width="101" height="18" alt="Товарный знак CAT ENERGY">
     </a>
@@ -311,30 +311,24 @@ <h3 class="product__title">Витамины</h3>
           <a class="product__link button button--succes" href="#">Заказать</a>
         </li>
       </ul>
-
-      <div class="additional-container">
-        <p class="additional-products__promotion">Закажите все<br> и получите чехол для<br> кота в подарок!</p>
-
-        <picture>
-          <source width="245" height="288" type="image/png" media="(min-width: 1440px)" srcset="images/raster/[email protected] 1x, images/raster/[email protected] 2x">
-          <source width="707" height="200" type="image/png" media="(min-width: 768px)" srcset="images/raster/[email protected] 1x, images/raster/[email protected] 2x">
-          <img class="additional__image" src="[email protected]" srcset="images/raster/[email protected] 2x" width="280" height="290" alt="Кот в чехле">
-        </picture>
-      </div>
-
-      <section class="actions">
-        <div class="container">
-          <h2 class="actions__tittle">Акции и новинки</h2>
-          <p class="actions__discription">Подпишитесь на наши новости и не пропустите ни одного предложения!</p>
-          <div class="actions__wrapper">
-            <form class="actions__following-form" action="https://echo.htmlacademy.ru" method="post">
-              <label class="visually-hidden" for="field-subscribe">Подписаться</label>
-              <input class="actions__field-subscribe" placeholder="к[email protected]" type="email" name="field-subscribe" id="field-subscribe">
-              <button class="actions__following-button button button--succes" type="button">Подписаться</button>
-            </form>
-          </div>
+    </section>
+    <div class="additional-container">
+      <p class="additional-products__promotion">Закажите все<br> и получите чехол для<br> кота в подарок!</p>
+    </div>
+
+    <section class="actions">
+      <div class="container">
+        <h2 class="actions__tittle">Акции и новинки</h2>
+        <p class="actions__discription">Подпишитесь на наши новости и не пропустите ни одного предложения!</p>
+        <div class="actions__wrapper">
+          <form class="actions__following-form" action="https://echo.htmlacademy.ru" method="post">
+            <label class="visually-hidden" for="field-subscribe">Подписаться</label>
+            <input class="actions__field-subscribe" placeholder="к[email protected]" type="email" name="field-subscribe" id="field-subscribe">
+            <button class="actions__following-button button button--succes" type="button">Подписаться</button>
+          </form>
         </div>
-      </section>
+      </div>
+    </section>
   </main>
 
   <footer class="page-footer">

source/index.html

@@ -21,7 +21,7 @@
       <picture>
         <source width="70" height="59" type="image/svg+xml" media="(min-width: 1440px)" srcset="images/svg/logotype-desktop.svg">
         <source width="60" height="50" type="image/svg+xml" media="(min-width: 768px)" srcset="images/svg/logotype-tablet.svg">
-        <img class="logotype__pictore" src="images/svg/logotype.svg" width="33" height="38" alt="Логотип CAT ENERGY">
+        <img class="logotype__pictore" src="images/svg/logo-mobile.svg" width="33" height="38" alt="Логотип CAT ENERGY">
       </picture>
       <img class="logotype__name" src="images/svg/logotype-name.svg" width="101" height="18" alt="Товарный знак CAT ENERGY">
     </a>
@@ -42,17 +42,12 @@
         </li>
       </ul>
     </nav>
-  </header>/
+  </header>
 
   <main class="main-container">
     <section class="main-container__promo promo">
       <h1 class="promo__title main-title">Функциональное питание для котов</h1>
       <p class="promo__text">Занялся собой? Займись котом!</p>
-      <picture>
-        <source width="552" height="499" type="image/png" media="(min-width: 1440px)" srcset="images/raster/[email protected] 1x, images/raster/[email protected] 2x">
-        <source width="709" height="609" type="image/png" media="(min-width: 768px)" srcset="images/raster/[email protected] 1x, images/raster/[email protected] 2x">
-        <img class="promo__image" src="images/raster/[email protected]" srcset="images/raster/[email protected] 2x" width="280" height="270" alt="Облизывающийся кот">
-      </picture>
       <picture>
         <source width="552" height="499" type="image/png" media="(min-width: 1440px)" srcset="images/raster/[email protected] 1x, images/raster/[email protected] 2x">
         <source width="709" height="609" type="image/png" media="(min-width: 768px)" srcset="images/raster/[email protected] 1x, images/raster/[email protected] 2x">
@@ -77,7 +72,11 @@ <h3 class="program__item-title program__item-title--slim">
           </li>
           <li class="program__item program__item--pro">
             <h3 class="program__item-title">
-              <span class="program__icon program__icon--pro"></span>
+              <span class="program__icon program__icon--slim">
+                <svg width="38" height="50">
+                  <use href="icons/stack.svg#black-cat"></use>
+                </svg>
+              </span>
               Набор массы
             </h3>
             <p class="program__item-text program__item-text--pro">
@@ -139,6 +138,7 @@ <h2 class="example__title main-title">Живой пример</h2>
           <img class="slider__image" src="images/raster/[email protected]" srcset="images/[email protected] 2x" width="280" height="256" alt="Фото после: худенький котик">
         </picture>
         <button class="slider__button" type="button"><span class="visually-hidden">Передвинуть ползунок</span></button>
+
       </div>
     </section>
   </main>
@@ -178,6 +178,10 @@ <h2 class="visually-hidden">Мы в социальных сетях</h2>
         </li>
       </ul>
       <a class="main-futer__copyright copyright" href="//https:htmlacademy.ru/intensive/adaptive" aria-label="HTML Academy">
+        <span class="futer-copiright__text">HTML Academy</span>
+        <svg width="27" height="34">
+          <use href="icons/stack.svg#academy-logo"></use>
+        </svg>
       </a>
     </div>
   </footer>

source/styles/blocks/advantages.scss

@@ -37,3 +37,8 @@
   background-repeat: no-repeat;
 }
 
+.additional-container {
+  background-image: url("../../images/raster/[email protected]");
+  background-repeat: no-repeat;
+  background-position: center top;
+}

source/styles/blocks/example.scss

@@ -1,37 +1,25 @@
 .slider__button {
   cursor: pointer;
-  width: 4px;
-  height: 100%;
   display: block;
   background-color: $dark-grey;
   position: absolute;
-  top: 0;
+  top: 15%;
   left: 50%;
   border-radius: 2px;
   border: none;
+  width: 4px;
+  height: 100%;
 }
 
 .slider {
   position: relative;
 }
 
-.slider__button::before {
-  content: "";
-  width: 40px;
-  height: 40px;
-  background-color: $white;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%);
-  border: 2px solid $dark-grey;
-}
 
 .slider__button::after {
   content: "";
-  width: 24px;
-  height: 18px;
+  width: 40px;
+  height: 40px;
   background-color: $white;
   border-radius: 50%;
   position: absolute;

source/styles/blocks/main-futer.scss

@@ -10,4 +10,6 @@
   line-height: 20px;
   text-decoration: none;
   transition: all, all 1.3s;
+  width: 100%;
 }
+

source/styles/blocks/main-nav.scss

@@ -11,7 +11,7 @@
 
 
 .main-nav__toggle {
-  background-image: url("../../icons/stack.svg#cross.svg");
+  background-image: url("../../icons/stack.svg#cross");
   width: 24px;
   height: 24px;
   background-color: #ffffff;

source/styles/blocks/promo.scss

@@ -0,0 +1,5 @@
+.promo {
+  background-image: url("../../images/raster/[email protected]");
+  background-repeat: no-repeat;
+  background-position: center top; //52% 50%
+}

source/styles/blocks/social.scss

@@ -5,6 +5,20 @@
   min-height: 28px;
   transition: all 1.3s;
   display: block;
+
+
+  &:hover {
+    background-color: $basic-green;
+  }
+
+  &:focus::before {
+    background-color: $basic-green;
+  }
+
+  &:active::before {
+    background-color: $basic-green;
+    opacity: 0.3;
+  }
 }
 
 .social__link--vkontakte {