forked from htmlacademy-htmlcss/2057771-sedona-36
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (154 loc) · 7.99 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Седона</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="page-container">
<header class="header">
<a class="navigation-logo">
<img src="images/logo-sedona.svg" width="140" height="70" alt="Седона">
</a>
<nav class="header-navigation navigation">
<ul class="navigation-list list-reset">
<li class="navigation-item">
<a class="navigation-link navigation-link-current">Главная</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-list navigation-user-list list-reset">
<li class="navigation-user-item">
<a class="navigation-user-link navigation-user-link-search" href="#">
<span class="visually-hidden">Поиск</span>
</a>
</li>
<li class="navigation-user-item">
<a class="navigation-user-link navigation-user-link-favorites" href="#">
<span class="visually-hidden">Избранное</span>
<span class="navigation-user-link-favorites-num">12</span>
</a>
</li>
</ul>
<a class="button navigation-button" href="#">Хочу сюда!</a>
</nav>
</header>
<main class="main-container main-page">
<section class="hero">
<h2 class="visually-hidden">Седона</h2>
</section>
<section class="greeting-description">
<h2 class="greeting-title">Седона — небольшой городок в Аризоне, заслуживающий большего!</h2>
<p class="greeting-text">Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!</p>
</section>
<section class="advantages">
<h2 class="visually-hidden">Преимущества</h2>
<ul class="advantages-list">
<li class="advantages-item advantages-item-wide">
<div class="advantages-content">
<h3 class="advantages-title">Настоящий городок</h3>
<p class="advantages-description">Седона — не аттракцион для туристов, там течёт своя жизнь</p>
</div>
<img src="images/small-town.jpg" width="800" height="385" alt="Настоящий городок">
</li>
<li class="advantages-item advantages-item-square">
<div class="advantages-content">
<h3 class="advantages-title">Небольшая площадь</h3>
<p class="advantages-description advantages-description-square">Все достопримечательности находятся очень близко</p>
</div>
</li>
<li class="advantages-item advantages-item-road">
<div class="advantages-content">
<h3 class="advantages-title">Красивая дорога</h3>
<p class="advantages-description advantages-description-road">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</div>
</li>
<li class="advantages-item advantages-item-tourist">
<div class="advantages-content">
<h3 class="advantages-title">Мало туристов</h3>
<p class="advantages-description advantages-description-tourist">Большинство едет в Гранд Каньон и толпится там</p>
</div>
</li>
<li class="advantages-item advantages-item-wide advantages-item-wide-reverse">
<div class="advantages-content">
<h3 class="advantages-title">Там есть Мост Дьявола</h3>
<p class="advantages-description">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
</div>
<img src="images/devils-bridge.jpg" width="800" height="385" alt="Мост Дьявола">
</li>
</ul>
</section>
<section class="greeting-description-white">
<h2 class="greeting-title">Приезжайте в Седону отдохнуть в комфорте и уюте!</h2>
<p class="greeting-text">Опытный персонал и качественное обслуживание!</p>
</section>
<section class="features">
<ul class="features-list features-list-recommendations list-reset">
<li class="features-item">
<h3 class="features-title">Жильё</h3>
<p class="features-description">Рекомендуем пожить в настоящем мотеле, всё как в кино!</p>
</li>
<li class="features-item features-item-food">
<h3 class="features-title">Еда</h3>
<p class="features-description">Всегда заказывайте топовый фирменный бургер, вы не разочаруетесь!</p>
</li>
<li class="features-item">
<h3 class="features-title">Сувениры</h3>
<p class="features-description">Не только китайского, но и настоящего местного производства!</p>
</li>
</ul>
</section>
<section class="search">
<h2 class="visually-hidden">Поиск гостиницы в Седоне</h2>
<h2 class="search-title">Заинтересовались?</h2>
<p class="search-text">Укажите предполагаемые даты поездки, и мы покажем вам лучшие предложения гостиниц в Седоне</p>
<a class="button search-button" href="#">Поиск гостиницы в Седоне</a>
</section>
<section class="subscribe">
<h2 class="subscribe-title">Подпишитесь на рассылку</h2>
<p class="subscribe-text">Только полезная информация и никакого спама, честное бойскаутское!</p>
<form class="subscribe-form" action="http://echo.htmlacademy.ru" method="POST">
<label class="visually-hidden" for="email">Ваш email</label>
<input class="subscribe-input form-input" id="email" name="email" type="email" placeholder="Ваш e-mail" required>
<button class="button subscribe-button" type="submit">Подписаться</button>
</form>
</section>
</main>
<footer class="footer">
<section class="social">
<h3 class="visually-hidden">Социальные сети</h3>
<ul class="social-list">
<li class="social-item">
<a class="social-link" href="https://vk.com/htmlacademy">
<span class="visually-hidden">ВКонтакте</span>
</a>
</li>
<li class="social-item">
<a class="social-link" href="https://t.me/htmlacademy">
<span class="visually-hidden">Telegram</span>
</a>
</li>
<li class="social-item">
<a class="social-link" href="https://www.youtube.com/user/htmlacademyru">
<span class="visually-hidden">Youtube</span>
</a>
</li>
</ul>
</section>
<section class="contacts">
<h3 class="visually-hidden">Контакты</h3>
<a class="footer-phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
</section>
<a class="footer-logo" href="https://htmlacademy.ru/">
<span class="visually-hidden">Логотип HTMLAcademy</span>
</a>
</footer>
</div>
</body>
</html>