From d64a4cd676795b4dcfaec6e0309c81eb6f1f97c2 Mon Sep 17 00:00:00 2001
From: ElenaLisavina <lisavinaelena92@gmail.com>
Date: Thu, 28 Nov 2024 21:07:40 +0300
Subject: [PATCH] =?UTF-8?q?Task4=20=D0=B4=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/catalog.html                       | 37 +++++++++++++++--------
 source/index.html                         | 12 ++++----
 source/styles/blocks/actions.scss         |  0
 source/styles/blocks/button.scss          | 17 +++++++++++
 source/styles/blocks/container.scss       |  0
 source/styles/blocks/header.scss          |  5 ---
 source/styles/blocks/main-header.scss     |  5 +++
 source/styles/blocks/main-title.scss      |  7 +++++
 source/styles/blocks/page.scss            |  5 ++-
 source/styles/blocks/program.scss         | 13 ++++++++
 source/styles/common/fonts.scss           |  4 +--
 source/styles/common/global.scss          |  6 ++--
 source/styles/styles.scss                 |  8 +++--
 source/styles/{common => }/variables.scss |  0
 14 files changed, 85 insertions(+), 34 deletions(-)
 create mode 100644 source/styles/blocks/actions.scss
 create mode 100644 source/styles/blocks/button.scss
 create mode 100644 source/styles/blocks/container.scss
 delete mode 100644 source/styles/blocks/header.scss
 create mode 100644 source/styles/blocks/main-title.scss
 rename source/styles/{common => }/variables.scss (100%)

diff --git a/source/catalog.html b/source/catalog.html
index ad356d4..99e7127 100644
--- 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,7 +250,7 @@ <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">
@@ -258,7 +258,7 @@ <h3 class="card__title>">Cat Energy Pro 500 г</h3>
             <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="кuklachev@gmail.com" 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
index a7f40ea..cda4758 100644
--- 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/cat-energy-chicken@1x.png 1x, images/raster/cat-energy-chicken@2x.png 2x">
         <source width="709" height="609" type="image/png" media="(min-width: 768px)" srcset="images/raster/cat-energy-chicken@1x.png 1x, images/raster/cat-energy-chicken@2x.png 2x">
         <img class="promo__image" src="images/raster/cat-energy-chicken@1x.png" srcset="images/raster/cat-energy-chicken@2x.png 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
new file mode 100644
index 0000000..e69de29
diff --git a/source/styles/blocks/button.scss b/source/styles/blocks/button.scss
new file mode 100644
index 0000000..4cb715a
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e69de29
diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss
deleted file mode 100644
index 797f7c4..0000000
--- a/source/styles/blocks/header.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.header {
-  background-color: #663399;
-  color: #ffffff;
-  padding: 10px 15px;
-}
diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss
index e69de29..541989e 100644
--- 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
new file mode 100644
index 0000000..5e67084
--- /dev/null
+++ 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
index 40b6753..030a5e4 100644
--- 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
index e69de29..3542bb0 100644
--- 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
index 5b8be08..07535d2 100644
--- 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
index 6362b6b..de92d03 100644
--- 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
index 7433bd3..6a54ae0 100644
--- 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 b/source/styles/variables.scss
similarity index 100%
rename from source/styles/common/variables.scss
rename to source/styles/variables.scss