From e3d984d634db84bb7f041120779ab9127fbe3270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=20=D0=9F=D0=BE=D0=BB=D1=8F=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B2?= <118464603+IliyaPolyakov@users.noreply.github.com>
Date: Sat, 5 Oct 2024 03:38:00 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=82=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/catalog.html | 328 ++++++++++++++++++++++++++++++++++++++++++++
 source/index.html   |  84 ++++++------
 2 files changed, 368 insertions(+), 44 deletions(-)
 create mode 100644 source/catalog.html
diff --git a/source/catalog.html b/source/catalog.html
new file mode 100644
index 0000000..cd3d1b1
--- /dev/null
+++ b/source/catalog.html
@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Каталог продукции</title>
+  </head>
+  <body class="">
+    <header class="main-header">
+      <nav class="navigation">
+        <a class="header-logo">
+          <img
+            class="main-header__logo-image"
+            src="/source/images/logo-mobile.svg"
+            width="33"
+            height="38"
+            alt="логотип кота"
+          />
+        </a>
+        <a class="main-header__logo-text">
+          <img
+            class="main-header__logo-text"
+            src="/source/images/cat_energy_text.svg"
+            width="101"
+            height="18"
+            alt="текст кот энергия"
+          />
+        </a>
+        <button class="open-menu" type="button">
+          <span class="visually-hidden">Открыть меню</span>
+        </button>
+        <ul class="navigation-list">
+          <li class="navigation-item navigation-item--current">
+            <a href="#">Главная</a>
+          </li>
+          <li class="navigation-item navigation-item--current">
+            <a href="#">Каталог продукции</a>
+          </li>
+          <li class="navigation-item navigation-item--current">
+            <a href="#">Подбор программы</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main class="main-container-catalog">
+      <section class="product-cards">
+        <h1 class="catalog-title">Каталог продукции</h1>
+        <ul class="list-cards">
+          <li class="card-element">
+            <div class="product-card">
+              <a class="cards-link" href="#">
+                <h2 class="title-casrds-product">Cat Energy PRO 500 г</h2>
+              </a>
+
+              <dl>
+                <dt>Масса</dt>
+                <dd>500г</dd>
+              </dl>
+              <dl>
+                <dt>вкус</dt>
+                <dd>курица</dd>
+              </dl>
+              <dl>
+                <dt>цена</dt>
+                <dd>700 &#8381;</dd>
+              </dl>
+
+              <a class="order-button" href="#">заказать</a>
+            </div>
+          </li>
+          <li class="card-element">
+            <div class="product-card">
+              <a class="cards-link" href="#">
+                <h2 class="title-casrds-product">Cat Energy PRO 1000 г</h2>
+              </a>
+
+              <dl>
+                <dt>Масса</dt>
+                <dd>1000г</dd>
+              </dl>
+              <dl>
+                <dt>вкус</dt>
+                <dd>курица</dd>
+              </dl>
+              <dl>
+                <dt>цена</dt>
+                <dd>1000 &#8381;</dd>
+              </dl>
+
+              <a class="order-button" href="#">заказать</a>
+            </div>
+          </li>
+          <li class="card-element">
+            <div class="product-card">
+              <a class="cards-link" href="#">
+                <h2 class="title-casrds-product">Cat Energy PRO 500 г</h2>
+              </a>
+
+              <dl>
+                <dt>Масса</dt>
+                <dd>500г</dd>
+              </dl>
+              <dl>
+                <dt>вкус</dt>
+                <dd>рыба</dd>
+              </dl>
+              <dl>
+                <dt>цена</dt>
+                <dd>700 &#8381;</dd>
+              </dl>
+
+              <a class="order-button" href="#">заказать</a>
+            </div>
+          </li>
+          <li class="card-element">
+            <div class="product-card">
+              <a class="cards-link" href="#">
+                <h2 class="title-casrds-product">Cat Energy PRO 1000 г</h2>
+              </a>
+
+              <dl>
+                <dt>Масса</dt>
+                <dd>1000г</dd>
+              </dl>
+              <dl>
+                <dt>вкус</dt>
+                <dd>рыба</dd>
+              </dl>
+              <dl>
+                <dt>цена</dt>
+                <dd>1000 &#8381;</dd>
+              </dl>
+
+              <a class="order-button" href="#">заказать</a>
+            </div>
+          </li>
+          <li class="card-element">
+            <div class="product-card">
+              <a class="cards-link" href="#">
+                <h2 class="title-casrds-product">Cat Energy Slim 500 г</h2>
+              </a>
+
+              <dl>
+                <dt>Масса</dt>
+                <dd>500г</dd>
+              </dl>
+              <dl>
+                <dt>вкус</dt>
+                <dd>гречка</dd>
+              </dl>
+              <dl>
+                <dt>цена</dt>
+                <dd>400 &#8381;</dd>
+              </dl>
+
+              <a class="order-button" href="#">заказать</a>
+            </div>
+          </li>
+          <li class="card-element">
+            <div class="product-card">
+              <a class="cards-link" href="#">
+                <h2 class="title-casrds-product">Cat Energy Slim 1000 г</h2>
+              </a>
+
+              <dl>
+                <dt>Масса</dt>
+                <dd>1000г</dd>
+              </dl>
+              <dl>
+                <dt>вкус</dt>
+                <dd>гречка</dd>
+              </dl>
+              <dl>
+                <dt>цена</dt>
+                <dd>700 &#8381;</dd>
+              </dl>
+
+              <a class="order-button" href="#">заказать</a>
+            </div>
+          </li>
+          <li class="card-element">
+            <div class="product-card">
+              <a class="cards-link" href="#">
+                <h2 class="title-casrds-product">Cat Energy Slim 500 г</h2>
+              </a>
+
+              <dl>
+                <dt>Масса</dt>
+                <dd>500г</dd>
+              </dl>
+              <dl>
+                <dt>вкус</dt>
+                <dd>рис</dd>
+              </dl>
+              <dl>
+                <dt>цена</dt>
+                <dd>500 &#8381;</dd>
+              </dl>
+
+              <a class="order-button" href="#">заказать</a>
+            </div>
+          </li>
+          <li>
+            <a class="cards-link" href="#">
+              <h2 class="title-casrds-product">Показать еще 100500 товаров</h2>
+            </a>
+            <p>На самом деле вкусов гораздо больше!</p>
+            <button class="button-cards" type="button">показать все</button>
+          </li>
+        </ul>
+      </section>
+      <section class="additional_products">
+        <h2>Допольнительные товары</h2>
+        <ul>
+          <li>
+            <p>Сахарозаменитель</p>
+
+            <dl>
+              <dt>1 упаковка (100 г)</dt>
+              <dd>200 ₽</dd>
+            </dl>
+
+            <a class="order-button" href="#">заказать</a>
+          </li>
+          <li>
+            <p>питьевая вода</p>
+
+            <dl>
+              <dt>5 литров</dt>
+              <dd>50 ₽</dd>
+            </dl>
+
+            <a class="order-button" href="#">заказать</a>
+          </li>
+          <li>
+            <p>молоко</p>
+
+            <dl>
+              <dt>1 литр</dt>
+              <dd>100 ₽</dd>
+            </dl>
+
+            <a class="order-button" href="#">заказать</a>
+          </li>
+          <li>
+            <p>витамины</p>
+
+            <dl>
+              <dt>1 упаковка (30 г)</dt>
+              <dd>300 ₽</dd>
+            </dl>
+
+            <a class="order-button" href="#">заказать</a>
+          </li>
+        </ul>
+        <div>
+          <p>Закажите все и получите чехол для кота в подарок!</p>
+        </div>
+      </section>
+
+      <section class="promotions_and_new_products">
+        <h2>Акции и новинки</h2>
+        <p>
+          Подпишитесь на наши новости и не пропустите ни одного предложения!
+        </p>
+        <form method="post" action="https://echo.htmlacademy.ru">
+          <label for="user-name"></label>
+          <input id="user-name" type="email" required />
+          <button type="submit">подписаться</button>
+        </form>
+      </section>
+      <section class="invitation">
+        <div class="invitation__wrapper">
+          <h2 class="invitation__title">Приглашаем к сотруднечиству дилеров</h2>
+          <p class="invitation__address">
+            <a href="#" class="invitation__address-link"
+              >ул. Большая Конюшенная, д. 19/8 Санкт-Петербург</a
+            >
+          </p>
+        </div>
+      </section>
+    </main>
+    <footer class="main-footer">
+      <div class="main-footer__wrapper">
+        <div class="main-footer__contact">
+          <a
+            ><img
+              class="contacts-icon"
+              src="/source/images/cat_energy_text.svg"
+              width="128"
+              height="24"
+              alt="кот енергия"
+          /></a>
+        </div>
+        <div class="main-footer__social">
+          <ul class="social-list">
+            <li class="social-item">
+              <a
+                class="social-link social-link--vkonakte"
+                href="https://vk.com/htmlacademy"
+                >Вконтакте</a
+              >
+            </li>
+            <li class="social-item">
+              <a
+                class="social-link social-link--yotube"
+                href="https://www.youtube.com/@HTMLAcademyTV"
+                >Ютуб</a
+              >
+            </li>
+            <li class="social-item">
+              <a
+                class="social-link social-link--telegram"
+                href="https://t.me/htmlacademy"
+                >Телеграм</a
+              >
+            </li>
+          </ul>
+        </div>
+        <div class="main-footer__copyright copyright">
+          <a class="copyright__link" href="https://htmlacademy.ru/study"
+            >html academy</a
+          >
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/source/index.html b/source/index.html
index 004ed4e..ef2b124 100644
--- a/source/index.html
+++ b/source/index.html
@@ -7,9 +7,9 @@
     <link rel="stylesheet" href="styles/styles.css" />
     <script src="scripts/index.js" defer></script>
   </head>
