-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (204 loc) · 8.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BarberShop</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<!-- header -->
<header>
<a href="./index.html">
<img src="./images/icons/Logo.svg" alt="Logo" width="68" height="55">
</a>
<nav>
<ul>
<li><a href="#about us">About us</a></li>
<li><a href="#services and prices">Services and prices</a></li>
<li><a href="masters">Masters</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
</nav>
<a href="tel:+380441111111"></a>
<button type="button">online booking</button>
</header>
<!-- unique content -->
<main>
<!-- hero -->
<section>
<ul>
<li><a href="">Instagram</a></li>
<li><a href="">Youtube</a></li>
</ul>
<p>A hair salon for men in Kyiv</p>
<h1>BarberShop</h1>
<p>We are experts in trendy men's haircuts.
We work quickly, carefully, and tastefully.</p>
<ul>
<li><button type="button">back</button></li>
<li><button type="button">forward</button></li>
</ul>
</section>
<!-- about us -->
<section id="about us">
<p>ABOUT US</p>
<h2>Best Barbershop your city</h2>
<h3>If you want to add more confidence to your image, you should be with us.</h3>
<p>We are a team that never stops and desires change. And when you fall into the hands of our master, you can never be the same again. We are a team that is always with customers "on the same page". Therefore, we are always ready to improve everyone who comes to us!</p>
<button type="button">online booking</button>
</section>
<!-- Services and prices -->
<section id="services and prices">
<p>Spend time in the company of the best masters</p>
<h2>Services and prices</h2>
<ul>
<li>
<ul>
<li>men's haircut <span>from 300 UAN.</span></li>
<li>beard cut <span>from 200 UAN.</span></li>
<li>mustache cut <span>from 200 UAN.</span></li>
<li>Shaving with a razor <span>from 200 UAN.</span></li>
</ul>
</li>
<li>
<ul>
<li>Haircut for an intern <span>from 50 UAN.</span></li>
<li>Haircut under the nozzle <span>from 200 UAN.</span></li>
<li>Child's Cut (up to 12) <span>from 300 UAN.</span> </li>
<li>Camouflage gray hair <span>from 200 UAN.</span></li>
</ul>
</li>
</ul>
<button type="button">online booking</button>
</section>
<!-- advantages -->
<section>
<ul>
<li>
<p>600</p>
<p>Довольных клиентов в день</p>
</li>
<li>
<p>20</p>
<p>Лучших мастеров Киева</p>
</li>
<li>
<p>50</p>
<p>Наград за отличный сервис</p>
</li>
<li>
<p>100</p>
<p>Подарков постоянным клиентам</p>
</li>
</ul>
<p>old traditional school</p>
<h2>Почему приходят именно к нам?</h2>
<p>Only good things are said about us. But it is better to see and feel once than to read 10 times.</p>
</section>
<!-- our masters -->
<section id="masters">
<p>for true connoisseurs of atmosphere</p>
<h2>Our masters</h2>
<ul>
<li>
<img src="./images/masters/img1.jpg" alt="John Smith"
width="370" height="346">
<h3>John Smith</h3>
<p>Extreme Barber</p>
<ul>
<li><a href="">Instagram</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Linkedin</a></li>
</ul>
</li>
<li>
<img src="./images/masters/img2.jpg" alt="Michele Doe"
width="370" height="346">
<h3>Michele Doe</h3>
<p>Extreme Barber</p>
<ul>
<li><a href="">Instagram</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Linkedin</a></li>
</ul>
</li>
<li>
<img src="./images/masters/img3.jpg" alt="Alan Black"
width="370" height="346">
<h3>Alan Black</h3>
<p>Extreme Barber</p>
<ul>
<li><a href="">Instagram</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Linkedin</a></li>
</ul>
</li>
</ul>
</section>
<!-- galary -->
<section>
<p lang="uk">Латинською “барба” означає “борода”</p>
<h2 hidden>galary</h2>
<ul>
<li>
<img src="./images/gallery/pic-1.jpg" alt="clipper haircut"
width="270" height="360">
</li>
<li>
<img src="./images/gallery/pic-2.jpg" alt="shaving beards"
width="270" height="360">
</li>
<li>
<img src="./images/gallery/pic-3.jpg" alt="beard steaming"
width="270" height="360">
</li>
<li>
<img src="./images/gallery/pic-4.jpg" alt="straight razor haircut"
width="270" height="360">
</li>
</ul>
<video src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.avi" width="480" height="240"
controls poster="./images/video/video-poster.png">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4" />
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg" />
</video>
<button type="button" lang="uk">дивитись відео</button>
</section>
<!-- contacts -->
<section id="contacts">
<h2>Contacts</h2>
<ul>
<li>
<address>вул. Васильківська, 7А Київ, 08132</address>
</li>
<li>
<a href="tel:+380441111111">+38 044 111 11 11</a>
</li>
<li>
<a href="mailto:barbershop@email.com">barbershop@email.com</a>
</li>
</ul>
<h3>working hours</h3>
<p>Everyday from
<time datetime="9:00"> 9:00 </time>to
<time datetime="22:00">22:00 </time></p>
</section>
</main>
<!-- footer -->
<footer>
<p>© Copyright 2024</p>
<ul>
<li>
<a href="https://instagram.com">Instagram</a>
</li>
<li>
<a href="">Youtube</a>
</li>
</ul>
</footer>
</body>
</html>