MaksimDoronin · MaksimDoronin · Nov 2, 2024 · Sep 13, 2024 · Sep 13, 2024 · Sep 13, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/source/catalog.html b/source/catalog.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html class="page" lang="ru">
+
+<head>
+  <meta charset="utf-8">
+  <title>CAT ENERGY: интернет магазин питания для котов</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="keywords" content="питание, здоровье, кот, кошка, коты, кошки, интернет-магазин">
+  <meta name="description" content="Магазин здорового питания для котов, кошек">
+  <link rel="stylesheet" href="styles/styles.css">
+  <script src="scripts/index.js" defer></script>
+</head>
+
+<body class="page__body">
+  <header class="page__header header">
+    <nav class="header__navigation navigation">
+      <a class="header__logo logo" href="index.html">
+        <img class="logo__mobile" src="/" width="100" height="100" alt="Логотип сайта Кэт Энерджи">
+      </a>
+      <a class="logo-text" href="index.html">
+        <img src="/" width="100" height="100" alt="Логотип с текстом 'CAT ENERGY'">
+      </a>
+      <button class="button" type="button">
+        <span class="visually-hidden">Расскрытие главного меню</span>
+      </button>
+      <ul class="main-navigation navigation">
+        <li class="navigation__item">
+          <a class="navigation__link" href="index.html">Главная</a>
+        </li>
+        <li class="navigation__item">
+          <a class="navigation__link" href="#">Каталог продукции</a>
+        </li>
+        <li class="navigation__item">
+          <a class="navigation__link" href="#">Подбор программы</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <main class="page__main">
+    <section class="catalog">
+      <h1 class="catalog__title">Каталог продукции</h1>
+      <ul class="catalog__list">
+        <li class="catalog__item product-card">
+          <div class="product-card__image-wrapper">
+            <a class="product-card__link" href="#">
+              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 500 г">
+            </a>
+          </div>
+          <div class="product-card__info-wrapper">
+            <a class="product-card__link" href="#">
+              <h2 class="product-card__title">Cat energy pro 500 г</h2>
+            </a>
+            <div class="product-card__desc-wrapper">
+              <p class="product-card__desc"><span class="product-card__prop">Масса</span><span class="product-card__value">500 г</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Вкус</span><span class="product-card__value">Курица</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Цена</span><span class="product-card__value">700 &#8381;</span></p>
+            </div>
+          </div>
+          <a class="product-card__button" href="#">Заказать</a>
+        </li>
+        <li class="catalog__item product-card">
+          <div class="product-card__image-wrapper">
+            <a class="product-card__link" href="#">
+              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 1000 г">
+            </a>
+          </div>
+          <div class="product-card__info-wrapper">
+            <a class="product-card__link" href="#">
+              <h2 class="product-card__title">Cat energy pro 1000 г</h2>
+            </a>
+            <div class="product-card__desc-wrapper">
+              <p class="product-card__desc"><span class="product-card__prop">Масса</span><span class="product-card__value">1000 г</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Вкус</span><span class="product-card__value">Курица</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Цена</span><span class="product-card__value">1000 &#8381;</span></p>
+            </div>
+          </div>
+          <a class="product-card__button" href="#">Заказать</a>
+        </li>
+        <li class="catalog__item product-card">
+          <div class="product-card__image-wrapper">
+            <a class="product-card__link" href="#">
+              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 500 г">
+            </a>
+          </div>
+          <div class="product-card__info-wrapper">
+            <a class="product-card__link" href="#">
+              <h2 class="product-card__title">Cat energy pro 500 г</h2>
+            </a>
+            <div class="product-card__desc-wrapper">
+              <p class="product-card__desc"><span class="product-card__prop">Масса</span><span class="product-card__value">500 г</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Вкус</span><span class="product-card__value">Рыба</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Цена</span><span class="product-card__value">700 &#8381;</span></p>
+            </div>
+          </div>
+          <a class="product-card__button" href="#">Заказать</a>
+        </li>
+        <li class="catalog__item product-card">
+          <div class="product-card__image-wrapper">
+            <a class="product-card__link" href="#">
+              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy pro 1000 г">
+            </a>
+          </div>
+          <div class="product-card__info-wrapper">
+            <a class="product-card__link" href="#">
+              <h2 class="product-card__title">Cat energy pro 1000 г</h2>
+            </a>
+            <div class="product-card__desc-wrapper">
+              <p class="product-card__desc"><span class="product-card__prop">Масса</span><span class="product-card__value">1000 г</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Вкус</span><span class="product-card__value">Рыба</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Цена</span><span class="product-card__value">1000 &#8381;</span></p>
+            </div>
+          </div>
+          <a class="product-card__button" href="#">Заказать</a>
+        </li>
+        <li class="catalog__item product-card">
+          <div class="product-card__image-wrapper">
+            <a class="product-card__link" href="#">
+              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy slim 500 г">
+            </a>
+          </div>
+          <div class="product-card__info-wrapper">
+            <a class="product-card__link" href="#">
+              <h2 class="product-card__title">Cat energy slim 500 г</h2>
+            </a>
+            <div class="product-card__desc-wrapper">
+              <p class="product-card__desc"><span class="product-card__prop">Масса</span><span class="product-card__value">500 г</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Вкус</span><span class="product-card__value">Гречка</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Цена</span><span class="product-card__value">400 &#8381;</span></p>
+            </div>
+          </div>
+          <a class="product-card__button" href="#">Заказать</a>
+        </li>
+        <li class="catalog__item product-card">
+          <div class="product-card__image-wrapper">
+            <a class="product-card__link" href="#">
+              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy slim 1000 г">
+            </a>
+          </div>
+          <div class="product-card__info-wrapper">
+            <a class="product-card__link" href="#">
+              <h2 class="product-card__title">Cat energy slim 1000 г</h2>
+            </a>
+            <div class="product-card__desc-wrapper">
+              <p class="product-card__desc"><span class="product-card__prop">Масса</span><span class="product-card__value">1000 г</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Вкус</span><span class="product-card__value">Гречка</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Цена</span><span class="product-card__value">700 &#8381;</span></p>
+            </div>
+          </div>
+          <a class="product-card__button" href="#">Заказать</a>
+        </li>
+        <li class="catalog__item product-card">
+          <div class="product-card__image-wrapper">
+            <a class="product-card__link" href="#">
+              <img class="product-card__image" src="/" width="100" height="100" alt="Cat energy slim 500 г">
+            </a>
+          </div>
+          <div class="product-card__info-wrapper">
+            <a class="product-card__link" href="#">
+              <h2 class="product-card__title">Cat energy slim 500 г</h2>
+            </a>
+            <div class="product-card__desc-wrapper">
+              <p class="product-card__desc"><span class="product-card__prop">Масса</span><span class="product-card__value">500 г</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Вкус</span><span class="product-card__value">Рис</span></p>
+              <p class="product-card__desc"><span class="product-card__prop">Цена</span><span class="product-card__value">500 &#8381;</span></p>
+            </div>
+          </div>
+          <a class="product-card__button" href="#">Заказать</a>
+        </li>
+        <li class="catalog__item product-card">
+          <div class="product-card__info-wrapper">
+            <h2 class="product-card__title">Показать еще 100500 товаров</h2>
+            <p class="product-card__text">На самом деле вкусов гораздо больше!</p>
+          </div>
+          <a class="product-card__button" href="#">Показать все</a>
+        </li>
+      </ul>
+    </section>
+    <section class="sub-products">
+      <h2 class="sub-products__title">Дополнительные товары</h2>
+      <ul class="sub-products__list">
+        <li class="sub-products__item">
+          <h2 class="sub-products__heading">Сахарозаменитель</h2>
+          <p class="sub-products__desc">
+            <span class="sub-products__value">1 упаковка (100 г)</span><span class="sub-products__price">200 &#8381;</span>
+          </p>
+          <a class="sub-products__button" href="#">Заказать</a>
+        </li>
+        <li class="sub-products__item">
+          <h2 class="sub-products__heading">Питьевая вода</h2>
+          <p class="sub-products__desc">
+            <span class="sub-products__value">5 литров</span><span class="sub-products__price">50 &#8381;</span>
+          </p>
+          <a class="sub-products__button" href="#">Заказать</a>
+        </li>
+        <li class="sub-products__item">
+          <h2 class="sub-products__heading">Молоко</h2>
+          <p class="sub-products__desc">
+            <span class="sub-products__value">1 литр</span><span class="sub-products__price">100 &#8381;</span>
+          </p>
+          <a class="sub-products__button" href="#">Заказать</a>
+        </li>
+        <li class="sub-products__item">
+          <h2 class="sub-products__heading">Витамины</h2>
+          <p class="sub-products__desc">
+            <span class="sub-products__value">1 упаковка (30 г)</span><span class="sub-products__price">300 &#8381;</span>
+          </p>
+          <a class="sub-products__button" href="#">Заказать</a>
+        </li>
+      </ul>
+      <div class="sub-products__gift-card">
+        <p>Закажите все и получите чехол для кота в подарок!</p>
+      </div>
+    </section>
+    <section class="subscribe">
+      <h2 class="subscribe__title">Акции и новинки</h2>
+      <div class="subscribe__wrapper">
+        <p>Подпишитесь на наши новости и не пропустите ни одного предложения!</p>
+        <form class="subscribe__form" action="https://echo.htmlacademy.ru/" method="post">
+          <label class="visually-hidden" for="subscribe-email">Email</label>
+          <input class="subscribe__field" type="email" name="subscribe-email" id="subscribe-email" placeholder="Ваш e-mail" required>
+          <button class="subscribe__button button" type="submit">Подписаться</button>
+        </form>
+      </div>
+    </section>
+    <section class="page__contacts contacts">
+      <h2 class="visually-hidden">Контактная информация</h2>
+      <div class="contacts__text-wrapper">
+        <p class="contacts__text">Приглашаем к сотрудничеству дилеров!</p>
+        <address class="contacts__address">
+          <p>ул. Большая Конюшенная <br> д. 19/8 <br> Санкт-Петербург</p>
+        </address>
+      </div>
+      <div class="contacts__location">
+        <img class="contacts__map" src="/" width="100" height="100" alt="Местоположение с точкой">
+      </div>
+    </section>
+  </main>
+  <footer class="page__footer footer">
+    <a class="footer__logo" href="#">
+      <img class="logo-text" src="/" width="100" height="100" alt="Логотип сайта Кэт Энерджи">
+    </a>
+    <ul class="footer__socials socials">
+      <li class="socials__item">
+        <a class="socials__link" href="#">
+          <img class="socials__icon" src="/" width="100" height="100" alt="Вконтакте">
+        </a>
+      </li>
+      <li class="socials__item">
+        <a class="socials__link" href="#">
+          <img class="socials__icon" src="/" width="100" height="100" alt="Ютьюб">
+        </a>
+      </li>
+      <li class="socials__item">
+        <a class="socials__link" href="#">
+          <img class="socials__icon" src="/" width="100" height="100" alt="Телеграм">
+        </a>
+      </li>
+    </ul>
+    <a class="footer__copyright-link" href="https://htmlacademy.ru/intensive/adaptive">
+      <p class="footer__copyright">HTML Academy</p>
+      <img class="footer__copyright-logo" src="/" width="100" height="100" alt="Логотип Аштиэмэльакадеми">
+    </a>
+  </footer>
+</body>
+
+</html>