-  <body class="page__header">
+  <body class="page">
     <header class="main-header">
-      <div class="main-nav__wrapper">
+      <nav class="navigation">
         <a class="main-header__logo">
           <img
             class="main-header__logo-image"
@@ -28,46 +28,51 @@
             alt="текст кот энергия"
           />
         </a>
-        <button class="main-nav__toggle" type="button">
+        <button class="open-menu" type="button">
           <span class="visually-hidden">Открыть меню</span>
         </button>
-
-        <ul class="main-nav__list">
-          <li class="site-list__item site-list__item--current">
+        <ul class="navigation-list">
+          <li class="navigation-item navigation-item--current">
             <a href="#">Главная</a>
           </li>
-          <li class="site-list__item site-list__item--current">
+          <li class="navigation-item navigation-item--current">
             <a href="#">Каталог продукции</a>
           </li>
-          <li class="site-list__item site-list__item--current">
+          <li class="navigation-item navigation-item--current">
             <a href="#">Подбор программы</a>
           </li>
         </ul>
         <h1>Функциональное питание для котов</h1>
-        <h2>Занялся собой? Займись котом!</h2>
-        <a href="#" class="select_program">Подобрать программу</a>
-      </div>
+        <p>Занялся собой? Займись котом!</p>
+        <a href="#" class="select-program">Подобрать программу</a>
+      </nav>
     </header>
     <main class="main-container">
