Skip to content

Commit dd732be

Browse files
vudovenkovudovenko
committed
правки index и catalog
1 parent cbf7a0e commit dd732be

File tree

2 files changed

+374
-92
lines changed

2 files changed

+374
-92
lines changed

‎catalog.html‎

Lines changed: 250 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,273 @@
11
<!DOCTYPE html>
22
<html lang="ru">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Каталог - Седона</title>
4+
<meta charset="utf-8">
5+
<title>Каталог гостиниц - Седона</title>
76
</head>
87
<body>
9-
<!-- Шапка сайта -->
10-
<header data-test="header">
11-
<h1>Каталог</h1>
12-
<nav>
13-
<ul>
14-
<li><a href="index.html">Главная</a></li>
15-
<li><a href="catalog.html">Каталог</a></li>
16-
<li><a href="#">Контакты</a></li>
8+
<header class="header-main header-catalog">
9+
<nav class="header-menu">
10+
<a href="index.html">
11+
<img src="#" alt="Логотип сайта Седона" class="logo">
12+
</a>
13+
<ul class="menu-list">
14+
<li class="menu-item">
15+
<a href="index.html">Главная</a>
16+
</li>
17+
<li class="menu-item">
18+
<a href="#">О Седоне</a>
19+
</li>
20+
<li class="menu-item">
21+
<a class="current-page">Гостиницы</a>
22+
</li>
23+
</ul>
24+
25+
<ul class="menu-list navigation-user">
26+
<li class="navigation-item">
27+
<a href="#">
28+
<span class="visually-hidden">Поиск</span>
29+
<img src="#" alt="Иконка поиска">
30+
</a>
31+
<a href="#">
32+
<span class="visually-hidden">Избранное</span>
33+
<img src="#" alt="Иконка Избранного">
34+
</a>
35+
<button type="button" class="choose-button">
36+
Хочу сюда!
37+
</button>
38+
</li>
1739
</ul>
1840
</nav>
1941
</header>
2042

21-
<!-- Основное содержимое -->
22-
<main data-test="main">
23-
<!-- Блок с фильтрами -->
24-
<section data-test="filter">
25-
<h2>Фильтры</h2>
26-
<!-- Тут могли бы быть чекбоксы/слайдер цены и т.д. -->
27-
<form action="#" method="GET">
28-
<label for="filter-price">Цена до:</label>
29-
<input type="number" id="filter-price" name="price-max">
30-
<button type="submit">Применить</button>
43+
<main class="main-catalog">
44+
<section class="hotels-filter-section">
45+
<h1 class="catalog-heading">Гостиницы Седоны</h1>
46+
<ul class="breadcrumbs">
47+
<li class="breadcrumbs-item">
48+
<a class="breadcrumbs-link" href="index.html">
49+
<img src="#" alt="Иконка на Главную страницу">
50+
</a>
51+
</li>
52+
<li class="breadcrumbs-item">
53+
<img src="#" alt="Стрелка направления по страницам">
54+
</li>
55+
<li class="breadcrumbs-item">
56+
<a class="breadcrumbs-link">Гостиницы</a>
57+
</li>
58+
</ul>
59+
<form class="filter-form" action="https://echo.htmlacademy.ru/" method="post">
60+
<h2 class="visually-hidden">Форма с фильтром для поиска подходящей гостиницы</h2>
61+
<section class="form-section checkbox-module">
62+
<h3 class="form-section-heading">Инфраструктура:</h3>
63+
<ul class="checkbox-list">
64+
<li class="checkbox-item">
65+
<input type="checkbox" name="pool" id="pool" checked>
66+
<label for="pool">Бассейн</label>
67+
</li>
68+
<li class="checkbox-item">
69+
<input type="checkbox" name="parking" id="parking" checked>
70+
<label for="parking">Бассейн</label>
71+
</li>
72+
<li class="checkbox-item">
73+
<input type="checkbox" name="wi-fi" id="wi-fi">
74+
<label for="wi-fi">Wi-Fi</label>
75+
</li>
76+
</ul>
77+
</section>
78+
79+
<section class="form-section radio-module">
80+
<h3 class="form-section-heading">Тип жилья:</h3>
81+
<ul class="radio-list">
82+
<li class="radio-item">
83+
<input type="radio" name="living-type" value="hotel" id="hotel" checked>
84+
<label for="hotel">Гостиница</label>
85+
</li>
86+
<li class="radio-item">
87+
<input type="radio" name="living-type" value="motel" id="motel">
88+
<label for="motel">Мотель</label>
89+
</li>
90+
<li class="radio-item">
91+
<input type="radio" name="living-type" value="apartments" id="apartments">
92+
<label for="apartments">Апартаменты</label>
93+
</li>
94+
</ul>
95+
</section>
96+
97+
<section class="form-section price-module">
98+
<h3 class="form-section-heading">Стоимость, ₽:</h3>
99+
<input type="number" value=0 name="minimum-price" placeholder="от">
100+
<input type="number" value=9000 name="maximum-price" placeholder="до">
101+
<!---<input type="range">-->
102+
</section>
103+
104+
<section class="form-section buttons-module">
105+
<h3 class="visually-hidden">Кнопки для применения фильтров</h3>
106+
<button type="submit" class="filter-button apply-button">Применить</button>
107+
<button type="reset" class="filter-button reset-button">Сбросить</button>
108+
</section>
31109
</form>
32110
</section>
33111

