-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
430 lines (406 loc) · 30.4 KB
/
index.html
File metadata and controls
430 lines (406 loc) · 30.4 KB
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
<!DOCTYPE html>
<html lang="uk">
<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>Massage</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<link href="https://fonts.googleapis.com/css2?family=Forum&family=Roboto:wght@300;400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-normalize@0.7.0/modern-normalize.min.css">
<link rel="stylesheet" href="./css/main.min.css">
</head>
<body>
<header class="header">
<div class="container header__wrapp">
<nav class="header__nav">
<a href="./index.html"><img class="logo__mobile" src="./images/Logo.png" alt="Логотип" width="140" height="30"></a>
<div class="header__container" data-menu id="header-container">
<ul class="header__list">
<li class="header__item"><a class="header__link" href="#">Головна</a></li>
<li class="header__item"><a class="header__link" href="#services">Види масажу</a></li>
<li class="header__item"><a class="header__link" href="#about">Про мене</a></li>
</ul>
<a href="./index.html"><img class="logo__decktop" src="./images/Logo.png" alt="Логотип"
width="160" height="30"></a>
<ul class="header__list">
<li class="header__item"><a class="header__link" href="#price">Ціни</a></li>
<li class="header__item"><a class="header__link" href="#order">Записатися</a></li>
<li class="header__item"><a class="header__link" href="#contacts">Контакти</a></li>
</ul>
<ul class="header__social">
<li class="header__icon"><a href="#" aria-label="Посилання на Фейсбук" target="_blank">
<svg class="icon__facebook" width="55" height="55">
<use href="./images/sprite.svg#facebook"></use>
</svg>
</a></li>
<li class="header__icon"><a href="#" aria-label="Посилання на Инстаграм" target="_blank">
<svg class="icon__instagram" width="55" height="55">
<use href="./images/sprite.svg#instagram"></use>
</svg>
</a></li>
<li class="header__icon"><a href="#" aria-label="Посилання на Твиттер" target="_blank">
<svg class="icon__twitter" width="55" height="55">
<use href="./images/sprite.svg#twitter"></use>
</svg>
</a></li>
</ul>
</div>
</nav>
<button class="header__menu" aria-controls="header-container" aria-expanded="false" type="button"
data-menu-button>
<svg width="22" height="22" aria-label="Перемикач мобільного меню">
<use class="header__menu-close" href="./images/sprite.svg#burgerclose"></use>
<use class="header__menu-burger" href="./images/sprite.svg#burgermenu"></use>
</svg>
</button>
</div>
</header>
<main>
<section class="hero hero__overlay">
<div class="container">
<h1 class="hero__title">ЗАДОВОЛЕННЯ ВІД МАСАЖУ</h1>
<p class="hero__text">Вся наша краса йде зсередини. Коли душа, розум і тіло перебувають у гармонії,
тільки <br> тоді ми стаємо по-справжньому гарними.</p>
<a href="#order" class="button button-primary hero__button">ЗАПИСАТИСЯ</a>
</div>
</section>
<section id="services" class="services">
<div class="container">
<h2 class="services__title title title_accent">ВИДИ МАСАЖУ</h2>
<!-- Slider main container -->
<div class="services__swiper swiper-services swiper">
<!-- Additional required wrapper -->
<div class="services__swiper-wrapper swiper-wrapper">
<!-- Slides -->
<div class="services__swiper-slide swiper-slide">
<article class="services__article">
<picture>
<source
srcset="
./images/classik@1x.webp 1x,
./images/classik@2x.webp 2x,
./images/classik@3x.webp 3x"
type="image/webp">
<source
srcset="
./images/classik@1x.jpg 1x,
./images/classik@2x.jpg 2x,
./images/classik@3x.jpg 3x"
type="image/webp">
<img class="services__img" src="./images/classik@1x.jpg" alt="Класичний масаж" width="520"
height="520">
</picture>
<div class="services__wrapper">
<h3 class="services__text">КЛАСИЧНИЙ МАСАЖ</h3>
<p class="services__paragraph">Загальний масаж тіла, для відновлення сил.</p>
</div>
</article>
</div>
<div class="services__swiper-slide swiper-slide">
<article class="services__article">
<picture>
<source srcset="
./images/Foto2@1x.webp 1x,
./images/Foto2@2x.webp 2x,
./images/Foto2@3x.webp 3x" type="image/webp">
<source srcset="
./images/Foto2@1x.jpg 1x,
./images/Foto2@2x.jpg 2x,
./images/Foto2@3x.jpg 3x" type="image/webp">
<img class="services__img" src="./images/Foto2@1x.jpg" alt="Масаж оліею" width="520"
height="520">
</picture>
<div class="services__wrapper">
<h3 class="services__text">МАСЛЯНИЙ МАСАЖ</h3>
<p class="services__paragraph">Пориньте в блаженство і безтурботність за допомогою
ойл-масажу.</p>
</div>
</article>
</div>
<div class="services__swiper-slide swiper-slide">
<article class="services__article">
<picture>
<source srcset="
./images/Foto1@1x.webp 1x,
./images/Foto1@2x.webp 2x,
./images/Foto1@3x.webp 3x" type="image/webp">
<source srcset="
./images/Foto1@1x.jpg 1x,
./images/Foto1@2x.jpg 2x,
./images/Foto1@3x.jpg 3x" type="image/webp">
<img class="services__img" src="./images/Foto1@1x.jpg" alt="Масаж камінням" width="520"
height="520">
</picture>
<div class="services__wrapper">
<h3 class="services__text">СТОУН МАСАЖ</h3>
<p class="services__paragraph">Зарядіться теплом вулканічного каміння під час
cтоун-масажу.
</p>
</div>
</article>
</div>
<div class="services__swiper-slide swiper-slide">
<article class="services__article">
<picture>
<source srcset="
./images/Foto3@1x.webp 1x,
./images/Foto3@2x.webp 2x,
./images/Foto3@3x.webp 3x"
type="image/webp">
<source srcset="
./images/Foto3@1x.jpg 1x,
./images/Foto3@2x.jpg 2x,
./images/Foto3@3x.jpg 3x"
type="image/webp">
<img class="services__img" src="./images/Foto3@1x.jpg" alt="Масаж ніг" width="520"
height="520">
</picture>
<div class="services__wrapper">
<h3 class="services__text">ФУТ МАСАЖ</h3>
<p class="services__paragraph">Призначений для глибокої дії на стопу, повертає силу
та пружність.</p>
</div>
</article>
</div>
<div class="services__swiper-slide swiper-slide">
<article class="services__article">
<picture>
<source srcset="
./images/tai@1x.webp 1x,
./images/tai@2x.webp 2x,
./images/tai@3x.webp 3x"
type="image/webp">
<source srcset="
./images/tai@1x.jpg 1x,
./images/tai@2x.jpg 2x,
./images/tai@3x.jpg 3x"
type="image/webp">
<img class="services__img" src="./images/tai@1x.jpg" alt="Масаж оліею" width="520"
height="520">
</picture>
<div class="services__wrapper">
<h3 class="services__text">ТАЙСКИЙ ЙОГА-МАСАЖ</h3>
<p class="services__paragraph">Масаж виконується від кінчиків пальців ніг, де
знаходиться безліч біологічно активних точок, до верхівки голови.</p>
</div>
</article>
</div>
<div class="services__swiper-slide swiper-slide">
<article class="services__article">
<picture>
<source srcset="
./images/face@1x.webp 1x,
./images/face@2x.webp 2x,
./images/face@3x.webp 3x"
type="image/webp">
<source srcset="
./images/face@1x.jpg 1x,
./images/face@2x.jpg 2x,
./images/face@3x.jpg 3x"
type="image/webp">
<img class="services__img" src="./images/face@1x.jpg" alt="Масаж камінням" width="520"
height="520">
</picture>
<div class="services__wrapper">
<h3 class="services__text">МАСАЖ ОБЛИЧЧЯ</h3>
<p class="services__paragraph">Це приємний і результативний засіб покращити стан
шкіри, позбавитись мімічних зморшок, деяких дефектів.
</p>
</div>
</article>
</div>
</div>
<div class="services__swiper-pagination swiper-pagination"></div>
<div class="services__swiper-button-prev swiper-button-prev"></div>
<div class="services__swiper-button-next swiper-button-next"></div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="about__wrapper">
<div>
<h2 class="about__title title ">ПРО МЕНЕ</h2>
<p class="about__paragraph">Приходьте відпочивати, розслаблятися, перезавантажуватись.⠀Будьте
уважні до себе, даруйте собі більше любові та турботи.</p>
<ul class="advantage">
<li class="advantage__list">
<div>
<h4 class="advantage__title">Кваліфікований масажист</h4>
<p class="advantage__paragraph">У мене медична освіта, курси масажу, курси
підвищення
кваліфікації, про що свідчать сертифікати та дипломи.</p>
</div>
</li>
<li class="advantage__list">
<div>
<h4 class="advantage__title">Більше 5 років досвіду</h4>
<p class="advantage__paragraph">Масажем займаюся давно, багато постійних клієнтів,
які
із задоволенням відвідують мій кабінет.</p>
</div>
</li>
<li class="advantage__list">
<div>
<h4 class="advantage__title">Найкраща косметика</h4>
<p class="advantage__paragraph">Під час відпустки та подорожей я купую ароматні та
базові олії, які використовую у своїй роботі.</p>
</div>
</li>
</ul>
<button class="about__button button button-secondary">ДІЗНАТИСЯ БІЛЬШЕ</button>
<div class="about__backdrop">
<div class="about__modal modal-about">
<div class="modal-about_close"></div>
<h2 class="modal-about_title">Про мене</h2>
<p class="modal-about_text">
Тілесні дотики під час сеансу масажу за правильно розробленою схемою провокують
зміни хімії
мозку, викликаючи такі
процеси:
⠀</p>
<p class="modal-about_text">1.Знижується концентрація у крові гормону кортизолу, який
бере участь у розвитку стресових
реакцій. Рівень гормону
падає до нормального мінімуму, що спостерігається у людини у вечірній час перед
сном,
коли вoна найбільш спокійна.</p>
<p class="modal-about_text">2.Зменшується рівень адреналіну, що тримає людину в
постійній напрузі і призводить до
панічних атак та тромбозів.</p>
<p class="modal-about_text">3.Спостерігається викид «гормону довіри» окситоцину,
збільшення якого в лімфі
відзначається при оргазмі, грудному
годуванні, ніжних ласках закоханих. Окситоцин має умиротворюючу дію на людину,
зменшуючи
аномальні страхи та підвищену
тривожність.</p>
<p class="modal-about_text">4.Підвищується рівень серотоніну – «гормону гарного
настрою», який виробляється організмом
у моменти радості,
підвищуючи сприйнятливість до негативних переживань та знижується при неврозах.
⠀</p>
<p class="modal-about_text">5.Інша група гормонів «задоволення», яка надходить у кров
при активних видах масажу –
ендорфіни – природні
болезаспокійливі речовини, схожі на дію з морфіном і здатні допомогти впоратися з
пригніченим станом.
Нормальний рівень ендорфінів дуже важливий при багатьох захворюваннях, що протікають
на
фоні депресії або з вираженими
болючими відчуттями.</p>
<p class="modal-about_text">Дбайте про себе, даруйте задоволення – приходьте на масаж!
</p>
</div>
</div>
</div>
<picture>
<source srcset="
./images/Portret@1x.webp 1x,
./images/Portret@2x.webp 2x,
./images/Portret@3x.webp 3x" type="image/webp">
<source srcset="
./images/Portret@1x.jpg 1x,
./images/Portret@2x.jpg 2x,
./images/Portret@3x.jpg 3x" type="image/webp">
<img class="about__img" src="./images/Portret@1x.jpg" alt="Портрет" width="950" height="950">
</picture>
</div>
</div>
</section>
<section id="price" class="price">
<div class="container">
<div class="price__wrapper">
<picture>
<source srcset="
./images/Oil@1x.webp 1x,
./images/Oil@2x.webp 2x,
./images/Oil@3x.webp 3x" type="image/webp">
<source srcset="
./images/Oil@1x.jpg 1x,
./images/Oil@2x.jpg 2x,
./images/Oil@3x.jpg 3x" type="image/webp">
<img class="price__img" src="./images/Oil@1x.png" alt="Олія для масажу" width="700" height="700">
</picture>
<div class="price__wrapp">
<h2 class="price__title title title_accent">СКІЛЬКИ КОШТУЄ МАСАЖ</h2>
<p class="price__paragraph">Масаж спрямований на відновлення балансу
та створення гармонії тіла та душі.
З сучасним способом життя масаж -
це не розкіш, а потреба!</p>
<ul class="price__list">
<li class="price__item">
<p class="price__text">Класичний масаж - 500 грн</p>
</li>
<li class="price__item">
<p class="price__text">Масляний масаж - 700 грн</p>
</li>
<li class="price__item">
<p class="price__text">Фут-масаж - 600 грн</p>
</li>
<li class="price__item">
<p class="price__text">Стоун-масаж - 700 грн</p>
</li>
<li class="price__item">
<p class="price__text">Тайский йога-масаж - 700 грн</p>
</li>
<li class="price__item">
<p class="price__text">Масаж обличчя - 400 грн</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="order" class="order">
<div class="container">
<h2 class="order__title title">ЗАПИСАТИСЯ НА МАСАЖ</h2>
<form id="order-form" class="order__form form " action="https://formspree.io/f/mrgvzepn" method="POST">
<input class="input form__input " type="text" name="name" placeholder="Ваше ім'я" required>
<input class="input form__input " type="text" name="phone" placeholder="+380997770099"
pattern="(\+?( |-|\.)?\d{1,2}( |-|\.)?)?(\(?\d{3}\)?|\d{3})( |-|\.)?(\d{3}( |-|\.)?\d{4})"
title="Номер телефону має складатися з 11-12 цифр і може містити цифри, пробіли, тире, пузаті дужки та може починатися з +"
required>
<input class="input form__input" type="text" name="massage" placeholder="Вид масажу">
<input class="input form__input" type="text" name="date" placeholder="Дата і час сеансу">
<button class="order__button button button-primary " type="submit">ВІДПРАВИТИ</button>
<p id="order-status" class="order__status"></p>
</form>
</div>
</section>
</main>
<footer id="contacts" class="footer">
<div class="container">
<h2 class="footer__title title title_accent">КОНТАКТИ</h2>
<a href="#" class="scrollup" title="To the top"></a>
<a class="footer__tel" href="tel:+380995566777">+38 099 55 66 777</a>
<address class="footer__address">м.Харків, вул.Щастя, 25, 1 поверх</address>
<ul class="footer__social">
<li class="footer__item"><a href="#" aria-label="Посилання на Фейсбук" target="_blank">
<svg class="icon__facebook" width="55" height="55">
<use href="./images/sprite.svg#facebook"></use>
</svg>
</a></li>
<li class="footer__item"><a href="#" aria-label="Посилання на Инстаграм" target="_blank">
<svg class="icon__instagram" width="55" height="55">
<use href="./images/sprite.svg#instagram"></use>
</svg>
</a></li>
<li class="footer__item"><a href="#" aria-label="Посилання на Твиттер" target="_blank">
<svg class="icon__twitter" width="55" height="55">
<use href="./images/sprite.svg#twitter"></use>
</svg>
</a></li>
</ul>
</div>
</footer>
<script src="./js/scrollup.js"></script>
<script src="./js/about-modal.js"></script>
<script src="./js/order-form.js"></script>
<script src="./js/mobile-menu.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="./js/swiper.js"></script>
</body>
</html>