-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (120 loc) · 6.24 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Барбершоп «Бородинский» : Главная</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="main-header">
<nav class="main-navigation">
<a href="" class="main-header-logo">
<img src="./img/index-logo.svg" alt="Логотип барбершопа «Бородинский»" width="368" height="153">
</a>
<ul class="site-navigation">
<li><a href="info.html">Информация</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="price.html">Прайс-лист</a></li>
<li><a href="catalog.html">Магазин</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
<ul class="user-navigation">
<li><a href="#">Регистрация</a></li>
</ul>
</nav>
</header>
<main class="container">
<h1 class="visually-hidden">Барбершоп "Бородинский"</h1><!-- В макете страницы заголовка нет. Мы скроем его позже, при этом оставим видимым для поисковика и читалок. -->
<section class="features">
<h2 class="visually-hidden">Преимущества</h2><!-- В макете страницы заголовка нет. Мы скроем его позже, при этом оставим видимым для поисковика и читалок. -->
<ul class="features-list">
<li class="feature-item">
<h3>Быстро</h3>
<p>Мы делаем свою работу быстро! Два часа пролетят незаметно и вы — счастливый обладатель стильной стрижки-минутки!</p>
</li>
<li class="feature-item">
<h3>Круто</h3>
<p>Забудьте, как вы стриглись раньше. Мы сделаем из вас звезду футбола или кино! Во всяком случае внешне.</p>
</li>
<li class="feature-item">
<h3>Дорого</h3>
<p>Наши мастера — профессионалы своего дела и не могут стоить дешево. К тому же, разве цена не дает определенный статус?</p>
</li>
</ul>
</section>
<section class="news">
<h2>Новости</h2>
<ul class="news-list">
<li class="news-item">
<p>Нам наконец завезли Ягермайстер! Теперь вы можете пропустить стаканчик во время стрижки</p>
<time datetime="2016-01-11">11 января</time>
</li>
<li class="news-item">
<p>В нашей команде пополнение, Борис «Бритва» Стригунец, обладатель множества титулов и наград пополнил наши стройные ряды</p>
<time datetime="2016-01-18">18 января</time>
</li>
</ul>
<a href="news.html" class="button">Все новости</a>
</section>
<section class="gallery">
<figure class="gallery-content">
<a href="#"><img src="img/studio.jpg" alt="" class="gallery-item" width="286" height="164" alt="Интерьер"></a>
</figure>
<span class="button gallery-button gallery-button-back">Назад</span>
<span class="button gallery-button gallery-button-next">Вперед</span>
</section>
<section class="contacts">
<h2>Контактная информация</h2>
<p>
Барбершоп «Бородинский»<br>
Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br>
Телефон: +7 (812) 666-02-66
</p>
<p>
Время работы:<br>
пн—пт: с 10:00 до 22:00<br>
сб—вс: с 10:00 до 19:00
</p>
<a class="button" href="map.html">Как проехать</a>
<a class="button" href="contacts.html">Обратная связь</a>
</section>
<section class="appointment">
<h2>Записаться</h2>
<p>Укажите дату и время и мы свяжемся с вами для подтверждения брони</p>
<!-- TODO: Здесь будет форма -->
</section>
</main>
<footer class="main-footer">
<p class="footer-contacts">
Барбершоп «Бородинский»<br>
Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br>
<a href="map.html">Как нас найти?</a><br>
Телефон: +7 (812) 666-02-66
</p>
<div class="footer-social">
<b>Давайте дружить!</b>
<ul>
<li><a class="social-button" href="#">Вконтакте</a></li>
<li><a class="social-button" href="#">Фейсбук</a></li>
<li><a class="social-button" href="#">Инстаграм</a></li>
</ul>
</div>
<p class="footer-copyright">
<b>Разработано:</b>
<a class="button" href="https://htmlacademy.ru">HTML Academy</a>
</p>
</footer>
<section class="modal modal-login">
<h2>Личный кабинет</h2>
<p>Введите пожалуйста свой логин и пароль</p>
<!--TODO: Здесь будет форма -->
<span class="modal-close">x</span>
</section>
<section class="modal modal-map">
<h2 class="visually-hidden">Как до нас добраться</h2>
<!-- TODO: здесь будет карта -->
<span class="modal-close">x</span>
</section>
</body>
</html>