forked from htmlacademy-htmlcss/2314819-sedona-37
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcatalog.html
More file actions
419 lines (374 loc) · 25.5 KB
/
catalog.html
File metadata and controls
419 lines (374 loc) · 25.5 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
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
<!DOCTYPE html>
<html class="page" 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" href="images/icons/favicon.png">
</head>
<body class="page-body catalog-body">
<header class="page-header" data-test="header">
<nav class="page-header__navigation navigation">
<a class="logo" href="#" aria-current="page" tabindex="-1">
<img class="logo__image" src="images/logo.svg" width="139" height="70" alt="Логотип города Седона">
</a>
<ul class="list navigation__list">
<li class="navigation__item">
<a class="navigation__link" href="index.html">Главная</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">О Cедоне</a>
</li>
<li class="navigation__item">
<a class="navigation__link navigation__link--active" href="catalog.html">Гостиницы</a>
</li>
</ul>
<div class="navigation__user-menu user-menu">
<a class="user-menu__link menu-search" href="#">
<span class="visually-hidden">Поиск по сайту.</span>
</a>
<a class="user-menu__link favorites" aria-label="Перейти к списку избранного." href="#">
<span class="visually-hidden">Избранное.</span>
<span class="favorites__counter">12</span>
</a>
<button class="page-header__button button button-primary modal-open-button" type="button" aria-label="Открыть окно поиска гостиниц.">Хочу сюда!</button>
</div>
</nav>
</header>
<main class="page-main" data-test="main">
<section class="catalog-header">
<div class="catalog-header__content">
<h1 class="title page-main__title">Гостиницы Седоны</h1>
<ol class="list path-navigation">
<li class="path-navigation__item">
<a class="path-navigation__link" href="index.html">
<span class="visually-hidden">Переход на главную страницу сайта.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" aria-hidden="true" focusable="false">
<path class="path" fill="#fff" d="m6.37.5-6 5.8v6.2h12V6.3l-6-5.8Zm5 11h-10V6.7l5-4.8 5 4.8v4.8Z"/>
<path class="path" fill="#fff" d="M4.37 10.5h1V8h2v2.5h1V7h-4v3.5Z"/>
</svg>
</a>
</li>
<li class="path-navigation__item">
<a class="path-navigation__link" href="catalog.html">
Гостиницы
<span class="visually-hidden">Переход на страницу гостиниц.</span>
</a>
</li>
</ol>
<section class="filter" data-test="filter">
<h2 class="visually-hidden">Фильтр списка гостиниц.</h2>
<form class="filter__form" action="https://echo.htmlacademy.ru" method="get">
<fieldset class="filter__fieldset">
<legend class="filter__title">Инфраструктура:</legend>
<ul class="list filter__list">
<li class="filter__item">
<input class="filter__input" type="checkbox" id="swiming-pool" name="swiming-pool" checked>
<label class="filter__label" for="swiming-pool">Бассейн</label>
</li>
<li class="filter__item">
<input class="filter__input" type="checkbox" id="parking" name="parking" checked>
<label class="filter__label" for="parking">Парковка</label>
</li>
<li class="filter__item">
<input class="filter__input" type="checkbox" id="wi-fi" name="wi-fi">
<label class="filter__label" for="wi-fi">Wi-Fi</label>
</li>
</ul>
</fieldset>
<fieldset class="filter__fieldset">
<legend class="filter__title">Тип жилья:</legend>
<ul class="list filter__list">
<li class="filter__item">
<input class="filter__input" type="radio" id="hotel" name="dwelling" checked>
<label class="filter__label" for="hotel">Гостиница</label>
</li>
<li class="filter__item">
<input class="filter__input" type="radio" id="motel" name="dwelling">
<label class="filter__label" for="motel">Мотель</label>
</li>
<li class="filter__item">
<input class="filter__input" type="radio" id="apartments" name="dwelling">
<label class="filter__label" for="apartments">Апартаменты</label>
</li>
</ul>
</fieldset>
<fieldset class="filter__fieldset">
<legend class="filter__title">Стоимость, <span class="ruble">₽</span>:</legend>
<div class="filter__price price">
<div class="price__wrapper-inputs">
<label class="price__field">
<input class="price__input price__input-min" type="number" name="price-from" value="0" min="0" max="10000" step="500">
<span class="price__input-value">от</span>
</label>
<label class="price__field">
<input class="price__input price__input-max" type="number" name="price-to" value="9000" min="0" max="10000" step="500">
<span class="price__input-value">до</span>
</label>
</div>
<div class="price__range-line range-line">
<div class="range-line__wrapper" style="left:0; width:226px;">
<button class="range-line__toddler range-line__toddler-min" type="button" tabindex="-1">
<span class="visually-hidden">Ползунок выбора начальной цены.</span>
</button>
<button class="range-line__toddler range-line__toddler-max" type="button" tabindex="-1">
<span class="visually-hidden">Ползунок выбора конечной цены.</span>
</button>
</div>
</div>
</div>
</fieldset>
<div class="filter__buttons">
<button class="filter__button button button-secondary" aria-label="Применить указанные фильтры." type="submit">Применить</button>
<button class="filter__button button-reset button" aria-label="Сбросить указанные фильтры." type="reset">Сбросить</button>
</div>
</form>
</section>
</div>
</section>
<section class="catalog" data-test="catalog">
<div class="catalog__options">
<h2 class="title catalog__title section-title">Найдено гостиниц: <span class="hotel-search-number">38</span></h2>
<h3 class="visually-hidden">Сортировка и отображение найденных по запросу гостиниц.</h3>
<div class="catalog-sort-wrapper">
<select class="catalog__sort catalog-sort">
<option class="catalog-sort__option" value="cheaper" selected>Сначала дешевые</option>
<option class="catalog-sort__option" value="expensive">Сначала дорогие</option>
<option class="catalog-sort__option" value="popular">Сначала популярные</option>
</select>
</div>
<ul class="list catalog__view catalog-view">
<li class="catalog-view__item catalog-view__item--active view-card">
<a class="catalog-view__link" href="#" tabindex="-1">
<span class="visually-hidden">Отобразить результат в виде карточек.</span>
</a>
</li>
<li class="catalog-view__item view-slider">
<a class="catalog-view__link" href="#">
<span class="visually-hidden">Отобразить результат в виде слайдов.</span>
</a>
</li>
<li class="catalog-view__item view-list">
<a class="catalog-view__link" href="#">
<span class="visually-hidden">Отобразить результат в виде списка.</span>
</a>
</li>
</ul>
</div>
<h3 class="visually-hidden">Список гостиниц.</h3>
<ul class="list catalog__hotels-list hotels-list">
<li class="hotels-list__item">
<a class="hotels-list__name" href="#">
<h4 class="title">Amara Resort & Spa</h4>
</a>
<a class="hotels-list__image" href="#" tabindex="-1">
<img src="images/hotel-1.jpg" width="300" height="212" alt="Фото гостинницы Amara Resort & Spa">
</a>
<p class="paragraph hotels-list__description hotels-list-description">
<span class="hotels-list-description__type">Гостиница</span>
<span class="hotels-list-description__price">От 4000 <span class="ruble">₽</span></span>
</p>
<div class="hotels-list__buttons hotels-list-buttons">
<a class="hotels-list-buttons__more button button-primary" href="#">Подробнее</a>
<a class="hotels-list-buttons__favorite button button-secondary" href="#">В избранное</a>
</div>
<div class="hotels-list__ratings">
<img class="hotels-list__stars" src="images/four-stars.png" alt="четыре звезды из пяти" width="140" height="37">
<p class="paragraph hotels-list__rating">Рейтинг: 8,5</p>
</div>
</li>
<li class="hotels-list__item">
<a class="hotels-list__name" href="#">
<h4 class="title">Villas at Poco Diablo</h4>
</a>
<a class="hotels-list__image" href="#" tabindex="-1">
<img src="images/hotel-2.jpg" width="300" height="212" alt="Фото гостиницы Villas at Poco Diablo">
</a>
<p class="paragraph hotels-list__description hotels-list-description">
<span class="hotels-list-description__type">Гостиница</span>
<span class="hotels-list-description__price">От 5000 <span class="ruble">₽</span></span>
</p>
<div class="hotels-list__buttons hotels-list-buttons">
<a class="hotels-list-buttons__more button button-primary" href="#">Подробнее</a>
<a class="hotels-list-buttons__favorite button button-selected" href="#">В избранном</a>
</div>
<div class="hotels-list__ratings">
<img class="hotels-list__stars" src="images/four-stars.png" alt="четыре звезды из пяти" width="140" height="37">
<p class="paragraph hotels-list__rating">Рейтинг: 9,2</p>
</div>
</li>
<li class="hotels-list__item">
<a class="hotels-list__name" href="#">
<h4 class="title">Desert Quail Inn</h4>
</a>
<a class="hotels-list__image" href="#" tabindex="-1">
<img src="images/hotel-3.jpg" width="300" height="212" alt="Фото гостинницы Desert Quail Inn">
</a>
<p class="paragraph hotels-list__description hotels-list-description">
<span class="hotels-list-description__type">Гостиница</span>
<span class="hotels-list-description__price">От 2500 <span class="ruble">₽</span></span>
</p>
<div class="hotels-list__buttons hotels-list-buttons">
<a class="hotels-list-buttons__more button button-primary" href="#">Подробнее</a>
<a class="hotels-list-buttons__favorite button button-secondary" href="#">В избранное</a>
</div>
<div class="hotels-list__ratings">
<img class="hotels-list__stars" src="images/three-stars.png" alt="три звезды из пяти" width="140" height="37">
<p class="paragraph hotels-list__rating">Рейтинг: 6,9</p>
</div>
</li>
<li class="hotels-list__item">
<a class="hotels-list__name" href="#">
<h4 class="title">GreenTree Inn</h4>
</a>
<a class="hotels-list__image" href="#" tabindex="-1">
<img src="images/hotel-4.jpg" width="300" height="212" alt="Фото гостинницы GreenTree Inn">
</a>
<p class="paragraph hotels-list__description hotels-list-description">
<span class="hotels-list-description__type">Гостиница</span>
<span class="hotels-list-description__price">От 1500 <span class="ruble">₽</span></span>
</p>
<div class="hotels-list__buttons hotels-list-buttons">
<a class="hotels-list-buttons__more button button-primary" href="#">Подробнее</a>
<a class="hotels-list-buttons__favorite button button-secondary" href="#">В избранное</a>
</div>
<div class="hotels-list__ratings">
<img class="hotels-list__stars" src="images/two-stars.png" alt="две звезды из пяти" width="140" height="37">
<p class="paragraph hotels-list__rating">Рейтинг: 5,0</p>
</div>
</li>
</ul>
<div class="pagination">
<h3 class="visually-hidden">Загрузить еще.</h3>
<ul class="list pagination__list">
<li class="pagination__item">
<a class="pagination__link pagination__link--active" href="#" aria-label="Перейти на страницу номер 1." tabindex="-1">1</a>
</li>
<li class="pagination__item">
<a class="pagination__link button button-secondary" href="#" aria-label="Перейти на страницу номер 2.">2</a>
</li>
<li class="pagination__item">
<a class="pagination__link button button-secondary" href="#" aria-label="Перейти на страницу номер 3.">3</a>
</li>
<li class="pagination__item">
<a class="pagination__link button button-secondary" href="#" aria-label="Перейти на страницу номер 4.">4</a>
</li>
<li class="pagination__item">
<a class="pagination__link pagination__link--next" href="#" tabindex="-1">...</a>
</li>
<li class="pagination__item">
<a class="pagination__link button button-secondary" href="#" aria-label="Перейти на страницу номер 10.">10</a>
</li>
</ul>
</div>
</section>
<section class="subscribe subscribe-primary catalog-subscribe">
<h2 class="title subscribe__title catalog-subscribe-title section-title">Подпишитесь на рассылку</h2>
<p class="paragraph subscribe__text section-description">Только полезная информация и никакого спама,<br>честное бойскаутское!</p>
<form class="subscribe__form" action="https://echo.htmlacademy.ru/" method="post">
<label class="subscribe__field field">
<span class="visually-hidden">Ваш e-mail.</span>
<input class="field__input" type="email" name="email" placeholder="Ваш e-mail" required>
</label>
<button class="subscribe__button button button-secondary" type="submit">Подписаться</button>
</form>
</section>
</main>
<footer class="page-footer">
<ul class="list page-footer__social social">
<li class="social__item social__item-vk">
<a class="social__link" href="https://vk.com/htmlacademy">
<span class="visually-hidden">Наша группа в контакте.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="15" fill="none" aria-hidden="true" focusable="false">
<path class="path" fill="#83B3D3" fill-rule="evenodd" d="M24.116 1.804c.166-.546 0-.948-.795-.948h-2.625c-.668 0-.976.347-1.143.73 0 0-1.335 3.196-3.226 5.272-.612.602-.89.793-1.224.793-.167 0-.418-.19-.418-.738V1.804c0-.656-.184-.948-.74-.948H9.817c-.417 0-.668.304-.668.593 0 .621.946.765 1.043 2.513V7.76c0 .833-.153.984-.487.984-.89 0-3.055-3.21-4.34-6.885-.249-.715-.5-1.003-1.172-1.003H1.566c-.75 0-.9.347-.9.73 0 .682.89 4.07 4.145 8.551 2.17 3.06 5.225 4.72 8.008 4.72 1.67 0 1.875-.369 1.875-1.004V11.54c0-.737.158-.884.687-.884.39 0 1.057.192 2.615 1.667 1.78 1.75 2.073 2.533 3.075 2.533h2.625c.75 0 1.126-.368.91-1.096-.238-.724-1.088-1.775-2.215-3.022-.612-.71-1.53-1.475-1.809-1.858-.389-.49-.278-.71 0-1.147 0 0 3.2-4.426 3.533-5.929h.001Z" clip-rule="evenodd"/>
</svg>
</a>
</li>
<li class="social__item social__item-tg">
<a class="social__link" href="https://t.me/htmlacademy">
<span class="visually-hidden">Наш телеграм канал.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" fill="none" aria-hidden="true" focusable="false">
<path class="path" fill="#83B3D3" d="M16.785.956.84 7.104C-.248 7.541-.24 8.148.64 8.42l4.094 1.277 9.472-5.976c.448-.272.857-.126.52.173l-7.673 6.925H7.05l.002.001-.283 4.22c.414 0 .597-.19.829-.414l1.988-1.934 4.136 3.055c.762.42 1.31.205 1.5-.706l2.715-12.795c.278-1.114-.425-1.618-1.153-1.29Z"/>
</svg>
</a>
</li>
<li class="social__item social__item-yt">
<a class="social__link" href="https://www.youtube.com/user/htmlacademyru">
<span class="visually-hidden">Наш канал на ЮТуб.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="18" fill="none" aria-hidden="true" focusable="false">
<path class="path" fill="#83B3D3" d="M18.94.356H3.507C1.647.356.333 1.95.333 3.756V13.85c0 1.913 1.314 3.506 3.174 3.506H19.16c1.642 0 3.174-1.593 3.174-3.4v-10.2c-.219-1.806-1.532-3.4-3.393-3.4ZM7.995 12.894V4.819l7.333 4.037-7.333 4.038Z"/>
</svg>
</a>
</li>
</ul>
<a class="page-footer__phone" aria-label="Позвонить нам." href="tel:+78128121212">+7 (812) 812-12-12</a>
<a class="page-footer__academy" href="https://htmlacademy.ru/">
<svg class="page-footer__academy-logo" xmlns="http://www.w3.org/2000/svg" width="115" height="34" aria-hidden="true" focusable="false">
<path class="path" fill="#000" d="M0 13.256v2.6h2.5v-2.6H0ZM11.6 4.856c-1.6 0-2.8.7-3.6 1.7h-.1v-6.2h-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.156h-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.956c-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.056c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V.356h-2v12.7ZM28.9 20.056c-.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.356c-.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.1v-.2ZM55.1 20.056c-.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.156c-.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.256c-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.256c-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.356l-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"/>
</svg>
</a>
</footer>
<div class="modal">
<div class="modal__content">
<h2 class="modal__title section-title">Поиск гостиницы в Седоне</h2>
<button class="modal__close-button" type="button">
<span class="visually-hidden">Закрыть модальное окно.</span>
</button>
<form class="modal__form modal-form" action="https://echo.htmlacademy.ru" method="post" >
<div class="modal-form__field field-date">
<label class="modal-form__title" for="date-in">Дата Заезда:</label>
<input class="modal-form__input modal-form__input-date" type="text" name="date-in" id="date-in" placeholder="Укажите дату заезда" value="27 апреля 2020" required>
<span class="modal-form__message modal-form__message--error">Мы не можем отправить вас в прошлое.</span>
</div>
<div class="modal-form__field field-date">
<label class="modal-form__title" for="date-out">Дата Выезда:</label>
<input class="modal-form__input modal-form__input-date" type="text" name="date-out" id="date-out" placeholder="Укажите дату выезда" value="1 сентября 2023" required>
<span class="modal-form__message">На эти даты есть свободные номера. Пока есть.</span>
</div>
<div class="modal-form__container">
<div class="modal-form__field field-counters">
<label class="modal-form__title field-counters__title" for="adults">Взрослые:</label>
<div class="field-counter">
<button class="field-counter__button button-minus" id="adultsMinus" type="button">
<span class="visually-hidden">Уменьшить количество взрослых.</span>
</button>
<input class="field-counter__input modal-form__input" type="number" name="adults-number" id="adults" placeholder="0" value="2" min="1" max="10" step="1" required>
<button class="field-counter__button button-plus" id="adultsPlus" type="button">
<span class="visually-hidden">Увеличить количество взрослых.</span>
</button>
</div>
</div>
<div class="modal-form__field field-counters field-counters--info">
<span class="field-counters-title">
<label class="modal-form__title field-counters__title" for="kids">Дети:</label>
<span class="tooltip">
<button class="tooltip__toggle" type="button" tabindex="-1">
<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 class="path" fill-rule="evenodd" clip-rule="evenodd" d="M12 7H14V9H12V7ZM14 19H12V10H14V19Z" fill="white"/>
</svg>
</button>
<span class="tooltip__text">
Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.
</span>
</span>
</span>
<div class="field-counter">
<button class="field-counter__button button-minus" id="kidsMinus" type="button">
<span class="visually-hidden">Уменьшить количество детей.</span>
</button>
<input class="field-counter__input modal-form__input" type="number" name="kids-number" id="kids" placeholder="0" value="2" min="0" max="10" step="1" required>
<button class="field-counter__button button-plus" id="kidsPlus" type="button">
<span class="visually-hidden">Увеличить количество детей.</span>
</button>
</div>
</div>
</div>
<button class="modal-form__button button-secondary button" type="submit">Найти</button>
</form>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>