-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (250 loc) · 15.6 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
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Barbershop</title>
<link
href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap"
rel="stylesheet"
/>
<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 class="main-logo">
<img src="img/logo-index.svg" alt="logo" />
</a>
<!-- /.logo -->
<div class="main__navigations-wrapper">
<div class="container">
<ul class="site__navigation">
<li><a href="#">ИНФОРМАЦИЯ</a></li>
<li><a href="#">НОВОСТИ</a></li>
<li><a href="#">ПРАЙС-ЛИСТ</a></li>
<li><a href="#">МАГАЗИН</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
</div>
<!-- /.main-container -->
</div>
<!-- /.main-wrapper -->
<div class="user__navigation">
<a class="login__link" href="login.html">Вход</a>
</div>
<!-- /.user-navigation -->
</nav>
</header>
<main class="container">
<h1 class="visually-hidden">Барбершоп "Бородинский"</h1>
<section class="features">
<h2 class="visually-hidden">Преимущества</h2>
<ul class="features__list">
<li class="features__item">
<h3>БЫСТРО</h3>
<p>
МЫ ДЕЛАЕМ СВОЮ РАБОТУ БЫСТРО! ДВА ЧАСА ПРОЛЕТЯТ НЕЗАМЕТНО И ВЫ —
СЧАСТЛИВЫЙ ОБЛАДАТЕЛЬ СТИЛЬНОЙ СТРИЖКИ-МИНУТКИ!
</p>
</li>
<li class="features__item">
<h3>КРУТО</h3>
<p>
ЗАБУДЬТЕ, КАК ВЫ СТРИГЛИСЬ РАНЬШЕ. МЫ СДЕЛАЕМ ИЗ ВАС ЗВЕЗДУ
ФУТБОЛА ИЛИ КИНО! ВО ВСЯКОМ СЛУЧАЕ ВНЕШНЕ.
</p>
</li>
<li class="features__item">
<h3>ДОРОГО</h3>
<p>
НАШИ МАСТЕРА — ПРОФЕССИОНАЛЫ СВОЕГО ДЕЛА И НЕ МОГУТ СТОИТЬ ДЕШЕВО.
К ТОМУ ЖЕ, РАЗВЕ ЦЕНА НЕ ДАЕТ ОПРЕДЕЛЕННЫЙ СТАТУС?
</p>
</li>
</ul>
</section>
<div class="index-columns">
<section class="news">
<h2>Новости</h2>
<ul class="news__list">
<li class="news__item">
<p>
НАМ НАКОНЕЦ ЗАВЕЗЛИ ЯГЕРМАЙСТЕР! ТЕПЕРЬ ВЫ МОЖЕТЕ ПРОПУСТИТЬ
СТАКАНЧИК ВО ВРЕМЯ СТРИЖКИ
</p>
<time datetime="11.01.2020">11 января</time>
</li>
<li class="news__item">
<p>
В НАШЕЙ КОМАНДЕ ПОПОЛНЕНИЕ, БОРИС «БРИТВА» СТРИГУНЕЦ, ОБЛАДAТЕЛЬ
МНОЖЕСТВА ТИТУЛОВ И НАГРАД ПОПОЛНИЛ НАШИ СТРОЙНЫЕ РЯДЫ
</p>
<time datetime="18.01.2020">18 января</time>
</li>
</ul>
<a class="button" href="news.html">ВСЕ НОВОСТИ</a>
</section>
<section class="gallery">
<h2>ФОТОГАЛЕРЕЯ</h2>
<div class="gallery-container">
<figure class="gallery__content">
<a href="#">
<img src="img/photo.jpg" alt="studio" />
</a>
</figure>
<button class="button gallery__button gallery__button-back">
Назад
</button>
<button class="button gallery__button gallery__button-next">
Вперед
</button>
</div>
<!-- /.gallery-container -->
</section>
</div>
<!-- /.index-colums -->
<div class="index-columns">
<section class="contacts">
<h2>КОНТАКТНАЯ ИНФОРМАЦИЯ</h2>
<p>
БАРБЕРШОП «БОРОДИНСКИЙ» АДРЕС: Г. САНКТ-ПЕТЕРБУРГ, Б. КОНЮШЕННАЯ, Д.
19/8 ТЕЛЕФОН: +7 (812) 666-02-66
</p>
<p>ВРЕМЯ РАБОТЫ: ПН—ПТ: С 10:00 ДО 22:00 СБ—ВС: С 10:00 ДО 19:00</p>
<a class="button contacts__button-map" href="#">КАК ПРОЕХАТЬ</a>
<a class="button" href="#">ОБРАТНАЯ СВЯЗЬ</a>
</section>
<section class="appointment">
<h2>ЗАПИСАТЬСЯ</h2>
<p class="appointment__info">
УКАЖИТЕ ЖЕЛАЕМУЮ ДАТУ И ВРЕМЯ И МЫ СВЯЖЕМСЯ С ВАМИ ДЛЯ ПОДТВЕРЖДЕНИЯ
БРОНИ
</p>
<form action="https://echo.htmlacademy.ru/" method="post">
<p>
<label for="appointment_date">Дата</label>
<input
id="appointment_date"
type="text"
name="date"
placeholder="08.10.2017"
/>
</p>
<p>
<label for="appointment_time">Время</label>
<input
id="appointment_time"
type="text"
name="time"
placeholder="10:00"
/>
</p>
<p>
<label for="appointment_name">Ваше имя</label>
<input
id="appointment_name"
type="text"
name="user_name"
placeholder="Борода"
/>
</p>
<p>
<label for="appointment_phone">Телефон</label>
<input
id="appointment_phone"
type="tel"
name="user_contact"
placeholder="+7 123 456-78-90"
/>
</p>
<button class="button" type="submit">Отправить</button>
</form>
</section>
</div>
<!-- /.index-columns -->
</main>
<footer class="main__footer">
<section class="footer__contacts">
<h2>Наш адрес</h2>
<p>БАРБЕРШОП «БОРОДИНСКИЙ» <br>
АДРЕС: Г. САНКТ-ПЕТЕРБУРГ, УЛ. Б. КОНЮШЕННАЯ,Д. 19/8 <br>
<a href="">КАК НАС НАЙТИ? </a> <br>
ТЕЛЕФОН: +7 (812) 666-02-66
</p>
</section>
<section class="footer__social">
<h2>ДАВАЙТЕ ДРУЖИТЬ!</h2>
<ul>
<li>
<a class="social__button" href="#">
<span class="visually-hidden">Вконтакте</span>
<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.7852 27.4705L38.6932 27.3017C37.9568 26.1851 37.0533 25.181 36.0123 24.3226C35.6176 23.9675 35.2419 23.593 34.8868 23.2005C34.7231 23.0532 34.6134 22.858 34.5746 22.6447C34.5358 22.4313 34.57 22.2115 34.6719 22.0188C35.0199 21.3838 35.4385 20.7877 35.9202 20.2412L36.8309 19.0794C38.4476 16.994 39.1297 15.6699 38.8773 15.1072L38.7852 14.9781C38.6739 14.8678 38.5316 14.7918 38.376 14.7597C38.079 14.7 37.7725 14.7 37.4755 14.7597H33.4952C33.4056 14.7301 33.3085 14.7301 33.2189 14.7597H32.912C32.8515 14.7952 32.7992 14.8425 32.7585 14.8987C32.696 14.9707 32.6443 15.0509 32.605 15.137C32.1842 16.1904 31.6849 17.2126 31.1111 18.1956C30.7632 18.7517 30.446 19.1886 30.1493 19.6553C29.9257 19.9693 29.6759 20.2649 29.4023 20.5391C29.2315 20.7083 29.0504 20.8675 28.86 21.0158C28.7066 21.135 28.5838 21.1846 28.5019 21.1648L28.2666 21.1151C28.1331 21.0304 28.0239 20.9143 27.9494 20.7775C27.8582 20.6148 27.8025 20.4356 27.7857 20.2512V15.6137C27.8061 15.4089 27.8061 15.2027 27.7857 14.998C27.7535 14.848 27.7055 14.7015 27.6424 14.5611C27.5844 14.4229 27.4845 14.3051 27.3559 14.2234C27.1953 14.14 27.0229 14.0798 26.8443 14.0447C26.2182 13.9851 25.5877 13.9851 24.9616 14.0447C23.8363 13.9431 22.7013 14.0475 21.6157 14.3525C21.4128 14.4535 21.2321 14.5918 21.0836 14.7597C20.9097 14.9583 20.8892 15.0675 21.012 15.0874C21.2471 15.0982 21.4774 15.1559 21.6886 15.2566C21.8998 15.3574 22.0874 15.4992 22.2398 15.6733L22.3217 15.8321C22.4142 16.0359 22.4828 16.2491 22.5263 16.4677C22.5874 16.7961 22.6284 17.1277 22.6491 17.4607C22.69 18.0261 22.69 18.5935 22.6491 19.1588C22.6491 19.6355 22.557 20.0029 22.5161 20.2611C22.4665 20.5004 22.3729 20.7292 22.2398 20.9364C22.1955 21.0438 22.1407 21.1469 22.0761 21.2442L22.0045 21.3137C21.883 21.3567 21.7552 21.3802 21.6259 21.3832C21.472 21.3413 21.3314 21.2628 21.2166 21.1548C21.0031 21.0005 20.8075 20.824 20.6334 20.6285C20.3853 20.3371 20.1596 20.0285 19.9581 19.705C19.6698 19.2455 19.4068 18.7715 19.1702 18.2849L18.9349 17.8977L18.3516 16.7855C18.1138 16.3202 17.902 15.8429 17.7172 15.3555C17.6538 15.1795 17.5359 15.0269 17.3796 14.9185H17.3079C17.2544 14.8576 17.1924 14.8041 17.1238 14.7597C17.005 14.7159 16.8814 14.6859 16.7554 14.6703L12.9183 14.7001C12.7726 14.6884 12.6259 14.7071 12.4882 14.7551C12.3505 14.8031 12.2251 14.8791 12.1202 14.9781H12.0077C11.9974 15.0506 11.9974 15.1241 12.0077 15.1966C12.0192 15.3219 12.0467 15.4453 12.0895 15.564C12.6557 16.8881 13.2696 18.1294 13.9313 19.2879C14.5862 20.4696 15.1592 21.4229 15.6401 22.1479C16.121 22.8728 16.6633 23.558 17.1545 24.2035C17.6456 24.8489 18.0344 25.266 18.1777 25.4448L18.5563 25.8519L18.9042 26.1895C19.2268 26.4698 19.5687 26.7286 19.9274 26.9641C20.3997 27.2994 20.8916 27.6078 21.4008 27.8876C21.9816 28.1995 22.6003 28.4397 23.2426 28.6026C23.9109 28.8057 24.6094 28.8997 25.3095 28.8807H26.9262C27.2054 28.8784 27.4729 28.7717 27.6731 28.5828V28.5132C27.7177 28.4349 27.752 28.3515 27.7754 28.265C27.7856 28.1427 27.7856 28.0198 27.7754 27.8976C27.765 27.5444 27.7959 27.1913 27.8675 26.8449C27.9086 26.5997 27.9879 26.3619 28.1029 26.1399C28.1803 25.9906 28.2803 25.8533 28.3996 25.7327L28.6349 25.5341H28.7475C28.888 25.5053 29.0336 25.5092 29.1723 25.5455C29.311 25.5817 29.4389 25.6493 29.5456 25.7427C29.8627 25.971 30.1481 26.238 30.3949 26.5371C30.6609 26.8449 30.9883 27.2024 31.3567 27.5798C31.6657 27.9047 32.0086 28.1975 32.3799 28.4537L32.6664 28.6125C32.8944 28.7417 33.1385 28.8419 33.3929 28.9105C33.6417 28.9979 33.9095 29.0218 34.1705 28.98L37.803 28.8807C38.0866 28.8985 38.3699 28.8401 38.6215 28.7118C38.7017 28.6761 38.7738 28.6252 38.8335 28.5621C38.8933 28.499 38.9395 28.425 38.9694 28.3444C39.0102 28.1947 39.0102 28.0373 38.9694 27.8876C38.951 27.7615 38.9166 27.6381 38.8671 27.5202L38.7852 27.4705Z" fill="white"/>
</a>
</li>
<li>
<a class="social__button" href="#">
<span class="visually-hidden">Фейсбук</span>
<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6238 12.1312C20.5935 11.3762 21.8239 10.9748 23.0867 11.0012H27V14.8612H24.4698C24.1989 14.8503 23.9324 14.9284 23.7169 15.0819C23.5014 15.2354 23.3505 15.4546 23.2904 15.7012V18.2812H27C26.9142 19.5212 26.7212 20.7612 26.5604 22.0012H23.3441V33.0012H18.4016V22.0012H16V18.3012H18.3801V14.7112C18.4318 13.7359 18.8759 12.8146 19.6238 12.1312Z" fill="white"/>
</a>
</li>
<li>
<a class="social__button" href="#">
<span class="visually-hidden">Инстаграмм</span>
<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 11H14C13.4696 11 12.9609 11.2107 12.5858 11.5858C12.2107 11.9609 12 12.4696 12 13V29C12 29.5304 12.2107 30.0391 12.5858 30.4142C12.9609 30.7893 13.4696 31 14 31H30C30.5304 31 31.0391 30.7893 31.4142 30.4142C31.7893 30.0391 32 29.5304 32 29V13C32 12.4696 31.7893 11.9609 31.4142 11.5858C31.0391 11.2107 30.5304 11 30 11V11ZM22 17C22.7911 17 23.5645 17.2346 24.2223 17.6741C24.8801 18.1136 25.3928 18.7384 25.6955 19.4693C25.9983 20.2002 26.0775 21.0044 25.9231 21.7804C25.7688 22.5563 25.3878 23.269 24.8284 23.8284C24.269 24.3878 23.5563 24.7688 22.7804 24.9231C22.0044 25.0775 21.2002 24.9983 20.4693 24.6955C19.7384 24.3928 19.1136 23.8801 18.6741 23.2223C18.2346 22.5645 18 21.7911 18 21C18 19.9391 18.4214 18.9217 19.1716 18.1716C19.9217 17.4214 20.9391 17 22 17ZM14.5 29C14.4383 29.0041 14.3763 28.9959 14.3177 28.976C14.2591 28.956 14.2051 28.9247 14.1586 28.8839C14.1122 28.843 14.0742 28.7933 14.047 28.7377C14.0198 28.6822 14.0038 28.6218 14 28.56V20H16.1C16.0169 20.3265 15.9832 20.6635 16 21C16 22.5913 16.6321 24.1174 17.7574 25.2426C18.8826 26.3679 20.4087 27 22 27C23.5913 27 25.1174 26.3679 26.2426 25.2426C27.3679 24.1174 28 22.5913 28 21C28.0168 20.6635 27.9831 20.3265 27.9 20H30V28.5C30.0041 28.5617 29.9959 28.6237 29.976 28.6823C29.956 28.7409 29.9247 28.7949 29.8839 28.8414C29.843 28.8878 29.7933 28.9258 29.7377 28.953C29.6822 28.9802 29.6218 28.9962 29.56 29H14.5ZM30 15.5C30.0041 15.5617 29.9959 15.6237 29.976 15.6823C29.956 15.7409 29.9247 15.7949 29.8839 15.8414C29.843 15.8878 29.7933 15.9258 29.7377 15.953C29.6822 15.9802 29.6218 15.9962 29.56 16H27.5C27.4383 16.0041 27.3763 15.9959 27.3177 15.976C27.2591 15.956 27.2051 15.9247 27.1586 15.8839C27.1122 15.843 27.0742 15.7933 27.047 15.7377C27.0198 15.6822 27.0038 15.6218 27 15.56V13.5C26.9959 13.4383 27.0041 13.3763 27.024 13.3177C27.044 13.2591 27.0753 13.2051 27.1161 13.1586C27.157 13.1122 27.2067 13.0742 27.2623 13.047C27.3178 13.0198 27.3782 13.0038 27.44 13H29.5C29.5617 12.9959 29.6237 13.0041 29.6823 13.024C29.7409 13.044 29.7949 13.0753 29.8414 13.1161C29.8878 13.157 29.9258 13.2067 29.953 13.2623C29.9802 13.3178 29.9962 13.3782 30 13.44V15.5Z" fill="white"/>
</a>
</li>
</ul>
</section>
<p class="footer__copyright">
РАЗРАБОТАНО:
<a class="button" href="#">HTMLACADEMY</a>
</p>
</footer>
<section class="modal">
<h2>Личный кабинет</h2>
<p>Введите пожалуйста свой логин и пароль</p>
<form class="login-form" action="https://echo.htmlacademy.ru/" method="post">
<p>
<label class="" for="login">Введите логин</label>
<input class="login__icon-user"
id="login"
type="email"
placeholder="email@example.com"
name="user_login"
required
/>
</p>
<p>
<label for="password">Введите пароль</label>
<input class="login__icon-password"
type="password"
placeholder="••••••••"
name="user_password"
id="password"
required
/>
</p>
<p class="login-help">
<label class="login-chexbox">
<input class="" type="checkbox" name="remember" />
<span class="checkbox-indicator"></span>
Запомните меня
</label>
</p>
<a class="restore" href="#">Я забыл пароль!</a>
<button class="button" type="submit">Войти</button>
</form>
<button class="button" type="button">Закрыть</button>
</section>
<section class="modal">
<h2>Как нас найти</h2>
<!--Map is going to be here-->
<button class="button" type="button">Закрыть</button>
</section>
</body>
</html>