-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (154 loc) · 10.8 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/picturefill.min.js" async></script>
<title>HTML Academy: Седона</title>
</head>
<body>
<svg style="display:none"><symbol viewBox="0 0 8.672 18.944" id="icon-facebook"><path d="M6.275 3.356h2.398V0H5.795C2.656.181 1.54 2.387 1.948 6.114H0v3.518h1.959v9.312h3.837V9.632h2.857V6.114H5.787c-.022-1.045-.037-2.405.488-2.758z"/></symbol><symbol viewBox="0 0 17.5 14.663" id="icon-twitter"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.283.153c1.736-.484 3.074.264 3.685 1.15.694-.225 1.372-.47 2.072-.69-.004.841-.538 1.478-.883 1.728.704.165 1.343-.481 1.343-.481-.175.977-1.035 1.746-1.611 1.977-.239 6.592-3.272 10.956-10.382 10.823h-.46c-.422 0-4.29-.45-5.047-1.843 2.341.192 4.011-.412 4.835-1.15-.989-.293-2.761-.464-3.07-2.881.362.105.583.223 1.228.117C1.757 8.067.385 7.366.461 5.218c.294.319 1.1.523 1.381.461C1.117 5.444-.188 2.398.921.843 2.794 2.655 4.769 4.364 8.29 4.528c.216-2.24 1.171-3.74 2.993-4.375z"/></symbol><symbol viewBox="0 0 19.979 14.015" id="icon-youtube"><path d="M17.145 0H2.835A2.842 2.842 0 0 0 0 2.835v8.345a2.842 2.842 0 0 0 2.835 2.835h14.31a2.842 2.842 0 0 0 2.835-2.835V2.835A2.844 2.844 0 0 0 17.145 0zM7.036 10.392V3.623l6.769 3.384-6.769 3.385z"/></symbol><symbol viewBox="0 0 26.943 34.09" id="logo-htmlacademy"><path d="M13.62.017L13.472 0 0 1.412v24.661l13.473 8.017 13.43-7.99.042-.025V1.412L13.62.017zm11.399 12.11L13.495 5.334l-.001-.104-.087.05-.088-.056v.109L1.925 12.118V3.147l11.548-1.212L25.02 3.147v8.98zm-11.614-5.34L24.923 13.5l-4.479 2.64-7.093-4.221-.014 1.415 5.904 3.513-.86.507-5.03-2.992-.014 1.415 3.827 2.275-.782.523-3.031-1.787-.014 1.413 1.853 1.091-1.8 1.081-11.356-6.751 11.371-6.835zm-11.48 8.34l11.411 6.791.016 1.044-7.942-4.728-.015 1.416 7.979 4.795.018 1.076-7.973-4.74-.013 1.414 8.021 4.822.046.025 8.143-4.872-.011-5.177 3.415-2.036v10.021L13.472 31.85 1.925 24.979v-9.852z"/></symbol></svg>
<div class="background-wraper">
<header class="page-header">
<div class="page-header__wraper">
<nav class="page-header__menu page-header__menu--opened">
<ul class="page-header__list">
<li class="page-header__item"><a class="page-header__url page-header__url--active">Главная</a></li>
<li class="page-header__item"><a class="page-header__url" href="photo.html">Фото и видео</a></li>
<li class="page-header__item"><a class="page-header__url" href="form.html">Форма отзыва</a></li>
<li class="page-header__item"><a class="page-header__url" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a></li>
</ul>
<button class="page-header__mobile-menu-close" type="button">Закрыть</button>
<a class="page-header__logo-wraper" href="#">
<picture>
<source media="(min-width: 1200px)" srcset="img/logo-sedona-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logo-sedona-tablet.svg">
<img class="page-header__logo" src="img/logo-sedona-mobile.svg" width="102" height="83" alt="Седона">
</picture>
</a>
</nav>
<div class="page-header__promo-text promo-text">
<div class="promo-text__slogan ">
<img class="promo-text__title promo-text__title--index" src="img/text-sedona-index.svg" width="282" height="214" alt="Седона Промо">
</div>
</div>
</div>
</header>
<div class="page-main">
<div class="page-main__wraper">
<h1 class="page-main__title">Седона – небольшой городок в Аризоне, заслуживающий большего!</h1>
<p class="page-main__cool">Рассмотрим 5 причин, по которым седона круче чем гранд каньон!</p>
</div>
</div>
<section class="good-city">
<div class="good-city__wraper">
<div class="good-city__background">
<div class="good-city__title-block">
<header class="good-city__header">
<h2 class="good-city__title"><span class="good-city__br">Настоящий</span> городок</h2>
<span class="good-city__number">– №1 –</span>
<p class="good-city__text">Седона не аттракцион для туристов, там течет своя жизнь</p>
</header>
</div>
<div class="good-city__image">
<picture>
<source media="(min-width: 769px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<source media="(min-width: 768px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<img src="img/[email protected]" srcset="img/[email protected] 2x" alt="Седона настоящий городок">
</picture>
</div>
</div>
</div>
<div class="good-city__benefits">
<div class="good-city__benefits-item">
<h3 class="good-city__item-header good-city__item-header--home">Жилье</h3>
<p class="good-city__item-text">Рекомендуем пожить в настоящем мотеле, все как в кино!</p>
</div>
<div class="good-city__benefits-item">
<h3 class="good-city__item-header good-city__item-header--gift">Сувениры</h3>
<p class="good-city__item-text"><span class="good-city__br">Не только китайcкого,</span>но и местного производства!</p>
</div>
<div class="good-city__benefits-item">
<h3 class="good-city__item-header good-city__item-header--burger">Еда</h3>
<p class="good-city__item-text"><span class="good-city__br">Всегда заказывайте фирменный бургер,</span> вы не разочаруетесь!</p>
</div>
</div>
</section>
<section class="bridge-devil">
<div class="bridge-devil__wraper">
<header class="bridge-devil__title-block-wraper">
<div class="bridge-devil__header">
<h2 class="bridge-devil__title">Там есть мост дьявола</h2>
<span class="bridge-devil__number">– №2 –</span>
<p class="bridge-devil__text">Да, по нему можно пройти! Если вы осмелитесь, конечно</p>
</div>
</header>
<div class="bridge-devil__image">
<picture>
<source media="(min-width: 769px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<source media="(min-width: 768px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
<img src="img/[email protected]" srcset="img/[email protected] 2x" alt="Мост дьявола">
</picture>
</div>
</div>
</section>
<section class="benefits">
<div class="benefits__wraper">
<div class="benefits__item">
<h3 class="benefits__header">Небольшая площадь</h3>
<span class="benefits__number">– №3 –</span>
<p class="benefits__text benefits__text--3">Все интересные места находятся очень близко</p>
</div>
<div class="benefits__item">
<h3 class="benefits__header">Красивая дорога</h3>
<span class="benefits__number">– №4 –</span>
<p class="benefits__text benefits__text--4">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
</div>
<div class="benefits__item">
<h3 class="benefits__header">Мало туристов</h3>
<span class="benefits__number">– №5 –</span>
<p class="benefits__text benefits__text--5">Большинство едет в гранд каньон и толпится там</p>
</div>
</div>
</section>
<section class="search">
<div class="search__wraper">
<h2 class="search__title">Заинтересовались?</h2>
<p class="search__text"><span class="search__br">Укажите предполагаемые даты поездки, </span> и мы покажем вам лучшие предложения гостиниц в седоне</p>
<a class="search__button" href="https://google.ru">Найти гостиницу</a>
</div>
</section>
<div class="map">
<div class="map__wraper">
<iframe class="map__google" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d592839.33976071!2d-112.06352161464558!3d34.830951622580315!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872da132f942b00d%3A0x5548c523fa6c8efd!2z0KHQtdC00L7QvdCwLCDQkNGA0LjQt9C-0L3QsCA4NjMzNiwg0KHQqNCQ!5e0!3m2!1sru!2sru!4v1490832494199" width="320" height="350" style="border:0" allowfullscreen></iframe>
</div>
</div>
<footer class="page-footer">
<div class="page-footer__wraper">
<p class="page-footer__hashtag">#visitsedona</p>
<div class="page-footer__social social">
<div class="social__wraper">
<a class="social__link" href="#" title="Twiter">Twiter
<svg class="social__icon" width="18" height="14" title "Twiter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg>
</a>
<a class="social__link" href="#" title="Facebook">FB
<svg class="social__icon" width="9" height="18"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg>
</a>
<a class="social__link" href="#" title="Youtube">Youtube
<svg class="social__icon" width="20" height="14"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube"></use></svg>
</a>
</div>
</div>
<div class="page-footer__copyright-wraper">
<p class="page-footer__copyright">Разработано</p>
<a href="https://htmlacademy.ru/intensive/adaptive" title="HTML ACADEMY">
<svg class="page-footer__copyright-img" width="27" height="37"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-htmlacademy"></use></svg>
</a>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>