-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcatalog.html
More file actions
324 lines (321 loc) · 18.4 KB
/
catalog.html
File metadata and controls
324 lines (321 loc) · 18.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Проект Седона</title>
<link rel="stylesheet" href="styles/styles.css">
<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
</head>
<body>
<header class="page-header" data-test="header">
<nav class="navigation">
<a class="navigation-logo" href="index.html">
<img src="images/svg/logo-header.svg" width="140" height="70" alt="Логотип сайта Седона">
</a>
<ul class="navigation-list list-none">
<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 active">
<a class="navigation-link current-link" href="#">Гостиницы</a>
</li>
</ul>
<ul class="navigation-user-list list-none">
<li class="navigation-user-item">
<a class="navigation-user-link search-icon" href="#">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 18.0083L15.8 14.3287C16.8 13.0359 17.5 11.3453 17.5 9.4558C17.5 5.08011 13.9 1.5 9.5 1.5C5.1 1.5 1.5 5.17956 1.5 9.55525C1.5 13.9309 5.1 17.511 9.5 17.511C11.3 17.511 13 16.9144 14.4 15.8204L18.1 19.5L19.5 18.0083ZM9.5 15.5221C6.2 15.5221 3.5 12.837 3.5 9.55525C3.5 6.27348 6.2 3.5884 9.5 3.5884C12.8 3.5884 15.5 6.27348 15.5 9.55525C15.5 12.837 12.8 15.5221 9.5 15.5221Z" />
</svg>
<span class="visually-hidden">Поиск</span>
</a>
</li>
<li class="navigation-user-item">
<a class="navigation-user-link favorite" href="#">
<svg width="18" height="17" viewBox="0 0 18 17" xmlns="http://www.w3.org/2000/svg">
<path d="M8.9 17C8.6 17 8.3 16.9 8.1 16.6C2.7 10.5 1.4 9.1 1.1 8.7C0.4 7.8 0 6.6 0 5.4C0 2.4 2.4 0 5.5 0C6.8 0 8 0.5 9 1.3C10 0.5 11.3 0 12.5 0C15.5 0 18 2.4 18 5.4C18 6.7 17.5 7.9 16.7 8.8L9.7 16.7C9.5 16.9 9.3 17 8.9 17ZM2.9 7.5C3.2 7.9 6.4 11.5 9 14.4L15.2 7.4C15.7 6.9 15.9 6.2 15.9 5.4C15.9 3.6 14.4 2.1 12.6 2.1C11.6 2.1 10.6 2.6 9.9 3.4C9.6 3.7 9.3 3.8 9 3.8C8.7 3.8 8.4 3.6 8.2 3.4C7.5 2.6 6.5 2.1 5.5 2.1C3.7 2.1 2.2 3.6 2.2 5.4C2.1 6.3 2.5 7 2.9 7.5C2.8 7.5 2.8 7.5 2.9 7.5Z" />
</svg>
<span class="visually-hidden">Избранное</span>
<span class="user-counter">12</span>
</a>
</li>
</ul>
<a class="button button-primary button-header" href="#">Хочу сюда!</a>
</nav>
</header>
<main class="main-catalog" data-test="main">
<div class="catalog-filter-wrapper">
<header class="header-inner">
<h1>Гостиницы Седоны</h1>
<ul class="breadcrumbs-list">
<li class="breadcrumbs-item">
<a class="breadcrumbs-link link-home" href="index.html">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 0.5L0.5 6.30006V12.5001H12.5V6.30006L6.5 0.5ZM11.5 11.5001H1.5V6.70005L6.5 1.9L11.5 6.70005V11.5001Z" fill="white" />
<path d="M4.5 10.5001H5.5V8.00005H7.5V10.5001H8.5V7.00005H4.5V10.5001Z" fill="white" />
</svg>
<span class="visually-hidden">Галвная</span>
</a>
</li>
<li class="breadcrumbs-item">
<a class="breadcrumbs-link link-hotel" href="#">Гостиницы</a>
</li>
</ul>
</header>
<section class="catalog-filter" data-test=" filter">
<h2 class="visually-hidden">Фильтр гостиниц</h2>
<form action="https://echo.htmlacademy.ru/" method="post">
<fieldset class="filter-group infrastrukture">
<legend class="group-title">Инфраструктура:</legend>
<ul class="group-list list-none">
<li class="group-item">
<input type="checkbox" name="pool" id="pool" checked>
<label for="pool" class="input-text">Бассейн</label>
</li>
<li class="group-item">
<input type="checkbox" name="parking" id="parking" checked>
<label for="parking" class="input-text">Парковка</label>
</li>
<li class="group-item">
<input type="checkbox" name="wi-fi" id="wi-fi">
<label for="wi-fi" class="input-text">Wi-Fi</label>
</li>
</ul>
</fieldset>
<fieldset class="filter-group type-housing">
<legend class="group-title">Тип Жилья:</legend>
<ul class="group-list list-none">
<li class="group-item">
<input type="radio" name="apartments-type" id="hotel" checked>
<label for="hotel" class="input-text">Гостиница</label>
</li>
<li class="group-item">
<input type="radio" name="apartments-type" id="motel">
<label for="motel" class="input-text">Мотель</label>
</li>
<li class="group-item">
<input type="radio" name="apartments-type" id="apartments">
<label for="apartments" class="input-text">Апартаменты</label>
</li>
</ul>
</fieldset>
<fieldset class="filter-group price">
<legend class="group-title">Стоимость, ₽:</legend>
<div class="price-inputs">
<div class="price-input">
<label class= "label-from">
<input class="input input-from" type="number" id="from" name="from" min="0" max="10000" value="0">
<span class="label-input">от</span>
</label>
</div>
<div class="price-input">
<label class="label-to" for="to">
<input class="input input-to" type="number" id="to" name="to" min="0" max="10000" value="9000">
<span class="label-input">до</span>
</label>
</div>
</div>
<div class="range-scale">
<input class="input-range" name="range" type="range" min="1" max="9000">
<div class="range-progress">
<button class="range-thumb thumb-min" type="button">
<span class="visually-hidden">от</span>
</button>
<button class="range-thumb thumb-max" type="button">
<span class="visually-hidden">до</span>
</button>
</div>
</div>
</fieldset>
<div class="filter-button">
<button class="button button-secondary filter" type="submit">Применить</button>
<button class="button button-transparent filter" type="reset">Сбросить</button>
</div>
</form>
</section>
</div>
<section class="cards" data-test="catalog">
<div class="cards-sorting">
<p class="sorting-result">Найдено гостиниц: 38</p>
<select class="sorting" name="sorting" id="sorting">
<option value="value1" selected>Сначала дешевые</option>
<option value="value2">Сначала дорогие</option>
</select>
<ul class="cards-view-list list-none">
<li class="cards-view-item">
<a class="cards-view-link active-card" href="catalog.html?view=tile">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172287_169)"><path d="M4 0H0V6H4V0Z" fill="black" /><path d="M16 0H12V6H16V0Z" fill="black" /><path d="M10 0H6V6H10V0Z" fill="black" /><path d="M4 8H0V14H4V8Z" fill="black" /><path d="M16 8H12V14H16V8Z" fill="black" />
<path d="M10 8H6V14H10V8Z" fill="black" />
</g><defs><clipPath id="clip0_172287_169"><rect width="16" height="14" fill="white" /></clipPath></defs>
</svg>
<span class="visually-hidden">Отображение плиткой</span>
</a>
</li>
<li class="cards-view-item">
<a class="cards-view-link" href="catalog.html?view=card">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 12H0V14H16V12Z" fill="black" /><path d="M14 2V8H2V2H14ZM16 0H0V10H16V0Z" fill="black" />
</svg>
<span class="visually-hidden">Крупный значки</span>
</a>
</li>
<li class="cards-view-item">
<a class="cards-view-link" href="catalog.html?view=list">
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_172287_295)"><path d="M2 0H0V2H2V0Z" fill="black" /><path d="M16 0H4V2H16V0Z" fill="black" />
<path d="M2 4H0V6H2V4Z" fill="black" /><path d="M16 4H4V6H16V4Z" fill="black" /><path d="M2 8H0V10H2V8Z" fill="black" /><path d="M16 8H4V10H16V8Z" fill="black" />
<path d="M2 12H0V14H2V12Z" fill="black" /><path d="M16 12H4V14H16V12Z" fill="black" /></g><defs><clipPath id="clip0_172287_295"><rect width="16" height="14" fill="white" /></clipPath></defs>
</svg>
<span class="visually-hidden">Отображение списком</span>
</a>
</li>
</ul>
</div>
<ul class="cards-list list-none">
<li class="cards-item">
<img src="images/hotel-1.jpg" width="300" height="212" alt="Amara Resort & Spa">
<h3 class="cards-item-title">Amara Resort & Spa</h3>
<div class="cards-price-wrapper">
<span class="cards-item-type">Гостиница</span>
<span class="cards-item-price">От 4000 ₽</span>
</div>
<div class="cards-button-wrapper">
<a class="button button-primary button-cards" href="#">Подробнее</a>
<a class="button button-secondary button-cards" href="#">В избранное</a>
</div>
<div class="cards-rating-wrapper">
<div class="stars stars-four">
<span class="visually-hidden">Звёзды</span>
</div>
<p class="cards-item-rating">Рейтинг: 8,5</p></div>
</li>
<li class="cards-item">
<img src="images/hotel-2.jpg" width="300" height="212" alt="Villas at Poco Diablo">
<h3 class="cards-item-title">Villas at Poco Diablo</h3>
<div class="cards-price-wrapper">
<span class="cards-item-type">Гостиница</span>
<span class="cards-item-price">От 5000 ₽</span>
</div>
<div class="cards-button-wrapper">
<a class="button button-primary button-cards" href="#">Подробнее</a>
<a class="button button-active button-cards" href="#">В избранном</a>
</div>
<div class="cards-rating-wrapper">
<div class="stars stars-four">
<span class="visually-hidden">Звёзды</span>
</div>
<p class="cards-item-rating">Рейтинг: 9,2</p></div>
</li>
<li class="cards-item">
<img src="images/hotel-3.jpg" width="300" height="212" alt="Desert Quail Inn">
<h3 class="cards-item-title">Desert Quail Inn</h3>
<div class="cards-price-wrapper">
<span class="cards-item-type">Гостиница</span>
<span class="cards-item-price">От 2500 ₽</span>
</div>
<div class="cards-button-wrapper">
<a class="button button-primary button-cards" href="#">подробнее</a>
<a class="button button-secondary button-cards" href="#">в избранное</a></div>
<div class="cards-rating-wrapper">
<div class="stars stars-three">
<span class="visually-hidden">Звёзды</span>
</div>
<p class="cards-item-rating">Рейтинг: 6,9</p></div>
</li>
<li class="cards-item">
<img src="images/hotel-4.jpg" width="300" height="212" alt="GreenTree Inn">
<h3 class="cards-item-title">GreenTree Inn</h3>
<div class="cards-price-wrapper">
<span class="cards-item-type">Гостиница</span>
<span class="cards-item-price">От 1500 ₽</span>
</div>
<div class="cards-button-wrapper">
<a class="button button-primary button-cards" href="#">Подробнее</a>
<a class="button button-secondary button-cards" href="#">В избранное</a>
</div>
<div class="cards-rating-wrapper">
<div class="stars stars-two">
<span class="visually-hidden">Звёзды</span>
</div>
<p class="cards-item-rating">Рейтинг: 5,0</p>
</div>
</li>
</ul>
<ul class="pagination-list list-none">
<li class="pagination-item">
<a class="pagination-link pagination-link-current" href="#">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 link-more" href="#">...</a>
</li>
<li class="pagination-item">
<a class="pagination-link" href="#">10</a>
</li>
</ul>
</section>
<section class="subscription subscription-inner" data-test="subscribe">
<div class="subscription-wrapper">
<h2>Подпишитесь на рассылку</h2>
<p>Только полезная информация и никакого спама,<br> честное бойскаутское!</p>
<form class="newsletter-form" action="https://echo.htmlacademy.ru/" method="post">
<label for="newsletter-email" class="visually-hidden">Email</label>
<input class="field" type="email" name= "newsletter-email" id= "newsletter-email" placeholder="Ваш e-mail" required >
<button class="button button-large" type="submit">Подписаться</button>
</form>
</div>
</section>
</main>
<footer class="page-footer" data-test="footer">
<ul class="social-list list-none">
<li class="social-item">
<a class="social-link vk" href="https://vk.com/htmlacademy">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="15">
<path d="M24.12 1.8c.16-.54 0-.94-.8-.94H20.7c-.67 0-.98.34-1.15.73 0 0-1.33 3.2-3.22 5.27-.61.6-.9.8-1.23.8-.16 0-.41-.2-.41-.75v-5.1c0-.66-.19-.95-.74-.95H9.82c-.42 0-.67.3-.67.59 0 .62.95.76 1.04 2.51v3.8c0 .83-.15.98-.48.98-.9 0-3.06-3.2-4.34-6.88-.25-.72-.5-1-1.18-1H1.57c-.75 0-.9.34-.9.73 0 .68.89 4.07 4.14 8.55 2.17 3.06 5.23 4.72 8 4.72 1.68 0 1.88-.37 1.88-1v-2.32c0-.74.16-.88.7-.88.38 0 1.05.19 2.6 1.66 1.79 1.75 2.08 2.54 3.08 2.54h2.63c.75 0 1.12-.37.9-1.1-.23-.72-1.08-1.77-2.2-3.02-.62-.71-1.54-1.48-1.82-1.86-.39-.5-.28-.71 0-1.15 0 0 3.2-4.42 3.54-5.93Z" clip-rule="evenodd" />
</svg>
<span class="visually-hidden">Вконтакте</span>
</a>
<li class="social-item">
<a class="social-link telegram" href="https://t.me/htmlacademy">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16">
<path d="M16.79.96.84 7.1c-1.09.44-1.08 1.05-.2 1.32l4.1 1.28 9.47-5.98c.44-.27.85-.13.52.17l-7.68 6.93-.28 4.22c.41 0 .6-.2.83-.41l1.99-1.94 4.13 3.06c.77.42 1.31.2 1.5-.71l2.72-12.8c.28-1.1-.43-1.61-1.16-1.28Z" />
</svg>
<span class="visually-hidden">Telegram</span>
</a>
<li class="social-item">
<a class="social-link youtube" href="https://www.youtube.com/user/htmlacademyru">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="17">
<path d="M18.94.36H3.51C1.65.36.33 1.95.33 3.76v10.09c0 1.91 1.32 3.5 3.18 3.5h15.65c1.64 0 3.17-1.59 3.17-3.4V3.76c-.22-1.8-1.53-3.4-3.39-3.4ZM7.99 12.89V4.82l7.34 4.04-7.34 4.03Z" />
</svg>
<span class="visually-hidden">Youtube</span>
</a>
</li>
</ul>
<div class="contact-number">
<a class="contact-link" href="tel:+78128121212">+7 (812) 812-12-12</a>
</div>
<a class="footer-logo" href="https://htmlacademy.ru/intensive/htmlcss">
<svg xmlns="http://www.w3.org/2000/svg" width="115" height="34">
<g clip-path="url(#a)">
<path d="M0 13.26v2.6h2.5v-2.6H0ZM11.6 4.86c-1.6 0-2.8.7-3.6 1.7h-.1V.36h-2v15.5h2v-5.3c0-2.1 1.3-3.6 3.3-3.6 1.8 0 2.9 1.4 2.9 3.2v5.7h2v-6.1c.1-3-1.8-4.9-4.5-4.9ZM26.6 5.16h-4.8v-3.7h-2v3.8h-1.9v2h1.9v6c0 1.7 1 2.7 2.7 2.7h4.1v-2h-3.7c-.7 0-1.1-.4-1.1-1.1v-5.7h4.8v-2ZM41.1 4.96c-1.6 0-2.9.8-3.5 2.1h-.1c-.6-1.2-1.8-2.1-3.4-2.1-1.4 0-2.5.8-3.1 1.8h-.1v-1.6H29v10.6h2v-5.4c0-2 1-3.5 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2v-6.5c.1-2.5-1.4-4.3-3.9-4.3ZM47.8 13.06c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V.36h-2v12.7ZM28.9 20.06c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2v-10.6h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.4 3.6-3.6 3.6ZM44.2 22.36c-.5-2.4-2.6-4.1-5.4-4.1a5.4 5.4 0 0 0-5.6 5.6c0 3.1 2.2 5.6 5.6 5.6 2.8 0 4.9-1.8 5.4-4.2h-2.1a3.4 3.4 0 0 1-3.3 2.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6c1.6 0 2.8 1 3.3 2.2h2.1v-.2ZM55.1 20.06c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2v-10.6h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.5 3.6-3.6 3.6ZM68.7 20.16c-.9-1.1-2.2-1.9-3.9-1.9-3.1 0-5.4 2.3-5.4 5.6s2.2 5.6 5.4 5.6c1.7 0 3-.8 3.8-1.8h.1v1.5h2v-15.4h-2v6.4Zm-3.6 7.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.5 3.6-3.6 3.6ZM78.3 18.26c-3.3 0-5.5 2.5-5.5 5.6 0 3 2.1 5.6 5.5 5.6 2.5 0 4.5-1.3 5.2-3.6h-2.1c-.5 1-1.6 1.6-3 1.6-1.9 0-3.3-1.3-3.4-2.9h8.8c.2-3.6-2-6.3-5.5-6.3Zm0 1.9c1.7 0 3 1 3.3 2.6h-6.5c.3-1.5 1.5-2.6 3.2-2.6ZM98.2 18.26c-1.6 0-2.9.8-3.6 2h-.1c-.6-1.2-1.8-2-3.4-2-1.4 0-2.5.7-3.1 1.8v-1.5h-1.9v10.6h2v-5.4c0-2 1-3.4 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2v-6.5c.1-2.6-1.4-4.4-3.9-4.4ZM109.4 27.36l-3.6-8.9h-2.2l4.8 11.6c-.3.9-.7 1.2-1.7 1.2h-2.5v2h2.5c1.8 0 2.8-.8 3.5-2.6l4.7-12.2h-2.1l-3.4 8.9Z" />
</g>
<defs>
<clipPath id="a">
<path d="M0 .36h115v33H0z" />
</clipPath>
</defs>
</svg>
</a>
</footer>
</body>
</html>