-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
406 lines (406 loc) · 25.8 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
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
<!DOCTYPE html>
<html class="page" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repair Design Project</title>
<link rel="stylesheet" href="./style.css">
</head>
<body class="page__body">
<header class="page__header header">
<div class="header__wrapper wrapper"><a class="header__logo" href="#">IC "Repair Design Project"</a>
<nav class="header__nav nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link nav__link_active link" href="#">HOME</a></li>
<li class="nav__item"><a class="nav__link link" href="#">PROJECTS</a></li>
<li class="nav__item"><a class="nav__link link" href="#">MEASUREMENT</a></li>
<li class="nav__item"><a class="nav__link link" href="#">TEAM</a></li>
<li class="nav__item"><a class="nav__link link" href="#">REVIEWS</a></li>
<li class="nav__item"><a class="nav__link link" href="#">CONTACTS</a></li>
</ul>
</nav>
<div class="header__contacts"><a class="header__tel" href="tel:+79287683239">+7 (928) 768-32-39</a>
<button class="header__button button" type="button">Request a call</button>
</div>
</div>
</header>
<main class="page__main main">
<section class="main__section section-presentation">
<div class="section-presentation__wrapper">
<div class="section-presentation__info">
<h1 class="section-presentation__header">
Turnkey Repair in the
city of <span class="section-presentation__name-city">Rostov-on-Don</span>
</h1>
<p class="section-presentation__paragraph">
Get ready-made turnkey presentations on time
with work time saving up to 45 days and 20% from
cost of materials due to the organization of work
</p>
<div class="section-presentation__buttons">
<button class="section-presentation__button section-presentation__button_box-shadow_yellow button">Calculate the cost</button>
<button class="section-presentation__button section-presentation__button_theme_application button">Submit your application</button>
</div>
</div>
</div><img class="section-presentation__img" src="../images/photo/1/1-large.png" height="707">
</section>
<div class="compl-projects">
<div class="compl-projects__wrapper wrapper">
<ul class="compl-projects__list">
<li class="compl-projects__item"><a class="compl-projects__link compl-projects__link_active" href="#">Rostov-on-Don, Admiral</a></li>
<li class="compl-projects__item"> <a class="compl-projects__link" href="#">Sochi thieves</a></li>
<li class="compl-projects__item"> <a class="compl-projects__link" href="#">Rostov-on-Don, Patrotic</a></li>
</ul>
<section class="compl-projects__info">
<h2 class="compl-projects__title title">
Completed
Projects
</h2>
<p class="compl-projects__paragraph text">
Only a small part of the work performed by our company is presented on the site. For 14 years on in the construction
market we have made happy more than 1000 families
</p>
<figure class="compl-projects__slider slider"><img class="slider__image" src="../images/photo/2/2-mobile.png" alt="Пример комнаты">
<button class="slider__button slider__button_theme_previous" type="button"><img class="slider__svg" src="../images/svg/previous-arrow.svg"></button>
<button class="slider__button slider__button_theme_next" type="button"><img class="slider__svg" src="../images/svg/next-arrow.svg"></button>
</figure>
<ul class="compl-projects__description description">
<li class="description__item">City:
<p class="description__paragraph text">Rostov-on-Don <br> LCD admiral</p>
</li>
<li class="description__item">Apartment Area:
<p class="description__paragraph text">81 m2</p>
</li>
<li class="description__item">Repair Time:
<p class="description__paragraph text">3.5 months</p>
</li>
<li class="description__item">Repair Cost:
<p class="description__paragraph text">Upon request</p>
</li>
</ul>
<div class="compl-projects__switch-menu switch-menu">
<button class="switch-menu__button switch-menu__button_theme_previous" type="button"><img class="switch-menu__svg" src="../images/svg/long-previous-arrow.svg"></button>
<ul class="switch-menu__list">
<li class="switch-menu__item switch-menu__item_active"></li>
<li class="switch-menu__item"></li>
<li class="switch-menu__item"></li>
</ul>
<button class="switch-menu__button switch-menu__button_theme_next" type="button"><img class="switch-menu__svg" src="../images/svg/long-next-arrow.svg"></button>
</div>
</section><img class="compl-projects__image" src="../images/photo/2/2-large.png" alt="Пример команты">
</div>
<div class="test"></div>
</div>
<div class="online-control">
<div class="online-control__header">
<h2 class="online-control__title online-control__title_theme_white title">Online control</h2><img class="online-control__image" src="../images/svg/camera.svg" width="114" height="28">
<figure class="online-control__video">
<picture class="online-control__picture">
<source class="online-control__source" media="(max-width: 1255px)" srcset="../images/photo/3/3-mobile.png">
<source class="online-control__source" media="(min-width: 1256px)" srcset="../images/photo/3/3-home.png"><img class="online-control__preview" src="../images/photo/3/3-home.png" alt="Пример комнаты">
</picture>
<button class="online-control__button online-control__button_theme_play" type="button">
<picture class="online-control__picture">
<source class="online-control__source" media="(max-width: 1255px)" srcset="../images/svg/play.svg">
<source class="online-control__source" media="(min-width: 1256px)" srcset="../images/svg/play-xl.svg"><img class="online-control__svg" src="../images/svg/play-xl.svg">
</picture>
</button>
</figure>
</div>
<div class="online-control__wrapper wrapper">
<section class="online-control__section"><img class="online-control__hr" src="../images/svg/hr.svg">
<p class="online-control__paragraph text">
At each facility, a camera is installed that broadcasts the progress
of work on the clock. At any time, you can go to our website and monitor
the progress of work in your apartment. You can watch the live broadcast
from one of our facilities!
Leave a request below and you will receive a link to the broadcast.
</p>
<form class="online-control__form form form_theme_dark" action="#" method="post">
<div class="form__wrapper">
<label class="form__label" for="fullName">Name</label>
<input class="form__input" type="text" id="fullName" name="fullName" placeholder="What is your name:">
</div>
<div class="form__wrapper form__wrapper_margin-bottom_27px">
<label class="form__label" for="phone">Phone</label>
<input class="form__input" type="text" id="phone" name="phone" placeholder="Your phone number:">
</div>
<input class="form__button form__button_position_absolute form__button_top_275px button" type="button" value="submit">
<div class="form__wrapper form__wrapper_order_0 form__wrapper_margin_none form__wrapper_grid-span">
<label class="form__label" for="personalData">
<input class="form__checkbox form__checkbox_theme_custom-check" type="checkbox" id="personalData" checked><span class="form__span">I agree to the processing of personal data</span>
</label>
</div>
</form>
<form class="online-control__form form form_theme_white" action="#" method="post">
<div class="form__wrapper form__wrapper_margin_none">
<label class="form__label" for="fullName">Name</label>
<input class="form__input form__input_border-bottom_gray" type="text" id="fullName" name="fullName" placeholder="What is your name:">
</div>
<div class="form__wrapper form__wrapper_margin-bottom_27px form__wrapper_margin_none">
<label class="form__label" for="phone">Phone</label>
<input class="form__input form__input_border-bottom_gray" type="text" id="phone" name="phone" placeholder="Your phone number:">
</div>
<input class="form__button form__button_top_275px button" type="button" value="submit">
<div class="form__wrapper form__wrapper_order_0 form__wrapper_margin_none form__wrapper_grid-span">
<label class="form__label" for="personalData">
<input class="form__checkbox form__checkbox_theme_custom-check" type="checkbox" id="personalData" checked><span class="form__span">I agree to the processing of personal data</span>
</label>
</div>
</form>
</section>
</div>
</div>
<section class="types-of-repair">
<div class="types-of-repair__header">
<h2 class="types-of-repair__title types-of-repair__title_theme_black title">Types of repair</h2><img class="online-control__image" src="../images/svg/tools.svg" width="114" height="28">
</div>
<div class="types-of-repair__wrapper">
<div class="types-of-repair__card card"><img class="card__image" src="../images/photo/4/1.png">
<div class="card__wrapper">
<h2 class="card__title">Redecorating</h2>
<ul class="card__list">
<li class="card__item">Dismantling of old coatings</li>
<li class="card__item">Wallpapering</li>
<li class="card__item">Painting walls and ceilings</li>
<li class="card__item">Laying flooring</li>
<li class="card__item">Replacing plumbing</li>
<li class="card__item">Replacing sockets and switches</li>
<li class="card__item">Replacing doors</li>
</ul>
<div class="card__price text">from 900 rub / m2</div>
</div>
</div>
<div class="types-of-repair__card card"><img class="card__image" src="../images/photo/4/2.png">
<div class="card__wrapper">
<h2 class="card__title">Overhaul</h2>
<ul class="card__list">
<li class="card__item">Dismantling of old coatings</li>
<li class="card__item">Wallpapering</li>
<li class="card__item">Painting walls and ceilings</li>
<li class="card__item">Laying flooring</li>
<li class="card__item">Replacing plumbing</li>
<li class="card__item">Replacing sockets and switches</li>
<li class="card__item">Replacing doors</li>
</ul>
<div class="card__price text">from 1800 rub / m2</div>
</div>
</div>
<div class="types-of-repair__card card"><img class="card__image" src="../images/photo/4/3.png">
<div class="card__wrapper">
<h2 class="card__title">Designer Repair</h2>
<ul class="card__list">
<li class="card__item">Dismantling of old coatings</li>
<li class="card__item">Wallpapering</li>
<li class="card__item">Painting walls and ceilings</li>
<li class="card__item">Laying flooring</li>
<li class="card__item">Replacing plumbing</li>
<li class="card__item">Replacing sockets and switches</li>
<li class="card__item">Replacing doors</li>
</ul>
<div class="card__price text">from 4000 rub / m2</div>
</div>
</div>
</div>
<section class="types-of-repair__fantasies">
<h2 class="types-of-repair__title types-of-repair__title_margin_none title">We realize your wildest fantasies</h2>
<figure class="types-of-repair__slider slider"><img class="slider__image" src="../images/photo/5/1.png" alt="Пример комнаты">
<button class="slider__button slider__button_theme_previous" type="button"><img class="slider__svg" src="../images/svg/previous-arrow.svg"></button>
<button class="slider__button slider__button_theme_next" type="button"><img class="slider__svg" src="../images/svg/next-arrow.svg"></button>
</figure>
</section>
</section>
<div class="points">
<div class="points__wrapper wrapper">
<ul class="points__list">
<li class="points__item points__item_display_inline-flex">Our specialist will arrive for measurements per day <br>
contact, or appoint a date convenient for you
</li>
<li class="points__item">Free metering</li>
<li class="points__item">Free consultation</li>
<li class="points__item points__item_display_inline-flex points__item_margin_none">Get a cost estimate and <br>
the timing of your future repairs
</li>
</ul>
<section class="points__section">
<h2 class="points__header">Leave a request for free <br> departure of the measurer</h2>
<form class="points__form form form_theme_dark">
<div class="form__wrapper">
<label class="form__label" for="fullName">Name</label>
<input class="form__input" type="text" id="fullName" name="fullName" placeholder="What is your name:">
</div>
<div class="form__wrapper">
<label class="form__label" for="phone">Phone</label>
<input class="form__input" type="text" id="phone" name="phone" placeholder="Your phone number:">
</div>
<div class="form__wrapper form__wrapper_margin-bottom_27px">
<label class="form__label" for="question">Email</label>
<input class="form__input" type="text" id="question" name="question" placeholder="Your email">
</div>
<div class="form__wrapper form__wrapper_flex_column form__wrapper_margin_none">
<div class="form__wrapper form__wrapper_margin-bottom_39px">
<label class="form__label form__label_inline-flex" for="personalData">
<input class="form__checkbox form__checkbox_theme_custom-check" type="checkbox" id="personalData" checked><span class="form__span">I agree to the processing of personal data</span>
</label>
</div>
<input class="form__button form__button_theme_call button" type="button" value="CALL THE MEASURER">
</div>
</form>
</section>
</div>
<div class="points__wrapper wrapper">
<figure class="points__sale">
<div class="points__circle"><img class="points__pig" src="../images/svg/pig.svg" alt="Копилка"></div>
<figcaption class="points__sale-caption">Help save 10 - 20% of the <br> cost of materials</figcaption>
</figure>
</div>
</div>
<div class="fantasies">
<div class="fantasies__wrapper wrapper">
<section class="fantasies__section">
<h2 class="fantasies__header">We realize your wildest fantasies</h2>
<ul class="fantasies__list">
<li class="fantasies__item"><a class="fantasies__link" href="#">American classic</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Empire</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Classical</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Loft</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Minimalism</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Provence</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Romanticism</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Scandinavian style</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">Mediterranean style</a></li>
<li class="fantasies__item"><a class="fantasies__link" href="#">High tech</a></li>
<li class="fantasies__item fantasies__item_margin_none"><a class="fantasies__link" href="#">Eclecticism</a></li>
</ul>
</section>
<figure class="fantasies__gallery"><img class="fantasies__image fantasies__image_padding-top_60" src="../images/photo/fantasies/1.png"><img class="fantasies__image" src="../images/photo/fantasies/3.png"><img class="fantasies__image" src="../images/photo/fantasies/2.png"><img class="fantasies__image" src="../images/photo/fantasies/4.png"></figure>
</div>
</div>
<section class="our-clients">
<div class="our-clients__header">
<h2 class="our-clients__title our-clients__title_theme_black title">Our clients</h2><img class="our-clients__image" src="../images/svg/handshake.svg" width="114" height="28">
<p class="our-clients__statistics">80% of our customers recommend us to their friends and family.</p>
</div>
<div class="our-clients__wrapper">
<div class="our-clients__card card">
<div class="card__person"><img class="card__photo" src="../images/photo/our-clients/Fedosova.png">
<p class="card__full-name">Fedosova Maria Konstantinovna</p>
</div>
<div class="card__review">
<p class="card__paragraph card__paragraph_margin-bottom_18">
I want to thank the guys for their work. We put your shower part in repair. I am very grateful that I referred to the repair as to my own. Great thanks I express the project
to Georgia for its professionalism and approach.
</p>
<p class="card__paragraph">
The repair process was turned out in terms, faster than anticipated.
Team mobile and professional. Works performed qualitatively without comments.
Quality satisfied. Prices democratic. I recommend these masters.
</p>
</div>
<div class="card__project-data text"><img class="card__image-square" src="../images/svg/square.svg" alt="">
<p class="card__paragraph-square">40 М2</p><img class="card__delimiter" src="../images/svg/delimeter.svg" alt=""><img class="card__image-calendar" src="../images/svg/calendar.svg" alt="">
<p class="card__paragraph-time">48 DAYS</p>
</div>
</div>
<div class="our-clients__card card">
<div class="card__person"><img class="card__photo" src="../images/photo/our-clients/Afanasyev.png">
<p class="card__full-name">Afanasyev Sergey Alexandrovich</p>
</div>
<div class="card__review">
<p class="card__paragraph card__paragraph_margin-bottom_18">
I want to thank the guys for their work. We put your shower part in repair. I am very grateful that I referred to the repair as to my own. Great thanks I express the project
to Georgia for its professionalism and approach.
</p>
<p class="card__paragraph">
The repair process was turned out in terms, faster than anticipated.
Team mobile and professional. Works performed qualitatively without comments.
Quality satisfied. Prices democratic. I recommend these masters.
</p>
</div>
<div class="card__project-data text"><img class="card__image-square" src="../images/svg/square.svg" alt="">
<p class="card__paragraph-square">90 М2</p><img class="card__delimiter" src="../images/svg/delimeter.svg" alt=""><img class="card__image-calendar" src="../images/svg/calendar.svg" alt="">
<p class="card__paragraph-time">128 DAYS</p>
</div>
</div>
<div class="our-clients__card card">
<div class="card__person"><img class="card__photo" src="../images/photo/our-clients/Kiriev.png">
<p class="card__full-name">Kiriev Egor <br> Leonidovich</p>
</div>
<div class="card__review">
<p class="card__paragraph card__paragraph_margin-bottom_18">
I want to thank the guys for their work. We put your shower part in repair. I am very grateful that I referred to the repair as to my own. Great thanks I express the project
to Georgia for its professionalism and approach.
</p>
<p class="card__paragraph">
The repair process was turned out in terms, faster than anticipated.
Team mobile and professional. Works performed qualitatively without comments.
Quality satisfied. Prices democratic. I recommend these masters.
</p>
</div>
<div class="card__project-data text"><img class="card__image-square" src="../images/svg/square.svg" alt="">
<p class="card__paragraph-square">56 М2</p><img class="card__delimiter" src="../images/svg/delimeter.svg" alt=""><img class="card__image-calendar" src="../images/svg/calendar.svg" alt="">
<p class="card__paragraph-time">86 DAYS</p>
</div>
</div>
</div>
</section>
<div class="questions">
<section class="questions__section">
<h2 class="questions__title questions__title_theme_white title">Have any questions?</h2>
<form class="questions__form form form_theme_dark" action="#" method="post">
<div class="form__wrapper">
<label class="form__label" for="fullName">Name</label>
<input class="form__input" type="text" id="fullName" name="fullName" placeholder="What is your name:">
</div>
<div class="form__wrapper">
<label class="form__label" for="phone">Phone</label>
<input class="form__input" type="text" id="phone" name="phone" placeholder="Your phone number:">
</div>
<div class="form__wrapper form__wrapper_margin-bottom_27px form__wrapper_margin-bottom_47px form__wrapper_width_100">
<label class="form__label" for="question">Question</label>
<input class="form__input" type="text" id="question" name="question" placeholder="I want to know:">
</div>
<div class="form__wrapper form__wrapper_margin_none form__wrapper_margin_auto form__wrapper_flex_column">
<div class="form__wrapper form__wrapper_margin-bottom_50px">
<label class="form__label form__label_inline-flex" for="personalData">
<input class="form__checkbox form__checkbox_theme_custom-check" type="checkbox" id="personalData" checked><span class="form__span">I agree to the processing of personal data</span>
</label>
</div>
<input class="form__button form__button_theme_have-any-question form__wrapper_align-self_center button" type="button" value="submit">
</div>
</form>
</section>
<div class="map">
<div class="map__wrapper wrapper">
<picture class="map__picture">
<source class="map__source" media="(max-width: 1255px)" srcset="../images/photo/map/map-mobile.png">
<source class="map__source" media="(min-width: 1256px)" srcset="../images/photo/map/map-home.png"><img class="map__image map__image_margin-bottom_42px" src="../images/photo/map.png" alt="Мы на карте">
</picture>
<p class="map__title map__title_margin-bottom_24px title">
Rostov-on-Don, Nansen St., 239 Shopping Center Decorum
Tel +7 (928) 768 32 29
</p>
<div class="map__social-links social-links"><a class="social-links__link" href="#"><img class="social-links__img" src="../images/svg/email.svg"></a><a class="social-links__link" href="#"><img class="social-links__img" src="../images/svg/inst.svg"></a></div>
</div>
</div>
</div>
</main>
<footer class="page__footer footer">
<div class="footer__wrapper wrapper"><a class="footer__logo" href="#">IC "Repair Design Project"</a>
<nav class="footer__nav nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link nav__link_active link" href="#">HOME</a></li>
<li class="nav__item"><a class="nav__link link" href="#">PROJECTS</a></li>
<li class="nav__item"><a class="nav__link link" href="#">MEASUREMENT</a></li>
<li class="nav__item"><a class="nav__link link" href="#">TEAM</a></li>
<li class="nav__item"><a class="nav__link link" href="#">REVIEWS</a></li>
<li class="nav__item"><a class="nav__link link" href="#">CONTACTS</a></li>
</ul>
</nav>
<div class="footer__contacts"><a class="footer__tel" href="tel:+79287683239">+7 (928) 768-32-39</a>
<button class="footer__button button" type="button">Request a call</button>
</div>
</div>
</footer>
</body>
</html>