Task4 доработка

htmlacademy-adaptive · Nov 28, 2024 · d64a4cd · d64a4cd
1 parent af419b8
commit d64a4cd
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 34 deletions.
diff --git a/source/catalog.html b/source/catalog.html
@@ -73,7 +73,7 @@ <h3 class="card__title">Cat Energy Pro 500 г></h3>
               <dd class="card__value">700 &#8381;</dd>
             </div>
           </dl>
-          <a class="card__link button" href="#">Заказать</a>
+          <a class="card__link button button--succes" href="#">Заказать</a>
         </li>
         <li class="catalog__item card">
           <a class="card__item-linK" href="#">
@@ -101,7 +101,7 @@ <h3 class="card__title>">Cat Energy Pro 1000 г</h3>
               <dd class="card__value">1000 &#8381;</dd>
             </div>
           </dl>
-          <a class="card__link button" href="#">Заказать</a>
+          <a class="card__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="catalog__item card">
@@ -131,7 +131,7 @@ <h3 class="card__title>">Cat Energy Pro 500 г</h3>
               <dd class="card__value">700 &#8381;</dd>
             </div>
           </dl>
-          <a class="card__link button" href="#">Заказать</a>
+          <a class="card__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="catalog__item card">
@@ -161,7 +161,7 @@ <h3 class="card__title>">Cat Energy Pro 1000 г</h3>
               <dd class="card__value">1000 &#8381;</dd>
             </div>
           </dl>
-          <a class="card__link button" href="#">Заказать</a>
+          <a class="card__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="catalog__item card">
@@ -191,7 +191,7 @@ <h3 class="card__title>">Cat Energy Pro 500 г</h3>
               <dd class="card__value">400 &#8381;</dd>
             </div>
           </dl>
-          <a class="card__link button" href="#">Заказать</a>
+          <a class="card__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="catalog__item card">
@@ -220,7 +220,7 @@ <h3 class="card__title>">Cat Energy Pro 1000 г</h3>
               <dd class="card__value">700 &#8381;</dd>
             </div>
           </dl>
-          <a class="card__link button" href="#">Заказать</a>
+          <a class="card__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="catalog__item card">
@@ -250,15 +250,15 @@ <h3 class="card__title>">Cat Energy Pro 500 г</h3>
               <dd class="card__value">500 &#8381;</dd>
             </div>
           </dl>
-          <a class="card__link button" href="#">Заказать</a>
+          <a class="card__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="catalog__item card card--to-all">
           <a class="card__title-link" href="#">
             <h3 class="card__title">Показать еще 100500 товаров</h3>
           </a>
           <p class="card__text">На самом деле вкусов гораздо больше!</p>
-          <a class="card__link button button--gray" href="#">Показать все</a>
+          <a class="card__link button button--ligth" href="#">Показать все</a>
         </li>
       </ul>
     </section>
@@ -275,7 +275,7 @@ <h3 class="product__title">Сахарозаменитель</h3>
             <dt class="product__key">1 упаковка (100 г)</dt>
             <dd class="product-volue">200 &#8381;</dd>
           </dl>
-          <a class="product__link button" href="#">Заказать</a>
+          <a class="product__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="additional-products__item product">
@@ -286,7 +286,7 @@ <h3 class="product__title">Питьевая вода</h3>
             <dt class="product__key">5 литров</dt>
             <dd class="product-volue">50 &#8381;</dd>
           </dl>
-          <a class="product__link button" href="#">Заказать</a>
+          <a class="product__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="additional-products__item product">
@@ -297,7 +297,7 @@ <h3 class="product__title">Молоко</h3>
             <dt class="product__key">1 литр</dt>
             <dd class="product-volue">100 &#8381;</dd>
           </dl>
-          <a class="product__link button" href="#">Заказать</a>
+          <a class="product__link button button--succes" href="#">Заказать</a>
         </li>
 
         <li class="additional-products__item product">
@@ -308,11 +308,24 @@ <h3 class="product__title">Витамины</h3>
             <dt class="product__key">1 упаковка (30 г)</dt>
             <dd class="product-volue">300 &#8381;</dd>
           </dl>
-          <a class="product__link button" href="#">Заказать</a>
+          <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>
+    </section>
   </main>
 
   <footer class="page-footer">

diff --git a/source/index.html b/source/index.html
@@ -46,14 +46,14 @@
 
   <main class="main-container">
     <section class="main-container__promo promo">
-      <h1 class="promo__title">Функциональное питание для котов</h1>
+      <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="Оранжевая банка с питанием Cat Energy со вкусом курицы">
       </picture>
-      <a class=" promo__button button" href="form.html">Подобрать программу</a>
+      <a class=" promo__button button button--succes" href="form.html">Подобрать программу</a>
     </section>
 
     <section class="program">
@@ -68,7 +68,7 @@ <h3 class="program__item-title">
             <p class="program__item-text program__item-text--slim">
               Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.
             </p>