34-
<!-- Блок каталога (список отелей) -->
35-
<section data-test="catalog">
36-
<h2>Предложения</h2>
37-
<ul>
38-
<li>
39-
<h3>Отель 1</h3>
40-
<img src="#" alt="Изображение Отель 1">
41-
<p>Описание отеля.</p>
42-
</li>
43-
<li>
44-
<h3>Отель 2</h3>
45-
<img src="#" alt="Изображение Отель 2">
46-
<p>Описание отеля.</p>
47-
</li>
48-
<li>
49-
<h3>Отель 3</h3>
50-
<img src="#" alt="Изображение Отель 3">
51-
<p>Описание отеля.</p>
112+
<section class="filtered-catalog-section">
113+
<h2 class="visually-hidden">Результаты поиска и способы их отображения</h2>
114+
<header class="results-header">
115+
<h2 class="result-heading">Найдено гостиниц: <span>38</span></h2>
116+
<h3 class="visually-hidden">Выбор способа сортировки результата</h3>
117+
<select class="sorted-by" name="sorting-method">
118+
<option value="cheaper">Сначала дешевле</option>
119+
<!-- another options -->
120+
</select>
121+
<h3 class="visually-hidden">Выбор способа визульного представления результата</h3>
122+
<ul class="display-methods-list">
123+
<li class="display-methods-item">
124+
<label class="method-icon">
125+
<input type="radio" name="display" value="table">
126+
<img src="#" alt="Иконка отображения в виде таблицы">
127+
</label>
128+
</li>
129+
<li class="display-methods-item">
130+
<label class="method-icon">
131+
<input type="radio" name="display" value="one-per-page">
132+
<img src="#" alt="Иконка отображения в виде одного элемента списка на каждой странице">
133+
</label>
134+
</li>
135+
<li class="display-methods-item">
136+
<label class="method-icon">
137+
<input type="radio" name="display" value="list">
138+
<img src="#" alt="Иконка отображения в виде списка">
139+
</label>
140+
</li>
141+
</ul>
142+
</header>
143+
<h2 class="visually-hidden">Отсортированный список гостиниц</h2>
144+
<ul class="hotels-cards-list">
145+
<li class="hotel-card-item">
146+
<img src="#" alt="Изображение гостиницы">
147+
<h3 class="hotel-name">Amara Resort & Spa</h3>
148+
<p class="information">Гостиница <span>От 4000 ₽</span></p>
149+
<div class="cards-buttons">
150+
<a href="#" class="more-details-button">
151+
Подробнее
152+
</a>
153+
<button class="add-button added">В избранное</button>
154+
</div>
155+
<div class="rating-information">
156+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
157+
<img src="#" alt="Иконка рейтинга 4 звезды">
158+
<p class='rating'>РЕЙТИНГ: 8,5</p>
159+
</div>
160+
</li>
161+
<li class="hotel-card-item">
162+
<img src="#" alt="Изображение гостиницы">
163+
<h3 class="hotel-name">Villas at Poco Diablo</h3>
164+
<p class="information">Гостиница <span>От 5000 ₽</span></p>
165+
<div class="cards-buttons">
166+
<a href="#" class="more-details-button">
167+
Подробнее
168+
</a>
169+
<button class="add-button added">В избранном</button>
170+
</div>
171+
<div class="rating-information">
172+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
173+
<img src="#" alt="Иконка рейтинга 4 звезды">
174+
<p class='rating'>РЕЙТИНГ: 9,2</p>
175+
</div>
176+
</li>
177+
<li class="hotel-card-item">
178+
<img src="#" alt="Изображение гостиницы">
179+
<h3 class="hotel-name">Desert Quail Inn</h3>
180+
<p class="information">Гостиница <span>От 2500 ₽</span></p>
181+
<div class="cards-buttons">
182+
<a href="#" class="more-details-button">
183+
Подробнее
184+
</a>
185+
<button class="add-button added">В избранное</button>
186+
</div>
187+
<div class="rating-information">
188+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
189+
<img src="#" alt="Иконка рейтинга 3 звезды">
190+
<p class='rating'>РЕЙТИНГ: 6,9</p>
191+
</div>
192+
</li>
193+
<li class="hotel-card-item">
194+
<img src="#" alt="Изображение гостиницы">
195+
<h3 class="hotel-name">GreenTree Inn</h3>
196+
<p class="information">Гостиница <span>От 1500 ₽</span></p>
197+
<div class="cards-buttons">
198+
<a href="#" class="more-details-button">
199+
Подробнее
200+
</a>
201+
<button class="add-button added">В избранное</button>
202+
</div>
203+
<div class="rating-information">
204+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
205+
<img src="#" alt="Иконка рейтинга 2 звезды">
206+
<p class='rating'>РЕЙТИНГ: 5,0</p>
207+
</div>
208+
</li>
209+
</ul>
210+
<ul class="pagination">
211+
<li class="pagination-item">
212+
<a class="pagination-link pagination-current">1</a>
213+
</li>
214+
<li class="pagination-item">
215+
<a class="pagination-link" href="#">2</a>
216+
</li>
217+
<li class="pagination-item">
218+
<a class="pagination-link" href="#">3</a>
219+
</li>
220+
<li class="pagination-item">
221+
<a class="pagination-link" href="#">4</a>
222+
</li>
223+
<li class="pagination-item">
224+
<a class="pagination-link" href="#">...</a>
225+
</li>
226+
<li class="pagination-item">
227+
<a class="pagination-link" href="#">10</a>
52228
</li>
53229
</ul>
54230
</section>
55231

