-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
328 lines (323 loc) · 24.5 KB
/
index.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
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
325
326
327
328
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Седона</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="icon" href="favicon.ico">
<link rel="shortcut icon" href="images/favicon.png" type="image/png">
</head>
<body>
<header class="page-header">
<nav class="navigation">
<a class="navigation-logo" href="index.html">
<img src="images/logo.svg" class="logo" width="140" height="70" alt="Логотип города Седона">
</a>
<ul class="navigation-list">
<li class="navigation-item ">
<a class="navigation-link navigation-link-current" href="index.html">Главная</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="about.html">О Седоне</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="catalog.html">Гостиницы</a>
</li>
</ul>
<ul class="controls-list">
<li class="controls-item">
<button class="controls-button-search" type="button">
<span class="visually-hidden">Поиск</span>
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.8928 17.0083L15.1928 13.3287C16.1928 12.0359 16.8928 10.3453 16.8928 8.4558C16.8928 4.08011 13.2928 0.5 8.89282 0.5C4.49282 0.5 0.892822 4.17956 0.892822 8.55525C0.892822 12.9309 4.49282 16.511 8.89282 16.511C10.6928 16.511 12.3928 15.9144 13.7928 14.8204L17.4928 18.5L18.8928 17.0083ZM8.89282 14.5221C5.59282 14.5221 2.89282 11.837 2.89282 8.55525C2.89282 5.27348 5.59282 2.5884 8.89282 2.5884C12.1928 2.5884 14.8928 5.27348 14.8928 8.55525C14.8928 11.837 12.1928 14.5221 8.89282 14.5221Z"
fill="black" />
</svg>
</button>
</li>
<li class="controls-item">
<a class="controls-button-favorite">
<span class="visually-hidden">Добавить в избранное</span>
<div class="favorite-block" aria-label="Избранное, 12 в избранном">
<span class="favorite-count">
19
</span>
</div>
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.29282 17C8.99282 17 8.69282 16.9 8.49282 16.6C3.09282 10.5 1.79282 9.1 1.49282 8.7C0.792822 7.8 0.392822 6.6 0.392822 5.4C0.392822 2.4 2.79282 0 5.89282 0C7.19282 0 8.39282 0.5 9.39282 1.3C10.3928 0.5 11.6928 0 12.8928 0C15.8928 0 18.3928 2.4 18.3928 5.4C18.3928 6.7 17.8928 7.9 17.0928 8.8L10.0928 16.7C9.89282 16.9 9.69282 17 9.29282 17ZM3.29282 7.5C3.59282 7.9 6.79282 11.5 9.39282 14.4L15.5928 7.4C16.0928 6.9 16.2928 6.2 16.2928 5.4C16.2928 3.6 14.7928 2.1 12.9928 2.1C11.9928 2.1 10.9928 2.6 10.2928 3.4C9.99282 3.7 9.69282 3.8 9.39282 3.8C9.09282 3.8 8.79282 3.6 8.59282 3.4C7.89282 2.6 6.89282 2.1 5.89282 2.1C4.09282 2.1 2.59282 3.6 2.59282 5.4C2.49282 6.3 2.89282 7 3.29282 7.5C3.19282 7.5 3.19282 7.5 3.29282 7.5Z"
fill="black" />
</svg>
</a>
</li>
<li class="controls-item">
<a class="controls-link button-browm" href="catalog.html">Хочу сюда!</a>
</li>
</ul>
</nav>
</header>
<main>
<h1 class="visually-hidden">Седона-город в Аризоне</h1>
<section class="intro">
<h2 class="visually-hidden">Добро пожаловать в великолепную Седону "Потому что Гранд-Каньон отстой"</h2>
<div class="intro-text">
<img class="intro-img-welcome" src="images/welcome.svg" width="188" height="45" alt="">
<img class="intro-img-gorgeous-place" src="images/to-the-gorgeous.svg" width="256" height="29" alt="">
<img class="intro-img-sedona" src="images/sedona-hero.svg" width="457" height="213" alt="">
</div>
</section>
<section class="main-title">
<div class="title-text">
<h2 class="title-main">Седона — небольшой городок в Аризоне, заслуживающий большего!</h2>
<p class="info">Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!</p>
</div>
</section>
<section class="advantages">
<ul class="advantages-list">
<li class="advantages-item advantages-item--with-img">
<div class="text-wrapper">
<h3 class="advantages-title advantages-title--on-blue">Настоящий городок</h3>
<p class="advantages-description"> Седона — не аттракцион для туристов, там течёт своя жизнь</p>
</div>
<img class="advantages-img-city" src="images/city.jpg" width="800" height="384"
alt="Фото красивого города с фоном в виде гор">
</li>
<li class="advantages-item advantages-item--no-img">
<h3 class="advantages-title">Небольшая площадь</h3>
<p class="advantages-description">Все достопримечательности находятся очень близко</p>
</li>
<li class="advantages-item advantages-item--no-img">
<h3 class="advantages-title">Красивая дорога</h3>
<p class="advantages-description">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</li>
<li class="advantages-item advantages-item--no-img">
<h3 class="advantages-title">Мало туристов</h3>
<p class="advantages-description">Большинство едет в Гранд Каньон и толпится там</p>
</li>
<li class="advantages-item advantages-item--with-img">
<div class="text-wrapper">
<h3 class="advantages-title advantages-title--on-blue">Там есть<br>мост дьявола</h3>
<p class="advantages-description">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
</div>
<img class="advantages-img-canyon" src="images/canyon.jpg" width="800" height="384"
alt="Фотография моста дявола">
</li>
<li class="advantages-item advantages-item--with-icon">
<h3 class="advantages-title--below-icon">Жильё</h3>
<p class="advantages-description">Рекомендуем пожить<br>в настоящем мотеле,<br>всё как в кино!</p>
</li>
<li class="advantages-item advantages-item--with-icon">
<h3 class="advantages-title--below-icon">Еда</h3>
<p class="advantages-description">Всегда заказывайте<br>топовый фирменный бургер,<br>вы не разочаруетесь!
</p>
</li>
<li class="advantages-item advantages-item--with-icon">
<h3 class="advantages-title--below-icon">Сувениры</h3>
<p class="advantages-description">Не только китайского,<br>но и настоящего местного производства!</p>
</li>
</ul>
</section>
<section class="hotel-search">
<h2 class="hotel-search-title">Заинтересовались?</h2>
<p class="hotel-search-text">Укажите предполагаемые даты поездки,<br>и мы покажем вам лучшие предложения
гостиниц в
Седоне</p>
<button class="hotel-search-button button-browm" type="button">Поиск гостиницы в
Седоне</button>
</section>
</main>
<section class="subscribe-block subscribe-bg">
<h2 class="subscribe-title">Подпишитесь на рассылку</h2>
<p class="subscribe-text">Только полезная информация и никакого спама, честное бойскаутское!</p>
<form class="subscribe-form" action="https://echo.htmlacademy.ru/" method="post">
<label class="visually-hidden" for="subscribe-email">Поле ввода мэйла для оформления подписки</label>
<input class="email-input-white" type="email" placeholder="Ваш e-mail" id="subscribe-email"
name="subscribe-email" required>
<button class="subscribe-button button-blue" type="submit" value="Подписаться">Подписаться</button>
</form>
</section>
<footer class="page-footer">
<section class="contacts">
<h2 class="visually-hidden">Контакты</h2>
<ul class="footer-contacts-list">
<li class="socials">
<a class="social-link" href="https://vk.com/htmlacademy">
<span class="visually-hidden">Вконтакте</span>
<svg class="vk" width="24" height="14" viewBox="0 0 24 14" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M23.9498 0.948C24.1158 0.402 23.9498 0 23.1548 0H20.5298C19.8618 0 19.5538 0.347 19.3868 0.73C19.3868 0.73 18.0518 3.926 16.1608 6.002C15.5488 6.604 15.2708 6.795 14.9368 6.795C14.7698 6.795 14.5188 6.604 14.5188 6.057V0.948C14.5188 0.292 14.3348 0 13.7788 0H9.65076C9.23376 0 8.98276 0.304 8.98276 0.593C8.98276 1.214 9.92876 1.358 10.0258 3.106V6.904C10.0258 7.737 9.87276 7.888 9.53876 7.888C8.64876 7.888 6.48376 4.677 5.19876 1.003C4.94976 0.288 4.69776 0 4.02676 0H1.39976C0.649756 0 0.499756 0.347 0.499756 0.73C0.499756 1.412 1.38976 4.8 4.64476 9.281C6.81476 12.341 9.86976 14 12.6528 14C14.3218 14 14.5278 13.632 14.5278 12.997V10.684C14.5278 9.947 14.6858 9.8 15.2148 9.8C15.6048 9.8 16.2718 9.992 17.8298 11.467C19.6098 13.216 19.9028 14 20.9048 14H23.5298C24.2798 14 24.6558 13.632 24.4398 12.904C24.2018 12.18 23.3518 11.129 22.2248 9.882C21.6128 9.172 20.6948 8.407 20.4158 8.024C20.0268 7.533 20.1378 7.314 20.4158 6.877C20.4158 6.877 23.6158 2.451 23.9488 0.948H23.9498Z" />
</svg>
</a>
<a class="social-link" href="https://telegram.me/htmlacademy">
<span class="visually-hidden">Телеграмм</span>
<svg class="telegram" width="18" height="15" viewBox="0 0 18 15" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.2853 0.0992597L1.34073 6.24776C0.252584 6.68481 0.258879 7.29184 1.14109 7.56253L5.23469 8.83953L14.7061 2.8637C15.1539 2.59121 15.5631 2.7378 15.2268 3.03636L7.55308 9.96185H7.55128L7.55308 9.96275L7.2707 14.1823C7.68438 14.1823 7.86693 13.9925 8.09895 13.7686L10.0873 11.8351L14.2232 14.89C14.9858 15.31 15.5334 15.0941 15.7232 14.1841L18.4382 1.38885C18.7161 0.274623 18.0128 -0.229883 17.2853 0.0992597Z" />
</svg>
</a>
<a class="social-link" href="https://www.youtube.com/user/htmlacademyru">
<span class="visually-hidden">Ютуб-канал</span>
<svg class="youtube" width="23" height="21" viewBox="0 0 23 18" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.1072 0.5H3.67437C1.81368 0.5 0.500244 2.09375 0.500244 3.9V13.9937C0.500244 15.9062 1.81368 17.5 3.67437 17.5H19.3261C20.9679 17.5 22.5002 15.9062 22.5002 14.1V3.9C22.2813 2.09375 20.9679 0.5 19.1072 0.5ZM8.16194 13.0375V4.9625L15.4953 9L8.16194 13.0375Z" />
</svg>
</a>
</li>
<li>
<a class="contacts-phone-number" href="tel:88128121212">+7 (812) 812-12-12</a>
</li>
<li>
<a class="footer-academy-link" href="https://htmlacademy.ru/">
<span class="visually-hidden">HTML Academy</span>
<svg class="academy" width="115" height="33" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 6.2c.8-1 2-1.7 3.6-1.7 2.7 0 4.6 1.9 4.5 4.9v6.1h-2V9.8c0-1.8-1.1-3.2-2.9-3.2-2 0-3.3 1.5-3.3 3.6v5.3h-2V0h2v6.2H8Zm-8 9.3v-2.6h2.5v2.6H0ZM26.6 4.8h-4.8V1.1h-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.1V6.8h4.8v-2Zm11 1.9c.6-1.3 1.9-2.1 3.5-2.1 2.5 0 4 1.8 3.9 4.3v6.5h-2V9.1c0-1.6-.9-2.6-2.4-2.6-1.2 0-2.6.9-2.6 3.3v5.6h-2V9.1c0-1.6-.9-2.6-2.4-2.6C32 6.5 31 8 31 10v5.4h-2V4.8h1.9v1.6h.1c.6-1 1.7-1.8 3.1-1.8 1.6 0 2.8.9 3.4 2.1h.1Zm10.2 6c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V0h-2v12.7ZM25 17.9c1.7 0 3 .7 3.9 1.8v-1.5h2v10.6h-2v-1.6h-.1c-.8 1.1-2 1.9-3.8 1.9-3.1 0-5.4-2.3-5.4-5.6s2.3-5.6 5.4-5.6Zm-3.3 5.6c0 2 1.4 3.6 3.6 3.6s3.6-1.7 3.6-3.6c0-2-1.4-3.6-3.6-3.6s-3.6 1.6-3.6 3.6ZM44.2 22c-.5-2.4-2.6-4.1-5.4-4.1-3.4 0-5.6 2.5-5.6 5.6 0 3.1 2.2 5.6 5.6 5.6 2.8 0 4.9-1.8 5.4-4.2h-2.1c-.4 1.3-1.7 2.3-3.3 2.3-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.1V22Zm7-4.1c1.7 0 3 .7 3.9 1.8v-1.5h2v10.6h-2v-1.6H55c-.8 1.1-2 1.9-3.8 1.9-3.1 0-5.4-2.3-5.4-5.6s2.3-5.6 5.4-5.6Zm-3.3 5.6c0 2 1.4 3.6 3.6 3.6 2.1 0 3.6-1.7 3.6-3.6 0-2-1.4-3.6-3.6-3.6s-3.6 1.6-3.6 3.6Zm20.8-3.7c-.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.5h2V13.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.6Zm7.7-3.6c0-3.1 2.2-5.6 5.5-5.6 3.5 0 5.7 2.7 5.5 6.3H75c.1 1.6 1.5 2.9 3.4 2.9 1.4 0 2.5-.6 3-1.6h2.1c-.7 2.3-2.7 3.6-5.2 3.6-3.4 0-5.5-2.6-5.5-5.6Zm8.8-1.1c-.3-1.6-1.6-2.6-3.3-2.6-1.7 0-2.9 1.1-3.2 2.6h6.5Zm16.6-4.5c-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.4Zm7.6.2 3.6 8.9 3.4-8.9h2.1l-4.7 12.2c-.7 1.8-1.7 2.6-3.5 2.6h-2.5v-2h2.5c1 0 1.4-.3 1.7-1.2l-4.8-11.6h2.2Z" />
</svg>
</a>
</li>
</ul>
</section>
</footer>
<div class="modal-container">
<div class="modal modal-hotel-search">
<button class="modal-close-button">
<span class="visually-hidden">Закрыть</span>
</button>
<h2 class="modal-title">Поиск гостиницы в Седоне</h2>
<form class="search-form" action="https://echo.htmlacademy.ru/" method="post">
<ul class="search-form-list">
<li class="search-form-item search-form-item--first-row">
<label class="date-input-label--check-in" for="check-in">Дата Заезда:</label>
<input class="search-form--prefered-date" type="text" id="check-in" placeholder="Укажите дату" required>
<button class="date-button--check-in">
<span class="visually-hidden">Кнопка выбора даты</span>
<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.14282 12C8.44282 12 8.64282 11.8 8.64282 11.5C8.64282 11.2 8.44282 11 8.14282 11C7.84282 11 7.64282 11.2 7.64282 11.5C7.64282 11.8 7.84282 12 8.14282 12Z" />
<path
d="M17.3928 4H15.3928V2H14.3928V4H6.39282V2H5.39282V4H3.39282C2.79282 4 2.39282 4.4 2.39282 5V16C2.39282 16.5 2.79282 17 3.39282 17H17.3928C17.8928 17 18.3928 16.5 18.3928 16V5C18.3928 4.4 17.8928 4 17.3928 4ZM17.3928 16H3.39282V9H17.3928V16ZM3.39282 8V5H5.39282V7H6.39282V5H14.3928V7H15.3928V5H17.3928V8H3.39282Z" />
<path
d="M10.3928 12C10.6928 12 10.8928 11.8 10.8928 11.5C10.8928 11.2 10.6928 11 10.3928 11C10.0928 11 9.89282 11.2 9.89282 11.5C9.89282 11.8 10.0928 12 10.3928 12Z" />
<path
d="M12.6428 12C12.9428 12 13.1428 11.8 13.1428 11.5C13.1428 11.2 12.9428 11 12.6428 11C12.3428 11 12.1428 11.2 12.1428 11.5C12.1428 11.8 12.3428 12 12.6428 12Z" />
<path
d="M8.14282 13C7.84282 13 7.64282 13.2 7.64282 13.5C7.64282 13.8 7.84282 14 8.14282 14C8.44282 14 8.64282 13.8 8.64282 13.5C8.64282 13.2 8.44282 13 8.14282 13Z" />
<path
d="M5.89282 12C6.19282 12 6.39282 11.8 6.39282 11.5C6.39282 11.2 6.19282 11 5.89282 11C5.59282 11 5.39282 11.2 5.39282 11.5C5.39282 11.8 5.59282 12 5.89282 12Z" />
<path
d="M5.89282 13C5.59282 13 5.39282 13.2 5.39282 13.5C5.39282 13.8 5.59282 14 5.89282 14C6.19282 14 6.39282 13.8 6.39282 13.5C6.39282 13.2 6.19282 13 5.89282 13Z" />
<path
d="M10.3928 13C10.0928 13 9.89282 13.2 9.89282 13.5C9.89282 13.8 10.0928 14 10.3928 14C10.6928 14 10.8928 13.8 10.8928 13.5C10.8928 13.2 10.6928 13 10.3928 13Z" />
<path
d="M12.6428 13C12.3428 13 12.1428 13.2 12.1428 13.5C12.1428 13.8 12.3428 14 12.6428 14C12.9428 14 13.1428 13.8 13.1428 13.5C13.1428 13.2 12.9428 13 12.6428 13Z"
fill="black" />
<path
d="M14.8928 12C15.1928 12 15.3928 11.8 15.3928 11.5C15.3928 11.2 15.1928 11 14.8928 11C14.5928 11 14.3928 11.2 14.3928 11.5C14.3928 11.8 14.5928 12 14.8928 12Z" />
<path
d="M14.8928 13C14.5928 13 14.3928 13.2 14.3928 13.5C14.3928 13.8 14.5928 14 14.8928 14C15.1928 14 15.3928 13.8 15.3928 13.5C15.3928 13.2 15.1928 13 14.8928 13Z" />
</svg>
</button>
<p class="past-date-error-text">Мы не можем отправить вас в прошлое.</p>
</li>
<li class="search-form-item search-form-item--second-row">
<label class="date-input-label--check-out" for="check-out">Дата Выезда:</label>
<input class="search-form--prefered-date" type="text" id="check-out" placeholder="Укажите дату" required>
<button class="date-button--check-out">
<span class="visually-hidden">Кнопка выбора даты</span>
<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.14282 12C8.44282 12 8.64282 11.8 8.64282 11.5C8.64282 11.2 8.44282 11 8.14282 11C7.84282 11 7.64282 11.2 7.64282 11.5C7.64282 11.8 7.84282 12 8.14282 12Z" />
<path
d="M17.3928 4H15.3928V2H14.3928V4H6.39282V2H5.39282V4H3.39282C2.79282 4 2.39282 4.4 2.39282 5V16C2.39282 16.5 2.79282 17 3.39282 17H17.3928C17.8928 17 18.3928 16.5 18.3928 16V5C18.3928 4.4 17.8928 4 17.3928 4ZM17.3928 16H3.39282V9H17.3928V16ZM3.39282 8V5H5.39282V7H6.39282V5H14.3928V7H15.3928V5H17.3928V8H3.39282Z" />
<path
d="M10.3928 12C10.6928 12 10.8928 11.8 10.8928 11.5C10.8928 11.2 10.6928 11 10.3928 11C10.0928 11 9.89282 11.2 9.89282 11.5C9.89282 11.8 10.0928 12 10.3928 12Z" />
<path
d="M12.6428 12C12.9428 12 13.1428 11.8 13.1428 11.5C13.1428 11.2 12.9428 11 12.6428 11C12.3428 11 12.1428 11.2 12.1428 11.5C12.1428 11.8 12.3428 12 12.6428 12Z" />
<path
d="M8.14282 13C7.84282 13 7.64282 13.2 7.64282 13.5C7.64282 13.8 7.84282 14 8.14282 14C8.44282 14 8.64282 13.8 8.64282 13.5C8.64282 13.2 8.44282 13 8.14282 13Z" />
<path
d="M5.89282 12C6.19282 12 6.39282 11.8 6.39282 11.5C6.39282 11.2 6.19282 11 5.89282 11C5.59282 11 5.39282 11.2 5.39282 11.5C5.39282 11.8 5.59282 12 5.89282 12Z" />
<path
d="M5.89282 13C5.59282 13 5.39282 13.2 5.39282 13.5C5.39282 13.8 5.59282 14 5.89282 14C6.19282 14 6.39282 13.8 6.39282 13.5C6.39282 13.2 6.19282 13 5.89282 13Z" />
<path
d="M10.3928 13C10.0928 13 9.89282 13.2 9.89282 13.5C9.89282 13.8 10.0928 14 10.3928 14C10.6928 14 10.8928 13.8 10.8928 13.5C10.8928 13.2 10.6928 13 10.3928 13Z" />
<path
d="M12.6428 13C12.3428 13 12.1428 13.2 12.1428 13.5C12.1428 13.8 12.3428 14 12.6428 14C12.9428 14 13.1428 13.8 13.1428 13.5C13.1428 13.2 12.9428 13 12.6428 13Z"
fill="black" />
<path
d="M14.8928 12C15.1928 12 15.3928 11.8 15.3928 11.5C15.3928 11.2 15.1928 11 14.8928 11C14.5928 11 14.3928 11.2 14.3928 11.5C14.3928 11.8 14.5928 12 14.8928 12Z" />
<path
d="M14.8928 13C14.5928 13 14.3928 13.2 14.3928 13.5C14.3928 13.8 14.5928 14 14.8928 14C15.1928 14 15.3928 13.8 15.3928 13.5C15.3928 13.2 15.1928 13 14.8928 13Z" />
</svg>
</button>
<p class="future-date-result-text">На эти даты есть свободные номера. Пока есть.</p>
</li>
<li class="search-form-item search-form-item--first-half-row">
<label class="number-of-people--lable" for="adults">Взрослые:</label>
<div class="number-input">
<button class="number-reduce-button">
<span class="visually-hidden">Кнопка умеьшения количества персон</span>
<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path d="M3.39282 9V11H17.3928V9H3.39282Z" />
</svg>
</button>
<input class="choseen-number-result kids-input" type="number" id="adults" value="2" min="1" max="9">
<button class="number-increase-button">
<span class="visually-hidden">Кнопка увеличения количества персон</span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path d="M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z" />
</svg>
</button>
</div>
</li>
<li class="search-form-item search-form-item--second-half-row">
<p class="number-of-people--label">
<label class="number-of-people--lable" for="kids">Дети:</label>
<span class="tooltip">
<button class="tooltip-toggle" type="button" aria-labelledby="tooltip-label-date">
<svg class="tooltip-icon" width="26" height="26" viewBox="0 0 26 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="13" cy="13" r="13" fill="#83B3D3" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H14V9H12V7ZM14 19H12V10H14V19Z"
fill="white" />
</svg>
</button>
<span class="tooltip-text" role="tooltip" id="tooltip-label-date">
Укажите количество детей, которые будут с вами, возраст которых от 6 до 18
лет. Дети до 6 лет размещаются бесплатно.
</span>
</span>
<div class="number-input">
<button class="number-reduce-button">
<span class="visually-hidden">Кнопка умеьшения количества персон</span>
<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path d="M3.39282 9V11H17.3928V9H3.39282Z" />
</svg>
</button>
<input class="choseen-number-result kids-input" type="number" id="kids" value="2" min="0" max="9">
<button class="number-increase-button">
<span class="visually-hidden">Кнопка увеличения количества персон</span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path d="M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z" />
</svg>
</button>
</div>
</li>
<li class="search-form-item">
<button class="search-form-button" type="submit">
Найти
</button>
</li>
</ul>
</form>
</div>
</div>
</body>
</html>