-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (155 loc) · 9.12 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
<!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>Expert Beauty | Студия Красоты</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="animations.css">
<link rel="shortcut icon" href="./img/favicon.svg" type="image/x-icon">
</head>
<body>
<div class="menu-opened">
<div class="menu-close"></div>
<div class="menu-links">
<a href="#main" class="menu-link">Главная</a>
<a href="#advantages" class="menu-link">О нас</a>
<a href="#services" class="menu-link">Услуги</a>
<a href="#register" class="menu-link menu-link-alt">Запись</a>
</div>
<img class="flower-img" src="./flower.png" alt="">
</div>
<header>
<a class="header-logo" href="#main">
<img src="./img/logo_w.svg" alt="Expert Beauty">
</a>
<div class="header-nav">
<div class="phone-btn insta-btn">
<a href="https://www.instagram.com/expertbeauty_msk/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
@expertbeauty_msk
</a>
</div>
<div class="phone-btn">
<a href="tel:+79998618131">
<svg width="17" height="17" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.6746 19.6896L19.8953 22.5978C19.8241 22.8681 19.6971 23.1205 19.5224 23.3388C19.3478 23.5571 19.1293 23.7366 18.8811 23.8657C18.6328 23.9948 18.3603 24.0707 18.0808 24.0885C17.8014 24.1064 17.5212 24.0657 17.2583 23.9692C14.3562 22.8442 11.7583 21.0556 9.67319 18.7471C7.72509 16.6299 6.26743 14.1109 5.40372 11.369C4.43979 8.40019 4.18972 5.24713 4.67378 2.16527C4.72134 1.89069 4.82565 1.62907 4.98009 1.39705C5.13452 1.16503 5.33569 0.9677 5.57078 0.817627C5.80588 0.667554 6.06975 0.568023 6.34559 0.525372C6.62144 0.482721 6.90322 0.497885 7.17298 0.569897L10.087 1.3507C10.5596 1.47238 10.972 1.76143 11.2472 2.16397C11.5224 2.56651 11.6417 3.05508 11.5829 3.53861C11.4565 4.50226 11.4397 5.4772 11.5329 6.44482C11.5706 6.82681 11.4978 7.21148 11.3232 7.55325C11.1486 7.89502 10.8795 8.17955 10.5477 8.37315L8.98424 9.27375C9.71668 12.0712 11.1917 14.6202 13.2537 16.6518L14.8172 15.7512C15.1511 15.5613 15.5327 15.471 15.9166 15.491C16.3006 15.5111 16.6709 15.6405 16.9836 15.8641C17.7769 16.4284 18.6315 16.9014 19.5312 17.274C19.9852 17.4669 20.3526 17.8196 20.5634 18.2649C20.7742 18.7103 20.8138 19.2173 20.6746 19.6896Z" fill=""/>
</svg>
7 (999) 861-81-31
</a>
</div>
<button class="menu-btn">
Меню
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
</div>
</header>
<section class="main-container" id="main">
<div class="main-img">
<img class="stacking-img" src="./укладка.png" alt="">
<img class="flower-img" src="./flower.png" alt="">
</div>
<div class="main-text-container">
<span class="main-text">УКЛАДКА</span>
<span class="main-subtitle">от 900 руб.</span>
</div>
<a href="#advantages">
<div class="chevron"></div>
</a>
</section>
<section class="advantages-container" id="advantages">
<p class="title">НАШИ ПРЕИМУЩЕСТВА</p>
<div class="advatages-cards">
<div class="advatage-card">
<p class="card-title">Быстро и качественно</p>
<p class="card-subtitle">
Мы ценим наших клиентов из за этого мы делаем наши услуги очень быстро и качественно
</p>
<p class="card-background">01</p>
</div>
<div class="advatage-card">
<p class="card-title">Качество обслуживания</p>
<p class="card-subtitle">
Качество для нас на первом месте! Вы точно останетесь довольны
</p>
<p class="card-background">02</p>
</div>
<div class="advatage-card">
<p class="card-title">Легкая запись</p>
<p class="card-subtitle">
Лёгкая и быстрая запись! У нас существует записть по телефону, инстаграмму, а также внизу сайта!
</p>
<p class="card-background">03</p>
</div>
<div class="advatage-card">
<p class="card-title">Красивый интерьер</p>
<p class="card-subtitle">
Новейший ремонт подарит вам истенное наслаждение от процедур! Уют и комфорт вот что вас ждёт в нашем салоне
</p>
<p class="card-background">04</p>
</div>
</div>
<div class="bottom-shape">
<svg width="1921" height="166" viewBox="0 0 1921 166" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.27346 100.501L953.5 165.5L1920.27 100.502V0.5H0.273438L0.27346 100.501Z" fill="#EAB1B1"/>
</svg>
</div>
</section>
<section class="services-container" id="services">
<p class="title">НАШИ УСЛУГИ</p>
<div class="services-items">
<div class="service-item" id="manikur">
<p class="item-text">Маникюр</p>
</div>
<div class="service-item" id="pedikur">
<p class="item-text">Педикюр</p>
</div>
<div class="service-item" id="palitra">
<p class="item-text">Покрытие</p>
</div>
<div class="service-item" id="hairs">
<p class="item-text">Женский зал</p>
</div>
<div class="service-item" id="man-hairs">
<p class="item-text">Мужской зал</p>
</div>
<div class="service-item" id="color">
<p class="item-text">Окрашивание</p>
</div>
</div>
<div class="bottom-shape">
<svg width="1921" height="166" viewBox="0 0 1921 166" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.27346 100.501L953.5 165.5L1920.27 100.502V0.5H0.273438L0.27346 100.501Z" fill="#ffcaca"/>
</svg>
</div>
</section>
<section class="register-container" id="register">
<div class="form-container">
<script data-b24-form="inline/2/c91x3e" data-skip-moving="true"> (function(w,d,u){ var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0); var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h); })(window,document,'https://cdn-ru.bitrix24.ru/b18247304/crm/form/loader_2.js'); </script>
</div>
<div class="map-container">
<div class="map-ardess">
<p class="map-title">EXPERT BEAUTY - Студия Красоты</p>
<p class="map-subtitle">Россия, Москва, Нагатинская набережная, 16к3 </p>
<div class="map-links">
<a target="_blank" href="https://www.instagram.com/expertbeauty_msk/">
<img src="./img/instagram.svg" alt="">
</a>
<a href="tel:+79998618131">
<img src="./img/phone.svg" alt="">
</a>
</div>
</div>
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A2e0e1b902a9025e9639626daccb6c43fb5cf28612e20d2a1e2f22c822fecb120&width=100%25&height=550&lang=ru_RU&scroll=true"></script>
</div>
</section>
<footer>
<img src="./img/logo_w.svg" alt="">
<a href="./dogovor_oferty.docx" target="_blank" class="footer-link">Договор оферты</a>
</footer>
<script src="./js/script.js"></script>
</body>
</html>