-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (206 loc) · 11.3 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
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
235
236
237
238
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/libs.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=cyrillic,cyrillic-ext" rel="stylesheet">
<title>Главная страница Барбершопа</title>
</head>
<body>
<header class="page-header">
<a class="page-header__logo" href="index.html">
<picture>
<source media="(min-width: 1200px)" srcset="img/logotype-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logotype-tablet.svg">
<img class="page-header__logo-image" src="img/logotype-mobile.svg" width="226" height="30" alt="Логотип Барбершопа">
</picture>
</a>
<nav class="main-nav main-nav--closed main-nav--nojs">
<button class="main-nav__toogle" type="button"><span class="visually-hidden"> Открыть меню</span></button>
<div class="main-nav__wrapper">
<ul class="main-nav__list site-list">
<li class="site-list__item site-list__item--active"><a href="index.html">Главная</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="contacts.html">Контакты</a></li>
<li class="site-list__item"><a href="htmlacademy.ru">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"><svg class="user-list__login-icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polygon points="0 7 7.01 7 7.01 4.06 10.96 8.01 7.01 11.91 7.01 9.06 0 9.02 0 7"/><polygon points="7.01 0 7.01 2 14.03 2 14.03 13.99 7.01 13.99 7.01 16 16 16 16 0 7.01 0"/></svg>
Войти</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">Стрижка у нас</br> это выгодно!</b>
<p class="stats__intro">Мужская стрижка требует точного подхода. Обратимся к статистике:</p>
<small class="stats__legend stats__legend--top"><sup>*</sup> - приведённые данные ложь</small>
</header>
<table class="stats__list">
<tr class="stats__value">
<td>1 500<sup>*</sup></td>
<td class="stats__field">рублей <br> вложений</td>
</tr>
<tr class="stats__value">
<td>7 200</td>
<td class="stats__field">секунд <br> времени мастера</td>
</tr>
<tr class="stats__value">
<td>90 000</td>
<td class="stats__field">постриженных <br> волос</td>
</tr>
<tr class="stats__value">
<td>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>
<!--<input class="slider__input" type="radio" name="advantages" id="advantages-input-1" checked>
<input class="slider__input" type="radio" name="advantages" id="advantages-input-2">
<input class="slider__input" type="radio" name="advantages" id="advantages-input-3">-->
<ul class="advantages__list slider__list">
<li class="advantages__item advantages__item--fast slider__item">
<img src="img/advantage-1-illustration.svg" width="100" height="100">
<div class="advantages__item--text">
<h3 class="advantages__title">Быстро</h3>
<p class="advantages__description">Мы делаем свою работу быстро! Два часа пролетят незаметно и вы - счастливый обладатель стильной стрижки - минутки.</p>
</div>
</li>
<hr/>
<li class="advantages__item advantages__item--cool slider__item">
<img src="img/advantage-2-illustration.svg" width="100" height="100">
<div class="advantages__item--text">
<h3 class="advantages__title">Круто</h3>
<p class="advantages__description">Забудьте, как вы стриглись раньше. Мы сделаем из вас звезду футбола или кино. Во всяком случае внешне.</p>
</div>
</li>
<hr/>
<li class="advantages__item advantages__item--price slider__item">
<img src="img/advantage-3-illustration.svg" width="100" height="100">
<div class="advantages__item--text">
<h3 class="advantages__title">Дорого</h3>
<p class="advantages__description">Наши мастера - профессионалы своего дела и не могут стоить дёшево. К тому же, разве цена не даёт определённый статус?</p>
</div>
</li>
</ul>
<p class="advantages__toggles slider__toggles">
<button class="slider__toggle" type="button" for="advantages-input-1">1</button>
<button class="slider__toggle" type="button" for="advantages-input-2">2</button>
<button class="slider__toggle" type="button" for="advantages-input-3">3</button>
</p>
</div>
</section>
<section class="news">
<div class="news__wrapper">
<h2 class="news__title">Новости и акции</h2>
<ul class="news__list">
<li class="news__item">
<time class="news__date" datetime="2017-09-09"><b class="news__day">29 <br> сент</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 <br> сент</b></time>
<p class="news__text">В нашей команде пополнение, Борис "Бритва" Стригунец, обладатель множества титулов и наград пополнит наши стройние ряды. Спешите записаться!</p>
</li>
<li class="news__item news__item--hidden">
<time class="news__date" datetime="2017-09-09"><b class="news__day">9 <br> сент</b></time>
<p class="news__text">Всё дорожает, а стрижки нет! Как так? Приходите, постригитесь и узнаете в чём подвох!</p>
</li>
<a class="news__to-all button" href="news.html">Показать все</a>
</ul>
</div>
</section>
<section class="reviews">
<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/travis.jpg" width="50" height="47" alt="Фото Трэвиса Баркера"></p>
<div class="reviews__item--text">
<cite class="reviews__author-name">Трэвис Баркер</cite>
<p class="reviews__text">Спасибо за лысину! Был проездом в Москве, заскочил побриться, что бы было видно новую татуировку!</p>
</div>
</blockquote>
<blockquote class="reviews__item slider__item reviews__item--hidden">
<p class="reviews__author-picture"><img class="reviews__author-image" src="img/travis.jpg" width="50" height="47" alt="Фото Джона Смита"></p>
<div class="reviews__item--text">
<cite class="reviews__author-name">Джон Смит</cite>
<p class="reviews__text">Отличну стрижку сделали мне ребята.</p>
</div>
</blockquote>
<blockquote class="reviews__item slider__item reviews__item--hidden">
<p class="reviews__author-picture"><img class="reviews__author-image" src="img/travis.jpg" width="50" height="47" alt="Фото Ивана Бородайло"></p>
<div class="reviews__item--text">
<cite class="reviews__author-name">Иван Бородайло</cite>
<p class="reviews__text">В Бородинском ваша борода в надёжных руках!</p>
</div>
</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>
</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">г. Санкт-Петербург, ул. Большая<br> Конюшенная 19/8 <br>
<a class="contacts__phone" href="tel: +78125556666">
<span class="contacts__phone-mobile">Тел.:</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="vk.com"><img src="img/vk-big.png" width="23" height="26" alt="Мы ВКонтакте"></a>
</li>
<li class="social__item">
<a class="social__link social__link--facebook" href="facebool.com"><img src="img/fb-big.png" width="18" height="38" alt="Мы в Фейсбук"></a>
</li>
<li class="social__item">
<a class="social__link social__link--instagram" href="instagram.com"><img src="img/ig-big.png" width="36" height="36" alt="Мы в Инстаграм"></a>
</li>
</ul>
</div>
<div class="page-footer__copyright copyright">
<b class="copyright__title">Разработано:</b>
<a class="button copyright__button" href="htmlacademy.ru">HTML Academy</a>
</div>
</div>
</footer>
<script>
var navMain = document.querySelector('.main-nav');
var navToogle = document.querySelector('.main-nav__toogle');
navMain.classList.remove('main-nav--nojs');
navToogle.addEventListener('click', function() {
if (navMain.classList.contains('main-nav--closed')) {
navMain.classList.remove('main-nav--closed');
navMain.classList.add('main-nav--opened');
} else {
navMain.classList.add('main-nav--closed');
navMain.classList.remove('main-nav--opened');
}
});
</script>
<script src="js/libs.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>