-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (157 loc) · 8.64 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Barbershop Borodinski</title>
<link rel="StyleSheet" href="css/normalize.css" type="text/css">
<link rel="StyleSheet" href="css/style.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" type="image/ico">
</head>
<body>
<header class="main-header">
<div class="container clearfix">
<nav class="main-navigation">
<ul>
<li class="main-navigation-item current-page">
<a href="index.html">главная</a>
</li>
<li class="main-navigation-item">
<a href="#">информация</a>
</li>
<li class="main-navigation-item">
<a href="#">новости</a>
</li>
<li class="main-navigation-item">
<a href="price.html">прайс-лист</a>
</li>
<li class="main-navigation-item">
<a href="catalog.html">магазин</a>
</li>
<li class="main-navigation-item">
<a href="#">контакты</a>
</li>
</ul>
</nav>
<div class="header-login">
<a class="enter" href="#">Вход</a>
</div>
</div>
</header>
<main class="container">
<figure class="content-logo">
<img src="img/content-logo.png" width="368" height="152" alt="barbershop borodinski">
</figure>
<div class="content-advantages clearfix">
<section class="content-advantages-block">
<h2 class="content-advantages-title">быстро</h2>
<p>мы делаем свою работу быстро! два часа пролетят незаметно и вы — счастливый обладатель стильной стрижки-минутки!</p>
</section>
<section class="content-advantages-block">
<h2 class="content-advantages-title">круто</h2>
<p>забудьте, как вы стриглись раньше. мы сделаем из вас звезду футбола или кино! во всяком случае внешне.</p>
</section>
<section class="content-advantages-block">
<h2 class="content-advantages-title">дорого</h2>
<p>наши мастера — профессионалы своего дела и не могут стоить дешево. к тому же, разве цена не дает определенный статус?</p>
</section>
</div>
<div class="content-index-row clearfix">
<section class="content-left-column content-news">
<h2 class="content-column-title">новости</h2>
<ul class="content-news-preview">
<li>
<p>нам наконец завезли ягермайстер! теперь вы можете пропустить стаканчик во время стрижки</p>
<time datetime="2013-09-25">25 сентября</time>
</li>
<li>
<p>в нашей команде пополнение, борис «бритва» стригунец, обладатель множества титулов и наград пополнил наши стройные ряды</p>
<time datetime="2013-09-19">19 сентября</time>
</li>
</ul>
<a href="#" class="btn">все новости</a>
</section>
<section class="content-right-column content-gallery">
<h2 class="content-column-title">фотогалерея</h2>
<div class="content-gallery-block">
<figure class="content-gallery-img">
<img src="img/content-gallery-picture.jpg" width="286" height="164" alt="интерьер">
</figure>
<button class="btn content-gallery-prev" disabled>назад</button>
<button class="btn content-gallery-next">вперед</button>
</div>
</section>
</div>
<div class="content-index-row clearfix">
<section class="content-left-column content-contacts">
<h2 class="content-column-title">контактная информация</h2>
<div class="content-contacts-block">
<p>barbershop «borodinski»</p>
<p>адрес: г. санкт-петербург, ул. собаки павлова, д. 13</p>
</div>
<div class="content-contacts-block">
<p>телефон: +7 (495) 666-02-66</p>
<p>время работы:</p>
<p>пн — пт: с 10:00 до 22:00</p>
<p>сб — вс: с 10:00 до 19:00</p>
</div>
<a href="#" class="btn map-show">как проехать</a>
<a href="#" class="btn">обратная связь</a>
</section>
<section class="content-right-column content-appointment-form">
<h2 class="content-column-title">записаться</h2>
<p>укажите желаемую дату и время и мы свяжемся с вами для подтверждения брони</p>
<form action="/echo" method="post">
<input type="date" name="date" value="" required="required">
<input type="time" name="time" value="" required="required">
<input type="text" name="name" value="" placeholder="ваше имя">
<input type="tel" name="phone" value="" placeholder="телефон" required="required">
<button type="submit" class="btn btn-submit">отправить</button>
</form>
</section>
</div>
</main>
<footer>
<div class="container clearfix">
<div class="footer-block footer-contacts">
<p>barbershop «borodinski»</p>
<p>адрес: г. санкт-петербург, ул. собаки павлова, д. 13</p>
<a href="#" class="map-show">как нас найти?</a>
<p>телефон: +7 (495) 666-02-66</p>
</div>
<div class="footer-block footer-social">
<p>давайте дружить!</p>
<a href="#" class="btn footer-social-vk">вконтакте</a>
<a href="#" class="btn footer-social-fb">фейсбук</a>
<a href="#" class="btn footer-social-inst">инстаграм</a>
</div>
<div class="footer-block footer-copyright">
<p>дизайн сайта:</p>
<a href="#" class="btn">glukhanko.ru</a>
</div>
</div>
</footer>
<figure class="container map">
<img src="img/map.png" width="766" height="560" alt="карта">
<a href="#" class="close-map"></a>
</figure>
<div class="modal">
<form action="" method="post" >
<section class="container login">
<h2 class="login-header">личный кабинет</h2>
<p>введите пожалуйста свой логин и пароль</p>
<input type="text" name="login" placeholder="логин" class="login-name" required="required">
<input type="password" name="password" placeholder="пароль" class="login-password" required="required">
<div class="login-options clearfix">
<input type="checkbox" name="remember" id="remember" checked="checked">
<label for="remember">запомнить</label>
<a href="#">я забыл пароль!</a>
</div>
<button type="submit" class="btn btn-submit">войти</button>
<a href="#" class="close"></a>
</section>
</form>
</div>
<script src="js/script.min.js"></script>
</body>
</html>