-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
340 lines (340 loc) · 16 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<html lang="uk"></html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RingoLanding</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Raleway:wght@500;600&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="header__top">
<a class="header__logo logo" href="#">
<img class="logo__img" src="./img/logo.png" alt="logo">
</a>
<div class="header__mobile">
<nav class="header__menu menu">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="#direction">Напрямки</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#advantage">Переваги</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#stages">Етапи роботи</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#gifts">Подарунки</a>
</li>
</ul>
</nav>
<div class="social__header social">
<a class="social__link" href="#">
<img class="social__img" src="./img/instagram.svg" alt="instagram">
</a>
<a class="social__link" href="#">
<img class="social__img" src="./img/facebook.svg" alt="facebook">
</a>
<a class="header__phone phone" href="tel:+380676615415">+380 67661 5415</a>
</div>
<a class="feedback__link" href="">Обговорити проект</a>
</div>
<div class="menu__btn">
<span></span>
</div>
</div>
</div>
<div class="baner">
<div class="baner__item">
<div class="baner__sub-item">
<h2 class="baner__title">Виробництво меблів</h2>
<p class="baner__text">Ми виконуємо комплексне виготовлення корпусних меблів для житлових і комерційних приміщень, забезпечимо Вас якісним меблевим продуктом власного виробництва. </p>
<a class="baner__link feedback__link" href="">Обговорити проект</a>
</div>
<img class="baner__img" src="./img/baner_1.jpg" alt="baner1">
</div>
<div class="baner__item">
<div class="baner__sub-item">
<h2 class="baner__title">комплексне меблювання інтреєрів</h2>
<p class="baner__text">Ми створені виконувати об`єктні задачі комплексного меблювання житлових та комерційних приміщень.
Наш колектив націлений на результат -
вчасно реалізувати проект на найвищому рівні. Ми забезпечуємо ваш спокій та беремо на себе вирішення будь-яких задач.
</p>
<a class="baner__link feedback__link" href="">Обговорити проект</a>
</div>
<img class="baner__img" src="./img/baner_2.jpg" alt="baner1">
</div>
<div class="baner__item">
<div class="baner__sub-item">
<h2 class="baner__title">Дизайн інтреєру</h2>
<p class="baner__text">В дизайні ми поєднуємо стильні ідеї з практичною ергономікою та можливістю точно реалізувати візуалізацію.
Наш інтер`єр - це ваш індивідуальний простір, зона комфорту в житті та роботі</p>
<a class="baner__link feedback__link" href="">Обговорити проект</a>
</div>
<img class="baner__img" src="./img/baner_3.jpg" alt="baner1">
</div>
</div>
<div class="slider-container">
<div class="slider-nav">
<div class="slider-arrows"></div>
<div class="slider-dots"></div>
</div>
</div>
</header>
<section id="direction" class="direction">
<div class="container">
<h2 class="direction__title title">Основні напрямки</h2>
<div class="direction__items">
<div class="direction__item">
<span class="direction__number">01</span>
<h6 class="direction__sub-title">Дизайн інтерєру</h6>
<img class="direction__img" src="./img/direcdtion/direction_item_1.jpg" alt="direction1">
</div>
<div class="direction__item">
<span class="direction__number">02</span>
<h6 class="direction__sub-title">Виробництво меблів</h6>
<img class="direction__img" src="./img/direcdtion/direction_item_2.jpg" alt="direction1">
</div>
<div class="direction__item">
<span class="direction__number">03</span>
<h6 class="direction__sub-title">Комплексне меблювання</h6>
<img class="direction__img" src="./img/direcdtion/direction_item_3.jpg" alt="direction1">
</div>
</div>
</div>
</section>
<section class="provide">
<div class="container">
<h2 class="provide__title title">Ми забезпечемо вас </h2>
<div class="provide__items">
<div class="provide__item">
<img class="provide__img" src="./img/provide/provide_1.svg" alt="">
<h6 class="provide_item-title">Меблями</h6>
</div>
<div class="provide__item">
<img class="provide__img" src="./img/provide/provide_2.svg" alt="">
<h6 class="provide_item-title">Освітленням</h6>
</div>
<div class="provide__item">
<img class="provide__img" src="./img/provide/provide_3.svg" alt="">
<h6 class="provide_item-title">Побутовою технікою</h6>
</div>
<div class="provide__item">
<img class="provide__img" src="./img/provide/provide_4.svg" alt="">
<h6 class="provide_item-title">Дверима</h6>
</div>
<div class="provide__item">
<img class="provide__img" src="./img/provide/provide_5.svg" alt="">
<h6 class="provide_item-title">Стіновими панелями та
підлоговим покриттям</h6>
</div>
<div class="provide__item">
<img class="provide__img" src="./img/provide/provide_6.svg" alt="">
<h6 class="provide_item-title">Проектуванням</h6>
</div>
</div>
</div>
</section>
<section id="advantage" class="advantage">
<div class="container">
<h2 class="advantage__title title">Наші переваги</h2>
<div class="advantage__items">
<div class="advantage__item">
<div class="advantage__left">
<span class="avantage__number">01</span>
<img class="advantage__img" src="./img/advantage/advantage_1.jpg" alt="advantage">
</div>
<div class="advantage__right">
<h5 class="advantage__item-title">Мобільність</h5>
<p class="advantage__text">Проводимо зустрічі на об`єктах в затишних закладах Києва</p>
</div>
</div>
<div class="advantage__item">
<div class="advantage__left">
<span class="avantage__number">02</span>
<img class="advantage__img" src="./img/advantage/advantage_2.jpg" alt="advantage">
</div>
<div class="advantage__right">
<h5 class="advantage__item-title">Надійність</h5>
<p class="advantage__text">Система нашої роботи зосереджена на якості та термінах завершення проекту</p>
</div>
</div>
<div class="advantage__item selected">
<div class="advantage__left">
<span class="avantage__number">03</span>
<img class="advantage__img" src="./img/advantage/advantage_3.jpg" alt="advantage">
</div>
<div class="advantage__right">
<h5 class="advantage__item-title">Якість</h5>
<p class="advantage__text">Виготовляємо виключно з перевірених європейських брендів</p>
</div>
</div>
<div class="advantage__item">
<div class="advantage__left">
<span class="avantage__number">04</span>
<img class="advantage__img" src="./img/advantage/advantage_4.jpg" alt="advantage">
</div>
<div class="advantage__right">
<h5 class="advantage__item-title">Професіоналізм</h5>
<p class="advantage__text">Наша команда - це клуб професіоналів, об`єднаних в одній компанії</p>
</div>
</div>
<div class="advantage__item">
<div class="advantage__left">
<span class="avantage__number">05</span>
<img class="advantage__img" src="./img/advantage/advantage_5.jpg" alt="advantage">
</div>
<div class="advantage__right">
<h5 class="advantage__item-title">Вигідність</h5>
<p class="advantage__text">Ми відмовились від шоу-руму та офісу на користь вартості та мобільності</p>
</div>
</div>
</div>
</div>
</section>
<section class="feedback-1 feedback">
<div class="container">
<div class="feedback__form-wrap">
<h2 class="feedback__title title">Обговоримо ваш проект?</h2>
<form action="get" class="feedback__form">
<p class="feedback__text">Заповніть форму і найближчим часом ми зв'яжемося з вами!</p>
<input class="feedback__input" type="text" name="username" placeholder="Ім'я">
<input class="feedback__input" type="text" name="tel" placeholder="Номер телефону">
<a class="feedback__file" href="">Прикріпити проект</a>
<button class="feedback__link" type="submit" >Відправити</button>
<label class="feedback__checkbox" for="checkbox1">
<input class="feedback__checkbox-real" type="checkbox" name="checkbox" id="checkbox1">
<span class="feedback__checkbox-custom"></span>
Даю згоду на оброблення персональних даних
</label>
</form>
</div>
</div>
</section>
<section id="stages" class="stages">
<div class="container">
<h2 class="stages__title title">Етапи роботи</h2>
<div class="stages__items">
<div class="stages__item">
<span class="stages__number">01</span>
<h6 class="stages__item-title">Підписання договору</h6>
<p class="stages__item-text">Визначаємось з бюджетом, матеріалами та фурнітурою.
Вносимо правки в проект,
підписуємо пакет документів.</p>
</div>
<div class="stages__item">
<span class="stages__number">02</span>
<h6 class="stages__item-title">Виготовлення</h6>
<p class="stages__item-text">Після підписання договору та визначення термінів, команда Рінго приступає до
найцікавішого - виробництва!</p>
</div>
<div class="stages__item">
<span class="stages__number">03</span>
<h6 class="stages__item-title">Встановлення</h6>
<p class="stages__item-text">По готовності виробництва починаємо монтаж на обєкті.У домовлений час виконуємо доставку та монтаж.</p>
</div>
<div class="stages__item">
<span class="stages__number">04</span>
<h6 class="stages__item-title">Новосілля</h6>
<p class="stages__item-text">По закінченню робимо перевірку та підписуємо акт закінчення робівт. </p>
</div>
</div>
</div>
</section>
<section id="gifts" class="gifts">
<div class="gifts__gift">
<img src="./img/toster.png" alt="toster">
<p class="gifts__gift-text">
<img src="./img/gift.png" alt="">
<span>Подарунок</span>
</p>
</div>
<div class="gifts__content">
<h2 class="gifts__title title">Рінго роздає подарунки!</h2>
<div class="gifts__text">При замовленні до нового року, отримай цінний подарунок для свого комфорту</div>
<a class="gifts__link feedback__link" href="#">Хочу подарунок</a>
</div>
<div class="gifts__gift">
<img src="./img/microwave.png" alt="toster">
<p class="gifts__gift-text">
<img src="./img/gift.png" alt="">
<span>Подарунок</span>
</p>
</div>
</section>
<section class="feedback-2 feedback">
<div class="container">
<div class="feedback__form-wrap">
<h2 class="feedback__title title">Залишилися питання?</h2>
<form action="get" class="feedback__form">
<p class="feedback__text">Отримай безкоштовну консультацію менеджера та прорахунок проекту </p>
<input class="feedback__input" type="text" name="username" placeholder="Ім'я">
<input class="feedback__input" type="text" name="tel" placeholder="Номер телефону">
<button class="feedback__link" type="submit" >Відправити</button>
<label class="feedback__checkbox" for="checkbox2">
<input class="feedback__checkbox-real" type="checkbox" name="checkbox" id="checkbox2">
<span class="feedback__checkbox-custom"></span>
Даю згоду на оброблення персональних даних
</label>
</form>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__inner">
<div class="footer_social">
<a class="footer__logo logo" href="#">
<img class="logo__img" src="./img/logo.png" alt="logo">
</a>
<div class="footer__social social">
<span class="footer__social-text" >Соцмережі:</span>
<a class="social__link" href="#">
<img class="social__img" src="./img/instagram.svg" alt="instagram">
</a>
<a class="social__link" href="#">
<img class="social__img" src="./img/facebook.svg" alt="facebook">
</a>
</div>
</div>
<div class="footer__menu">
<ul class="footer__menu-items">
<li class="footer__menu-item">
<a href="" class="footer__menu-link">Основні напрямки</a>
</li>
<li class="footer__menu-item">
<a href="" class="footer__menu-link">Про компанію</a>
</li>
<li class="footer__menu-item">
<a href="" class="footer__menu-link">Переваги</a>
</li>
</ul>
<ul class="footer__menu-items">
<li class="footer__menu-item">
<a href="" class="footer__menu-link">Етапи роботи</a>
</li>
<li class="footer__menu-item">
<a href="" class="footer__menu-link">Зараз в роботі</a> </li>
<li class="footer__menu-item">
<a href="" class="footer__menu-link">Стати партнером</a>
</li>
</ul>
</div>
<div class="footer__contact">
<a class="footer__phone phone" href="tel:+380676615415">+380 67661 5415</a>
<a class="footer__feedback__link feedback__link" href="#">На каву з менеджером!</a>
</div>
</div>
</div>
</footer>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/script.js"></script>
</body>
</html>