forked from htmlacademy-htmlcss/2493289-sedona-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
323 lines (318 loc) · 20.1 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Седона</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.png">
</head>
<body>
<div class="container">
<header class="page_header">
<nav class="navigation">
<img class="navigation_logo" src="images/logo_sedona.svg" width="140" height="70" alt="Логотип сайта Седона">
<ul class="navigation_list style_list navigation_style1">
<li class="navigation_item">
<a class="navigation_link navigation_link_style1 navigation_link_active" href="#">Главная</a>
</li>
<li class="navigation_item">
<a class="navigation_link navigation_link_style1" href="#">О Седоне</a>
</li>
<li class="navigation_item">
<a class="navigation_link navigation_link_style1" href="catalog.html">Гостиницы</a>
</li>
</ul>
<ul class="navigation_list style_list navigation_style2">
<li class="navigation_item">
<a class="navigation_link navigation_link_style2" href="#">
<span class="visually_hidden">Поиск</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="none">
<path fill="#000"
d="m19.5 18-3.7-3.67c1-1.3 1.7-2.98 1.7-4.87a8 8 0 0 0-8-7.96c-4.4 0-8 3.68-8 8.06a8 8 0 0 0 12.9 6.26l3.7 3.68 1.4-1.5Zm-10-2.48a6 6 0 0 1-6-5.96 6 6 0 0 1 12 0 6 6 0 0 1-6 5.96Z" />
</svg>
</a>
</li>
<li class="navigation_item">
<a class="navigation_link navigation_link_style2" href="#">
<span class="visually_hidden">Избранное</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="none">
<path
d="M 8.9 17 a 0.9 0.9 0 0 1 -0.8 -0.4 c -5.4 -6.1 -6.7 -7.5 -7 -7.9 A 5.4 5.4 0 0 1 5.5 0 C 6.8 0 8 0.5 9 1.3 a 5.46 5.46 0 0 1 9 4.1 c 0 1.3 -0.5 2.5 -1.3 3.4 l -7 7.9 c -0.2 0.2 -0.4 0.3 -0.8 0.3 Z m -6 -9.5 c 0.3 0.4 3.5 4 6.1 6.9 l 6.2 -7 c 0.5 -0.5 0.7 -1.2 0.7 -2 c 0 -1.8 -1.5 -3.3 -3.3 -3.3 c -1 0 -2 0.5 -2.7 1.3 c -0.3 0.3 -0.6 0.4 -0.9 0.4 c -0.3 0 -0.6 -0.2 -0.8 -0.4 c -0.7 -0.8 -1.7 -1.3 -2.7 -1.3 c -1.8 0 -3.3 1.5 -3.3 3.3 c -0.1 0.9 0.3 1.6 0.7 2.1 c -0.1 0 -0.1 0 0 0 Z"
fill="#000" />
</svg>
<span class="number_of_favorites">12</span>
</a>
</li>
<li class="navigation_item">
<a class="button_here button_brown" href="#">Хочу сюда!</a>
</li>
</ul>
</nav>
</header>
<main class="main_index">
<section class="hero hero_divider">
<h1 class="visually_hidden">Добро пожаловать в Седону</h1>
<img class="img_text" src="images/welcome_sedona.svg" width="458" height="352"
alt="Welcome to the gorgeous Sedona, because the Grand Canyon sucks!">
</section>
<section class="advantages">
<h2 class="index_title index_title_advantages style_advantages">Седона — небольшой городок в Аризоне,
<br>заслуживающий большего!
</h2>
<p class="index_title_text index_title_text_advantages">Рассмотрим причины, по которым Седона круче, чем
Гранд-Каньон!
</p>
<ul class="advantages_list style_list">
<li class="advantages_item advantages_item_extended">
<div class="advantages_item_wrapper">
<h3 class="advantages_item_title">Настоящий<br> городок
</h3>
<p class="advantages_text">Седона — не аттракцион для туристов, там течёт своя <br>жизнь
</p>
</div>
<img class="advantages_cover location_image" src="images/advantages_photo_street.jpg" width="800"
height="385" alt="Город">
</li>
<li class="advantages_item">
<div class="advantages_item_wrapper">
<h3 class="advantages_item_title">Небольшая <br>площадь
</h3>
<p class="advantages_text">Все достопримечательности находятся очень близко
</p>
</div>
</li>
<li class="advantages_item">
<div class="advantages_item_wrapper">
<h3 class="advantages_item_title">Красивая <br>дорога</h3>
<p class="advantages_text">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</div>
</li>
<li class="advantages_item">
<div class="advantages_item_wrapper">
<h3 class="advantages_item_title">Мало <br>туристов</h3>
<p class="advantages_text">Большинство едет в Гранд Каньон и толпится там
</p>
</div>
</li>
<li class="advantages_item advantages_item_extended">
<img class="advantages_cover" src="images/advantages_photo_bridge.jpg" width="800" height="385"
alt="Мост">
<div class="advantages_item_wrapper">
<h3 class="advantages_item_title">Там есть <br>мост дьявола</h3>
<p class="advantages_text">Да, по нему можно пройти! Если вы осмелитесь, <br>разумеется
</p>
</div>
</li>
</ul>
</section>
<section class="service">
<h2 class="index_title index_title_service">Приезжайте в Седону отдохнуть <br>в комфорте и уюте!</h2>
<p class="index_title_text index_title_text_service">Опытный персонал и качественное обслуживание!
</p>
<ul class="service_list style_list">
<li class="service_item service_home">
<h3 class="service_title_item">Жильё</h3>
<p class="service_text">Рекомендуем пожить <br>в настоящем мотеле, <br>всё как в кино!
</p>
</li>
<li class="service_item service_eat">
<h3 class="service_title_item">Еда</h3>
<p class="service_text">Всегда заказывайте <br>топовый фирменный бургер, <br>вы не разочаруетесь!</p>
</li>
<li class="service_item service_present">
<h3 class="service_title_item">Сувениры</h3>
<p class="service_text">Не только китайского, <br>но и настоящего местного <br>производства!</p>
</li>
</ul>
</section>
<section class="reminder">
<h2 class="index_title index_title_reminder">Заинтересовались?</h2>
<p class="index_title_text index_title_text_reminder">Укажите предполагаемые даты поездки, <br>и мы покажем
вам
лучшие предложения гостиниц в Седоне
</p>
<a class="button_reminder button_brown" href="#">Поиск гостиницы в Седоне</a>
</section>
<section class="subscribe subscribe_index">
<h2 class="index_title index_title_style">Подпишитесь на рассылку</h2>
<p class="index_title_text index_title_text_style">Только полезная информация и никакого спама,<br> честное
бойскаутское!</p>
<form class="subscribe_form" action="https://echo.htmlacademy.ru/" method="post">
<input class="field" type="email" placeholder="Ваш e-mail" name="subscribe_email" id="subscribe_email"
required>
<button class="button_subscribe button_blue" type="submit">Подписаться</button>
</form>
</section>
</main>
<footer class="footer">
<ul class="footer_social_list style_list">
<li class="footer_social_item">
<a href="https://vk.com/htmlacademy">
<span class="visually_hidden">Vkontakte</span>
<svg class="style_vk style_svg" width="24" height="14" fill="none" aria-hidden="true" focusable="false"
xmlns="http://www.w3.org/2000/svg">
<path d="M 24.12 1.8 c 0.16 -0.54 0 -0.94 -0.8 -0.94 H 20.7 c -0.67 0 -0.98 0.34 -1.15 0.73 c 0 0
-1.33 3.2 -3.22 5.27 c -0.61 0.6 -0.9 0.8 -1.23 0.8 c -0.16 0 -0.41 -0.2 -0.41 -0.75 v -5.1
c 0 -0.66 -0.19 -0.95 -0.74 -0.95 H 9.82 c -0.42 0 -0.67 0.3 -0.67 0.59 c 0 0.62 0.95 0.76
1.04 2.51 v 3.8 c 0 0.83 -0.15 0.98 -0.48 0.98 c -0.9 0 -3.06 -3.2 -4.34 -6.88 c -0.25 -0.72
-0.5 -1 -1.18 -1 H 1.57 c -0.75 0 -0.9 0.34 -0.9 0.73 c 0 0.68 0.89 4.07 4.14 8.55 c 2.17
3.06 5.23 4.72 8 4.72 c 1.68 0 1.88 -0.37 1.88 -1 v -2.32 c 0 -0.74 0.16 -0.88 0.7 -0.88
c 0.38 0 1.05 0.19 2.6 1.66 c 1.79 1.75 2.08 2.54 3.08 2.54 h 2.63 c 0.75 0 1.12 -0.37 0.9
-1.1 c -0.23 -0.72 -1.08 -1.77 -2.2 -3.02 c -0.62 -0.71 -1.54 -1.48 -1.82 -1.86 c -0.39 -0.5
-0.28 -0.71 0 -1.15 c 0 0 3.2 -4.42 3.54 -5.93 Z" />
</svg>
</a>
</li>
<li class="footer_social_item">
<a href="https://t.me/htmlacademy ">
<span class="visually_hidden">Telegram</span>
<svg class="style_telegram style_svg" width="18" height="16" fill="none" aria-hidden="true"
focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M 16.79 0.96 L 0.84 7.1 c -1.09 0.44 -1.08 1.05 -0.2 1.32 l 4.1 1.28 l 9.47 -5.98 c 0.44
-0.27 0.85 -0.13 0.52 0.17 l -7.68 6.93 l -0.28 4.22 c 0.41 0 0.6 -0.2 0.83 -0.41 l 1.99 -1.94
l 4.13 3.06 c 0.77 0.42 1.31 0.2 1.5 -0.71 l 2.72 -12.8 c 0.28 -1.1 -0.43 -1.61 -1.16 -1.28 Z" />
</svg>
</a>
</li>
<li class="footer_social_item">
<a href="https://www.youtube.com/user/htmlacademyru">
<span class="visually_hidden">Youtube</span>
<svg class="style_youtube style_svg" width="22" height="17" fill="none" aria-hidden="true"
focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M 18.94 0.36 H 3.51 C 1.65 0.36 0.33 1.95 0.33 3.76 v 10.09 c 0 1.91 1.32 3.5 3.18 3.5
h 15.65 c 1.64 0 3.17 -1.59 3.17 -3.4 V 3.76 c -0.22 -1.8 -1.53 -3.4 -3.39 -3.4 Z M 7.99 12.89
V 4.82 l 7.34 4.04 l -7.34 4.03 Z" />
</svg>
</a>
</li>
</ul>
<a class="footer_contacts_phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
<a class="htmlacademy_link" href="https://htmlacademy.ru/">
<span class="visually_hidden">Переход на сайт .html academy</span>
<svg class="style_academy" width="115" height="33" fill="none" aria-hidden="true" focusable="false"
xmlns="http://www.w3.org/2000/svg">
<path d="M 0 13.26 v 2.6 h 2.5 v -2.6 H 0 Z M 11.6 4.86 c -1.6 0 -2.8 0.7 -3.6 1.7 h -0.1 V 0.36
h -2 v 15.5 h 2 v -5.3 c 0 -2.1 1.3 -3.6 3.3 -3.6 c 1.8 0 2.9 1.4 2.9 3.2 v 5.7 h 2 v -6.1
c 0.1 -3 -1.8 -4.9 -4.5 -4.9 Z M 26.6 5.16 h -4.8 v -3.7 h -2 v 3.8 h -1.9 v 2 h 1.9 v 6
c 0 1.7 1 2.7 2.7 2.7 h 4.1 v -2 h -3.7 c -0.7 0 -1.1 -0.4 -1.1 -1.1 v -5.7 h 4.8 v -2 Z
M 41.1 4.96 c -1.6 0 -2.9 0.8 -3.5 2.1 h -0.1 c -0.6 -1.2 -1.8 -2.1 -3.4 -2.1 c -1.4 0 -2.5
0.8 -3.1 1.8 h -0.1 v -1.6 H 29 v 10.6 h 2 v -5.4 c 0 -2 1 -3.5 2.6 -3.5 c 1.5 0 2.4 1 2.4 2.6
v 6.3 h 2 v -5.6 c 0 -2.4 1.4 -3.3 2.6 -3.3 c 1.5 0 2.4 1 2.4 2.6 v 6.3 h 2 v -6.5 c 0.1 -2.5
-1.4 -4.3 -3.9 -4.3 Z M 47.8 13.06 c 0 1.7 1 2.7 2.8 2.7 h 2 v -2 h -1.7 c -0.7 0 -1.1 -0.4 -1.1
-1.1 V 0.36 h -2 v 12.7 Z M 28.9 20.06 c -0.9 -1.1 -2.2 -1.8 -3.9 -1.8 c -3.1 0 -5.4 2.3 -5.4 5.6
s 2.3 5.6 5.4 5.6 c 1.8 0 3 -0.8 3.8 -1.9 h 0.1 v 1.6 h 2 v -10.6 h -2 v 1.5 Z m -3.6 7.4 c -2.2 0
-3.6 -1.6 -3.6 -3.6 s 1.4 -3.6 3.6 -3.6 s 3.6 1.6 3.6 3.6 c 0 1.9 -1.4 3.6 -3.6 3.6 Z M 44.2 22.36
c -0.5 -2.4 -2.6 -4.1 -5.4 -4.1 a 5.4 5.4 0 0 0 -5.6 5.6 c 0 3.1 2.2 5.6 5.6 5.6 c 2.8 0 4.9 -1.8
5.4 -4.2 h -2.1 a 3.4 3.4 0 0 1 -3.3 2.3 c -2.2 0 -3.6 -1.6 -3.6 -3.6 s 1.4 -3.6 3.6 -3.6 c 1.6
0 2.8 1 3.3 2.2 h 2.1 v -0.2 Z M 55.1 20.06 c -0.9 -1.1 -2.2 -1.8 -3.9 -1.8 c -3.1 0 -5.4 2.3 -5.4
5.6 s 2.3 5.6 5.4 5.6 c 1.8 0 3 -0.8 3.8 -1.9 h 0.1 v 1.6 h 2 v -10.6 h -2 v 1.5 Z m -3.6 7.4 c -2.2
0 -3.6 -1.6 -3.6 -3.6 s 1.4 -3.6 3.6 -3.6 s 3.6 1.6 3.6 3.6 c 0 1.9 -1.5 3.6 -3.6 3.6 Z M 68.7 20.16
c -0.9 -1.1 -2.2 -1.9 -3.9 -1.9 c -3.1 0 -5.4 2.3 -5.4 5.6 s 2.2 5.6 5.4 5.6 c 1.7 0 3 -0.8 3.8 -1.8
h 0.1 v 1.5 h 2 v -15.4 h -2 v 6.4 Z m -3.6 7.3 c -2.2 0 -3.6 -1.6 -3.6 -3.6 s 1.4 -3.6 3.6 -3.6 s 3.6
1.6 3.6 3.6 c -0.1 2 -1.5 3.6 -3.6 3.6 Z M 78.3 18.26 c -3.3 0 -5.5 2.5 -5.5 5.6 c 0 3 2.1 5.6 5.5 5.6
c 2.5 0 4.5 -1.3 5.2 -3.6 h -2.1 c -0.5 1 -1.6 1.6 -3 1.6 c -1.9 0 -3.3 -1.3 -3.4 -2.9 h 8.8 c 0.2 -3.6
-2 -6.3 -5.5 -6.3 Z m 0 1.9 c 1.7 0 3 1 3.3 2.6 h -6.5 c 0.3 -1.5 1.5 -2.6 3.2 -2.6 Z M 98.2 18.26
c -1.6 0 -2.9 0.8 -3.6 2 h -0.1 c -0.6 -1.2 -1.8 -2 -3.4 -2 c -1.4 0 -2.5 0.7 -3.1 1.8 v -1.5 h -1.9
v 10.6 h 2 v -5.4 c 0 -2 1 -3.4 2.6 -3.5 c 1.5 0 2.4 1 2.4 2.6 v 6.3 h 2 v -5.6 c 0 -2.4 1.4 -3.3 2.6
-3.3 c 1.5 0 2.4 1 2.4 2.6 v 6.3 h 2 v -6.5 c 0.1 -2.6 -1.4 -4.4 -3.9 -4.4 Z M 109.4 27.36 l -3.6 -8.9
h -2.2 l 4.8 11.6 c -0.3 0.9 -0.7 1.2 -1.7 1.2 h -2.5 v 2 h 2.5 c 1.8 0 2.8 -0.8 3.5 -2.6 l 4.7 -12.2
h -2.1 l -3.4 8.9 Z" />
</svg>
</a>
</footer>
<div class="modal_container modal_container_close">
<div class="modal">
<button class="button_close" type="button">
<span class="visually_hidden">Закрыть</span>
<svg class="test" width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.49 1.783 13.199.49 7.49 6.198 1.783.491.49 1.783 6.198 7.49.49 13.198l1.293 1.293L7.49 8.783l5.708 5.708 1.293-1.293-5.708-5.707 5.708-5.708Z"
fill="currentColor" />
</svg>
</button>
<section>
<h2 class="modal_title">Поиск гостиницы в Седоне</h2>
<form class="index_model_form" action="https://echo.htmlacademy.ru" method="get">
<div class="style_input_date">
<div class="style_input_modal">
<label class="label_modal_date" for="id_checkin">
Дата Заезда:
</label>
<input class="check" type="text" name="date_checkin" placeholder="27 апреля 2020" id="id_checkin"
required>
</div>
<span class="modal_hint">Мы не можем отправить вас в прошлое.
</span>
</div>
<div class="style_input_date">
<div class="style_input_modal">
<label class="label_modal_date" for="id_checkout">
Дата Выезда:
</label>
<input class="check" type="text" name="date_checkout" placeholder="1 сентября 2023" id="id_checkout"
required>
</div>
<span class="modal_hint hint_checkout">На эти даты есть свободные номера. Пока есть.</span>
</div>
<div class="style_form_number_adults_child">
<div class="adult_child_number">
<label class="title_form_number_adults_child" for="id_adults">Взрослые:
</label>
<button class="vector_modal style_svg_adult_child_number_minus" type="button">
<span class="visually_hidden">Уменьшение количества</span>
<svg class="style_svg_adult_child_number" width="14" height="2" viewBox="0 0 14 2" fill="none"
aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0v2h14V0H0Z" />
</svg>
</button>
<input class="group_adults" type="text" value="2" id="id_adults" name="count_adults" required />
<button class="vector_modal style_svg_adult_child_number_plus" type="button">
<span class="visually_hidden">Увеличение количества</span>
<svg class="style_svg_adult_child_number" width="14" height="14" viewBox="0 0 14 14" fill="none"
aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M14 6H8V0H6v6H0v2h6v6h2V8h6V6Z" />
</svg>
</button>
</div>
<div class="adult_child_number">
<label class="title_form_number_adults_child title_child" for="id_child">Дети:</label>
<button class="tooltip_toggle" type="button">
<svg class="style_svg svg_toogle" width="26" height="26" viewBox="0 0 26 26"
xmlns="http://www.w3.org/2000/svg">
<circle cx="13" cy="13" r="13" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7h2v2h-2V7Zm2 12h-2v-9h2v9Z" fill="#fff" />
</svg>
</button>
<span class="tooltip_text">Укажите количество детей,<br> которые будут с вами, возраст которых от 6 до
18
лет. Дети<br> до 6 лет размещаются<br> бесплатно.</span>
<button class="vector_modal style_svg_adult_child_number_minus" type="button">
<span class="visually_hidden">Уменьшение количества</span>
<svg class="style_svg_adult_child_number" width="14" height="2" viewBox="0 0 14 2" fill="none"
aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0v2h14V0H0Z" />
</svg>
</button>
<input class="group_adults" type="text" value="2" id="id_child" name="count_child" />
<button class="vector_modal style_svg_adult_child_number_plus" type="button">
<span class="visually_hidden">Увеличение количества</span>
<svg class="style_svg_adult_child_number" width="14" height="14" viewBox="0 0 14 14" fill="none"
aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<path d="M14 6H8V0H6v6H0v2h6v6h2V8h6V6Z" />
</svg>
</button>
</div>
</div>
<div>
<button class="button_apply button_modal button_blue" type="submit">Найти</button>
</div>
</form>
</section>
</div>
</div>
</div>
</body>
</html>