-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (142 loc) · 7.49 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
<!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="site-header">
<div class="container clearfix">
<nav class="site-navigation column column--seven-quarters">
<ul class="site-navigation__list clearfix">
<li class="site-navigation__item">
<a href="#">Информация</a>
</li>
<li class="site-navigation__item">
<a href="#">Новости</a>
</li>
<li class="site-navigation__item">
<a href="#">Прайс-лист</a>
</li>
<li class="site-navigation__item">
<a href="shop.html">Магазин</a>
</li>
<li class="site-navigation__item">
<a href="#">Контакты</a>
</li>
</ul>
</nav>
<div class="user column column--five-quarters clearfix">
<a class="user__login" href="#">Вход</a>
</div>
</div>
</header>
<main class="container">
<div class="logo logo--index">
<img src="img/pic__logo--index.png" width="368" height="204" alt="Барбершоп «Бородинский»">
</div>
<div class="features clearfix">
<div class="features__item column column--four-quarters">
<p class="features__text features__text--title">Быстро</p>
<p class="features__text">Мы делаем свою работу быстро! Два часа пролетят незаметно и вы — счастливый обладатель стильной стрижки-минутки!</p>
</div>
<div class="features__item column column--four-quarters">
<p class="features__text features__text--title">Круто</p>
<p class="features__text">Забудьте, как вы стриглись раньше. Мы сделаем из вас звезду футбола или кино! Во всяком случае внешне.</p>
</div>
<div class="features__item column column--four-quarters">
<p class="features__text features__text--title">Дорого</p>
<p class="features__text">Наши мастера — профессионалы своего дела и не могут стоить дешево. К тому же, разве цена не дает определенный статус?</p>
</div>
</div>
<div class="content content--index clearfix">
<div class="content__column content__column--left column column--six-quarters clearfix">
<h2 class="content__title">Новости</h2>
<ul class="content__list">
<li class="content__item">
<p class="content__text">Нам наконец завезли Ягермайстер! Теперь вы можете пропустить стаканчик во время стрижки</p>
<time class="content__datetime" datetime="2016-01-11">11 января</time>
</li>
<li class="content__item">
<p class="content__text">В нашей команде пополнение, Борис «Бритва» Стригунец, обладатель множества титулов и наград пополнил наши стройные ряды</p>
<time class="content__datetime" datetime="2016-01-18">18 января</time>
</li>
</ul>
<a class="btn" href="#">Все новости</a>
</div>
<div class="content__column content__column--right column column--six-quarters clearfix">
<h2 class="content__title">Фотогалерея</h2>
<figure class="content__gallery">
<a class="content__link" href="#">
<img src="img/pic__gallery--barbershop-borodinski-room.jpg" width="286" height="164" alt="Barbershop Borodinski room">
</a>
</figure>
<a class="btn" href="#">Назад</a>
<a class="btn" href="#">Вперёд</a>
</div>
</div>
<div class="content content--index clearfix">
<div class="content__column content__column--left column column--six-quarters clearfix">
<h2 class="content__title">Контактная информация</h2>
<p class="content__text">
Барбершоп «Бородинский»<br>
Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br>
Телефон: +7 (812) 666-02-66
</p>
<p class="content__text">
Время работы:<br>
пн — пт: с 10:00 до 22:00<br>
сб — вс: с 10:00 до 19:00
</p>
<a class="btn" href="#">Как проехать</a>
<a class="btn" href="#">Обратная связь</a>
</div>
<div class="content__column content__column--right column column--six-quarters">
<h2 class="content__title">Записаться</h2>
<p class="content__text">Укажите желаемую дату и время и мы свяжемся с вами для подтверждения брони</p>
<form class="appointment-form clearfix" action="https://echo.htmlacademy.ru" method="post">
<label class="appointment-form__field">
<input type="text" name="date" value="" placeholder="Дата">
</label>
<label class="appointment-form__field">
<input type="text" name="time" value="" placeholder="Время">
</label>
<label class="appointment-form__field">
<input type="text" name="name" value="" placeholder="Ваше имя">
</label>
<label class="appointment-form__field">
<input type="tel" name="phone" value="" placeholder="Телефон">
</label>
<label class="btn btn--large">
<input type="submit" value="Отправить">
</label>
</form>
</div>
</div>
</main>
<footer class="site-footer">
<div class="container clearfix">
<section class="contacts column column--five-quarters">
<p class="contacts__title">Барбершоп «Бородинский»</p>
<p class="contacts__address">Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8</p>
<p class="contacts__link">
<a href="#">Как нас найти?</a>
</p>
<p class="contacts__phone">Телефон: <a href="tel:+78126660266">+7 (812) 666-02-66</a></p>
</section>
<section class="social column column--two-quarters clearfix">
<p class="social__text">Давайте дружить!</p>
<a class="social__btn social__btn--vk" href="#">Вконтакте</a>
<a class="social__btn social__btn--fb" href="#">Фейсбук</a>
<a class="social__btn social__btn--inst" href="#">Инстаграм</a>
</section>
<section class="copyright column column--five-quarters">
<p class="copyright__text">Разработано:</p>
<a class="btn btn--copyright" href="https://htmlacademy.ru">HTML Academy</a>
</section>
</div>
</footer>
</body>
</html>