-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
174 lines (174 loc) · 9.69 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
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Седона</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<nav class="main-navigation">
<a class="main-logo">
<img src="img/main-logo.png" width="138" height="70" alt="Логотип Седона">
</a>
<ul class="main-navigation-list">
<li>
<a href="#" title="Информация">Информация</a>
</li>
<li>
<a href="#" title="Фото и Видео">Фото и Видео</a>
</li>
<li>
<a href="#" title="Карта штата">Карта штата</a>
</li>
<li>
<a href="hotels.html" title="Гостиницы">Гостиницы</a>
</li>
</ul>
</nav>
<div class="welcome">
<h1>
Добро пожаловать в Седону, потому что она круче, чем Гранд Каньон!
<img src="img/welcome-text.png" width="458" height="352"
alt="Надпись: Welcome to Sedona because the Grand Canyon sucks!">
</h1>
</div>
</header>
<main class="main-content">
<section class="reasons">
<header class="reasons-header">
<h2 class="section-title">Седона — небольшой городок в Аризоне, заслуживающий большего!</h2>
<p class="section-subtitle">Рассмотрим 5 причин, по которым Седона круче, чем гранд каньон!</p>
</header>
<div class="reasons-large-item">
<div class="reasons-item-description">
<h2 class="section-title">Настоящий городок</h2>
<div class="reasons-number">– №1 –</div>
<p class="section-subtitle">Седона - не аттракцион для туристов, <br> там течет своя жизнь</p>
</div>
<div class="reasons-item-image">
<img src="img/reasons-image-01.jpg" width="800" height="256" alt="Изображение настоящего городка Седона">
</div>
</div>
<div class="features">
<div class="features-item features-item-housing">
<h2 class="section-title">Жилье</h2>
<p class="section-subtitle">Рекомендуем пожить в настоящем мотеле, все как в кино!</p>
</div>
<div class="features-item features-item-food">
<h2 class="section-title">Еда</h2>
<p class="section-subtitle">Всегда заказывайте фирменный бургер, вы не разочаруетесь!</p>
</div>
<div class="features-item features-item-souvenir">
<h2 class="section-title">Сувениры</h2>
<p class="section-subtitle">Не только китайского, но и местного производства!</p>
</div>
</div>
<div class="reasons-large-item">
<div class="reasons-item-image">
<img src="img/reasons-image-02.jpg" width="800" height="256" alt="Изображение моста дъявола">
</div>
<div class="reasons-item-description">
<h2 class="section-title">Там есть <br> мост дъявола</h2>
<div class="reasons-number">– №2 –</div>
<p class="section-subtitle">Да, по нему можно пройти! Если конечно <br> вы осмелитесь</p>
</div>
</div>
<div class="reasons-row">
<div class="reasons-item">
<h2 class="section-title">Небольшая площадь</h2>
<div class="reasons-number">– №3 –</div>
<p class="section-subtitle">Все достопримечательности находятся очень близко</p>
</div>
<div class="reasons-item">
<h2 class="section-title">Красивая дорога</h2>
<div class="reasons-number">– №4 –</div>
<p class="section-subtitle">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</div>
<div class="reasons-item">
<h2 class="section-title">Мало туристов</h2>
<div class="reasons-number">– №5 –</div>
<p class="section-subtitle">Большинство едет в Гранд Каньон и толпится там</p>
</div>
</div>
</section>
<section class="hotel-search">
<div class="hotel-search-header">
<p class="section-title"><b>Заинтересовались?</b></p>
<p class="section-subtitle">Укажите предполагаемые даты поездки, <br> и мы покажем вам лучшие предложения гостиниц в Седоне</p>
</div>
<div class="hotel-search-form">
<h2 class="hotel-search-form-toggle">
<button class="btn" id="search-form-toggle" type="button">Поиск гостиницы в Седоне</button>
</h2>
<div class="hotel-search-form-content is-hidden" id="search-form-container">
<form id="hotel-search-form" action="https://echo.htmlacademy.ru" method="get">
<div class="form-group">
<label class="label" for="checkin-date">Дата заезда:</label>
<div class="datepicker">
<input class="input input-datepicker" id="checkin-date" name="checkin-date" type="text" placeholder="24 апреля 2017">
<button class="btn btn-datepicker" type="button">Выбрать дату</button>
</div>
</div>
<div class="form-group">
<label class="label" for="checkout-date">Дата выезда:</label>
<div class="datepicker">
<input class="input input-datepicker" id="checkout-date" name="checkout-date" type="text" placeholder="4 июля 2017">
<button class="btn btn-datepicker" type="button">Выбрать дату</button>
</div>
</div>
<div class="form-group">
<div class="adults-number">
<label class="label" for="adults-number">Взрослые:</label>
<div class="plus-minus-count">
<button class="btn btn-minus" type="button">Минус</button>
<input class="input" id="adults-number" name="adults-number" type="text" pattern="[0-9]*" value="2">
<button class="btn btn-plus" type="button">Плюс</button>
</div>
</div>
<div class="children-number">
<label class="label" for="children-number">Дети:</label>
<div class="plus-minus-count">
<button class="btn btn-minus" type="button">Минус</button>
<input class="input" id="children-number" name="children-number" type="text" pattern="[0-9]*" value="0">
<button class="btn btn-plus" type="button">Плюс</button>
</div>
</div>
</div>
<button class="btn btn-submit" type="submit">Найти</button>
</form>
</div>
</div>
<div class="hotel-search-map" id="hotel-search-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d209543.59231075243!2d-111.88998190362865!3d34.85324641616187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872da132f942b00d%3A0x5548c523fa6c8efd!2sSedona%2C+AZ+86336%2C+USA!5e0!3m2!1sen!2sru!4v1492174136560" width="1200" height="474" style="border:0;" allowfullscreen></iframe>
</div>
</section>
</main>
<footer class="main-footer">
<section class="footer-hashtag">
<h3 class="visuallyhidden">Хэштег сайта</h3>
<a href="#" title="Хэштег посетите Седону">#visitsedona</a>
</section>
<section class="footer-social">
<h3 class="visuallyhidden">Присоединяйтесь к нам в соц. сетях!</h3>
<a class="btn btn-social btn-social-tw" href="#" title="Твиттер">Твиттер</a>
<a class="btn btn-social btn-social-fb" href="#" title="Фейсбук">Фейсбук</a>
<a class="btn btn-social btn-social-yt" href="#" title="Ютуб">Ютуб</a>
</section>
<section class="footer-copyright">
<h3 class="visuallyhidden">Разработка сайта</h3>
<p>Website by:</p>
<a class="htmlacademy-logo" href="https://htmlacademy.ru/intensive/htmlcss" title="HTML Academy">HTML Academy</a>
</section>
</footer>
</div>
<script>
// A check whether JS is on/off
var html=document.documentElement;html.className=html.className.replace("no-js","js");
</script>
<script src="js/script.min.js"></script>
</body>
</html>