-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
377 lines (316 loc) · 17.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
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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Седона</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32.png">
</head>
<body>
<div class="page-container">
<h1 class="visually-hidden">О городе Седона.</h1>
<header class="site-header">
<!-- Шапка сайта -->
<nav class="navigation">
<!-- главная навигация по сайту-->
<h2 class="visually-hidden">Навигация по сайту</h2>
<a class="logo-link" href="/">
<img class="logo-img" src="./images/logo.svg" width="139" height="70" alt="Логотип сайта о городе Седона.">
</a>
<ul class="navigation-menu">
<!-- Меню основной навигации -->
<li class="navigation-menu-item">
<a class="navigation-menu-link navigation-link-active" href="">Главная</a>
</li>
<li class="navigation-menu-item">
<a class="navigation-menu-link" href="">О Седоне</a>
</li>
<li class="navigation-menu-item">
<a class="navigation-menu-link" href="catalog.html">Гостиницы</a>
</li>
</ul>
<ul class="navigation-menu user-menu">
<!-- Пользовательское служебное меню -->
<li class="navigation-menu-item">
<a class="navigation-menu-link navigation-menu-icons" href="">
<svg class="icon-search" aria-hidden="true" focusable="false" width="20" height="19"
xmlns="http://www.w3.org/2000/svg">
<path
d="m19 17-3.7-3.6a8 8 0 0 0 1.7-5 8 8 0 0 0-8-8C4.6.5 1 4.3 1 8.7a8 8 0 0 0 13 6.3l3.6 3.7L19 17ZM9 14.7c-3.3 0-6-2.7-6-6a6 6 0 0 1 12 0 6 6 0 0 1-6 6Z" />
</svg>
<span class="visually-hidden">Поиск</span>
</a>
</li>
<li class="navigation-menu-item">
<a class="navigation-menu-link navigation-menu-icons" href="">
<svg class="icon-favorite" aria-hidden="true" focusable="false" width="19" height="17"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.4 17a1 1 0 0 1-.8-.4l-7-7.9A5.4 5.4 0 0 1 6 0c1.3 0 2.5.5 3.5 1.3C10.5.5 12 0 13.1 0c3 0 5.5 2.4 5.5 5.4 0 1.3-.5 2.5-1.3 3.4l-7 7.9c-.3.2-.5.3-.9.3Zm-6-9.5 6.1 6.9 6.3-7c.5-.5.7-1.2.7-2 0-1.8-1.5-3.3-3.3-3.3-1 0-2 .5-2.8 1.3-.3.3-.6.4-.9.4-.3 0-.6-.2-.8-.4A3.7 3.7 0 0 0 6 2.1a3.3 3.3 0 0 0-3.3 3.3c0 .9.3 1.6.7 2.1Z" />
</svg>
<span class="visually-hidden">Избранное</span>
<span class="favorite-counter">12</span>
</a>
</li>
<li class="navigation-menu-item button">
<a class="navigation-menu-link" href="catalog.html">Хочу сюда!</a>
</li>
</ul>
</nav>
</header>
<main class="home-page">
<section class="advantages">
<h2 class="visually-hidden">Преимущества города Седона.</h2>
<div class="intro">
<!-- Вступление Фон и Приветствие на англинском -->
<img class="intro-image" src="./images/index/intro-text.svg" width="458" height="352"
alt="Добро пожаловать в город Седона.">
</div>
<div class="intro-text-container">
<p class="intro-text text-title">
Седона — небольшой городок в Аризоне, заслуживающий большего!
</p>
<p class="intro-text text-description">
Рассмотрим 5 причин, по которым Седона круче, чем Гранд-Каньон!
</p>
</div>
<!-- Список основыных преимуществ города -->
<ol class="advantages-list">
<!-- Список -->
<li class="advantages-item advantages-item__large">
<!-- Первое преимущество -->
<div class="advantages-item-info">
<div class="description-container">
<h3 class="advantages-item-title">Настоящий<br>городок</h3>
<p class="advantages-item-description">Седона — не аттракцион для туристов, там течёт своя жизнь</p>
</div>
<img class="advantages-item-picture" src="./images/index/advantages-item-picture1.jpg" width="800"
height="384" alt="Пейзаж вида на город Седона.">
</div>
<ul class="advantages-sublist">
<li class="advantages-sublist-item">
<h4 class="advantages-item-title">Жильё</h4>
<p class="advantages-item-description">Рекомендуем пожить<br> в настоящем мотеле,<br> всё как в кино!
</p>
</li>
<li class="advantages-sublist-item">
<h4 class="advantages-item-title">Еда</h4>
<p class="advantages-item-description">Всегда заказывайте<br> топовый фирменный бургер,<br> вы не
разочаруетесь!</p>
</li>
<li class="advantages-sublist-item">
<h4 class="advantages-item-title">Сувениры</h4>
<p class="advantages-item-description">Не только китайского,<br> но и настоящего местного производства!
</p>
</li>
</ul>
</li>
<li class="advantages-item advantages-item__large">
<!-- Второе преимущество -->
<div class="advantages-item-info">
<div class="description-container">
<h3 class="advantages-item-title">Там есть<br>мост дьявола</h3>
<p class="advantages-item-description">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
</div>
<img class="advantages-item-picture" src="./images/index/advantages-item-picture2.jpg" width="800"
height="384" alt="Мост дьявола. Фотография ландшафта.">
</div>
</li>
<li class="advantages-item">
<!-- Третье преимущество -->
<h3 class="advantages-item-title">Небольшая<br>площадь</h3>
<p class="advantages-item-description">Все достопримечательности находятся очень близко</p>
</li>
<li class="advantages-item">
<!-- Четвертое преимущество -->
<h3 class="advantages-item-title">Красивая<br>дорога</h3>
<p class="advantages-item-description">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</li>
<li class="advantages-item">
<!-- Пятое преимущество -->
<h3 class="advantages-item-title">Мало<br>туристов</h3>
<p class="advantages-item-description">Большинство едет в Гранд Каньон и толпится там</p>
</li>
</ol>
</section>
<section class="hotel-search">
<!-- Секция поиск гостиниц / - вызов модального окна -->
<h2 class="visually-hidden">Поиск гостиницы</h2>
<p class="text-title">Заинтересовались?</p>
<p class="text-description">Укажите предполагаемые даты поездки,<br>и мы покажем вам лучшие предложения
гостиниц в Седоне</p>
<a class="search button" href="#"><span> ПОИСК ГОСТИНИЦЫ В седоне</span></a>
</section>
<section class="subscribe-newsletter">
<!-- Секция с формой подписки на рассылку новостей -->
<h2 class="subscribe-newsletter-title text-title">Подпишитесь на рассылку</h2>
<p class="subscribe-newsletter-description">Только полезная информация и никакого спама,<br>честное
бойскаутское!
</p>
<form class="subscribe-form" action="https://echo.htmlacademy.ru/" method="post">
<label class="subscribe-form field-label" for="email">
<span class="visually-hidden">Ваш e-mail</span></label>
<input class="subscribe-form field-input" type="email" id="email" name="email" placeholder="Ваш e-mail"
required>
<button class="subsribe-form button" type="submit">Подписаться</button>
</form>
</section>
</main>
<footer class="site-footer">
<section class="footer-socials">
<!-- Секция в подвале со списком соц сетей -->
<h2 class="visually-hidden">Ссылки на соц сети</h2>
<ul class="footer-socials-list">
<!-- Список соц сетей -->
<li class="footer-socials-item">
<a class="footer-socials-links" href="https://twitter.com/htmlacademy_ru">
<span class="visually-hidden">twitter</span>
<svg class="icon-twitter" aria-hidden="true" focusable="false" width="18" height="15"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path
d="M11.6.2c1.8-.5 3.2.3 3.8 1.2l2.1-.7c0 .9-.6 1.5-.9 1.8.7.1 1.4-.6 1.4-.6a3 3 0 0 1-1.7 2C16.1 10.7 13 15.1 5.7 15h-.5c-.4 0-4.4-.5-5.2-1.9 2.4.2 4.1-.4 5-1.2-1-.3-2.9-.4-3.2-2.9.4.1.6.2 1.3.1C1.8 8.3.4 7.5.5 5.3c.3.3 1.1.5 1.4.5C1.1 5.6-.2 2.5.9.9a11 11 0 0 0 7.6 3.8C8.7 2.3 9.7.8 11.6.2Z" />
</g>
</svg>
</a>
</li>
<li class="footer-socials-item">
<a class="footer-socials-links" href="https://www.facebook.com/htmlacademy">
<span class="visually-hidden">facebook</span>
<svg class="icon-facebook" aria-hidden="true" focusable="false" width="10" height="18"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M7 0a4 4 0 0 0-4 4v2H0v4h3v8h4v-8h3V6H7V4h3V0H7Z" />
</g>
</svg>
</a>
</li>
<li class="footer-socials-item">
<a class="footer-socials-links" href="https://www.youtube.com/c/HTMLAcademyRUS">
<span class="visually-hidden">youtube</span>
<svg class="icon-youtube" aria-hidden="true" focusable="false" width="20" height="16"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path
d="M17 0H2.9C1.2 0 0 1.5 0 3.2v9.5C0 14.5 1.2 16 2.9 16h14.3c1.5 0 2.9-1.5 2.9-3.2V3.2C19.9 1.5 18.7 0 17 0ZM7 11.8V4.2L13.7 8 7 11.8Z" />
</g>
</svg>
</a>
</li>
</ul>
</section>
<section class="footer-contacts">
<!-- Секция с контактами -->
<h2 class="visually-hidden">Контакты</h2>
<a class="footer-contact-tel" href="tel:78128121212">
<span class="visually-hidden">Телефон:</span>
+7 (812) 812-12-12
</a>
</section>
<section class="project-developers">
<!-- Секция о разработчиках проекта -->
<h2 class="visually-hidden">Разработчики проекта</h2>
<a class="developer-link" href="https://htmlacademy.ru/">
<svg class="developer-icon" aria-hidden="true" focusable="false" width="115" height="33"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 12.9v2.6h2.5v-2.6H0Zm11.6-8.4c-1.6 0-2.8.7-3.6 1.7h-.1V0h-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.7h2V9.4c.1-3-1.8-4.9-4.5-4.9Zm15 .3h-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-2Zm14.5-.2c-1.6 0-2.9.8-3.5 2.1h-.1a3.7 3.7 0 0 0-3.4-2.1c-1.4 0-2.5.8-3.1 1.8h-.1V4.8H29v10.6h2V10c0-2 1-3.5 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2V9.8c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2V8.9c.1-2.5-1.4-4.3-3.9-4.3Zm6.7 8.1c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V0h-2v12.7Zm-18.9 7a4.9 4.9 0 0 0-3.9-1.8c-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.6h2V18.2h-2v1.5Zm-3.6 7.4a3.5 3.5 0 0 1-3.6-3.6c0-2 1.4-3.6 3.6-3.6s3.6 1.6 3.6 3.6c0 1.9-1.4 3.6-3.6 3.6ZM44.2 22c-.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.3 3.5 3.5 0 0 1-3.6-3.6c0-2 1.4-3.6 3.6-3.6 1.6 0 2.8 1 3.3 2.2h2.1V22Zm10.9-2.3a4.9 4.9 0 0 0-3.9-1.8c-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.6h2V18.2h-2v1.5Zm-3.6 7.4a3.5 3.5 0 0 1-3.6-3.6c0-2 1.4-3.6 3.6-3.6s3.6 1.6 3.6 3.6c0 1.9-1.5 3.6-3.6 3.6Zm17.2-7.3a5 5 0 0 0-3.9-1.9c-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.3a3.5 3.5 0 0 1-3.6-3.6c0-2 1.4-3.6 3.6-3.6s3.6 1.6 3.6 3.6c-.1 2-1.5 3.6-3.6 3.6Zm13.2-9.2a5.4 5.4 0 0 0-5.5 5.6c0 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.5a3.2 3.2 0 0 1 3.2-2.6Zm19.9-1.9a4 4 0 0 0-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.4Zm11.2 9.1-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>
<span class="visually-hidden">сайт HTML Академии</span>
</a>
</section>
</footer>
</div>
<div class="modal-container modal-off">
<div class="modal">
<h2 class="modal-title">Поиск гостиницы в Седоне</h2>
<button class="modal-close-button" type="button">
<span class="visually-hidden">Закрыть окно поиска.</span>
<svg class="cross-toggle" aria-hidden="true" focusable="false" width="13" height="13"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M13 1.2 11.8 0 6.5 5.3 1.2 0 0 1.2l5.3 5.3L0 11.8 1.2 13l5.3-5.3 5.3 5.3 1.2-1.2-5.3-5.3L13 1.2Z"
fill="#000" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h13v13H0z" />
</clipPath>
</defs>
</svg>
</button>
<form class="form-search" action="https://echo.htmlacademy.ru/" method="post">
<label class="form-search-label">
<span class="label-text">Дата заезда:</span>
<input class="search-date" type="text" name="date-checkin" value="27 апреля 2020" required>
<span class="response-message wrong-date">Мы не можем отправить вас в прошлое.</span>
</label>
<label class="form-search-label">
<span class="label-text">Дата выезда:</span>
<input class="search-date" type="text" name="date-checkout" value="1 сентября 2021" required>
<span class="response-message">На эти даты есть свободные номера. Пока есть.</span>
</label>
<div class="persons-wrapper">
<div class="form-search-label">
<label class="label-text" for="persons">Взрослые:</label>
<input class="search-persons" type="number" id="persons" name="persons" value="2" min="1" step="1" required>
<button class="minus-spin" type="button">
<span class="visually-hidden">Уменьшить количество взрослых в поездке.</span>
<svg class="toggle-icon" aria-hidden="true" focusable="false" width="13" height="1"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 0v1h13V0H0Z" /></svg>
</button>
<button class="plus-spin" type="button">
<span class="visually-hidden">Увеличить количество взрослых в поездке.</span>
<svg class="toggle-icon" aria-hidden="true" focusable="false" width="13" height="13"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M13 6H7V0H6v6H0v1h6v6h1V7h6V6Z" />
</g>
</svg>
</button>
</div>
<div class="form-search-label">
<div class="children-wrapper">
<label class="label-text" for="children">Дети:</label>
<span class="search-info">
<span class="visually-hidden">Количество детей</span>
</span>
<div class="info-popover">
<svg class="decorative-triangle" width="19" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 0 19 9H0l9.5-9Z" fill="#333" /></svg>
<div class="info-content" id="children-info">
Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет
размещаются
бесплатно.
</div>
</div>
</div>
<input class="search-children" id="children" type="number" name="children" value="1" min="0" step="1"
aria-describedby="children-info" required>
<button class="minus-spin" type="button">
<span class="visually-hidden">Уменьшить количество детей в поездке.</span>
<svg class="toggle-icon" aria-hidden="true" focusable="false" width="13" height="1"
xmlns="http://www.w3.org/2000/svg">
<path d="M0 0v1h13V0H0Z" /></svg>
</button>
<button class="plus-spin" type="button">
<span class="visually-hidden">Увеличить количество детей в поездке.</span>
<svg class="toggle-icon" aria-hidden="true" focusable="false" width="13" height="13"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M13 6H7V0H6v6H0v1h6v6h1V7h6V6Z" />
</g>
</svg>
</button>
</div>
</div>
<button class="form-search-button" type="submit">Найти</button>
</form>
</div>
</div>
<script src="modal.js"></script>
</body>
</html>