-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (178 loc) · 9 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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="UTF-8">
<title>Барбершоп Бородинский</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic;display=swap">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="page-body">
<header class="main-header">
<nav class="main-navigation">
<a class="main-header-logo">
<img src="img/index-logo.svg" width="368" height="153" alt="Логотип барбершопа Бородинский">
</a>
<div class="main-header-bar">
<div class="main-navigation-wrapper">
<ul class="site-navigation">
<li><a href="blank.html">Информация</a></li>
<li><a href="blank.html">Новости</a></li>
<li><a href="price.html">Прайс-лист</a></li>
<li><a href="catalog.html">Магазин</a></li>
<li><a href="blank.html">Контакты</a></li>
</ul>
<div class="user-navigation">
<a class="login-link" href="blank.html">Вход</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container">
<h1>Барбершоп Бородинский</h1>
<section class="features">
<h2>Преимущества</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>
<div class="index-columns">
<section class="news">
<h2>Новости</h2>
<ul class="news-list">
<li class="news-item">
<p>Нам наконец завезли Ягермайстер! Теперь Вы можете пропустить стаканчик во время стрижки</p>
<time datetime="2022-01-11">11 января</time>
</li>
<li class="news-item">
<p>В нашей команде пополнение, Борис Бритва Стригунец, обладатель множества титулов и наград пополнил наши стройные ряды</p>
<time datetime="2022-01-20">20 января</time>
</li>
</ul>
<a class="button" href="blank.html">Все новости</a>
</section>
<section class="gallery">
<h2>Фотогалерея</h2>
<figure class="gallery-content">
<a href="#">
<img src="img/Layer 21.png" width="286" height="164" alt="Интерьер">
</a>
</figure>
<button class="button gallery-button gallery-button-back" type="button" disabled>Назад</button>
<button class="button gallery-button gallery-button-next" type="button">Вперед</button>
</section>
</div>
<div class="index-columns">
<section class="contacts">
<h2>Контактная информация</h2>
<p>
Барбершоп Бородинский<br>
Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br>
Телефон: <a class="contacts-phone" href="tel:+78126660266">+7 (812) 666-02-66</a>
</p>
<p>
Время работы:<br>
пн-пт: с 10:00 до 22:00<br>
сб-вс: с 10:00 до 19:00
</p>
<a class="button" href="blank.html">Как проехать</a>
<a class="button" href="blank.html">Обратная связь</a>
</section>
<section class="appointment">
<h2>Записаться</h2>
<p class="appointment-info">Укажите желаемую дату и время и мы свяжемся с Вами для подтверждения брони</p>
<form class="appointment-form" action="https://echo.htmlacademy.ru" method="post">
<p class="appointment-item">
<label for="appointment-date">Дата</label>
<input type="text" name="date" id="appointment-date" placeholder="01.01.2020">
</p>
<p class="appointment-item">
<label for="appointment-time">Время</label>
<input type="text" name="time" id="appointment-time" placeholder="10:00">
</p>
<p class="appointment-item">
<label for="appointment-name">Ваше имя</label>
<input type="text" name="name" id="appointment-name" placeholder="Борода">
</p>
<p class="appointment-item">
<label for="appointment-phone">Телефон</label>
<input type="text" name="phone" id="appointment-phone" placeholder="+7 000 000-00-00">
</p>
<button class="button" type="submit">Отправить</button>
</form>
</section>
</div>
</main>
<footer class="main-footer">
<div class="container">
<section class="footer-contacts">
<h2>Как нас найти</h2>
<p>
Барбершоп Бородинский<br>
Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br>
<a class="footer-address" href="blank.html">Как нас найти?</a><br>
Телефон: <a class="footer-phone" href="tel:+78126660266">+7 (812) 666-02-66</a>
</p>
</section>
<section class="footer-social">
<h2>Давайте дружить!</h2>
<ul>
<li>
<a class="social-button" href="#">Вконтакте <img src="img/vk.svg" alt="Вконтакте"></a>
</li>
<li>
<a class="social-button" href="#">Фейсбук <img src="img/facebook.svg" alt="Фейсбук"></a>
</li>
<li>
<a class="social-button" href="#">Инстаграм <img src="img/instagram.svg" alt="Инстаграм"></a>
</li>
</ul>
</section>
<p class="footer-copyright">
<b>Разработано:</b>
<a class="button" href="https://htmlacademy.ru">HTML Academy</a>
</p>
</div>
</footer>
<section class="modal modal-login">
<h2>Личный кабинет</h2>
<p class="modal-description">Введите пожалуйста свой логин и пароль</p>
<form class="login-form" action="https://echo.htmlacademy.ru" method="post">
<p>
<label for="login-login">Логин</label>
<input class="login-icon-user" id="login-login" type="email" name="login" placeholder="[email protected]">
</p>
<p>
<label for="login-password">Пароль</label>
<input class="login-icon-password" id="login-password" type="password" name="password" placeholder="••••••••">
</p>
<p class="login-help">
<label class="login-checkbox">
<input type="checkbox" name="remember">
Запомните меня
</label>
<a class="restore" href="#">Я забыл пароль!</a>
</p>
<button class="button" type="submit">Войти</button>
</form>
<button class="modal-close" type="button">Закрыть</button>
</section>
<section class="modal modal-map">
<h2>Как до нас добраться</h2>
<!--Здесь будет карта-->
<button class="modal-close" type="button">Закрыть</button>
</section>
</body>
</html>