56-
<!-- Блок подписки (если требование сохраняется) -->
57-
<section data-test="subscribe">
58-
<h2>Подписка на рассылку</h2>
59-
<form action="#" method="POST">
60-
<label for="email-subscribe-catalog">Введите E-mail:</label>
61-
<input type="email" id="email-subscribe-catalog" name="email" placeholder="[email protected]">
62-
<button type="submit">Подписаться</button>
232+
<section class="subscribtion-section">
233+
<header class="section-header subscription-header">
234+
<h2 class="subscription-heading">Подпишитесь на рассылку</h2>
235+
<p class="resons-text">Только полезная информация и никакого спама, честное бойскаутское!</p>
236+
</header>
237+
<form class="subscription-form" action="#" method="post">
238+
<input type="email" placeholder="Ваш e-mail" name="email" class="email-input">
239+
<input type="submit" value="Подписаться" class="subscribe-button">
63240
</form>
64241
</section>
65242
</main>
66243

67-
<!-- Подвал сайта -->
68-
<footer data-test="footer">
69-
<p>&copy; 2024 Седона. Все права защищены.</p>
244+
<footer class="footer-main">
245+
<section>
246+
<h2 class="visually-hidden">Социальные сети</h2>
247+
<ul class="footer-sotial-list">
248+
<li class="footer-social-item">
249+
<a class="button" href="https://vk.com/htmlacademy">
250+
<span class="visually-hidden">Вконтакте</span>
251+
</a>
252+
</li>
253+
<li class="footer-social-item">
254+
<a class="button" href="https://t.me/htmlacademy">
255+
<span class="visually-hidden">Телеграм</span>
256+
</a>
257+
</li>
258+
<li class="footer-social-item">
259+
<a class="button" href="https://www.youtube.com/user/htmlacademyru">
260+
<span class="visually-hidden">Ютуб</span>
261+
</a>
262+
</li>
263+
</ul>
264+
</section>
265+
266+
<section class="footer-contacts">
267+
<h2 class="visually-hidden">Контакты</h2>
268+
<a class="footer-contacts-address-phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
269+
<a class="htmlacademy-link" href="https://htmlacademy.ru/">.html academy</a>
270+
</section>
70271
</footer>
71272
</body>
72273
</html>

0 commit comments

Comments
 (0)