-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (165 loc) · 8.75 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Седона</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<div class="main-block">
<header class="main-header">
<div class="header-logotype">
<a class="logo">City of Sedona
<img src="img/logotype.png" width="138" height="70" alt="City of Sedona">
</a>
</div>
<ul class="main-menu">
<li>
<a href="#">Информация</a>
</li>
<li>
<a href="#">Фото и видео</a>
</li>
<li>
<a href="#">Карта штата</a>
</li>
<li>
<a href="hotels.html">Гостиницы</a>
</li>
</ul>
</header>
<main class="index-content">
<div class="main-image-sedona"></div>
<div class="description">
<h4>Седона — небольшой городок в Аризоне, заслуживающий большего!</h4>
<p>Рассмотрим 5 причин, по которым Седона круче, чем Гранд Каньон!</p>
</div>
<div class="block-advantage clearfix">
<div class="advantage-left">
<h4>Настоящий городок</h4>
<span class="number">— №1 —</span>
<p>Седона - не аттракцион для туристов, там течет своя жизнь</p>
</div>
<div class="advantage-image">
<img src="img/advantage-left.jpg" class="advantage-img" width="800" height="256" alt="Городок">
</div>
</div>
<div class="row-menu clearfix">
<div class="column-menu">
<a href="#" class="housing">
<h4>Жилье</h4>
</a>
<p>Рекомендуем пожить в настоящем мотеле, все как в кино!</p>
</div>
<div class="column-menu">
<a href="#" class="food">
<h4>Еда</h4>
</a>
<p>Всегда заказывайте фирменный бургер, вы не разочаруетесь!</p>
</div>
<div class="column-menu">
<a href="#" class="souvenirs">
<h4>Сувениры</h4>
</a>
<p>Не только китайского, но и местного производства!</p>
</div>
</div>
<div class="block-advantage clearfix">
<div class="advantage-right">
<h4>Там есть<br>
мост дьявола</h4>
<span class="number">— №2 —</span>
<p>Да, по нему можно пройти! Если конечно вы осмелитесь</p>
</div>
<div class="advantage-image">
<img src="img/advantage-right.jpg" class="advantage-img" width="800" height="256" alt="Мост дьявола">
</div>
</div>
<div class="row-advantage clearfix">
<div class="column-advantage">
<h4>Небольшая площадь</h4>
<span class="number-row">— №3 —</span>
<p>Все достопримечательности находятся очень близко</p>
</div>
<div class="column-advantage">
<h4>Красивая дорога</h4>
<span class="number-row">— №4 —</span>
<p>Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</div>
<div class="column-advantage">
<h4>Мало туристов</h4>
<span class="number-row">— №5 —</span>
<p>Большинство едет в гранд каньон и толпится там</p>
</div>
</div>
<div class="interested">
<h3>Заинтересовались?</h3>
<p>Укажите предполагаемые даты поездки,<br> и мы покажем вам лучшие предложения гостиниц в Седоне</p>
<button type="button" class="button-search">Поиск гостиницы в Седоне</button>
<div class="popup-form">
<form action="#" method="get" class="search-hotel-sedona">
<div class="popup-form-control clearfix">
<label for="arrival">Дата заезда:</label>
<input type="text" id="arrival" class="popup-arrival" placeholder="24 апреля 2017">
<div class="popup-calendar"></div>
</div>
<div class="popup-form-control clearfix">
<label for="departure">Дата выезда:</label>
<input type="text" id="departure" class="popup-departure" placeholder="4 июля 2017">
<div class="popup-calendar"></div>
</div>
<div class="popup-control-bottom clearfix">
<div class="popup-form-control-half">
<label for="age-adults">Взрослые:</label>
<div class="popup-form-count">
<button type="button" class="minus"></button>
<input type="text" id="age-adults" class="popup-age-adults" placeholder="2">
<button type="button" class="plus"></button>
</div>
</div>
<div class="popup-form-control-half">
<label for="age-children">Дети:</label>
<div class="popup-form-count">
<button type="button" class="minus"></button>
<input type="text" id="age-children" class="popup-age-children" placeholder="0">
<button type="button" class="plus"></button>
</div>
</div>
</div>
<button type="submit" class="button-popup">Найти
</button>
</form>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d52377.6006822901!2d-111.74741734029047!3d34.86627574633362!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x872da132f942b00d%3A0x5548c523fa6c8efd!2z0KHQtdC00L7QvdCwIFNlZG9uYQ!3m2!1d34.8697395!2d-111.7609896!4m5!1s0x872da132f942b00d%3A0x5548c523fa6c8efd!2z0KHQtdC00L7QvdCwLCDQkNGA0LjQt9C-0L3QsCA4NjMzNiwg0KHQqNCQ!3m2!1d34.8697395!2d-111.7609896!5e0!3m2!1sru!2sua!4v1487181898403" width="1200" height="590" style="border:0" allowfullscreen></iframe>
</div>
</main>
<footer class="main-footer clearfix">
<div class="visit-sedona">
<a href="#">#Visitsedona</a>
</div>
<div class="social-list">
<ul class="social-net">
<li>
<a href="#" class="social-btn social-btn-twitter" title="twitter">Twitter</a>
</li>
<li>
<a href="#" class="social-btn social-btn-fb" title="facebook">Facebook</a>
</li>
<li>
<a href="#" class="social-btn social-btn-youtube" title="youtube">Youtube</a>
</li>
</ul>
</div>
<div class="development">
<span>Website by</span>
<a href="#" class="html-academy">Html-academy</a>
</div>
</footer>
</div>
<script src="js/scripts.min.js"></script>
</body>
</html>