index.html

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Sedona</title>
	<link rel="stylesheet" href="style/normalize.min.css">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=cyrillic" rel="stylesheet">
	<link rel="stylesheet" href="style/style.min.css">
</head>

<body>
	<header>
		<nav class="main-navigation">
			<ul>
				<li>
					<a href="#">Информация</a>
				</li>
				<li>
					<a href="#">Фото и видео</a>
				</li>
				<li>
					<span class="logo">
						<img src="img/logo.png" alt="" width="138" height="70">
					</span>
				</li>
				<li>
					<a href="#">Карта штата</a>
				</li>
				<li>
					<a href="hotels.html">Гостиницы</a>
				</li>
			</ul>
		</nav>
	</header>
	<main>
		<section class="banner">
			<p class="banner-desc">Седона &mdash; небольшой городок в Аризоне, заслуживающий большего!</p>
			<p class="banner-features">Рассмотрим 5 причин, по которым Седона круче, чем гранд каньон!
			</p>
		</section>
		<section class="content clearfix">
			<div class="content-desc left">
				<h2>Настоящий <br> городок</h2>
				<span>&mdash; №1 &mdash;</span>
				<p>Седона &mdash; не аттракцион для туристов, там течет своя жизнь</p>
			</div>
			<div class="content-img right">
				<img src="img/content-img-1.jpg" alt="" width="800" height="256">
			</div>
		</section>
		<section class="content-items clearfix">
			<div class="content-item">
				<h2>Жилье</h2>
				<p>Рекомендуем пожить в настоящем мотеле, все как в кино!</p>
			</div>
			<div class="content-item">
				<h2>Еда</h2>
				<p>Всегда заказывайте фирменный бургер, вы не разочаруетесь!</p>
			</div>
			<div class="content-item">
				<h2>Сувениры</h2>
				<p>Не только китайского, <br> но и местного производства!</p>
			</div>
		</section>
		<section class="content clearfix">
			<div class="content-img left">
				<img src="img/content-img-2.jpg" alt="" width="800" height="256">
			</div>
			<div class="content-desc right">
				<h2>Там есть <br> мост дьявола</h2>
				<span>&mdash; №2 &mdash;</span>
				<p>Да, по нему можно пройти! <br> Если конечно вы осмелитесь</p>
			</div>
		</section>
		<section class="content-features clearfix">
			<div class="content-feature">
				<h2>Небольшая <br> площадь</h2>
				<span>&mdash; №3 &mdash;</span>
				<p>Все достопримечательности находятся очень близко</p>
			</div>
			<div class="content-feature">
				<h2>Красивая <br> дорога</h2>
				<span>&mdash; №4 &mdash;</span>
				<p>Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
			</div>
			<div class="content-feature">
				<h2>Мало <br> туристов</h2>
				<span>&mdash; №5 &mdash;</span>
				<p>Большинство едет в гранд каньон и толпится там</p>
			</div>
		</section>
		<section class="content-form">
			<b>Заинтересовались?</b>
			<p>Укажите предполагаемые даты поездки, <br> и мы покажем вам лучшие предложения гостиниц в седоне</p>
			<a class="btn link" href="">Поиск гостиницы в Седоне</a>
		</section>
		<section class="map">
			<img src="img/map.jpg" alt="" width="1200" height="593">
		</section>
	</main>
	<footer>
		<h3>#Visitsedona</h3>
		<div class="social">
			<a class="tw" href="#">Твитер</a>
			<a class="fb" href="#">Фейсбук</a>
			<a class="yt" href="#">Ютюб</a>
		</div>
		<div class="copyright">
			<span>Website by</span>
			<a href="https://htmlacademy.ru/" target="_blank">htmlacademy</a>
		</div>
	</footer>
	<div class="popup">
		<form action="#" method="post">
			<label for="enter">
				Дата заезда:
				<input id="enter" type="text" value="24 Апреля 2016">
			</label>
			<label for="exit">
				Дата выезда:
				<input id="exit" type="text" value="4 июля 2016">
			</label>
			<label for="adult">
				Взрослые:
				<input id="adult" type="text" value="2">
			</label>
			<label for="child">
				Дети:
				<input id="child" type="text" value="0">
			</label>
			<button class="btn" type="button">Найти</button>
		</form>
	</div>
	<div class="overlay"></div>
	<script src="script/popup.min.js"></script>
</body>
</html>