-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
262 lines (245 loc) · 19.6 KB
/
index.html
File metadata and controls
262 lines (245 loc) · 19.6 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
<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Сайт Sedona</title>
<link rel="stylesheet" href="styles/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="images/png/favicon.png">
</head>
<body>
<header class="page-header white-section white-title">
<a class="header-logo-link" href="index.html">
<img class="header-logo" src="images/svg/logo.svg" width="140" height="70" alt="Логотип Седоны">
</a>
<nav class="navigation">
<ul class="navigation-list list-none">
<li class="naivigation-item">
<a class="navigation-link navigation-link-current none-text-decoration" href="index.html">Главная</a>
</li>
<li class="naivigation-item">
<a class="navigation-link none-text-decoration" href="#">О Седоне</a>
</li>
<li class="naivigation-item">
<a class="navigation-link none-text-decoration" href="catalog.html">Гостиницы</a>
</li>
</ul>
</nav>
<div class="secondary-navigation">
<ul class="secondary-navigation-list secondary-navigation-user list-none">
<li class="secondary-navigation-item">
<a class="secondary-navigation-link none-text-decoration" href="#">
<svg class="secondary-navigation-search" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<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.68zm-10-2.48a6 6 0 0 1-6-5.96 6 6 0 0 1 12 0 6 6 0 0 1-6 5.96"/>
</svg>
<span class="visually-hidden">Поиск</span>
</a>
</li>
<li class="secondary-navigation-item">
<a class="secondary-navigation-link secondary-navigation-link-favorites none-text-decoration" data-likes="12" href="favorites.html">
<svg class="secondary-navigation-chosen" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#000" d="M9.9 19c-.3 0-.6-.1-.8-.4-5.4-6.1-6.7-7.5-7-7.9C1.4 9.8 1 8.6 1 7.4 1 4.4 3.4 2 6.5 2 7.8 2 9 2.5 10 3.3c1-.8 2.3-1.3 3.5-1.3 3 0 5.5 2.4 5.5 5.4 0 1.3-.5 2.5-1.3 3.4l-7 7.9c-.2.2-.4.3-.8.3m-6-9.5c.3.4 3.5 4 6.1 6.9l6.2-7c.5-.5.7-1.2.7-2 0-1.8-1.5-3.3-3.3-3.3-1 0-2 .5-2.7 1.3-.3.3-.6.4-.9.4s-.6-.2-.8-.4c-.7-.8-1.7-1.3-2.7-1.3-1.8 0-3.3 1.5-3.3 3.3-.1.9.3 1.6.7 2.1q-.15 0 0 0"/>
</svg>
<span class="visually-hidden">Избранное</span>
</a>
</li>
<li class="secondary-navigation-item">
<a class="button secondary-navigation-link primary-button secondary-navigation-button none-text-decoration" href="#">
<span class="visually-hidden">Кнопка</span>
<span>ХОЧУ СЮДА!</span>
</a>
</li>
</ul>
</div>
</header>
<main class="main-index main-container">
<section class="main-header">
<h1 class="visually-hidden">Город Седона</h1>
<img class="logo" src="images/svg/welcome.svg" width="458" height="352" alt="Логотип Седоны">
<img class="divider" src="images/divider.png" width="1200" height="57" alt="">
</section>
<section class="description white-section">
<h2 class="description-title section-title">Седона — небольшой городок в Аризоне, заслуживающий большего!</h2>
<p class="description-reasons">Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!</p>
</section>
<section class="reasons">
<ul class="reasons-list list-none">
<li class="reasons-item blue-color-item">
<h3 class="reasons-title section-title white-title reasons-title-white">Настоящий городок</h3>
<p class="reasons-description white-color-description white-title">Седона — не аттракцион для туристов, там течёт своя жизнь</p>
</li>
<li class="reasons-item-img">
<img class="reasons-img" src="images/city.jpg" width="800" height="385" alt="Фото города">
</li>
<li class="reasons-item light-grey-color-item">
<h3 class="reasons-title section-title reasons-title-black">Небольшая площадь</h3>
<p class="reasons-description">Все достопримечательности находятся очень близко</p>
</li>
<li class="reasons-item dark-grey-color-item">
<h3 class="reasons-title section-title reasons-title-black">Красивая дорога</h3>
<p class="reasons-description">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</li>
<li class="reasons-item light-grey-color-item">
<h3 class="reasons-title section-title reasons-title-black">Мало туристов</h3>
<p class="reasons-description">Большинство едет в Гранд Каньон и толпится там</p>
</li>
<li class="reasons-item-img">
<img class="reasons-img" src="images/canyon.jpg" width="800" height="385" alt="Мост Дьявола">
</li>
<li class="reasons-item blue-color-item">
<h3 class="reasons-title section-title white-title reasons-title-white">Там есть<br> мост дьявола</h3>
<p class="reasons-description white-color-description white-title">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
</li>
</ul>
</section>
<section class="recommendations white-section">
<div class="recommendations-section">
<h2 class="recommendations-title-primary section-title">Приезжайте в Седону отдохнуть в комфорте и уюте!</h2>
<p class="recommendations-reasons">Опытный персонал и качественное обслуживание!</p>
</div>
<ul class="recommendations-list list-none">
<li class="recommendations-item recommendations-item-home light-grey-color-item">
<h3 class="recommendations-title-secondary section-title">Жильё</h3>
<p class="recommendations-description">Рекомендуем пожить<br> в настоящем мотеле,<br> всё как в кино!</p>
</li>
<li class="recommendations-item recommendations-item-meal">
<h3 class="recommendations-title-secondary section-title">Еда</h3>
<p class="recommendations-description">Всегда заказывайте<br> топовый фирменный бургер, вы не разочаруетесь!</p>
</li>
<li class="recommendations-item recommendations-item-suvenier light-grey-color-item">
<h3 class="recommendations-title-secondary section-title">Сувениры</h3>
<p class="recommendations-description">Не только китайского,<br>но и настоящего местного производства!</p>
</li>
</ul>
</section>
<section class="search white-section">
<h2 class="search-title section-title">Заинтересовались?</h2>
<p class="search-description">Укажите предполагаемые даты поездки,<br>и мы покажем вам лучшие предложения гостиниц в Седоне</p>
<button class="button primary-button search-link" type="button">Поиск гостиницы в Седоне</button>
</section>
<section class="newsletter newsletter-background">
<h2 class="newsletter-title section-title white-title">Подпишитесь на рассылку</h2>
<p class="newsletter-description white-title">Только полезная информация и никакого спама, честное бойскаутское!</p>
<form class="newsletter-form" action="https://echo.htmlacademy.ru" method="post">
<p class="newsletter-form-email">
<label class="newsletter-label" for="newsletter-email"></label>
<input class="newsletter-email" type="email" id="newsletter-email" name="newsletter-email" placeholder="Ваш e-mail" required>
<button class="button secondary-button newsletter-button" type="submit">Подписаться</button>
</p>
</form>
</section>
</main>
<footer class="page-footer white-section white-title">
<ul class="footer-social-list list-none">
<li class="footer-social-item">
<a class="social-link none-text-decoration" href="https://vk.com/htmlacademy">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="14" fill="none" viewBox="0 0 24 14">
<path fill="#83b3d3" fill-rule="evenodd" d="M23.45.95c.17-.55 0-.95-.8-.95h-2.62c-.67 0-.98.35-1.14.73 0 0-1.34 3.2-3.23 5.27-.61.6-.89.8-1.22.8-.17 0-.42-.2-.42-.74V.95c0-.66-.18-.95-.74-.95H9.15c-.42 0-.67.3-.67.6 0 .61.95.76 1.05 2.5v3.8c0 .84-.16.99-.5.99-.88 0-3.05-3.21-4.33-6.89-.25-.71-.5-1-1.17-1H.9C.15 0 0 .35 0 .73c0 .68.89 4.07 4.14 8.55C6.32 12.34 9.38 14 12.16 14c1.67 0 1.88-.37 1.88-1v-2.32c0-.73.16-.88.69-.88.38 0 1.05.2 2.61 1.67C19.11 13.22 19.4 14 20.41 14h2.62c.75 0 1.13-.37.91-1.1-.24-.72-1.09-1.77-2.21-3.02-.62-.7-1.53-1.47-1.81-1.86-.4-.49-.28-.7 0-1.14 0 0 3.2-4.43 3.53-5.93" clip-rule="evenodd"/>
</svg>
<span class="visually-hidden">Vkontakte</span>
</a>
</li>
<li class="footer-social-item">
<a class="social-link" href="https://t.me/htmlacademy">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="16" fill="none" viewBox="0 0 18 16">
<path fill="#83b3d3" d="M16.79.1.84 6.25c-1.09.43-1.08 1.04-.2 1.31l4.1 1.28 9.47-5.98c.44-.27.85-.12.52.18L7.05 9.96l-.28 4.22c.41 0 .6-.19.83-.41l1.99-1.93 4.13 3.05c.77.42 1.31.2 1.5-.7l2.72-12.8c.28-1.12-.43-1.62-1.16-1.3"/>
</svg>
<span class="visually-hidden">Telegram</span>
</a>
</li>
<li class="footer-social-item">
<a class="social-link" href="https://www.youtube.com/user/htmlacademyru">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="22" height="17" fill="none" viewBox="0 0 22 17">
<path fill="#83b3d3" d="M18.6 0H3.18C1.31 0 0 1.6 0 3.4v10.1C0 15.4 1.31 17 3.17 17h15.66c1.64 0 3.17-1.6 3.17-3.4V3.4C21.78 1.6 20.47 0 18.6 0M7.67 12.54V4.46L15 8.5z"/>
</svg>
<span class="visually-hidden">YouTube</span>
</a>
</li>
</ul>
<address class="footer-contacts-address">
<a class="footer-contacts-phone none-text-decoration" href="tel:+78128121212">+7 (812) 812-12-12</a>
</address>
<a class="footer-link" href="https://htmlacademy.ru/intensive/htmlcss">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="115" height="33" fill="none" viewBox="0 0 115 33">
<path fill="#000" d="M0 12.9v2.6h2.5v-2.6zM11.6 4.5c-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.9M26.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.8zM41.1 4.6c-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-.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.3M47.8 12.7c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V0h-2zM28.9 19.7c-.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.6h2V18.2h-2zm-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.6M44.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.3c-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.1zM55.1 19.7c-.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.6h2V18.2h-2zm-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.6M68.7 19.8c-.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-2zm-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.6M78.3 17.9c-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.3m0 1.9c1.7 0 3 1 3.3 2.6h-6.5c.3-1.5 1.5-2.6 3.2-2.6M98.2 17.9c-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.4M109.4 27l-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.1z"/>
</svg>
<span class="visually-hidden">Ссылка на HTML Academy</span>
</a>
</footer>
<div class="modal-container">
<div class="modal modal-search">
<div class="modal-header">
<h2 class="section-title modal-title">Поиск гостиницы в седоне</h2>
<button class="button modal-close-button" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" fill="none" viewBox="0 0 53 53">
<path fill="#000" d="M34 21.292 32.708 20 27 25.708 21.292 20 20 21.292 25.708 27 20 32.708 21.292 34 27 28.292 32.708 34 34 32.708 28.292 27z"/>
</svg>
<span class="visually-hidden">Закрыть</span>
</button>
</div>
<section class="modal-content">
<h3 class="visually-hidden">Форма регистрации</h3>
<form class="modal-form" action="https://echo.htmlacademy.ru" method="post">
<div class="field-group checkin-group">
<label class="input-title" for="checkin">Дата Заезда:</label>
<input class="input-date" id="checkin" type="text" name="checkin" value="27 апреля 2020" required>
<svg class="input-date-img" xmlns="http://www.w3.org/2000/svg" width="16" height="15" fill="none" viewBox="0 0 16 15">
<path fill="#000" d="M5.75 10c.3 0 .5-.2.5-.5s-.2-.5-.5-.5-.5.2-.5.5.2.5.5.5"/><path fill="#000" d="M15 2h-2V0h-1v2H4V0H3v2H1c-.6 0-1 .4-1 1v11c0 .5.4 1 1 1h14c.5 0 1-.5 1-1V3c0-.6-.5-1-1-1m0 12H1V7h14zM1 6V3h2v2h1V3h8v2h1V3h2v3z"/><path fill="#000" d="M8 10c.3 0 .5-.2.5-.5S8.3 9 8 9s-.5.2-.5.5.2.5.5.5M10.25 10c.3 0 .5-.2.5-.5s-.2-.5-.5-.5-.5.2-.5.5.2.5.5.5M5.75 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M3.5 10c.3 0 .5-.2.5-.5S3.8 9 3.5 9s-.5.2-.5.5.2.5.5.5M3.5 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M8 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M10.25 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M12.5 10c.3 0 .5-.2.5-.5s-.2-.5-.5-.5-.5.2-.5.5.2.5.5.5M12.5 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5"/>
</svg>
<span class="input-description wrong-date">Мы не можем отправить вас в прошлое.</span>
</div>
<div class="field-group checkout-group">
<label class="input-title" for="checkout">Дата Выезда:</label>
<input class="input-date" id="checkout" type="text" name="checkout" value="1 сентября 2023" required>
<svg class="input-date-img" xmlns="http://www.w3.org/2000/svg" width="16" height="15" fill="none" viewBox="0 0 16 15">
<path fill="#000" d="M5.75 10c.3 0 .5-.2.5-.5s-.2-.5-.5-.5-.5.2-.5.5.2.5.5.5"/><path fill="#000" d="M15 2h-2V0h-1v2H4V0H3v2H1c-.6 0-1 .4-1 1v11c0 .5.4 1 1 1h14c.5 0 1-.5 1-1V3c0-.6-.5-1-1-1m0 12H1V7h14zM1 6V3h2v2h1V3h8v2h1V3h2v3z"/><path fill="#000" d="M8 10c.3 0 .5-.2.5-.5S8.3 9 8 9s-.5.2-.5.5.2.5.5.5M10.25 10c.3 0 .5-.2.5-.5s-.2-.5-.5-.5-.5.2-.5.5.2.5.5.5M5.75 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M3.5 10c.3 0 .5-.2.5-.5S3.8 9 3.5 9s-.5.2-.5.5.2.5.5.5M3.5 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M8 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M10.25 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5M12.5 10c.3 0 .5-.2.5-.5s-.2-.5-.5-.5-.5.2-.5.5.2.5.5.5M12.5 11c-.3 0-.5.2-.5.5s.2.5.5.5.5-.2.5-.5-.2-.5-.5-.5"/>
</svg>
<span class="input-description">На эти даты есть свободные номера. Пока есть.</span>
</div>
<div class="field-group-container">
<div class="field-group field-adult-group">
<label class="input-title" for="adult">Взрослые:</label>
<div class="input-first-group">
<button class="button button-minus" type="button">
<span class="visually-hidden">Уменьшить количество</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#000" d="M3 9v2h14V9z"/>
</svg>
</button>
<input class="input-adult" id="adult" type="text" value="2">
<button class="button button-plus" type="button">
<span class="visually-hidden">Увеличить количество</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#000" d="M17 9h-6V3H9v6H3v2h6v6h2v-6h6z"/>
</svg>
</button>
</div>
</div>
<div class="field-group field-children-group">
<label class="input-title input-title-children" for="children">Дети:
<img class="triangle" src="images/svg/triangle.svg" width="19" height="9" alt="">
<span class="modal-info">Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.</span>
</label>
<div class="input-second-group">
<button class="button button-minus" type="button">
<span class="visually-hidden">Уменьшить количество</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#000" d="M3 9v2h14V9z"/>
</svg>
</button>
<input class="input-adult" id='children' type="text" value="2">
<button class="button button-plus" type="button">
<span class="visually-hidden">Увеличить количество</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#000" d="M17 9h-6V3H9v6H3v2h6v6h2v-6h6z"/>
</svg>
</button>
</div>
</div>
</div>
<button class="button secondary-button input-submit" type="submit">Найти</button>
</form>
</section>
</div>
</div>
</body>
</html>