-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmodal.html
242 lines (241 loc) · 17.4 KB
/
modal.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Главная страница</title>
<link rel="icon" href="favicon.ico"><!-- 32×32 -->
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="body-container">
<header class="main-header">
<nav class="navigation">
<a href="index.html" class="navigation-logo">
<img src="./img/logo.svg" width="138" height="64" alt="Logo">
</a>
<ul class="navigation-list list-reset">
<li class="navigation-item">
<a class="navigation-link" href="main.html">Главная</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="about-sedona.html">О Седоне</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="hotels.html">Гостиницы</a>
</li>
</ul>
<ul class="navigation-user list-reset">
<li class="navigation-user-item">
<a class="navigation-user-link" href="#">
<span class="visually-hidden">Поиск</span>
<img src="./img/search.svg" alt="Поиск" width="20" height="20">
</a>
</li>
<li class="navigation-user-item">
<a class="navigation-user-link" href="#">
<span class="visually-hidden">Избранные</span>
<span class="favourites-number">12</span>
<img src="./img/favourites.svg" alt="Избранные" width="20" height="20">
</a>
</li>
<li class="navigation-item">
<a class="navigation-user-link want" href="#">Хочу Сюда</a>
</li>
</ul>
</nav>
</header>
<main class="main-container main-index">
<div class="page-container">
<h1 class="visually-hidden">Sedona</h1>
<section class="welcome">
<figure><img src="./img/welcome.svg" alt="Приглашение в Седону" width="458" height="352"></figure>
</section>
<section class="advantages">
<h2 class="visually-hidden">Преимущества</h2>
<h2 class="section-header">СЕДОНА - НЕБОЛЬШОЙ ГОРОДОК В АРИЗОНЕ, <br>ЗАСЛУЖИВАЮЩИЙ БОЛЬШЕГО!</h2>
<p class="section-header-text">Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!</p>
<ul class="advantages-list list-reset">
<li class="advantages-item advantages-color-dark advantages-item-wrapper">
<div class="advantages-item-text">
<h3 class="advantages-title">Настоящий городок</h3>
<div class="restagle-light"></div>
<p class="advantages-discription">Седона — не аттракцион для туристов, там течёт своя жизнь</p>
</div>
<div class="advantages-item-image">
<img src="./img/photo-1-2.jpg" alt="Кадр из городка" width="800" height="385">
</div>
</li>
<li class="advantages-item advantages-color-light">
<h3 class="advantages-title">Небольшая площадь</h3>
<p class="advantages-discription">Все достопримечательности находятся очень близко</p>
</li>
<li class="advantages-item advantages-color">
<h3 class="advantages-title">Красивая дорога</h3>
<p class="advantages-discription">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</li>
<li class="advantages-item advantages-color-light">
<h3 class="advantages-title">Мало туристов</h3>
<p class="advantages-discription">Большинство едет в Гранд Каньон и толпится там</p>
</li>
<li class="advantages-item advantages-color-dark advantages-item-wrap">
<div class="advantages-item-text">
<h3 class="advantages-title">Там есть мост дьявола</h3>
<div class="restagle-light"></div>
<p class="advantages-discription">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
</div>
<div class="advantages-item-image">
<img src="./img/photo-2-2.jpg" alt="Горы" width="800" height="385">
</div>
</li>
</ul>
<h2 class="section-header">ПРИЕЗЖАЙТЕ В СЕДОНУ ОТДОХНУТЬ В КОМФОРТЕ И УЮТЕ!</h2>
<p class="section-header-text">Опытный персонал и качественное обслуживание!</p>
<ul class="advantages-list advantages-user list-reset">
<li class="advantages-item advantages-color-light advantages-item-user">
<img src="./img/home.svg" width="75" height="72" alt="Home">
<h3 class="advantages-title">Жилье</h3>
<p class="advantages-discription">Рекомендуем пожить в настоящем мотеле, всё как в кино!</p>
</li>
<li class="advantages-item advantages-item-user">
<img src="./img/food.svg" width="75" height="72" alt="Food">
<h3 class="advantages-title">Еда</h3>
<p class="advantages-discription">Всегда заказывайте топовый фирменный бургер, вы не разочаруетесь!</p>
</li>
<li class="advantages-item advantages-color-light advantages-item-user">
<img src="./img/gift.svg" width="75" height="72" alt="Gift">
<h3 class="advantages-title">Сувениры</h3>
<p class="advantages-discription">Не только китайского, но и настоящего местного производства!</p>
</li>
</ul>
</section>
<section>
<h2 class="section-header section-head">Заитересовались?</h2>
<p class="section-header-text section-head-text">Укажите предполагаемые даты поездки, <br> и мы покажем вам лучшие предложения гостиниц в Седоне</p>
<a class="search-hotel" href="#">ПОИСК ГОСТИНИЦЫ В СЕДОНЕ</a>
</section>
<section class="subscribe">
<h2 class="section-header section-header-color">ПОДПИШИТЕСЬ НА РАССЫЛКУ</h2>
<p class="section-header-text section-header-text-color">Только полезная информация и никакого спама, <br> честное бойскаутское!</p>
<form class="subscribe-form">
<input type="email" placeholder="Ваш e-mail" class="mail-form">
<button type="submit" class="button-subscribe">ПОДПИСАТЬСЯ</button>
</form>
</section>
</div>
</main>
<footer class="page-footer">
<div class="page-footer-container">
<section class="footer-social">
<ul class="footer-social-list list-reset">
<li class="footer-social-item">
<a href="https://vk.com/htmlacademy" class="footer-social-link">
<span class="visually-hidden">Вконтакте</span>
<svg width="48" height="41" viewBox="0 0 48 41" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1164 14.8044C35.2824 14.2584 35.1164 13.8564 34.3214 13.8564H31.6964C31.0284 13.8564 30.7204 14.2034 30.5534 14.5864C30.5534 14.5864 29.2184 17.7824 27.3274 19.8584C26.7154 20.4604 26.4374 20.6514 26.1034 20.6514C25.9364 20.6514 25.6854 20.4604 25.6854 19.9134V14.8044C25.6854 14.1484 25.5014 13.8564 24.9454 13.8564H20.8174C20.4004 13.8564 20.1494 14.1604 20.1494 14.4494C20.1494 15.0704 21.0954 15.2144 21.1924 16.9624V20.7604C21.1924 21.5934 21.0394 21.7444 20.7054 21.7444C19.8154 21.7444 17.6504 18.5334 16.3654 14.8594C16.1164 14.1444 15.8644 13.8564 15.1934 13.8564H12.5664C11.8164 13.8564 11.6664 14.2034 11.6664 14.5864C11.6664 15.2684 12.5564 18.6564 15.8114 23.1374C17.9814 26.1974 21.0364 27.8564 23.8194 27.8564C25.4884 27.8564 25.6944 27.4884 25.6944 26.8534V24.5404C25.6944 23.8034 25.8524 23.6564 26.3814 23.6564C26.7714 23.6564 27.4384 23.8484 28.9964 25.3234C30.7764 27.0724 31.0694 27.8564 32.0714 27.8564H34.6964C35.4464 27.8564 35.8224 27.4884 35.6064 26.7604C35.3684 26.0364 34.5184 24.9854 33.3914 23.7384C32.7794 23.0284 31.8614 22.2634 31.5824 21.8804C31.1934 21.3894 31.3044 21.1704 31.5824 20.7334C31.5824 20.7334 34.7824 16.3074 35.1154 14.8044H35.1164Z"/>
</svg>
</a>
</li>
<a class="footer-social-item">
<a href="https://t.me/htmlacademy" class="footer-social-link">
<span class="visually-hidden">Телеграм</span>
<svg width="48" height="41" viewBox="0 0 48 41" xmlns="http://www.w3.org/2000/svg">
<path d="M31.785 12.9557L15.8405 19.1042C14.7523 19.5413 14.7586 20.1483 15.6408 20.419L19.7344 21.696L29.2058 15.7201C29.6537 15.4477 30.0629 15.5942 29.7265 15.8928L22.0528 22.8183H22.051L22.0528 22.8192L21.7705 27.0387C22.1841 27.0387 22.3667 26.8489 22.5987 26.625L24.5871 24.6915L28.7229 27.7464C29.4855 28.1664 30.0332 27.9506 30.2229 27.0405L32.9379 14.2453C33.2158 13.1311 32.5126 12.6266 31.785 12.9557Z"/>
</svg>
</a>
</li>
<li class="footer-social-item">
<a href="https://www.youtube.com/user/htmlacademyru" class="footer-social-link">
<span class="visually-hidden">Ютуб</span>
<svg width="48" height="41" viewBox="0 0 48 41" xmlns="http://www.w3.org/2000/svg">
<path d="M31.9402 12.3564H16.5074C14.6467 12.3564 13.3333 13.9502 13.3333 15.7564V25.8502C13.3333 27.7627 14.6467 29.3564 16.5074 29.3564H32.1591C33.8009 29.3564 35.3333 27.7627 35.3333 25.9564V15.7564C35.1143 13.9502 33.8009 12.3564 31.9402 12.3564ZM20.9949 24.8939V16.8189L28.3283 20.8564L20.9949 24.8939Z"/>
</svg>
</a>
</li>
</ul>
</section>
<section class="footer-contact">
<a class="footer-contact-phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
</section>
<section class="footer-logo">
<a href="https://htmlacademy.ru/" class="footer-logo-link">
<span class="visually-hidden">Логотип-htmlacademy</span>
<svg width="115" height="34" viewBox="0 0 115 34" xmlns="http://www.w3.org/2000/svg">
<path d="M0 13.2564V15.8564H2.5V13.2564H0Z"/>
<path d="M11.6 4.85645C10 4.85645 8.8 5.55645 8 6.55645H7.9V0.356445H5.9V15.8564H7.9V10.5564C7.9 8.45645 9.2 6.95645 11.2 6.95645C13 6.95645 14.1 8.35645 14.1 10.1564V15.8564H16.1V9.75644C16.2 6.75644 14.3 4.85645 11.6 4.85645Z"/>
<path d="M26.6 5.15645H21.8V1.45645H19.8V5.25645H17.9V7.25645H19.8V13.2564C19.8 14.9564 20.8 15.9564 22.5 15.9564H26.6V13.9564H22.9C22.2 13.9564 21.8 13.5564 21.8 12.8564V7.15645H26.6V5.15645Z"/>
<path d="M41.1 4.95645C39.5 4.95645 38.2 5.75644 37.6 7.05645H37.5C36.9 5.85645 35.7 4.95645 34.1 4.95645C32.7 4.95645 31.6 5.75645 31 6.75645H30.9V5.15645H29V15.7564H31V10.3564C31 8.35645 32 6.85645 33.6 6.85645C35.1 6.85645 36 7.85645 36 9.45645V15.7564H38V10.1564C38 7.75645 39.4 6.85645 40.6 6.85645C42.1 6.85645 43 7.85645 43 9.45645V15.7564H45V9.25644C45.1 6.75644 43.6 4.95645 41.1 4.95645Z"/>
<path d="M47.8 13.0564C47.8 14.7564 48.8 15.7564 50.6 15.7564H52.6V13.7564H50.9C50.2 13.7564 49.8 13.3564 49.8 12.6564V0.356445H47.8V13.0564Z"/>
<path d="M28.9 20.0564C28 18.9564 26.7 18.2564 25 18.2564C21.9 18.2564 19.6 20.5564 19.6 23.8564C19.6 27.1564 21.9 29.4564 25 29.4564C26.8 29.4564 28 28.6564 28.8 27.5564H28.9V29.1564H30.9V18.5564H28.9V20.0564ZM25.3 27.4564C23.1 27.4564 21.7 25.8564 21.7 23.8564C21.7 21.8564 23.1 20.2564 25.3 20.2564C27.5 20.2564 28.9 21.8564 28.9 23.8564C28.9 25.7564 27.5 27.4564 25.3 27.4564Z"/>
<path d="M44.2 22.3564C43.7 19.9564 41.6 18.2564 38.8 18.2564C35.4 18.2564 33.2 20.7564 33.2 23.8564C33.2 26.9564 35.4 29.4564 38.8 29.4564C41.6 29.4564 43.7 27.6564 44.2 25.2564H42.1C41.7 26.5564 40.4 27.5564 38.8 27.5564C36.6 27.5564 35.2 25.9564 35.2 23.9564C35.2 21.9564 36.6 20.3564 38.8 20.3564C40.4 20.3564 41.6 21.3564 42.1 22.5564H44.2V22.3564Z"/>
<path d="M55.1 20.0564C54.2 18.9564 52.9 18.2564 51.2 18.2564C48.1 18.2564 45.8 20.5564 45.8 23.8564C45.8 27.1564 48.1 29.4564 51.2 29.4564C53 29.4564 54.2 28.6564 55 27.5564H55.1V29.1564H57.1V18.5564H55.1V20.0564ZM51.5 27.4564C49.3 27.4564 47.9 25.8564 47.9 23.8564C47.9 21.8564 49.3 20.2564 51.5 20.2564C53.7 20.2564 55.1 21.8564 55.1 23.8564C55.1 25.7564 53.6 27.4564 51.5 27.4564Z"/>
<path d="M68.7 20.1564C67.8 19.0564 66.5 18.2564 64.8 18.2564C61.7 18.2564 59.4 20.5564 59.4 23.8564C59.4 27.1564 61.6 29.4564 64.8 29.4564C66.5 29.4564 67.8 28.6564 68.6 27.6564H68.7V29.1564H70.7V13.7564H68.7V20.1564ZM65.1 27.4564C62.9 27.4564 61.5 25.8564 61.5 23.8564C61.5 21.8564 62.9 20.2564 65.1 20.2564C67.3 20.2564 68.7 21.8564 68.7 23.8564C68.6 25.8564 67.2 27.4564 65.1 27.4564Z"/>
<path d="M78.3 18.2564C75 18.2564 72.8 20.7564 72.8 23.8564C72.8 26.8564 74.9 29.4564 78.3 29.4564C80.8 29.4564 82.8 28.1564 83.5 25.8564H81.4C80.9 26.8564 79.8 27.4564 78.4 27.4564C76.5 27.4564 75.1 26.1564 75 24.5564H83.8C84 20.9564 81.8 18.2564 78.3 18.2564ZM78.3 20.1564C80 20.1564 81.3 21.1564 81.6 22.7564H75.1C75.4 21.2564 76.6 20.1564 78.3 20.1564Z"/>
<path d="M98.2 18.2564C96.6 18.2564 95.3 19.0564 94.6 20.2564H94.5C93.9 19.0564 92.7 18.2564 91.1 18.2564C89.7 18.2564 88.6 18.9564 88 20.0564V18.5564H86.1V29.1564H88.1V23.7564C88.1 21.7564 89.1 20.3564 90.7 20.2564C92.2 20.2564 93.1 21.2564 93.1 22.8564V29.1564H95.1V23.5564C95.1 21.1564 96.5 20.2564 97.7 20.2564C99.2 20.2564 100.1 21.2564 100.1 22.8564V29.1564H102.1V22.6564C102.2 20.0564 100.7 18.2564 98.2 18.2564Z"/>
<path d="M109.4 27.3564L105.8 18.4564H103.6L108.4 30.0564C108.1 30.9564 107.7 31.2564 106.7 31.2564H104.2V33.2564H106.7C108.5 33.2564 109.5 32.4564 110.2 30.6564L114.9 18.4564H112.8L109.4 27.3564Z"/>
</svg>
</a>
</section>
</div>
</footer>
</div>
<div class="modal-container">
<div class="modal modal-search">
<button class="modal-close-button">
<span class="visually-hidden">Закрыть</span>
</button>
<section class="modal-content">
<h2 class="modal-title">поиск гостиницы в седоне</h2>
<form class="search-form" method="post">
<div class="field-group">
<div class="field-group-label">
<label class="date-in" for="date-in">Дата заезда:</label>
</div>
<div class="field-group-input">
<input class="search-form-field field" type="text" id="date-in" name="date-in" placeholder="27 апреля 2020">
</div>
<p class="false-message">Мы не можем отправить вас в прошлое</p>
</div>
<div class="field-group">
<div class="field-group-label">
<label class="date-out" for="date-out">Дата выезда:</label>
</div>
<div class="field-group-input">
<input class="search-form-field field" type="text" id="date-out" name="date-out" placeholder="1 сентября 2023">
</div>
<p class="message">На эти даты есть свободные номера. Пока есть.</p>
</div>
<div class="field-group-list">
<div class="field-group-label">
<label class="field-group-older" for="older">Взрослые:</label>
</div>
<div class="field-group-item">
<button class="min-older" type="button" form="older"></button>
<input class="search-form-count field" type="number" id="older" name="older" placeholder="2">
<button class="plus-older" type="button" form="older"></button>
</div>
<div class="field-group-label">
<span class="field-group-children group-children-icon">
<label class="field-group-children" for="children">Дети:</label>
<span class="tooltip">
<button class="tooltip-info" type="button" aria-labelledby="tooltip-label-date">
<img src="./img/info.svg" class="tooltip-icon" alt="Информация" width="2" height="12">
</button>
<span class="tooltip-text" role="tooltip" id="tooltip-label-date">Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.</span>
</span>
</span>
</div>
<div class="field-group-item">
<button class="min-children" type="button" form="children"></button>
<input class="search-form-count field" type="number" id="children" name="children" placeholder="2">
<button class="plus-children" type="button" form="children"></button>
</div>
</div>
<div class="field-button-search">
<button class="button-search-list" type="submit">Найти</button>
</div>
</form>
</section>
</div>
</div>
</body>
</html>