-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
243 lines (241 loc) · 15.8 KB
/
index.html
File metadata and controls
243 lines (241 loc) · 15.8 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
<!DOCTYPE html>
<html 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" sizes="32x32" href="images/favicon-32x32.png">
</head>
<body>
<header class="page-header" data-test="header">
<nav class="navigation">
<a class="navigation-logo" href="index.html">
<img src="images/svg/logo-header.svg" width="140" height="70" alt="Логотип сайта Седона">
</a>
<ul class="navigation-list list-none">
<li class="navigation-item active">
<a class="navigation-link current-link" href="#">Главная</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">О Седоне</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="catalog.html">Гостиницы</a>
</li>
</ul>
<ul class="navigation-user-list list-none">
<li class="navigation-user-item">
<a class="navigation-user-link search-icon" href="#">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 18.0083L15.8 14.3287C16.8 13.0359 17.5 11.3453 17.5 9.4558C17.5 5.08011 13.9 1.5 9.5 1.5C5.1 1.5 1.5 5.17956 1.5 9.55525C1.5 13.9309 5.1 17.511 9.5 17.511C11.3 17.511 13 16.9144 14.4 15.8204L18.1 19.5L19.5 18.0083ZM9.5 15.5221C6.2 15.5221 3.5 12.837 3.5 9.55525C3.5 6.27348 6.2 3.5884 9.5 3.5884C12.8 3.5884 15.5 6.27348 15.5 9.55525C15.5 12.837 12.8 15.5221 9.5 15.5221Z"/>
</svg>
<span class="visually-hidden">Поиск</span>
</a>
</li>
<li class="navigation-user-item">
<a class="navigation-user-link favorite" href="#">
<svg width="18" height="17" viewBox="0 0 18 17" xmlns="http://www.w3.org/2000/svg">
<path d="M8.9 17C8.6 17 8.3 16.9 8.1 16.6C2.7 10.5 1.4 9.1 1.1 8.7C0.4 7.8 0 6.6 0 5.4C0 2.4 2.4 0 5.5 0C6.8 0 8 0.5 9 1.3C10 0.5 11.3 0 12.5 0C15.5 0 18 2.4 18 5.4C18 6.7 17.5 7.9 16.7 8.8L9.7 16.7C9.5 16.9 9.3 17 8.9 17ZM2.9 7.5C3.2 7.9 6.4 11.5 9 14.4L15.2 7.4C15.7 6.9 15.9 6.2 15.9 5.4C15.9 3.6 14.4 2.1 12.6 2.1C11.6 2.1 10.6 2.6 9.9 3.4C9.6 3.7 9.3 3.8 9 3.8C8.7 3.8 8.4 3.6 8.2 3.4C7.5 2.6 6.5 2.1 5.5 2.1C3.7 2.1 2.2 3.6 2.2 5.4C2.1 6.3 2.5 7 2.9 7.5C2.8 7.5 2.8 7.5 2.9 7.5Z" />
</svg>
<span class="visually-hidden">Избранное</span>
<span class="user-counter">12</span>
</a>
</li>
</ul>
<a class="button button-primary button-header" href="#">Хочу сюда!</a>
</nav>
</header>
<main data-test="main">
<section class="hero" data-test="hero">
<h1 class="visually-hidden">Седона-городок в Аризоне</h1>
<img class="hero-image" src="images/svg/welcome.svg" width="458" height="352" alt="Welcome to the gorgeous Sedona, because the Grand Canyon sucks!">
</section>
<section class="advantages" data-test="advantages">
<h2 class="advantages-title">Седона — небольшой городок в Аризоне,<br> заслуживающий большего!</h2>
<p class="advantages-text">Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!</p>
<ul class="advantages-list list-none">
<li class="advantages-item advantages-item-image">
<div class="advantages-wrapper">
<h3>Настоящий городок</h3>
<p>Седона — не аттракцион для туристов,там течёт своя жизнь</p>
</div>
<img src="images/photo-1.jpg" width="800" height="385" alt="Вид из окна на город">
</li>
<li class="advantages-item">
<h3>Небольшая площадь</h3>
<p>Все достопримечательности находятся очень близко</p>
</li>
<li class="advantages-item">
<h3>Красивая<br> дорога</h3>
<p>Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</li>
<li class="advantages-item">
<h3>Мало<br> туристов</h3>
<p>Большинство едет в Гранд Каньон и толпится там</p>
</li>
<li class="advantages-item advantages-item-image advantages-item-reverse">
<div class="advantages-wrapper">
<h3>Там есть<br> мост дьявола</h3>
<p>Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
</div>
<img src="images/photo-2.jpg" width="800" height="385" alt="Место дьявола">
</li>
</ul>
</section>
<section class= "advertising" data-test="service">
<h2 class="visually-hidden">Реклама отелей Седоны</h2>
<p class="advertising-title">Приезжайте в Седону отдохнуть<br> в комфорте и уюте!</p>
<p class="advertising-text">Опытный персонал и качественное обслуживание!</p>
<ul class="advertising-list list-none">
<li class="advertising-item advertising-item-first">
<h3>Жильё</h3>
<p>Рекомендуем пожить<br> в настоящем мотеле,<br>всё как в кино!</p>
</li>
<li class="advertising-item advertising-item-second">
<h3>Еда</h3>
<p>Всегда заказывайте<br> топовый фирменный бургер, вы не разочаруетесь!</p>
</li>
<li class="advertising-item advertising-item-third">
<h3>Сувениры</h3>
<p>Не только китайского,<br> но и настоящего местного производства!</p>
</li>
</ul>
</section>
<section class="search" data-test="search">
<h2>Заинтересовались?</h2>
<p>Укажите предполагаемые даты поездки,<br> и мы покажем вам лучшие предложения гостиниц в Седоне</p>
<a class= "button button-large search-link" href="#">Поиск Гостиницы в Седоне</a>
</section>
<section class="subscription" data-test="subscribe">
<div class="subscription-wrapper">
<h2>Подпишитесь на рассылку</h2>
<p>Только полезная информация и никакого спама,<br> честное бойскаутское!</p>
<form class="newsletter-form" action="https://echo.htmlacademy.ru/" method="post">
<label for="newsletter-email" class="visually-hidden">Email</label>
<input class="field" type="email" name= "newsletter-email" id= "newsletter-email" placeholder="Ваш e-mail" required >
<button class="button button-large" type="submit">Подписаться</button>
</form>
</div>
</section>
</main>
<footer class="page-footer" data-test="footer">
<ul class="social-list list-none">
<li class="social-item">
<a class="social-link vk" href="https://vk.com/htmlacademy">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="15">
<path d="M24.12 1.8c.16-.54 0-.94-.8-.94H20.7c-.67 0-.98.34-1.15.73 0 0-1.33 3.2-3.22 5.27-.61.6-.9.8-1.23.8-.16 0-.41-.2-.41-.75v-5.1c0-.66-.19-.95-.74-.95H9.82c-.42 0-.67.3-.67.59 0 .62.95.76 1.04 2.51v3.8c0 .83-.15.98-.48.98-.9 0-3.06-3.2-4.34-6.88-.25-.72-.5-1-1.18-1H1.57c-.75 0-.9.34-.9.73 0 .68.89 4.07 4.14 8.55 2.17 3.06 5.23 4.72 8 4.72 1.68 0 1.88-.37 1.88-1v-2.32c0-.74.16-.88.7-.88.38 0 1.05.19 2.6 1.66 1.79 1.75 2.08 2.54 3.08 2.54h2.63c.75 0 1.12-.37.9-1.1-.23-.72-1.08-1.77-2.2-3.02-.62-.71-1.54-1.48-1.82-1.86-.39-.5-.28-.71 0-1.15 0 0 3.2-4.42 3.54-5.93Z" clip-rule="evenodd" />
</svg>
<span class="visually-hidden">Вконтакте</span>
</a>
<li class="social-item">
<a class="social-link telegram" href="https://t.me/htmlacademy">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16">
<path d="M16.79.96.84 7.1c-1.09.44-1.08 1.05-.2 1.32l4.1 1.28 9.47-5.98c.44-.27.85-.13.52.17l-7.68 6.93-.28 4.22c.41 0 .6-.2.83-.41l1.99-1.94 4.13 3.06c.77.42 1.31.2 1.5-.71l2.72-12.8c.28-1.1-.43-1.61-1.16-1.28Z" />
</svg>
<span class="visually-hidden">Telegram</span>
</a>
<li class="social-item">
<a class="social-link youtube" href="https://www.youtube.com/user/htmlacademyru">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="17">
<path d="M18.94.36H3.51C1.65.36.33 1.95.33 3.76v10.09c0 1.91 1.32 3.5 3.18 3.5h15.65c1.64 0 3.17-1.59 3.17-3.4V3.76c-.22-1.8-1.53-3.4-3.39-3.4ZM7.99 12.89V4.82l7.34 4.04-7.34 4.03Z" />
</svg>
<span class="visually-hidden">Youtube</span>
</a>
</li>
</ul>
<div class="contact-number">
<a class="contact-link" href="tel:+78128121212">+7 (812) 812-12-12</a>
</div>
<a class="footer-logo" href="https://htmlacademy.ru/intensive/htmlcss">
<svg xmlns="http://www.w3.org/2000/svg" width="115" height="34">
<g clip-path="url(#a)">
<path d="M0 13.26v2.6h2.5v-2.6H0ZM11.6 4.86c-1.6 0-2.8.7-3.6 1.7h-.1V.36h-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.16h-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.96c-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.06c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V.36h-2v12.7ZM28.9 20.06c-.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.36c-.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.1v-.2ZM55.1 20.06c-.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.16c-.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.26c-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.26c-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.36l-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" />
</g>
<defs>
<clipPath id="a">
<path d="M0 .36h115v33H0z" />
</clipPath>
</defs>
</svg>
</a>
</footer>
<div class="modal-container">
<div class="modal" data-test="modal">
<div class="title-wrapper">
<h2 class="modal-title">Поиск гостиницы в Седоне</h2>
<button class="modal-close-button" type="button">
<span class="visually-hidden">Закрыть</span>
</button>
</div>
<div class="modal-content">
<form class="searh-form" action="https://echo.htmlacademy.ru/" method="post">
<div class="field-row-wrapper">
<div class="field-date">
<label class="label-date">
<span class="input-label">Дата заезда:</span>
<input class="search-form-field" type="text" name="arrival-date" value= "27 апреля 2020" required>
</label>
<p class="field-message warning-message">Мы не можем отправить вас в прошлое.</p>
</div>
<div class="field-date">
<label class="label-date">
<span class="input-label">Дата выезда:</span>
<input class="search-form-field" type="text" name="departure-date" value= "1 сентября 2023" required>
</label>
<p class="field-message">На эти даты есть свободные номера. Пока есть.</p>
</div>
</div>
<div class="field-age-wrapper">
<div class="adults-wrapper">
<label class="input-label input-label-adults" for="adults">Взрослые:</label>
<div class="button-wrapper">
<button class="button-field button-minus" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" >
<path d="M3 9V11H17V9H3Z"/>
</svg>
<span class="visually-hidden">Минус</span>
</button>
<input class="number-form-field adults" type="number" name="adults" id="adults" min="0" max="10" value="2" required>
<button class="button-field button-plus" type="button" >
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M17 9H11V3H9V9H3V11H9V17H11V11H17V9Z"/>
</svg>
<span class="visually-hidden">Плюс</span>
</button>
</div>
</div>
<div class="children-wrapper">
<label class="input-label input-label-children" for="children">Дети:</label>
<div class="tooltip">
<button class="tooltip-toggle" type="button" aria-labelledby="tooltip-info">
<span class="visually-hidden">Информация</span>
</button>
<span class="tooltip-text" id="tooltip-info" role="tooltip">
Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.
</span>
</div>
<div class="button-wrapper">
<button class="button-field button-minus" type="button" >
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M3 9V11H17V9H3Z"/>
</svg>
<span class="visually-hidden">Минус</span>
</button>
<input class="number-form-field children" type="number" id="children" name="children" min="0" max="10" value="2" required>
<button class="button-field button-plus" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M17 9H11V3H9V9H3V11H9V17H11V11H17V9Z"/>
</svg>
<span class="visually-hidden">Плюс</span>
</button>
</div>
</div>
</div>
</form>
</div>
<button class="button button-secondary button-modal" type="submit">Найти</button>
</div>
</div>
</body>
</html>