-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
234 lines (225 loc) · 10.5 KB
/
index.html
File metadata and controls
234 lines (225 loc) · 10.5 KB
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Барьершоп "Бородинский"</title>
</head>
<body>
<header class="page-header">
<a class="page-header__logo">
<img class="page-header__logo-image" src="img/logotype-mobile.svg" width="226" height="30" alt="Барбершоп «Бородинский»">
</a>
<nav class="main-nav">
<button class="main-nav__toggle" type="button">Открыть меню</button>
<div class="main-nav__wrapper">
<ul class="main-nav__list site-list">
<li class="site-list__item site-list__item--active">
<a>Главная</a>
</li>
<li class="site-list__item">
<a href="photo.html">Наши работы</a>
</li>
<li class="site-list__item">
<a href="form.html">Записаться</a>
</li>
<li class="site-list__item">
<a href="#">Контакты</a>
</li>
<li class="site-list__item">
<a href="#">HTML Academy</a>
</li>
</ul>
<ul class="main-nav__list user-list">
<li class="user-list__item">
<a class="user-list__login" href="login.html">Войти</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="page-main">
<h1 class="visually-hidden">Барбершоп «Бородинский» - истинно мужская класика</h1>
<section class="stats">
<header class="stats__header">
<h2 class="visually-hidden">Статистика Барбершопа</h2>
<b class="stats__slogan">Стрижка у нас это выгодно!</b>
<p class="stats_intro">Мужская стрижка требует точного подхода. Обратимся к статистике</p>
<small class="stats__legend stats__legend--top">
<sup>*</sup> — приведённые данные ложь
</small>
</header>
<table class="stats__list">
<tr>
<td class="stats__value">
7 200<sup>*</sup>
</td>
<td class="stats__field">
секунд<br> времени мастера
</td>
</tr>
<tr>
<td class="stats__value">
90 000<sup>*</sup>
</td>
<td class="stats__field">
постриженых<br> волос
</td>
</tr>
<tr>
<td class="stats__value">
500 000<sup>*</sup>
</td>
<td class="stats__field">
лайков и <br> комплиментов
</td>
</tr>
</table>
<small class="stats__legend stats__legend--bottom">
<sup>*</sup> — приведённые данные ложь
</small>
</section>
<section class="advantages">
<div class="advantages__wrapper slider">
<h2 class="visually-hidden">Наши преимущества</h2>
<ul class="advantages__list slider__list">
<li class="advantages__item advantages__item--fast slider__item">
<h3 class="advantages__title">Быстро</h3>
<p class="advantages__description">
Мы делаем свою работу быстро!
Два часа пролетят незаметно и Вы — счастливый обладатель
</p>
</li>
<li class="advantages__item advantages__item--cool slider__item">
<h3 class="advantages__title">Круто</h3>
<p class="advantages__description">
Забудьте, как вы стриглись раньше. Мы сделаем из Вас звезду футбола или кино.
Во всяком случае внешне.
</p>
</li>
<li class="advantages__item advantages__item--price slider__item">
<h3 class="advantages__title">Дорого</h3>
<p class="advantages__description">
Наши мастера — профессионалы своего дела и не могут стоить дёшево.
К тому же, разве цена не даёт определённый статус?
</p>
</li>
</ul>
<p class="advantages__toggles slider__toggles">
<button class="slider__toggle" type="button">1</button>
<button class="slider__toggle" type="button">2</button>
<button class="slider__toggle" type="button">3</button>
</p>
</div>
</section>
<section class="news">
<div class="news__wrapper">
<h2 class="visually-hidden">Новости и акции</h2>
<ul class="news__list">
<li class="news__item">
<time class="news__date" datetime="2017-09-29">
<b class="news__day">29</b> сент
</time>
<p class="news__text">
Нам наконец завезли Ягермайстер!
Теперь вы можете пропусить стаканчик во время стрижки.
</p>
</li>
<li class="news__item">
<time class="news__date" datetime="2017-09-19">
<b class="news__day">19</b> сент
</time>
<p class="news__text">
В нашей команде пополнение, Борис «Бритва» Стригунец, пополнил наши стройные ряды.
Спешите записаться!
</p>
</li>
<li class="news__item">
<time class="news__date" datetime="2017-09-09">
<b class="news__day">9</b> сент
</time>
<p class="news__text">
Все дорожает, а наши стрижки нет!
Как так? Приходите, постригитесь и узнаете, в чем здесь подвох!
</p>
</li>
</ul>
<a class="news__to-all button" href="#">Показать все</a>
</div>
</section>
<section class="reviews">
<div class="reviews__wrapper slider">
<h2 class="reviews__title">Отзывы о нас</h2>
<a class="reviews__write button" href="#">Оставить свой</a>
<div class="reviews__list slider__list">
<blockquote class="reviews__item slider__item">
<p class="reviews__author-picture">
<img class="reviews__author-image" src="img/picture-travis.jpg" width="50" height="33" alt="Фото Трэвиса Баркера">
</p>
<cite class="reviews__author-name">Трэвис Баркер</cite>
<p class="reviews__text">
Спасибо за лысину! Был проездом в Москве, заскочил побриться,
чтобы было видно новую татуировку!
</p>
</blockquote>
<blockquote class="reviews__item slider__item">
<p class="reviews__author-picture">
<img class="reviews__author-image" src="img/picture-john.jpg" width="50" height="33" alt="Фото Трэвиса Баркера">
</p>
<cite class="reviews__author-name">Джон Смит</cite>
<p class="reviews__text">
Отличную стрижу мне сделали ребята.
</p>
</blockquote>
<blockquote class="reviews__item slider__item">
<p class="reviews__author-picture">
<img class="reviews__author-image" src="img/picture-ivan.jpg" width="50" height="33" alt="Фото Трэвиса Баркера">
</p>
<cite class="reviews__author-name">Иван Бородайло</cite>
<p class="reviews__text">
В Бородинском ваша борода в надёжных руках!
</p>
</blockquote>
<button class="reviews__prev" type="button">Предедущий отзыв</button>
<button class="reviews__next" type="button">Слудующий отзыв</button>
</div>
<p class="reviews__toggles slider__toggles">
<button class="slider__toggle" type="button">1</button>
<button class="slider__toggle" type="button">2</button>
<button class="slider__toggle" type="button">3</button>
</p>
</div>
</section>
</main>
<footer class="page-footer">
<div class="page-footer__wrapper">
<div class="page-footer__contacts contacts">
<b class="contacts__title">Барбершоп Бородинский</b>
<p class="contacts__text">
г. Санкт-Петербург, ул. Большая Конюшенная 19/8<br>
<a class="contacts__phone" href="tel:+78125556666">
<span>Тел.:</span> +7 (812) 555-66-66
</a>
</p>
</div>
<div class="page-footer__social social">
<b class="social__title">Давайте дружить!</b>
<ul class="social__list">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy">Мы в Вконтакте</a>
</li>
<li class="social__item">
<a class="social__link social__link--facebook" href="https://www.facebook.com/htmlacademy">Мы в Фейсбуке</a>
</li>
<li class="social__item">
<a class="social__link social__link--instagram" href="https://www.instagram.com/htmlacademy">Мы в Инстаграме</a>
</li>
</ul>
</div>
<div class="page-footer__copyright copyright">
<b class="copyrigth_text">Разработано:</b>
<a class="button copyright__link" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a>
</div>
</div>
</footer>
</body>
</html>