-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (181 loc) · 7.41 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beauty Zone</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header>
<nav>
<a href="/">
<img src="./images/logo.svg" alt="Логотип сайту Beauty Zone" />
</a>
<ul>
<li><a class="link" href="#about-section">Про нас</a></li>
<li><a class="link" href="#why-section">Чому ми</a></li>
<li><a class="link" href="#services-section">Наші процедури</a></li>
<li><a class="link" href="#contact-section">Контакти</a></li>
</ul>
</nav>
<a href="#" target="_blank"
><img src="./images/phone.svg" alt="Телефонна трубка"
/></a>
<a href="#" target="_blank"
><img src="./images/facebook.svg" alt="Facebook"
/></a>
<a href="#" target="_blank"
><img src="./images/instagram.svg" alt="Instagram"
/></a>
</header>
<main>
<section id="hero-section">
<p class="simple-text">Косметологічна клініка</p>
<h1 class="hero-title">
beauty<br />
zone
</h1>
<button type="button" class="button">Замовити дзвінок</button>
<p class="small-text">
Запишись та отримай безкоштовну консультацію нашого косметолога
</p>
</section>
<section id="about-section">
<h2 class="section-title">
Перевтілюйтесь в <span class="accent capitalized">beauty zone!</span>
</h2>
<p>
Наша косметологічна клініка пропонує вам професійні послуги з догляду
за шкірою обличчя та тіла.
</p>
<p>
B <span>beauty zone</span> ми гарантуємо найвищі стандарти якості та
приємний сервіс. Наші косметологічні процедури та препарати допоможуть
вам підтримувати свою красу та молодість. З нами краса назавжди!
</p>
<img
src="./images/before.png"
alt="Обличчя жінки до процедур з явними дефектами шкіри"
/>
<img
src="./images/after.png"
alt="Обличчя жінки після процедур з кращим виглядом шкіри"
/>
</section>
<section id="why-section">
<h2 class="section-title">
Чому люди <span class="accent">обирають нас</span>
</h2>
<ul>
<li>
<article>
<img src="./images/science.svg" alt="Наукова іконка" />
<p>
Всі наші косметологи мають вищу медичну освіту та стаж роботи
від 5 років
</p>
</article>
</li>
<li>
<article>
<img
src="./images/cosmetics.svg"
alt="Іконка що зображує косметику"
/>
<p>
Використовуємо тільки професійне обладнання та косметику,
перевірену часом
</p>
</article>
</li>
<li>
<article>
<img
src="./images/crown-light.svg"
alt="Іконка що зображує корону"
/>
<p>
Наша мета - підкреслити переваги та приховати недоліки, а не
переробити
</p>
</article>
</li>
</ul>
</section>
<section id="services-section">
<h2 class="section-title">
Наші <span class="accent">процедури</span>
</h2>
<ul>
<li>
<img src="./images/face-mask.png" alt="" />
<p>Маски для обличчя</p>
</li>
<li><img src="./images/face-botex.png" alt="" /></li>
<li><img src="./images/face-two.png" alt="" /></li>
</ul>
</section>
<section id="contact-section">
<h2 class="section-title">Як нас <span class="accent">знайти</span></h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2540.9325719461126!2d30.5181753!3d50.4423566!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4cef8b5f6338d%3A0x25c7f06ad686451c!2z0LHRg9C7LiDQotCw0YDQsNGB0LAg0KjQtdCy0YfQtdC90LrQviwgNSwg0JrQuNC10LIsIDAyMDAw!5e0!3m2!1sru!2sua!4v1699599077288!5m2!1sru!2sua"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
<form action="/">
<h3>Запишіться <span>безкоштовно</span> та отримайте подарунок</h3>
<input type="text" placeholder="Ваше ім'я та прізвище" /><br />
<input type="text" placeholder="Ваш номер телефону" /><br />
<input type="text" placeholder="Ваша електронна пошта" /><br />
<input type="submit" value="Записатись безкоштовно" /><br />
<a href="#">
Натискаючи на кнопку я погоджуюсь з політикою конфіденційності
</a>
</form>
</section>
</main>
<footer>
<nav>
<a href="/">
<img src="./images/logo.svg" alt="Логотип сайту Beauty Zone" />
</a>
<ul>
<li><a class="link" href="#about-section">Про нас</a></li>
<li><a class="link" href="#why-section">Чому ми</a></li>
<li><a class="link" href="#services-section">Наші процедури</a></li>
<li><a class="link" href="#contact-section">Контакти</a></li>
</ul>
</nav>
<address>
<ul>
<li><a href="tel:+380960000007">+ 38 (096) 000 00 07</a></li>
<li>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>
<a href="https://maps.app.goo.gl/f5roskzKXoE4J4bq9" target="_blank">
Україна, м. Київ, вул. Тараса Шевченка 5
</a>
</li>
</ul>
</address>
<a href="#" target="_blank">
<img src="./images/phone.svg" alt="Телефонна трубка" />
</a>
<a href="#" target="_blank">
<img src="./images/facebook.svg" alt="Facebook" />
</a>
<a href="#" target="_blank">
<img src="./images/instagram.svg" alt="Instagram" />
</a>
<a href="#" target="_blank">Політика конфіденційності</a>
<p>© 2022 Дані захищені</p>
</footer>
</body>
</html>