Merge pull request #2 from OLGAPOPKOVA210470/module1-task1

Module1 task1
htmlacademy-adaptive · Dec 21, 2024 · 037f805 · 037f805
2 parents ae64cd9 + ee4856e
commit 037f805
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 12 deletions.
diff --git a/Readme.md b/Readme.md
@@ -1,7 +1,7 @@
 # Личный проект «Кэт энерджи»
 
 * Студент: [Ольга Попкова](https://up.htmlacademy.ru/adaptive-individual/2/user/2562175).
-* Наставник: `Виктория Никитина`.
+* Наставник: [Виктория Никитина](https://htmlacademy.ru/profile/id1217273).
 
 ---
 

diff --git a/source/index.html b/source/index.html
@@ -1,13 +1,145 @@
 <!DOCTYPE html>
 <html class="page" lang="ru">
-  <head>
-    <meta charset="UTF-8">
-    <title>Название проекта</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="stylesheet" href="styles/styles.css">
-    <script src="scripts/index.js" defer></script>
-  </head>
-  <body class="page__body">
-    <header class="header">Шапка</header>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>HTML Academy: Кэт энерджи</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="styles/styles.css">
+  <script src="scripts/index.js" defer></script>
+</head>
+
+<body class="page__body">
+  <header class="header">
+    <a href="#" class="logo-link">
+      <img src="#" alt="Логотип Сайта Кот Энерджи" class="logo" width="174" height="50">
+    </a>
+    <nav class="nav">
+      <ul class="main-menu">
+        <li class="menu-item">
+          <a href="#" class="menu-link">главная</a>
+        </li>
+        <li class="menu-item">
+          <a href="#" class="menu-link">Каталог продукции</a>
+        </li>
+        <li class="menu-item">
+          <a href="#" class="menu-link">подбор программы</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <main class="main-index">
+    <h1>Функциональное питание для котов</h1>
+    <section class="functional-nutrition">
+      <h2 class="visually-hidden">Подбор программы питания для котиков</h2>
+      <p class="functional-nutrition">Занялся собой? Займись котом!</p>
+      <img src="#" alt="Довольный сытый кот" class="functional-nutrition-image" width="720" height="694">
+      <a href="" class="button button-functional-nutrition">подобрать программу</a>
+    </section>
+    <section class="problems">
+      <h2 class="visually-hidden">Проблемы с массой тела у котиков</h2>
+      <ul class="problems-list">
+        <li class="problems-item">
+          <h3 class="problems-title">похудение</h3>
+          <p class="problems-text">Ваш кот весит больше собаки и почти утратил способность<br>
+            лазить по деревьям? Пора на диету! Cat Energy Slim поможет<br> вашему питомцу сбросить лишний вес.</p>
+          <a href="#" class="button button-catalog">каталог slim</a>
+        </li>
+        <li class="problems-item">
+          <h3 class="problems-title">набор массы</h3>
+          <p class="problems-text">Заработать авторитет среди дворовых котов и даже собак?<br>
+            Серия Cat Energy Pro поможет вашему коту нарастить<br> необходимые мышцы!</p>
+          <a href="#" class="button button-catalog">каталог pro</a>
+        </li>
+      </ul>
+    </section>
+    <section class="advantages"> <!--Преимущества-->
+      <h2 class="visually-hidden">Преимущества</h2>
+      <h3 class="advantages-title">Как это работает</h3>
+      <ul class="advantages-list">
+        <li class="advantages-item">
+          <p class="advantages-description">Функциональное питание<br>
+            содержит только полезные<br> питательные вещества.</p>
+        </li>
+        <li class="advantages-item">
+          <p class="advantages-description">Выпускается в виде порошка,<br> который нужно лишь залить<br>
+            кипятком и готово.</p>
+        </li>
+        <li class="advantages-item">
+          <p class="advantages-description">Замените один-два приема<br> обычной еды на наше<br>
+            функциональное питание.</p>
+        </li>
+        <li class="advantages-item">
+          <p class="advantages-description">Уже через месяц наслаждайтесь<br> изменениями к лучшему<br>
+            вашего питомца!</p>
+        </li>
+      </ul>
+    </section>
+    <section class="achievements"> <!--Достижения-->
+      <h2 class="achievements-title">Живой пример</h2>
+      <p class="achievements-text">Борис сбросил 5 кг за 2 месяца, просто заменив свой<br>
+        обычный корм на Cat Energy Slim.Отличный результат<br> без изнуряющих тренировок! При этом он не менял своих<br>
+        привычек и по-прежнему спит по 16 часов в день. </p>
+      <ul class="achievements-list">
+        <li class="achievements-item">
+          <span class="achievements-name">снижение веса</span>
+          <b class="achievements-meaning">5 КГ</b>
+        </li>
+        <li class="achievements-item">
+          <span class="achievements-name">затрачено времени</span>
+          <b class="achievements-meaning">60 ДНЕЙ</b>
+        </li>
+        <li class="achievements-item">
+          <span class="achievements-name">Затраты на питание: </span>
+          <b class="achievements-meaning">15 000 РУБ.</b>
+        </li>
+      </ul>
+    </section>
+    <section class="comparison"> <!--Сравнение-->
+      <h2 class="visually-hidden">Пухлый и стройный коты</h2>
+      <img src="" alt="Пухлый кот" class="slider-image">
+      <button class="slider-button slider-prev" type="button">
+        <span class="visually-hidden">Предыдущее фото</span>
+      </button>
+      <img src="" alt="Стройный кот" class="slider-image">
+      <button class="slider-button slider-next" type="button">
+        <span class="visually-hidden">Следующее фото</span>
+      </button>
+    </section>
+  </main>
+  <footer class="page-footer">
+    <section class="contacts">
+      <h2 class="visually-hidden">Контакты</h2>
+      <h3 class="contacts-title">приглашаем<br> к сотрудничеству<br> дилеров!</h3>
+      <address class="contacts-addres">
+        <p class="contacts-addres-text">ул. Большая<br> Конюшенная, д. 19/8 <br>
+          Санкт-Петербург</p>
+      </address>
+      <img src="" alt="Логотип сайта Кот энерджи" class="contacts-logo" width="128" height="24">
+    </section>
+    <section class="footer-social">
+      <h2 class="visually-hidden">Социальные сети</h2>
+      <ul class="footer-social-list">
+        <li class="footer-social-item">
+          <a class="button" href="#">
+            <span class="visually-hidden">ВКонтакте</span>
+          </a>
+        </li>
+        <li class="footer-social-item">
+          <a class="button" href="#">
+            <span class="visually-hidden">YouTube</span>
+          </a>
+        </li>
+        <li class="footer-social-item">
+          <a class="button" href="#">
+            <span class="visually-hidden">Телеграм</span>
+          </a>
+        </li>
+      </ul>
+      <a class="htmlacademy-link" href="https://htmlacademy.ru/">HTML Academy</a>
+      <img src="#" alt="Логотип HTML Academy" class="logo" width="27" height="34">
+    </section>
+  </footer>
+</body>
+
+</html>