-            <a class="program__item-button" href="catalog.html">Каталог Slim</a>
+            <a class="program__item-button button--ligth" href="catalog.html">Каталог Slim</a>
           </li>
           <li class="program__item program__item--pro">
             <h3 class="program__item-title">
@@ -78,14 +78,14 @@ <h3 class="program__item-title">
             <p class="program__item-text program__item-text--pro">
               Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!
             </p>
-            <a class="program__item-button" href="catalog.html">Каталог Pro</a>
+            <a class="program__item-button button--ligth " href="catalog.html">Каталог Pro</a>
           </li>
         </ul>
       </div>
     </section>
     <section class="advantages">
       <div class="container advantages__container">
-        <h2 class="advantages__title">Как это работает</h2>
+        <h2 class="advantages__title main-title">Как это работает</h2>
         <ul class="advantages__list">
           <li class="advantages__item advantages__item--nutrients">
             <p>Функциональное питание содержит только полезные питательные вещества.</p>
@@ -104,7 +104,7 @@ <h2 class="advantages__title">Как это работает</h2>
     </section>
     <section class="example">
       <div class="container example__container">
-        <h2 class="example__title">Живой пример</h2>
+        <h2 class="example__title main-title">Живой пример</h2>
         <p class="example__text">
           Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
         <div class="example__statistics">

diff --git a/source/styles/blocks/actions.scss b/source/styles/blocks/actions.scss
diff --git a/source/styles/blocks/button.scss b/source/styles/blocks/button.scss
@@ -0,0 +1,17 @@
+.button {
+  font-family: $secondary-font;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  transition-duration: none;
+}
+
+.button--succes {
+  background-color: $basic-green;
+  color: $white;
+}
+
+.button--ligth {
+  background-color: $bg-color;
+  color: $dark-grey;
+}
diff --git a/source/styles/blocks/container.scss b/source/styles/blocks/container.scss
diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss
diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss
@@ -0,0 +1,5 @@
+.main-header {
+  background-color: #ffffff;
+  color: #ffffff;
+  padding: 10px 15px;
+}
diff --git a/source/styles/blocks/main-title.scss b/source/styles/blocks/main-title.scss
@@ -0,0 +1,7 @@
+.main-title {
+  font-family: $secondary-font;
+  font-size: 36px;
+  font-weight: 400;
+  line-height: 40px;
+  margin: 0;
+  }
diff --git a/source/styles/blocks/page.scss b/source/styles/blocks/page.scss
@@ -1,6 +1,5 @@
-.{page
-
+.page{
 }
-.{page__body
 
+.page__body{
 }
diff --git a/source/styles/blocks/program.scss b/source/styles/blocks/program.scss
@@ -0,0 +1,13 @@
+.program__item-title {
+  font-family: $secondary-font;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 37px;
+}
+
+.program__item-button {
+  font-family: $secondary-font;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 16px;
+}
diff --git a/source/styles/common/fonts.scss b/source/styles/common/fonts.scss
@@ -1,3 +1,3 @@
 /* здесь подключите шрифты */
-@font-face ("Lato" ,400 ,normal ,url("../../common/fonts/lato/Lato-Regular.woff2") format(woff2) );
-@font-face ("Oswald" ,400 ,normal ,url("../../common/fonts/oswald/oswaldregular.woff2") format(woff2));
+@include font-face ("Lato" ,400 ,normal ,url("../../fonts/lato/Lato-Regular.woff2") format(woff2) );
+@include font-face ("Oswald" ,400 ,normal ,url("../../fonts/oswald/oswaldregular.woff2") format(woff2));
diff --git a/source/styles/common/global.scss b/source/styles/common/global.scss
@@ -1,9 +1,9 @@
 /* здесь используйте глобальные селекторы img, body, html и так далее */
 body {
   margin: 0;
-  font-family: "Lato", sans-serif;
-  font-size: 18px;
-  line-height: 24px;
+  font-family: $primary-font;
+  font-size: 14px;
+  line-height: 18px;
 }
 
 *,

diff --git a/source/styles/styles.scss b/source/styles/styles.scss
@@ -1,14 +1,14 @@
 /* GLOBAL */
 @import "./common/variables.scss";
+@import "./common/mixins.scss";
 @import "./common/fonts.scss";
 @import "./common/global.scss";
-@import "./common/mixins.scss";
 @import "./common/scaffolding.scss";
 
 /* BLOCKS */
-@import "./blocks/header.scss";
 @import "./blocks/page.scss";
 @import "./blocks/main-header.scss";
+@import "./blocks/main-title.scss";
 @import "./blocks/logotype.scss";
 @import "./blocks/main-nav.scss";
 @import "./blocks/main-container.scss";
@@ -22,4 +22,6 @@
 @import "./blocks/card.scss";
 @import "./blocks/promo.scss";
 @import "./blocks/additional-products.scss";
-
+@import "./blocks/button.scss";
+@import "./blocks/container.scss";
+@import "./blocks/actions.scss";
diff --git a/source/styles/common/variables.scss → source/styles/variables.scss b/source/styles/common/variables.scss → source/styles/variables.scss