Task5 доработка

htmlacademy-adaptive · Dec 13, 2024 · c91d79c · c91d79c
1 parent 8d8b71d
commit c91d79c
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 42 deletions.
diff --git a/source/catalog.html b/source/catalog.html
@@ -311,21 +311,30 @@ <h3 class="product__title">Витамины</h3>
           <a class="product__link button button--succes" href="#">Заказать</a>
         </li>
       </ul>
-      <p class="additional-products__promotion">Закажите все<br> и получите чехол для<br> кота в подарок!</p>
-    </section>
-    <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>
+
+      <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>
+
+      <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>
+        </div>
+      </section>
   </main>
 
   <footer class="page-footer">

diff --git a/source/icons/black-cat..svg → source/icons/black-cat.svg b/source/icons/black-cat..svg → source/icons/black-cat.svg
diff --git a/source/index.html b/source/index.html
@@ -48,6 +48,11 @@
     <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">
@@ -152,26 +157,28 @@ <h2 class="visually-hidden">Контакты</h2>
 
     <div class="page-footer__wrapper">
       <a class="page-footer__logotype logotype" href="index.html">
-        <img class="logotype__name" src="images/logotype-name.svg/" width="128" height="24" alt="Cat Energy">
+        <img class="logotype__name" src="images/svg/logotype-name.svg" width="128" height="24" alt="Cat Energy">
       </a>
       <h2 class="visually-hidden">Мы в социальных сетях</h2>
       <ul class="social__list">
         <li class="social__item">
-          <a class="social__link" href="https://vk.com/htmlacademy" aria-label="Логотип VK">
+          <a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy/" aria-label="Логотип VK">
             <span class="visually-hidden">Вконтакте</span>
           </a>
         </li>
         <li class="social__item">
-          <a class="social__link" href="//www.instagram.com/htmlacademy/" aria-label="Белый логотип Instagram в черной обводке">
-            <span class="visually-hidden">Инстаграм</span>
+          <a class="social__link social__link--youtube" href="https://youtube.com/htmlacademy/" aria-label="Белый логотип youtube в черной обводке">
+            <span class="visually-hidden">Телеграмм</span>
           </a>
         </li>
         <li class="social__item">
-          <a class="social__link" href="//www.facebook.com/htmlacademy" aria-label="Белый логотип facebook в черной обводке">
-            <span class="visually-hidden">Фейсбук</span>
+          <a class="social__link social__link--telegram" href="//www.telegram.com/htmlacademy/" aria-label="Белый логотип telegram в черной обводке">
+            <span class="visually-hidden">Телеграмм</span>
           </a>
         </li>
       </ul>
+      <a class="main-futer__copyright copyright" href="//https:htmlacademy.ru/intensive/adaptive" aria-label="HTML Academy">
+      </a>
     </div>
   </footer>
 </body>

diff --git a/source/styles/blocks/example.scss b/source/styles/blocks/example.scss
@@ -5,12 +5,16 @@
   display: block;
   background-color: $dark-grey;
   position: absolute;
-  top: 1700px;
-  left: -2px;
+  top: 0;
+  left: 50%;
   border-radius: 2px;
   border: none;
 }
 
+.slider {
+  position: relative;
+}
+
 .slider__button::before {
   content: "";
   width: 40px;
@@ -31,8 +35,8 @@
   background-color: $white;
   border-radius: 50%;
   position: absolute;
-  top: 53%;
-  left: 53%;
+  top: 52%;
+  left: 50%;
   transform: translate(-50%, -50%);
   background-image: url("../../icons/stack.svg#slider-button");
 }
diff --git a/source/styles/blocks/logotype.scss b/source/styles/blocks/logotype.scss
@@ -1,13 +1,6 @@
 .logotype__name {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  fill: #111111;
-
   @media (min-width: $tablet-width) {
     position: relative;
-    transform: translate(0);
     margin-left: 14px;
     left: 0;
   }

diff --git a/source/styles/blocks/main-futer.scss b/source/styles/blocks/main-futer.scss
@@ -0,0 +1,13 @@
+.copyright {
+  display: flex;
+  color: inherit;
+  justify-content: space-between;
+  align-items: center;
+  font-family: $primary-font;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  text-decoration: none;
+  transition: all, all 1.3s;
+}
diff --git a/source/styles/blocks/program.scss b/source/styles/blocks/program.scss
@@ -14,21 +14,53 @@
   position: relative;
 }
 
-.program__item::before {
-  content: "";
-  background-color: $basic-green;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  display: block;
-}
 
 .program__item-title--slim::after {
   content: "";
   background-image: url("../../icons/stack.svg#black-pantere");
   background-repeat: no-repeat;
-  background-size: 36px 50px;
   position: absolute;
-  top: -3px;
-  left: 7px;
+  width: 67px;
+  height: 28px;
+  top: 21px;
+  left: -33px;
+}
+
+.program__icon--pro::after {
+  content: "";
+  background-image: url("../../icons/stack.svg#black-cat");
+  background-repeat: no-repeat;
+  position: absolute;
+  width: 36px;
+  height: 50px;
+  top: -28px;
+  left: -16px;
+}
+
+.program__icon {
+  position: relative;
+  display: inline-block;
+}
+
+.program__icon--slim {
+  margin-right: 35px;
+}
+
+.program__icon--pro {
+  margin-right: 35px;
+}
+
+
+.program__icon::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: $basic-green;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: block;
+  z-index: -1;
 }
diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss
@@ -0,0 +1,29 @@
+.social__link {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  min-width: 28px;
+  min-height: 28px;
+  transition: all 1.3s;
+  display: block;
+}
+
+.social__link--vkontakte {
+  background-color: #666666;
+  mask-repeat: no-repeat;
+  mask-size: 28px 22px;
+  mask-image: url("../../icons/stack.svg#vkontakte-mobile");
+}
+
+.social__link--telegram {
+  background-color: #666666;
+  mask-repeat: no-repeat;
+  mask-size: 28px 22px;
+  mask-image: url("../../icons/stack.svg#telegram-mobile");
+}
+
+.social__link--youtube {
+  background-color: #666666;
+  mask-repeat: no-repeat;
+  mask-size: 28px 22px;
+  mask-image: url("../../icons/stack.svg#youtube-mobile");
+}
diff --git a/source/styles/styles.scss b/source/styles/styles.scss
@@ -25,3 +25,4 @@
 @import "./blocks/button.scss";
 @import "./blocks/container.scss";
 @import "./blocks/actions.scss";
+@import "./blocks/main-futer.scss";