-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcatalog.html
251 lines (244 loc) · 19.1 KB
/
catalog.html
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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<title>Каталог</title>
<link href="favicon.ico" rel="icon">
<link href="img/favicon/favicon.svg" rel="icon" type="image/svg+xml">
<link href="img/favicon/apple.png" rel="apple-touch-icon">
<link href="manifest.webmanifest" rel="manifest">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body class="page-body">
<header class="main-header">
<nav class="main-navigation">
<a class="header-logo-center" href="index.html">
<img src="img/logo.svg" alt="логотип Седоны" width="138" height="70">
</a>
<ul class="site-navigation">
<li class="item-navigation">
<a class="link-nav" href="blank.html">Информация</a>
</li>
<li class="item-navigation">
<a class="link-nav" href="blank.html">Фото и видео</a>
</li>
<li class="item-navigation">
<a class="link-nav" href="blank.html">Карта штата</a>
</li>
<li class="item-navigation">
<a class="link-nav current" href="#">Гостиницы</a>
</li>
</ul>
</nav>
</header>
<main class="container">
<section class="filters">
<form class="filters-form" method="GET" action="https://echo.htmlacademy.ru/">
<fieldset class="filters-form__name">
<legend class="filters-form__legend">Инфраструктура:</legend>
<ul>
<li class="filters-form__block">
<input class="filters-form__input visually-hidden" type="checkbox" name="swpool" id="swpool" checked>
<label class="filters-form__item" for="swpool">Бассейн</label>
</li>
<li class="filters-form__block">
<input class="filters-form__input visually-hidden" type="checkbox" name="parking" id="parking">
<label class="filters-form__item" for="parking">Парковка</label>
</li>
<li class="filters-form__block">
<input class="filters-form__input visually-hidden" type="checkbox" name="wifi" id="wifi">
<label class="filters-form__item" for="wifi">Wi-Fi</label>
</li>
</ul>
</fieldset>
<fieldset class="filters-form__name">
<legend class="filters-form__legend">Тип жилья:</legend>
<ul>
<li class="filters-form__block">
<input class="filters-form__input visually-hidden" type="checkbox" name="hotel" id="hotel" checked>
<label class="filters-form__item" for="hotel">Гостиница</label>
</li>
<li class="filters-form__block">
<input class="filters-form__input visually-hidden" type="checkbox" name="motel" id="motel" checked>
<label class="filters-form__item" for="motel">Мотель</label>
</li>
<li class="filters-form__block">
<input class="filters-form__input visually-hidden" type="checkbox" name="apart" id="apart" checked>
<label class="filters-form__item" for="apart">Апартаменты</label>
</li>
</ul>
</fieldset>
<fieldset class="filters-form__name range">
<legend class="filters-form__legend">Стоимость в сутки (Р):</legend>
<div class="range-filter">
<div class="price-controls">
<label class="min-price">
от <input class="filters-form__input_number" type="text" name="min-price" value="0">
</label>
<label class="max-price">
до <input class="filters-form__input_number" type="text" name="max-price" value="15000">
</label>
</div>
<div class="range-controls">
<div class="scale">
<div class="bar"></div>
</div>
<div class="toggle toggle-min" tabindex="0"></div>
<div class="toggle toggle-max" tabindex="0"></div>
<button class="filters-button" type="submit">Показать</button>
</div>
</div>
</fieldset>
</form>
</section>
<section class="result-search">
<div class="result-search-container">
<h2 class="result-search__caption">Найдено: 3</h2>
<p class="result-search__text">Сортировка:</p>
<ul class="select-list">
<li class="select-item"><a class="select-item__link current">По цене</a></li>
<li class="select-item"><a class="select-item__link" href="#">По типу</a></li>
<li class="select-item"><a class="select-item__link" href="#">По рейтингу</a></li>
</ul>
<p class="result-serch-button__block">
<button type="button" class="select-list-control up">
<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 0L0 10H11L5.5 0Z" fill="#CACACA"/>
</svg>
</button>
<button type="button" class="select-list-control down">
<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10L0 0H11" fill="#CACACA"/>
</svg>
</button>
</p>
</div>
<ul class="result-search-list">
<li class="result-search-item">
<img src="img/hotel-1.jpg" alt="отель" width="135" height="90">
<div class="result-search-item__wrapper">
<div class="wrp">
<h3><a class="item-link" href="">Amara Resort & Spa</a></h3>
<div class="price-wrap">
<span>Гостиница</span>
<span>От 4000 Р.</span>
<span class="visually-hidden">4 звезды</span>
</div>
<div class="buttons-wrap">
<a class="result-search-link" href="#">Подробнее</a>
<button class="result-search-button" type="button">Забронировать</button>
</div>
</div>
<div class="result-search-rating">
<div class="stars">
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
</div>
<span class="result-search-rate">Рейтинг: 8,5</span>
</div>
</div>
</li>
<li class="result-search-item">
<img src="img/hotel-2.jpg" alt="отель" width="135" height="90">
<div class="result-search-item__wrapper">
<div class="wrp">
<h3><a class="item-link" href="">Desert Quail Inn</a></h3>
<div class="price-wrap">
<span>Мотель</span>
<span>От 3000 Р.</span>
<span class="visually-hidden">3 звезды</span>
</div>
<div class="buttons-wrap">
<a class="result-search-link" href="#">Подробнее</a>
<button class="result-search-button" type="button">Забронировать</button>
</div>
</div>
<div class="result-search-rating">
<div class="stars">
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
</div>
<div class="result-search-rate">Рейтинг: 8,9</div>
</div>
</div>
</li>
<li class="result-search-item">
<img src="img/hotel-3.jpg" alt="отель" width="135" height="90">
<div class="result-search-item__wrapper">
<div class="wrp">
<h3><a class="item-link" href="">Villas at Poco Diablo</a></h3>
<div class="price-wrap">
<span>Апартаменты</span>
<span>От 2000 Р.</span>
<span class="visually-hidden">2 звезды</span>
</div>
<div class="buttons-wrap">
<a class="result-search-link" href="#">Подробнее</a>
<button class="result-search-button" type="button">Забронировать</button>
</div>
</div>
<div class="result-search-rating">
<div class="stars">
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.002 0L11.128 6.494H18.005L12.441 10.506L14.566 17L9.002 12.987L3.438 17L5.564 10.506L0 6.494H6.878L9.002 0Z" fill="#81B3D2"/>
</svg>
</div>
<div class="result-search-rate">Рейтинг: 9,2</div>
</div>
</div>
</li>
</ul>
</section>
</main>
<footer class="footer footer-page">
<div class="footer-container">
<div class="footer-contacts">
<h3 class="visually-hidden">Контакты</h3>
<p>#visitSEDONA</p>
<p>ТЕЛ:<a class="footer-phone" href="tel:+74956660166">+7(495) 666-01-66</a></p>
</div>
<div class="footer-social">
<a class="social-button" href="https://twitter.com">
<img src="img/icon-twitter.svg" alt="twitter" width="17" height="15">
</a>
<a class="social-button" href="https://facebook.com">
<img src="img/icon-fb.svg" alt="facebook" width="12" height="22">
</a>
<a class="social-button" href="https://youtube.com">
<img src="img/icon-youtube.svg" alt="youtube" width="20" height="16">
</a>
</div>
<p class="footer-copyright">
<span class="footer-logo__wrapper">Website by
<a class="footer-logo" href="https://htmlacademy.ru/intensive/htmlcss">
<svg width="115" height="41" viewBox="0 0 115 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5197 1.05737H15.3509L0 2.71895V31.4945L15.3509 40.8382L30.7018 31.4945V2.71895L15.5197 1.05737ZM77.0183 2.62185H75.0876V15.7311H77.0183V2.62185ZM40.8619 2.63264V7.76843C41.6131 6.9864 42.6386 6.5436 43.7105 6.53843C44.6823 6.47908 45.6329 6.84495 46.3253 7.54479C47.0177 8.24462 47.3866 9.21244 47.3399 10.2068V15.7634H45.367V10.4658C45.4231 9.94897 45.2754 9.43059 44.9566 9.02553C44.6377 8.62047 44.174 8.36218 43.6683 8.3079H43.3518C42.3456 8.36979 41.4321 8.9295 40.9041 9.80764V15.7634H38.8995V2.63264H40.8619ZM77.0183 31.4837H75.2775V30.0595C74.4828 31.1353 73.23 31.7538 71.9119 31.7211C69.4751 31.5528 67.5825 29.4822 67.5825 26.9845C67.5825 24.4867 69.4751 22.4162 71.9119 22.2479C73.1195 22.2052 74.2818 22.7203 75.0771 23.6505V18.3205H77.0183V31.4837ZM47.0656 30.0595C47.263 30.0515 47.4583 30.0152 47.6459 29.9516V31.3866C47.2482 31.5404 46.826 31.6172 46.4009 31.6132C45.6482 31.6769 44.9394 31.2429 44.639 30.5342C43.7036 31.31 42.5302 31.7227 41.3261 31.6995C39.733 31.6995 38.256 30.804 38.256 28.9482C38.256 26.65 40.3661 25.9379 42.1702 25.9379C42.9402 25.9505 43.707 26.0408 44.4596 26.2076V25.884C44.4596 24.805 43.6578 23.9742 42.1491 23.9742C41.0585 23.9764 39.9804 24.2116 38.9839 24.6647V22.8305C40.0678 22.451 41.204 22.2506 42.3495 22.2371C44.8394 22.2371 46.3693 23.4455 46.3693 26.1753V29.4121C46.3546 29.5668 46.401 29.721 46.4981 29.8406C46.5951 29.9601 46.7349 30.035 46.8862 30.0487H47.0656V30.0595ZM40.2711 28.8403C40.298 29.229 40.4761 29.5905 40.7655 29.844C41.055 30.0974 41.4317 30.2217 41.8115 30.189H41.9275C42.8819 30.1906 43.7973 29.8022 44.4702 29.11V27.5779C43.842 27.4414 43.2026 27.3655 42.5605 27.3513C41.5055 27.3513 40.2817 27.7074 40.2817 28.8403H40.2711ZM56.0229 22.9384C55.1962 22.4632 54.2596 22.2246 53.3115 22.2479H52.9422C51.7332 22.2873 50.5891 22.8166 49.7619 23.7192C48.9347 24.6218 48.4923 25.8236 48.5321 27.06V27.5024C48.6957 30.0004 50.805 31.8921 53.2482 31.7318C54.2519 31.7555 55.2477 31.5452 56.1601 31.1168V29.2718C55.3769 29.7215 54.4945 29.9591 53.5963 29.9624C52.5199 30.0288 51.4963 29.4793 50.9385 28.5356C50.3806 27.5918 50.3806 26.4095 50.9385 25.4658C51.4963 24.522 52.5199 23.9725 53.5963 24.039C54.461 24.0357 55.3066 24.2989 56.0229 24.7942V22.9384ZM66.1514 30.0595C66.3488 30.0515 66.5441 30.0152 66.7317 29.9516V31.3866C66.334 31.5404 65.9118 31.6172 65.4867 31.6132C64.734 31.6769 64.0252 31.2429 63.7248 30.5342C62.7894 31.31 61.616 31.7227 60.4119 31.6995C58.8188 31.6995 57.3417 30.804 57.3417 28.9482C57.3417 26.65 59.4518 25.9379 61.256 25.9379C62.0259 25.9505 62.7928 26.0408 63.5454 26.2076V25.884C63.5454 24.805 62.7436 23.9742 61.2349 23.9742C60.1443 23.9764 59.0662 24.2116 58.0697 24.6647V22.8305C59.1536 22.451 60.2897 22.2506 61.4353 22.2371C63.9252 22.2371 65.455 23.4455 65.455 26.1753V29.4121C65.4404 29.5668 65.4868 29.721 65.5838 29.8406C65.6809 29.9601 65.8207 30.035 65.972 30.0487H66.1514V30.0595ZM59.855 29.8481C59.5632 29.5943 59.3837 29.2311 59.3569 28.8403H59.378C59.378 27.7074 60.5385 27.3513 61.6569 27.3513C62.299 27.3655 62.9383 27.4414 63.5665 27.5779V29.11C62.8937 29.8022 61.9782 30.1906 61.0239 30.189H60.9078C60.5263 30.2247 60.1469 30.1019 59.855 29.8481ZM69.3271 26.9305C69.3271 25.2859 70.6308 23.9526 72.239 23.9526L72.2601 24.0066C73.4742 24.0066 74.5742 24.7382 75.0665 25.8732V28.0311C74.5856 29.1871 73.4673 29.9296 72.239 29.9084C70.6308 29.9084 69.3271 28.5752 69.3271 26.9305ZM83.3486 22.2479C86.8408 22.2479 88.0541 25.1395 87.4844 27.7397H80.922C81.1436 29.3582 82.6839 30.0163 84.2876 30.0163C85.2509 30.0196 86.2027 29.8021 87.0729 29.3797V31.1061C86.0736 31.5421 84.9939 31.7519 83.9078 31.7211C81.2385 31.7211 78.8963 30.189 78.8963 26.9521C78.8362 25.7502 79.2482 24.5736 80.0408 23.6841C80.8334 22.7945 81.9408 22.2658 83.1165 22.2155H83.3486V22.2479ZM80.8693 26.1753C80.9704 24.8237 82.1216 23.8104 83.4436 23.9095H83.4858C84.1064 23.8531 84.7196 24.08 85.1612 24.5295C85.6028 24.979 85.8275 25.6051 85.7752 26.24H80.8693V26.1753ZM89.489 31.4621V22.4961H91.2298V23.575C91.9777 22.7197 93.041 22.2229 94.1628 22.2047C95.2951 22.1328 96.3712 22.7163 96.9482 23.7153C97.7407 22.8335 98.8477 22.3161 100.018 22.2803C100.952 22.2327 101.859 22.6011 102.507 23.2901C103.154 23.9792 103.478 24.9213 103.394 25.8732V31.4837H101.39V25.9271C101.437 25.4734 101.306 25.0191 101.024 24.6647C100.743 24.3104 100.336 24.0852 99.8917 24.039H99.6174C98.7512 24.0941 97.9525 24.536 97.4335 25.2474V31.4837H95.4289V25.9271C95.4728 25.47 95.3357 25.0139 95.0481 24.6611C94.7606 24.3082 94.3467 24.088 93.8991 24.0497H93.6881C92.7466 24.1344 91.8915 24.6449 91.3564 25.4416V31.5161H89.5312L89.489 31.4621ZM113.977 22.4745H111.972L109.324 29.2718L106.306 22.4853H104.196L108.417 31.5484L108.237 32.0016C107.72 33.3611 107.003 34.0516 106.053 34.0516C105.75 34.0548 105.447 34.0112 105.156 33.9221V35.6161C105.536 35.7125 105.926 35.7632 106.317 35.7671C107.646 35.7671 108.902 35.0226 109.851 32.6813L113.977 22.4745ZM52.689 6.78658V3.54974L50.7266 4.01369V6.73264H49.144V8.49132H50.7899V12.9905C50.7231 13.817 51.0244 14.6301 51.61 15.2038C52.1955 15.7775 53.0028 16.0505 53.8073 15.9468C54.5996 15.9535 55.3875 15.8259 56.139 15.5692V13.8429C55.5727 14.0781 54.9672 14.199 54.356 14.199C53.2165 14.199 52.689 13.8105 52.689 12.6237V8.5129H55.8541V6.78658H52.689ZM58.3862 15.7526V6.75421H60.1376V7.83316C60.8811 6.97655 61.9403 6.476 63.0601 6.45211C64.1624 6.38099 65.2146 6.93142 65.8032 7.88711C66.5958 7.00534 67.7028 6.48794 68.8734 6.45211C69.8138 6.41462 70.7233 6.79859 71.364 7.50353C72.0046 8.20846 72.3126 9.16418 72.2073 10.1205V15.7418H70.2028V10.1853C70.2499 9.73151 70.1184 9.27721 69.8373 8.92287C69.5561 8.56853 69.1485 8.34334 68.7046 8.29711H68.4619C67.5957 8.35228 66.797 8.7942 66.278 9.50553V15.7418H64.2734V10.1853C64.3206 9.73151 64.1891 9.27721 63.9079 8.92287C63.6268 8.56853 63.2191 8.34334 62.7752 8.29711H62.5326C61.5911 8.38181 60.736 8.89229 60.2009 9.68895V15.7634H58.3862V15.7526ZM28.6972 30.3033L28.7078 30.2968L28.6972 30.3184V30.3033ZM28.6972 18.3205V30.3033L15.3509 38.4321L2.00459 30.3184V18.5147L15.2876 26.6068V28.0311L6.18257 22.5284V23.9418L15.3404 29.5632V31.0629L6.19312 25.4955V26.9521L15.3509 32.5734L24.5826 26.9197V20.8129L28.6972 18.3205ZM28.7078 16.7776L25.0362 18.9355L23.3482 20.0145L15.3087 15.0837V16.4971L22.156 20.7266L22.0083 20.8237L20.9532 21.4063L15.2876 17.9537V19.3995L19.761 22.1184L18.706 22.8413L15.3298 20.7913V22.2047L17.5454 23.5426L15.2982 24.9021L2.11009 16.864L15.3087 8.72869L28.7078 16.7776ZM15.2876 7.27211L28.7078 15.3534V4.56395L15.3615 3.12895L2.01514 4.56395V15.3534L15.2876 7.27211Z" fill="#231F20"/>
</svg>
</a>
</span>
</p>
</div>
</footer>
</body>
</html>