-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (197 loc) · 14.2 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Седона</title>
<link rel="stylesheet" href="css/normalize-min.css">
<link rel="stylesheet" href="css/style-min.css">
</head>
<body>
<div class="wrapper">
<header class="main-header">
<div class="nav-logo">
<a class="logo-link" href="index.html">
<img class="logo" src="img/logo.svg" width="140" height="72" alt="Логотип Седоны">
</a>
</div>
<nav class="nav" aria-label="Навигация по сайту Седона">
<div class="nav-item">
<a class="nav-link" href="#">Информация</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#">Фото и видео</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#">Карта штата</a>
</div>
<div class="nav-item">
<a class="nav-link" href="catalog.html">Гостиницы</a>
</div>
</nav>
</header>
<main class="main-container">
<h1 class="visually-hidden">Седона</h1>
<section class="welcome">
<h2 class="visually-hidden">Добро пожаловать в Седону</h2>
<img class="welcome-logo" src="img/welcome.svg" width="459" height="353" alt="Welcome to the gorgeous Sedona. 'Because the Grand Canyon sucks!'">
</section>
<section class="description">
<h2 class="visually-hidden">Описание Седоны</h2>
<div class="description-info">
<div class="description-title">Седона — небольшой городок в Аризоне, заслуживающий большего!</div>
<div class="description-text">Рассмотрим 5 причин, по которым Седона круче, чем гранд каньон!</div>
</div>
</section>
<section class="advantages">
<h2 class="visually-hidden">Особенности Седоны</h2>
<div class="advantages-item">
<div class="advantages-info">
<div class="advantages-title">Настоящий городок</div>
<div class="advantages-text">– №1 –</div>
<div class="advantages-text">Седона – не аттракцион для туристов, там течет своя жизнь</div>
</div>
<div class="advantages-img">
<img src="img/feature-picture.jpg" width="800" height="256" alt="Изображение здания">
</div>
</div>
</section>
<section class="recommend">
<h2 class="visually-hidden">Наши рекомендации</h2>
<div class="recommend-item housing">
<div class="recommend-title">Жильё</div>
<div class="recommend-text">Рекомендуем пожить в настоящем мотеле, всё как в кино!</div>
</div>
<div class="recommend-item food">
<div class="recommend-title">Еда</div>
<div class="recommend-text">Всегда заказывайте фирменный бургер, вы не разочаруетесь!</div>
</div>
<div class="recommend-item souvenirs">
<div class="recommend-title">Сувениры</div>
<div class="recommend-text">Не только китайского, но и местного производства!</div>
</div>
</section>
<section class="advantages">
<h2 class="visually-hidden">Особенности Седоны</h2>
<div class="advantages-item">
<div class="advantages-img">
<img src="img/layer-5.jpg" width="800" height="256" alt="Мост Дьявола">
</div>
<div class="advantages-info">
<div class="advantages-title">Там есть<br> мост дьявола</div>
<div class="advantages-text">– №2 –</div>
<div class="advantages-text">Да, по нему можно пройти! Если конечно вы осмелитесь</div>
</div>
</div>
</section>
<section class="advantages-gray">
<h2 class="visually-hidden">Особенности Седоны</h2>
<div class="advantages-item-gray">
<div class="advantages-title">Небольшая площадь</div>
<div class="advantages-text">– №3 –</div>
<div class="advantages-text">Все достопримечательности находятся очень близко</div>
</div>
<div class="advantages-item-gray">
<div class="advantages-title">Красивая дорога</div>
<div class="advantages-text">– №4 –</div>
<div class="advantages-text">Ехать в Седону из Лас-Вегаса совсем не скучно!</div>
</div>
<div class="advantages-item-gray">
<div class="advantages-title">Мало туристов</div>
<div class="advantages-text">– №5 –</div>
<div class="advantages-text">Большинство едет в Гранд Каньон и толпится там</div>
</div>
</section>
<section class="search">
<h2 class="visually-hidden">Поиск гостиницы</h2>
<div class="search-info">
<div class="search-title">Заинтересовались?</div>
<div class="search-text">Укажите предполагаемые даты поездки,<br> и мы покажем вам лучшие предложения гостиниц в седоне</div>
<button class="search-btn" type="button">Поиск гостиницы в Седоне</button>
</div>
</section>
<section class="map">
<h2 class="visually-hidden">Карта</h2>
<div class="map-img">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d498279.7938041851!2d-111.95799718510416!3d34.870026591532834!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872da132f942b00d%3A0x5548c523fa6c8efd!2z0KHQtdC00L7QvdCwLCDQkNGA0LjQt9C-0L3QsCA4NjMzNiwg0KHQqNCQ!5e0!3m2!1sru!2sru!4v1582578526779!5m2!1sru!2sru" width="1200" height="473" allowfullscreen=""></iframe>
</div>
</section>
<section class="form" id="modal">
<h2 class="visually-hidden">Форма поиска гостиницы</h2>
<form action="#" method="post">
<div class="form-wrap">
<div class="form-item">
<label class="form-title" for="datepicker-1">Дата заезда:</label>
<div class="form-input-wrap">
<input class="form-input" type="text" name="arrival" id="datepicker-1" value="24 апреля 2017">
<svg class="form-calendar-svg" xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" aria-label="Календарь">
<path fill="#AAAAAA" d="M19.251 2.025h-2.845V.648c0-.381-.294-.689-.656-.689-.363 0-.656.308-.656.689v1.377h-3.938V.648c0-.381-.294-.689-.655-.689-.363 0-.657.308-.657.689v1.377H5.906V.648c0-.381-.294-.689-.656-.689-.363 0-.657.308-.657.689v1.377H1.75C.784 2.025 0 2.847 0 3.862v16.302C0 21.179.784 22 1.75 22h17.501c.966 0 1.749-.821 1.749-1.836V3.862c0-1.015-.783-1.837-1.749-1.837zm.437 18.139a.448.448 0 0 1-.437.459H1.75a.45.45 0 0 1-.438-.459V3.862a.45.45 0 0 1 .438-.459h2.844v1.378c0 .381.294.689.657.689.362 0 .656-.308.656-.689V3.403h3.938v1.378c0 .381.294.689.657.689.361 0 .655-.308.655-.689V3.403h3.938v1.378c0 .381.293.689.656.689.362 0 .656-.308.656-.689V3.403h2.845c.241 0 .437.206.437.459v16.302z"/>
<path fill="#AAAAAA" d="M4.594 8.225h2.625v2.066H4.594zM4.594 11.668h2.625v2.067H4.594zM4.594 15.112h2.625v2.066H4.594zM9.188 15.112h2.625v2.066H9.188zM9.188 11.668h2.625v2.067H9.188zM9.188 8.225h2.625v2.066H9.188zM13.781 15.112h2.625v2.066h-2.625zM13.781 11.668h2.625v2.067h-2.625zM13.781 8.225h2.625v2.066h-2.625z"/>
</svg>
</div>
</div>
<div class="form-item">
<label class="form-title" for="datepicker-2">Дата выезда:</label>
<div class="form-input-wrap">
<input class="form-input" type="text" name="departure" id="datepicker-2" value="4 июля 2017">
<svg class="form-calendar-svg" xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" aria-label="Календарь">
<path fill="#AAAAAA" d="M19.251 2.025h-2.845V.648c0-.381-.294-.689-.656-.689-.363 0-.656.308-.656.689v1.377h-3.938V.648c0-.381-.294-.689-.655-.689-.363 0-.657.308-.657.689v1.377H5.906V.648c0-.381-.294-.689-.656-.689-.363 0-.657.308-.657.689v1.377H1.75C.784 2.025 0 2.847 0 3.862v16.302C0 21.179.784 22 1.75 22h17.501c.966 0 1.749-.821 1.749-1.836V3.862c0-1.015-.783-1.837-1.749-1.837zm.437 18.139a.448.448 0 0 1-.437.459H1.75a.45.45 0 0 1-.438-.459V3.862a.45.45 0 0 1 .438-.459h2.844v1.378c0 .381.294.689.657.689.362 0 .656-.308.656-.689V3.403h3.938v1.378c0 .381.294.689.657.689.361 0 .655-.308.655-.689V3.403h3.938v1.378c0 .381.293.689.656.689.362 0 .656-.308.656-.689V3.403h2.845c.241 0 .437.206.437.459v16.302z"/>
<path fill="#AAAAAA" d="M4.594 8.225h2.625v2.066H4.594zM4.594 11.668h2.625v2.067H4.594zM4.594 15.112h2.625v2.066H4.594zM9.188 15.112h2.625v2.066H9.188zM9.188 11.668h2.625v2.067H9.188zM9.188 8.225h2.625v2.066H9.188zM13.781 15.112h2.625v2.066h-2.625zM13.781 11.668h2.625v2.067h-2.625zM13.781 8.225h2.625v2.066h-2.625z"/>
</svg>
</div>
</div>
<div class="form-item">
<label class="form-title" for="adult">Взрослые:</label>
<div class="form-wrap-short">
<button class="quantity-adult-minus" type="button"> – </button>
<input class="form-input-short quantity-num-adult" type="number" name="adult" id="adult" value="2">
<button class="quantity-adult-plus" type="button"> + </button>
</div>
<label class="form-title-last" for="children">Дети:</label>
<div class="form-wrap-short">
<button class="quantity-child-minus" type="button"> – </button>
<input class="form-input-short quantity-num-child" type="number" name="children" id="children" value="0">
<button class="quantity-child-plus" type="button"> + </button>
</div>
</div>
<div class="form-item">
<button class="form-submit" type="submit">Найти</button>
</div>
</div>
</form>
</section>
</main>
<footer class="footer main-footer">
<div class="footer-wrap">
<div class="footer-back"></div>
<div class="footer-contacts">
<p class="footer-text">
#visitSEDONA</p>
<p class="footer-text">
тел: <a class="footer-tel" href="tel:+74956660266">+7(495) 666-02-66</a></p>
</div>
<div class="footer-social">
<a class="footer-social-link twitter" href="#">
<p class="visually-hidden">Twitter</p>
</a>
<a class="footer-social-link facebook" href="#">
<p class="visually-hidden">Facebook</p>
</a>
<a class="footer-social-link youtube" href="#">
<p class="visually-hidden">Youtube</p>
</a>
</div>
<div class="footer-copyright">
<div class="footer-copyright-text">Website by</div>
<a class="footer-copyright-link" href="https://htmlacademy.ru/intensive/htmlcss">
<p class="visually-hidden">HTML Academy</p>
<svg class="footer-copyright-svg" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="115" height="41" viewBox="0 0 113 39">
<path fill="#000000" d="M46.84 28.22a2.07 2.07 0 0 0 .58-.11v1.4a3.41 3.41 0 0 1-1.24.22 1.75 1.75 0 0 1-1.75-1 5.08 5.08 0 0 1-3.3 1.13c-1.59 0-3.06-.87-3.06-2.68 0-2.24 2.08-2.93 3.9-2.93a11.63 11.63 0 0 1 2.28.26v-.31c0-1.09-.8-1.86-2.3-1.86a7.79 7.79 0 0 0-3.15.67v-1.79a10.72 10.72 0 0 1 3.35-.58c2.48 0 4 1.18 4 3.83v3.14a.57.57 0 0 0 .69.61zm-6.76-1.19a1.42 1.42 0 0 0 1.64 1.29 3.56 3.56 0 0 0 2.53-1v-1.51a10.21 10.21 0 0 0-1.9-.22c-1.1.01-2.27.35-2.27 1.45zM53.06 20.62a5.29 5.29 0 0 1 2.7.67v1.79a4.28 4.28 0 0 0-2.42-.73 2.89 2.89 0 1 0 0 5.76 5.26 5.26 0 0 0 2.55-.67v1.8a6.58 6.58 0 0 1-2.9.6 4.42 4.42 0 0 1-4.72-4.54 4.54 4.54 0 0 1 4.79-4.68zM65.84 28.22a2.07 2.07 0 0 0 .58-.11v1.4a3.41 3.41 0 0 1-1.24.22 1.75 1.75 0 0 1-1.75-1 5.08 5.08 0 0 1-3.3 1.13c-1.59 0-3.06-.87-3.06-2.68 0-2.24 2.08-2.93 3.9-2.93a11.63 11.63 0 0 1 2.28.26v-.31c0-1.09-.8-1.86-2.3-1.86a7.79 7.79 0 0 0-3.15.67v-1.79a10.72 10.72 0 0 1 3.35-.58c2.48 0 4 1.18 4 3.83v3.14a.57.57 0 0 0 .69.61zm-6.76-1.19a1.42 1.42 0 0 0 1.64 1.29 3.56 3.56 0 0 0 2.53-1v-1.51a10.21 10.21 0 0 0-1.9-.22c-1.11.01-2.27.35-2.27 1.45zM76.67 16.85v12.76h-1.76v-1.39a4.07 4.07 0 0 1-3.35 1.62 4.62 4.62 0 0 1 0-9.22 4 4 0 0 1 3.15 1.37v-5.14h2zm-4.76 5.48a2.9 2.9 0 0 0 0 5.8 3 3 0 0 0 2.79-1.84v-2.13a3.06 3.06 0 0 0-2.79-1.83zM82.99 20.62c3.48 0 4.68 2.81 4.12 5.34h-6.58c.22 1.57 1.75 2.22 3.35 2.22a6.41 6.41 0 0 0 2.77-.62v1.68a7.5 7.5 0 0 1-3.14.6c-2.68 0-5-1.53-5-4.61a4.39 4.39 0 0 1 4.48-4.61zm.09 1.62a2.39 2.39 0 0 0-2.57 2.26h4.85a2.06 2.06 0 0 0-2.28-2.26zM89.1 29.61v-8.75h1.73v1.09a4 4 0 0 1 2.92-1.33 3 3 0 0 1 2.73 1.4 4.33 4.33 0 0 1 3.06-1.4 3.21 3.21 0 0 1 3.32 3.52v5.47h-2V24.2a1.67 1.67 0 0 0-1.73-1.84 2.94 2.94 0 0 0-2.17 1.18V29.61h-2V24.2a1.67 1.67 0 0 0-1.73-1.84 3.11 3.11 0 0 0-2.32 1.35v5.91h-2zM111.47 20.86h2l-4.1 9.93c-.95 2.28-2.19 3-3.52 3a5 5 0 0 1-1.15-.15v-1.66a3 3 0 0 0 .89.13c.95 0 1.66-.67 2.17-2l.18-.44-4.16-8.82h2.13l3 6.6zM40.66 1.53v5a4 4 0 0 1 2.83-1.2A3.41 3.41 0 0 1 47.1 8.9v5.41h-2V9.15a1.9 1.9 0 0 0-2-2.1 3.08 3.08 0 0 0-2.44 1.46v5.8h-2V1.53h2zM52.43 2.42v3.12h3.17v1.71h-3.17v4c0 1.15.53 1.53 1.66 1.53a4.71 4.71 0 0 0 1.77-.35v1.68a7.14 7.14 0 0 1-2.35.38 2.68 2.68 0 0 1-3-2.88V7.23h-1.6V5.52h1.57V2.88zM58.1 14.29V5.54h1.73v1.09a4 4 0 0 1 2.92-1.33 3 3 0 0 1 2.73 1.4 4.33 4.33 0 0 1 3.06-1.4 3.21 3.21 0 0 1 3.32 3.52v5.47h-2V8.88a1.67 1.67 0 0 0-1.73-1.84 2.94 2.94 0 0 0-2.17 1.18V14.29h-2V8.88a1.67 1.67 0 0 0-1.73-1.84 3.11 3.11 0 0 0-2.32 1.35v5.91h-2zM74.72 1.52h1.95v12.76h-1.95zM15.44.02h-.16L0 1.62v28l15.28 9.09 15.28-9.09v-28zm13.12 28.45l-13.28 7.9L2 28.47V16.99l13.22 7.87v1.43l-9.07-5.4v1.38l9.11 5.47v1.46l-9.1-5.42v1.38l9.11 5.47 9.19-5.5V19.22l4.1-2.45v11.67zm0-13.16l-3.65 2.14-1.68 1-8-4.76v1.38l6.84 4.07h-.06l-.15.09-1 .57-5.64-3.36v1.38l4.45 2.65-1.05.7-3.36-2v1.38l2.21 1.3-2.25 1.35-13.16-7.82 13.17-7.92zm0-1.39L15.21 6.05l-13.2 7.86V3.41l13.28-1.39 13.28 1.39v10.51z"/>
</svg>
</a>
</div>
</div>
</footer>
</div>
<script src="js/popup-min.js"></script>
</body>
</html>