-      <section class="product product--slim">
-        <h2 class="visually-hidden">Похудение</h2>
-        <p class="product__description">
-          Ваш кот весит больше собаки и почти утратил способность лазить по
-          деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу
-          сбросить лишний вес.
-        </p>
-        <a href="#" class="product__link">Каталог SLIM </a>
-        <h2 class="visually-hidden">Набор массы</h2>
-        <p>
-          Заработать авторитет среди дворовых котов и даже собак? Серия Cat
-          Energy Pro поможет вашему коту нарастить необходимые мышцы!
-        </p>
-        <a href="#" class="product__link">Каталог Pro </a>
+      <section class="product-program">
+        <ul>
+          <li>
+            <h2 class="visually-hidden">Похудение</h2>
+            <p class="product-program-text">
+              Ваш кот весит больше собаки и почти утратил способность лазить по
+              деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу
+              сбросить лишний вес.
+            </p>
+            <a href="#" class="product-program-link">Каталог SLIM </a>
+          </li>
+          <li>
+            <h2 class="visually-hidden">Набор массы</h2>
+            <p class="product-program-text">
+              Заработать авторитет среди дворовых котов и даже собак? Серия Cat
+              Energy Pro поможет вашему коту нарастить необходимые мышцы!
+            </p>
+            <a href="#" class="product-program-link">Каталог Pro </a>
+          </li>
+        </ul>
       </section>
       <section class="how-it-works">
         <div class="how-it-works__wrapper">
           <h2 class="visually-hidden">Как это работает</h2>
