htmlacademy-univer-htmlcss-1 · vudovenko · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024 · Dec 17, 2024
diff --git a/Readme.md b/Readme.md
@@ -1,7 +1,7 @@
 # Личный проект «Седона»
 
 * Студент: [Владислав Удовенко](https://up.htmlacademy.ru/univer-html1/2/user/1902653).
-* Наставник: `Неизвестно`.
+* Наставник: [Артём Хрушков](https://htmlacademy.ru/profile/id98923).
 
 ---
 

diff --git a/catalog.html b/catalog.html
@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <title>Каталог гостиниц - Седона</title>
+  <link rel="stylesheet" href="styles/style.css">
+</head>
+<body>
+<header class="header-main">
+  <nav class="header-menu">
+    <a href="index.html" class="logo-to-main">
+      <img src="images/logo.svg" alt="Логотип сайта Седона" class="logo" width="140" height="70">
+    </a>
+    <ul class="menu-list list">
+      <li class="menu-item">
+        <a href="index.html">Главная</a>
+      </li>
+      <li class="menu-item">
+        <a href="#">О Седоне</a>
+      </li>
+      <li  class="menu-item">
+        <a href="#" class="current-page">Гостиницы</a>
+      </li>
+    </ul>
+
+    <ul class="menu-list navigation-user list">
+      <li class="navigation-item">
+        <a href="#">
+          <span class="visually-hidden">Поиск</span>
+          <img src="images/search-loupe.svg" alt="Иконка поиска" width="20" height="20">
+        </a>
+      </li>
+      <li class="navigation-item">
+        <a href="#" class="favourites">
+          <span class="visually-hidden">Избранное</span>
+          <img src="images/favourites.svg" alt="Иконка Избранного" width="20" height="20">
+        </a>
+      </li>
+      <li class="navigation-item">
+        <button type="button" class="button choose-button">
+          Хочу сюда!
+        </button>
+      </li>
+    </ul>
+  </nav>
+</header>
+
+<main class="main main-catalog">
+  <section class="hotels-filter-section">
+    <div class="hotels-filter-section-wrapper">
+      <h1 class="catalog-heading">Гостиницы Седоны</h1>
+      <ul class="breadcrumbs list">
+        <li class="breadcrumbs-item">
+          <a class="breadcrumbs-link" href="index.html">
+            <img src="images/home-breadcrumbs-icon.svg" alt="Иконка на Главную страницу" width="13" height="15">
+          </a>
+        </li>
+        <li class="breadcrumbs-item">
+          <img src="images/arrow.svg" alt="Стрелка направления по страницам" width="6" height="10">
+        </li>
+        <li class="breadcrumbs-item">
+          <a class="breadcrumbs-link">Гостиницы</a>
+        </li>
+      </ul>
+      <form class="filter-form" action="https://echo.htmlacademy.ru/" method="post">
+        <h2 class="visually-hidden">Форма с фильтром для поиска подходящей гостиницы</h2>
+        <fieldset class="form-section checkbox-module">
+          <legend class="form-section-heading">Инфраструктура:</legend>
+          <ul class="checkbox-list parametrs-list list">
+            <li class="checkbox-item parametrs-list-item">
+              <label class="control">
+                <input class="visually-hidden control-input" type="checkbox" name="pool" checked>
+                <span class="control-mark"></span>
+                <span class="control-label">Бассейн</span>
+              </label>
+            </li>
+            <li class="checkbox-item parametrs-list-item">
+              <label class="control">
+                <input class="visually-hidden control-input" type="checkbox" name="parking" checked disabled>
+                <span class="control-mark"></span>
+                <span class="control-label">Парковка</span>
+              </label>
+            </li>
+            <li class="checkbox-item parametrs-list-item">
+              <label class="control">
+                <input class="visually-hidden control-input" type="checkbox" name="wi-fi">
+                <span class="control-mark"></span>
+                <span class="control-label">Wi-Fi</span>
+              </label>
+            </li>
+          </ul>
+        </fieldset>
+
+        <fieldset class="form-section radio-module">
+          <h3 class="form-section-heading">Тип жилья:</h3>
+          <ul class="radio-list parametrs-list list">
+            <li class="radio-item parametrs-list-item">
+              <label class="control">
+                <input class="visually-hidden control-input" type="radio" name="living-type" value="hotel"  checked>
+                <span class="control-mark"></span>
+                <span class="control-label">Гостиница</span>
+              </label>
+            </li>
+            <li class="radio-item parametrs-list-item">
+              <label class="control">
+                <input class="visually-hidden control-input" type="radio" name="living-type" value="motel"  checked>
+                <span class="control-mark"></span>
+                <span class="control-label">Мотель</span>
+              </label>
+            </li>
+            <li class="radio-item parametrs-list-item">
+              <label class="control">
+                <input class="visually-hidden control-input" type="radio" name="living-type" value="apartaments">
+                <span class="control-mark"></span>
+                <span class="control-label">Апартаменты</span>
+              </label>
+            </li>
+          </ul>
+        </fieldset>
+
+        <fieldset class="form-section price-module">
+          <h3 class="form-section-heading">Стоимость, ₽:</h3>
+          <div class="range">
+            <div class="range-inputs">
+              <input type="number" name="minimum-price" value="0" class="price-input">
+              <input type="number" name="maximum-price" value="9000" class="price-input">
+            </div>
+            <div class="range-scale">
+              <div class="range-bar" style="left: 0; width: 226px">
+                <button class="range-toggle toggle-min">
+                  <span class="visually-hidden">Изменить минимальную цену.</span>
+                </button>
+                <button class="range-toggle toggle-max">
+                  <span class="visually-hidden">Изменить максимальную цену.</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset class="form-section buttons-module">
+          <h3 class="visually-hidden">Кнопки для применения фильтров</h3>
+          <button type="submit" class="button filter-button action-button apply-button">Применить</button>
+          <button type="reset" class=" button filter-button reset-button">Сбросить</button>
+        </fieldset>
+      </form>
+    </div>
+  </section>
+
+  <section class="filtered-catalog-section">
+    <h2 class="visually-hidden">Результаты поиска и способы их отображения</h2>
+    <header class="results-header">
+      <h2 class="result-heading">Найдено гостиниц: <span>38</span></h2>
+      <h3 class="visually-hidden">Выбор способа сортировки результата</h3>
+      <select class="sorted-by" name="sorting-method">
+        <option value="cheaper">Сначала дешевле</option>
+        <!-- another options -->
+      </select>
+      <h3 class="visually-hidden">Выбор способа визульного представления результата</h3>
+      <ul class="display-methods-list list">
+        <li class="display-methods-item current-method">
+          <input class='visually-hidden' type="radio" name="display" value="table">
+          <label class="method-icon">
+            <img src="images/table-view-icon.svg" alt="Иконка отображения в виде таблицы" width="16" height="14">
+          </label>
+        </li>
+        <li class="display-methods-item">
+          <input class='visually-hidden' type="radio" name="display" value="one-per-page">
+          <label class="method-icon">
+            <img src="images/single-view-icon.svg" alt="Иконка отображения в виде одного элемента списка на каждой странице" width="16" height="14">
+          </label>
+        </li>
+        <li class="display-methods-item">
+          <input class='visually-hidden' type="radio" name="display" value="list">
+          <label class="method-icon">
+            <img src="images/list-view-icon.svg" alt="Иконка отображения в виде списка" width="16" height="14">
+          </label>
+        </li>
+      </ul>
+    </header>
+    <h2 class="visually-hidden">Отсортированный список гостиниц</h2>
+    <ul class="hotels-cards-list list">
+      <li class="hotel-card-item">
+        <img src="images/hotel-1.jpg" alt="Изображение гостиницы" width="300" height="212">
+        <h3 class="hotel-name">Amara Resort & Spa</h3>
+        <p class="information">Гостиница <span>От 4000 ₽</span></p>
+        <div class="cards-buttons">
+          <a href="#" class="more-details-button button">
+            Подробнее
+          </a>
+          <button class="action-button button">В избранное</button>
+        </div>
+        <div class="rating-information">
+          <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
+          <img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
+          <p class='rating'>РЕЙТИНГ: 8,5</p>
+        </div>
+      </li>
+      <li class="hotel-card-item">
+        <img src="images/hotel-2.jpg" alt="Изображение гостиницы" width="300" height="212">
+        <h3 class="hotel-name">Villas at Poco Diablo</h3>
+        <p class="information">Гостиница <span>От 5000 ₽</span></p>
+        <div class="cards-buttons">
+          <a href="#" class="more-details-button button">
+            Подробнее
+          </a>
+          <button class="action-button added button">В избранном</button>
+        </div>
+        <div class="rating-information">
+          <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
+          <img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
+          <p class='rating'>РЕЙТИНГ: 9,2</p>
+        </div>
+      </li>
+      <li class="hotel-card-item">
+        <img src="images/hotel-3.jpg" alt="Изображение гостиницы"  width="300" height="212">
+        <h3 class="hotel-name">Desert Quail Inn</h3>
+        <p class="information">Гостиница <span>От 2500 ₽</span></p>
+        <div class="cards-buttons">
+          <a href="#" class="more-details-button button">
+            Подробнее
+          </a>
+          <button class="action-button button">В избранное</button>
+        </div>
+        <div class="rating-information">
+          <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
+          <img src="images/3-stars-icon.svg" alt="Иконка рейтинга 3 звезды" width="66" height="17">
+          <p class='rating'>РЕЙТИНГ: 6,9</p>
+        </div>
+      </li>
+      <li class="hotel-card-item">
+        <img src="images/hotel-4.jpg" alt="Изображение гостиницы"  width="300" height="212">
+        <h3 class="hotel-name">GreenTree Inn</h3>
+        <p class="information">Гостиница <span>От 1500 ₽</span></p>
+        <div class="cards-buttons">
+          <a href="#" class="more-details-button button">
+            Подробнее
+          </a>
+          <button class="action-button button">В избранное</button>
+        </div>
+        <div class="rating-information">
+          <h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
+          <img src="images/2-stars-icon.svg" alt="Иконка рейтинга 2 звезды" width="42" height="17">
+          <p class='rating'>РЕЙТИНГ: 5,0</p>
+        </div>
+      </li>
+    </ul>
+    <ul class="pagination list">
+      <li class="pagination-item">
+        <a class="pagination-link pagination-current">1</a>
+      </li>
+      <li class="pagination-item">
+        <a class="pagination-link" href="#">2</a>
+      </li>
+      <li class="pagination-item">
+        <a class="pagination-link" href="#">3</a>
+      </li>
+      <li class="pagination-item">
+        <a class="pagination-link" href="#">4</a>
+      </li>
+      <li class="pagination-item">
+        <a class="pagination-link" href="#">...</a>
+      </li>
+      <li class="pagination-item">
+        <a class="pagination-link" href="#">10</a>
+      </li>
+    </ul>
+  </section>
+
+  <section class="subscribtion-section catalog-subscribtion-section">
+    <header class="section-header subscription-header catalog-subscribtion-header">
+      <div class="section-header-wrapper subscribtion-section-header-wrapper">
+        <h2 class="subscription-heading">Подпишитесь на рассылку</h2>
+        <p class="reasons-text">Только полезная информация и никакого спама,
+          честное бойскаутское!</p>
+      </div>
+    </header>
+    <form class="subscription-form" action="https://echo.htmlacademy.ru/" method="post">
+      <input type="email" placeholder="Ваш e-mail" name="email" class="email-input" required>
+      <input type="submit" value="Подписаться" class="button action-button subscribe-button">
+    </form>
+  </section>
+</main>
+
+<footer class="footer-main">
+  <div class="page-footer-container">
+    <section>
+      <h2 class="visually-hidden">Социальные сети</h2>
+      <ul class="footer-sotial-list list">
+        <li class="footer-social-item">
+          <a class="social-item-icon" href="https://vk.com/htmlacademy" target=_blank>
+            <span class="visually-hidden">Вконтакте</span>
+            <img src="images/vk-icon.svg" alt="Иконка Вконтакте" width="24" height="14">
+          </a>
+        </li>
+        <li class="footer-social-item">
+          <a class="social-item-icon" href="https://t.me/htmlacademy" target=_blank>
+            <span class="visually-hidden">Телеграм</span>
+            <img src="images/telegram-icon.svg" alt="Иконка Телеграма" width="18" height="16">
+          </a>
+        </li>
+        <li class="footer-social-item">
+          <a class="social-item-icon" href="https://www.youtube.com/user/htmlacademyru" target=_blank>
+            <span class="visually-hidden">Ютуб</span>
+            <img src="images/youtube-icon.svg" alt="Иконка Ютуба" width="22" height="17">
+          </a>
+        </li>
+      </ul>
+    </section>
+
+    <section class="footer-contacts">
+      <h2 class="visually-hidden">Контакты</h2>
+      <address class="phone">
+        <a class="footer-contacts-address-phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
+      </address>
+    </section>
+    <section class="htmlacademy">
+      <a class="htmlacademy-link" href="https://htmlacademy.ru/" target=_blank>.html academy</a>
+    </section>
+  </div>
+</footer>
+</body>
+</html>
diff --git a/images/2-stars-icon.svg b/images/2-stars-icon.svg
diff --git a/images/3-stars-icon.svg b/images/3-stars-icon.svg
diff --git a/images/4-stars-icon.svg b/images/4-stars-icon.svg
diff --git a/images/adventages-photo-1.jpg b/images/adventages-photo-1.jpg
diff --git a/images/adventages-photo-2.jpg b/images/adventages-photo-2.jpg
diff --git a/images/arrow.svg b/images/arrow.svg
diff --git a/images/calendar.svg b/images/calendar.svg
diff --git a/images/close-modal-icon.svg b/images/close-modal-icon.svg
diff --git a/images/email-blur-background.jpg b/images/email-blur-background.jpg
diff --git a/images/favourites.svg b/images/favourites.svg
diff --git a/images/filter-background.jpg b/images/filter-background.jpg