-          <ul class="how-it-works__steps">
+          <ol class="how-it-works__steps">
             <li class="how-it-works__element">
               <p class="how-it-works__description">
                 Функциональное питание содержит только полезные питательные
@@ -92,7 +97,7 @@ <h2 class="visually-hidden">Как это работает</h2>
                 питомца!
               </p>
             </li>
-          </ul>
+          </ol>
         </div>
       </section>
       <section class="example-case">
@@ -107,10 +112,8 @@ <h2 class="visually-hidden">Живой пример</h2>
           <dl class="example-case__stats">
             <dt class="example-case__stat-label">Снижение веса</dt>
             <dd class="example-case__stat-value">5 КГ</dd>
-
             <dt class="example-case__stat-label">Затрачено времени</dt>
             <dd class="example-case__stat-value">60 ДНЕЙ</dd>
-
             <dt class="example-case__stat-label">Затраты на питание</dt>
             <dd class="example-case__cost">15 000 руб.</dd>
           </dl>
@@ -124,13 +127,6 @@ <h2 class="invitation__title">Приглашаем к сотруднечиств
               >ул. Большая Конюшенная, д. 19/8 Санкт-Петербург</a
             >
           </p>
-          <img
-            class="map_cat_energy"
-            src="/images/location.jpg"
-            width="320"
-            height="360"
-            alt="карта магазина"
-          />
         </div>
       </section>
     </main>
@@ -139,7 +135,7 @@ <h2 class="invitation__title">Приглашаем к сотруднечиств
         <div class="main-footer__contact">
           <a
             ><img
-              class="contacts__icon"
+              class="contacts-icon"
               src="/source/images/cat_energy_text.svg"
               width="128"
               height="24"
@@ -147,24 +143,24 @@ <h2 class="invitation__title">Приглашаем к сотруднечиств
           /></a>
         </div>
         <div class="main-footer__social">
-          <ul class="social__list">
-            <li class="social__item">
+          <ul class="social-list">
+            <li class="social-item">
               <a
-                class="social__link social__link--vkonakte"
+                class="social-link social-link--vkonakte"
                 href="https://vk.com/htmlacademy"
                 >Вконтакте</a
               >
             </li>
-            <li class="social__item">
+            <li class="social-item">
               <a
-                class="social__link social__link--yotube"
+                class="social-link social-link--yotube"
                 href="https://www.youtube.com/@HTMLAcademyTV"
                 >Ютуб</a
               >
             </li>
-            <li class="social__item">
+            <li class="social-item">
               <a
-                class="social__link social__link--telegram"
+                class="social-link social-link--telegram"
                 href="https://t.me/htmlacademy"
                 >Телеграм</a
               >
