-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
570 lines (565 loc) · 31.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
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RA-Studio</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<div class="slick-container" id="first-block">
<div class="slick">
<header class="header">
<div class="header__container">
<nav class="menu">
<ul class="menu__list">
<li class="menu__list-item">
<a href="#first-block" class="menu__link">Главная</a>
</li>
<li class="menu__list-item">
<a href="#second-block" class="menu__link">Преимущества</a>
</li>
<li class="menu__list-item">
<a href="#third-block" class="menu__link">Описание комплекса</a>
</li>
<li class="menu__list-item">
<a href="#fourth-block" class="menu__link">Квартиры</a>
</li>
<li class="menu__list-item">
<a href="#five-block" class="menu__link">Контакты</a>
</li>
</ul>
</nav>
<div class="container__box">
<div class="title__box">
<h1 class="title">Квартиры</h1>
<h2 class="title__two">до
<span class="title__percent">20%</span>
дешевле цены застройщика</h2>
</div>
<div class="input__box">
<div class="input__box-wrap-one">
<input type="text" placeholder="Имя">
<input type="text" placeholder="Телефон">
</div>
<div class="input__box-wrap-two">
<button class="input__box-button">Получить консультацию</button>
</div>
</div>
</div>
<div class="header__info">
<div class="header__info-box">
<span class="number">+7 (812) 380-00-00</span>
<p class="copyright">Правовая информация | ©2004-2015 жк "силы природы"</p>
</div>
</div>
</div>
</header>
<header class="header">
<video autoplay muted loop class="header__video" src="video/video.mp4" type="video/mp4"></video>
</header>
<header class="header header--bgr">
<div class="header__container">
<h1>Астрономия заставляет душу смотреть вверх и ведет нас из этого мира в другой.</h1>
</div>
</header>
</div>
</div>
<main>
<div class="head-container">
<section class="container" id="second-block">
<div class="container__item">
<div class="title-box">
<h2 class="container__title">наши <span class="orange">преимущества</span></h2>
</div>
<div class="circles">
<div class="circle"><i class="icon icon1"></i>
<p class="descr">от собственника</p></div>
<div class="arrow-box"><i class="icon arrow"></i></div>
<div class="circle"><i class="icon icon2"></i>
<p class="descr">без посредника</p></div>
<div class="arrow-box"><i class="icon arrow"></i></div>
<div class="circle"><i class="icon icon3"></i>
<p class="descr">рассрчока</p></div>
<div class="arrow-box"><i class="icon arrow"></i></div>
<div class="circle"><i class="icon icon4"></i>
<p class="descr">ипотека</p></div>
<div class="arrow-box"><i class="icon arrow"></i></div>
<div class="circle"><i class="icon icon5"></i>
<p class="descr">стоимость ниже цены застройщика</p></div>
<div class="arrow-box"><i class="icon arrow"></i></div>
<div class="circle"><i class="icon icon6"></i>
<p class="descr">большой выбор квартир</p></div>
</div>
<div class="offer">
<div class="offer__box">
<div class="offer__box-info">
<h2 class="offer__box-title">предложение месяца</h2>
<button data-src="img/plan.png" class="offer__box-text" id="3d">3D формат</button> <span>/</span>
<button data-src="img/2d-plan.png" class="offer__box-text" id="2d">обычный формат</button>
</div>
<div class="lightbox">
<a href="img/3D/16.jpg" data-lightbox="image-1">
<div class="lightbox__zoom">
<div class="lightbox__icon"></div>
</div>
</a>
<div class="cost">
<p class="cost__text">3 891 194 Р.</p>
</div>
</div>
</div>
<div class="offer__box2">
<div class="offer__items">
<p class="offer__items-text">квартира 2 к</p>
<p class="offer__text">1 очередь</p>
</div>
<div class="cost-box">
<p class="cost-box__text">сдается в этом году</p>
</div>
<div class="cost-box">
<p class="cost-box__text">надежный застройщик</p>
</div>
<div class="character">
<div class="character__items">
<p class="character__title">Общая площадь</p>
<p class="character__text">86,20 м<sup>2</sup></p>
</div>
<div class="character__items">
<p class="character__title">Жилая площадь</p>
<p class="character__text">45,60 м<sup>2</sup></p>
</div>
<div class="character__items">
<p class="character__title">Жилая площадь</p>
<p class="character__text">9</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="description" id="third-block">
<aside class="nav">
<div class="nav__item">
<ul class="list">
<li class="list__item">
<a href="" class="list__link1">описание</a>
</li>
<li class="list__item">
<a href="" class="list__link2"> комплекса</a>
</li>
</ul>
<ul class="list2">
<li class="list__item2"><a href="#" class="list2__link">о комплексе</a></li>
<li class="list__item2"><a href="#" class="list2__link">галерея</a></li>
<li class="list__item2"><a href="#" class="list2__link">способы покупки</a></li>
<li class="list__item2"><a href="#" class="list2__link">местоположение</a></li>
<li class="list__item2"><a href="#" class="list2__link">ход строительства</a></li>
</ul>
</div>
</aside>
<div class="description__box">
<h2 class="description__box-title"><span class="descr-span">Описание </span> жилого комплекса</h2>
<p class="description__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam labore quibusdam necessitatibus odio praesentium. Architecto nemo consequuntur mollitia labore fuga excepturi, eum omnis tenetur impedit animi, possimus cum sapiente, cumque ducimus repellat! Recusandae nisi tempora at iste molestias tenetur ipsa quasi itaque nulla architecto, quidem quod culpa repellat minus ex odit atque labore dolor accusamus nam voluptas! Nesciunt amet atque sit illum, pariatur quidem eius reiciendis odit, quis cupiditate veniam, id quo delectus facere non asperiores dolorem ex. Modi sunt nihil, doloremque cupiditate fugit corrupti voluptate magni quam tempore culpa. Adipisci saepe, mollitia omnis officiis aliquam facere repudiandae at distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nobis reprehenderit neque esse tempore laboriosam nesciunt, earum, sit! Obcaecati cum rem velit natus quasi, reiciendis eos et facilis at sed vel illum nobis voluptatem nulla dolor nihil vitae laboriosam praesentium illo a! Atque a, dolor explicabo neque sapiente earum ad labore molestiae inventore, ut doloribus quia, aspernatur velit in facere magnam esse quibusdam cupiditate ratione ipsam ab incidunt quas! Adipisci exercitationem deserunt perferendis tempore, dolores nostrum dolore necessitatibus voluptatibus repellat nulla aliquid odit suscipit, explicabo, id, pariatur animi reiciendis maiores quod molestias commodi. Sunt, fugiat ut neque nulla corrupti dolore incidunt ullam quos perspiciatis sapiente, unde dignissimos adipisci veritatis. Blanditiis illum distinctio doloribus sequi sunt minus, nam fugiat sapiente, repudiandae ipsum corporis, a nemo quam asperiores. Odit repellendus eos, sed ullam nesciunt voluptate maiores saepe enim eligendi nobis corporis, reprehenderit, iure temporibus quibusdam obcaecati? Omnis consequatur cupiditate, ab odit et aperiam error, eum deleniti quod delectus doloribus nulla distinctio iste vero magnam blanditiis inventore minima maiores recusandae fuga? Culpa quod, fuga necessitatibus consequuntur vel sapiente, placeat voluptate quaerat maiores unde, quae. Distinctio laboriosam nisi dicta aut enim nobis cum ratione atque. Id minima natus doloribus nostrum ullam ipsum modi officia numquam at amet sapiente, expedita, facere molestias voluptate laborum nobis perferendis voluptatem explicabo placeat saepe. Hic accusantium distinctio, perspiciatis laudantium deserunt ea quisquam in omnis, suscipit ducimus rem voluptatem voluptatibus laboriosam. Facilis molestias temporibus tempore facere officia cum saepe est libero. Doloribus id, quidem commodi reiciendis suscipit explicabo quos ut impedit distinctio vitae, magni, consequatur beatae esse natus. Laborum ex repellendus ipsa distinctio. Accusamus, sapiente! Natus ipsam, dolore cupiditate! Hic tenetur harum ad voluptas qui quidem accusamus velit obcaecati,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea animi cupiditate reprehenderit, itaque quod ipsa sapiente qui corrupti laboriosam non est distinctio, alias dolores, sit pariatur. Sit eligendi, velit repudiandae sunt ipsum quos quas est ut? Quod nam quaerat, architecto officiis nobis corrupti nisi ut saepe vel dolores quo, fugiat quos, tempora dolorem impedit similique molestiae. Ad corporis voluptatem consequuntur optio eius non alias, hic qui. Hic cumque exercitationem dignissimos delectus adipisci laudantium soluta eveniet, quisquam aut earum sit possimus nobis, fuga veniam odio suscipit nostrum maiores et dolore obcaecati. Nostrum illo excepturi animi ducimus facilis asperiores earum debitis consequuntur ut! Porro consequatur, atque eos. Suscipit minima ipsam voluptatum tempore totam saepe non hic laboriosam nobis facilis cum, incidunt necessitatibus fuga vel voluptatibus aperiam, dolore, placeat aliquam quisquam vero deleniti animi, magni maxime impedit laudantium. Ea cum vitae ut, placeat autem atque in adipisci nulla eius temporibus dicta modi accusamus itaque reiciendis, voluptatum aliquid iste dolore consequuntur vero cumque cupiditate, perferendis. Laboriosam, obcaecati, excepturi! Quam natus voluptatibus, omnis quod modi sed voluptatum dignissimos temporibus nisi ratione fugit amet necessitatibus eum saepe consequatur odit aliquid doloremque, rerum facere cumque explicabo distinctio ea harum sint. Maxime totam error voluptatem repudiandae corporis minus culpa quisquam voluptate fugiat nobis cumque sit, voluptatum eveniet possimus, ullam numquam dicta neque qui recusandae, sequi quam sed itaque? Perspiciatis dicta illum vitae aliquam mollitia aut quos a eius possimus doloremque quo, reprehenderit libero iure in velit eaque unde maiores eos vel, fugiat ullam. Harum odio voluptatibus aperiam beatae tempore, atque ad animi, quos error voluptatem. Nulla culpa deleniti est odit dolorum magnam iure eligendi quaerat odio quisquam, quidem sunt ipsum minus sapiente suscipit rerum distinctio nam officiis quod optio itaque, assumenda et a quae! Molestiae enim non minima repudiandae corrupti facere cumque, asperiores nemo eveniet vero nesciunt sint possimus esse ipsum ea numquam corporis aspernatur atque quis aut, nihil iusto, placeat perferendis quidem. Tempora nisi nobis recusandae quos molestiae culpa labore voluptatibus vitae a, quis similique mollitia est odio. Voluptates perspiciatis quo quibusdam, porro voluptatum labore ea recusandae dignissimos accusamus provident, ab fugit aspernatur. Placeat non temporibus totam maiores, veritatis distinctio quidem, sapiente? Maiores architecto labore excepturi, officiis quo perspiciatis. Sunt illum quis deleniti. Eius mollitia obcaecati animi eligendi, repudiandae dicta sunt optio rerum amet ratione fuga veritatis vitae, soluta incidunt sapiente vero? Ex aspernatur voluptatum omnis id quisquam perspiciatis fuga provident itaque nesciunt rem harum non repellendus commodi dolore qui, atque facilis veniam consequuntur architecto, optio, corrupti quia. Quibusdam expedita, numquam modi eligendi nihil saepe dignissimos. Nobis provident ullam qui vero incidunt ab, consequatur eaque deleniti numquam illo in a natus et cupiditate modi tempore officia alias, accusamus ipsa! Tempora neque esse ad consequatur quam at pariatur qui, eius vero, laborum iste, fugit voluptate illo similique aliquid inventore. Ea alias sequi quidem neque odio voluptatum, expedita cum iure non, aspernatur repellendus! Repudiandae rem hic nobis magnam iure enim autem dolorem deleniti porro doloremque quas labore excepturi consectetur at optio, eligendi, nostrum non esse. Quas numquam consectetur doloremque. </p>
</div>
<div class="description__bottom"></div>
</section>
<section class="promo-code" id="third-block">
<div class="promo-code__container">
<div class="promo-code__box">
<p class="f-text">до конца апреля</p>
<p class="s-text">назовите ваш промо-код</p>
<span class="th-text">и получите дополнительную</span>
</div>
<div class="promo-code__wrap">
<p class="five-text">скидку</p>
<span class="six-text">5%</span>
<div class="randomizer">
<p class="randomizer__text">промо-код: <span id="random" class="randomizer__number"></span></p>
<div class="input__box">
<div class="input__box-wrap-one">
<input type="text" placeholder="Имя">
<input type="text" placeholder="Телефон">
</div>
<div class="input__box-wrap-two">
<button class="input__box-button">Получить скидку</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="apartmens" id="fourth-block">
<div class="apartmens__box">
<aside class="apartmens__aside">
<div class="nav__item">
<ul class="list">
<li class="list__item">
<a href="#" class="list__link1">квартиры</a>
</li>
<li class="list__item">
<a href="#" class="list__link2">в продаже</a>
</li>
</ul>
<ul class="list2">
<li class="list__item2"><a href="##" class="list2__link">студии</a></li>
<li class="list__item2"><a href="##" class="list2__link">однокомнатные</a></li>
<li class="list__item2"><a href="##" class="list2__link">двухкомнатные</a></li>
<li class="list__item2"><a href="##" class="list2__link">трехкомнатные</a></li>
</ul>
</div>
</aside>
<div class="apartmens__box-item">
<!-- house 1 -->
<div class="house">
<a class="light3d" href="img/3D/15.jpg" data-lightbox="image">
<div class="light3d-shape"></div>
</a>
<div class="light-btn"></div>
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">квартира 2 к </p>
<span class="first-box__span">1 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">86,20 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">45,60 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">9</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">3 750 543 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">4 320 521 р.</span>
</div>
</div>
<!-- house 2 -->
<div class="house house--2">
<a class="light3d" href="img/3D/13.jpg" data-lightbox="image">
<div class="light3d-shape"></div>
</a>
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">квартира 2 к </p>
<span class="first-box__span">2 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">49,01 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">26,20 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">17</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">2 574 168 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">3 000 000 р.</span>
</div>
</div>
<!-- house 3 -->
<div class="house house--3">
<a class="light3d" href="img/3D/16.jpg" data-lightbox="image">
<div class="light3d-shape"></div>
</a>
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">квартира 3 к </p>
<span class="first-box__span">2 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">77,28 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">46,17 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">6</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">4 096 263 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">4 500 000 р.</span>
</div>
</div>
<!-- house 4 -->
<div class="house house--4">
<a class="light3d" href="img/3D/3.jpg" data-lightbox="image">
<div class="light3d-shape"></div>
</a>
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">студия</p>
<span class="first-box__span">2 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">19,74 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">11,00 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">17</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">1 151 094 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">1 800 000 р.</span>
</div>
</div>
<!-- house 5 -->
<div class="house house--5">
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">квартира 3 к </p>
<span class="first-box__span">1 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">66,90 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">42,00 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">11</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">3 844 026 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">4 250 000 р.</span>
</div>
</div>
<!-- house 6 -->
<div class="house house--6">
<a class="light3d" href="img/3D/9.jpg" data-lightbox="image">
<div class="light3d-shape"></div>
</a>
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">квартира 1 к </p>
<span class="first-box__span">2 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">40,89 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">15,22 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">2</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">2 146 676 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">2 500 000 р.</span>
</div>
</div>
<!-- house 7 -->
<div class="house house--7">
<a class="light3d" href="img/3D/11.jpg" data-lightbox="image">
<div class="light3d-shape"></div>
</a>
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">квартира 1 к </p>
<span class="first-box__span">1 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">49,85 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">22,00м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">8</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">2 799 836 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">3 170 000 р.</span>
</div>
</div>
<!-- house 8 -->
<div class="house house--8">
<div class="first-box">
<div class="first-box__img"></div>
<div class="first-box__wrap">
<p class="first-box__text">студия</p>
<span class="first-box__span">2 очередь</span>
</div>
</div>
<div class="plan">
<div class="plan__items">
<p class="plan__title">Общая площадь</p>
<p class="plan__text">22,85 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">16,44 м<sup>2</sup></p>
</div>
<div class="plan__items">
<p class="plan__title">Жилая площадь</p>
<p class="plan__text">12</p>
</div>
</div>
<div class="flag">
<span class="flag__text">наша цена</span>
</div>
<div class="flag2">
<span class="flag2__text">1 260 374 р.</span>
<span class="flag2__text2">забронировать</span>
</div>
<div class="flag3">
<span class="flag3__text">цена застройщика</span>
<span class="flag3__text">1 750 000 р.</span>
</div>
</div>
<!-- end houses -->
</div>
</div>
</section>
<section class="selection">
<div class="promo-code__container">
<div class="promo-code__box">
<p class="f-text">не нашли</p>
<p class="s-text">нужный вариант квартиры?</p>
<span class="th-text">оставьте заявку</span>
</div>
<div class="promo-code__wrap">
<p class="five-text">и мы </p>
<span class="six-text"> подберем</span>
<div class="randomizer">
<div class="input__box">
<div class="input__box-wrap-one">
<input type="text" placeholder="Имя">
<input type="text" placeholder="Телефон">
</div>
<div class="input__box-wrap-two">
<button class="input__box-button">Подобрать вариант</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div> <!-- head-container -->
</main>
<footer>
<section class="map" id="five-block">
<div class="box-map">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A641856b20b271d608a95da16a7363071a57f2bb698854f3bce60545b2ac21238&width=100%&height=631&lang=ru_RU&scroll=true"></script>
</div>
<div class="feedback">
<div class="contacts">
<p class="contacts__number">+7 (812) 380-00-00</p>
<p class="contacts__address">санкт-петербург, улица парадная дом 3, корпус 2</p>
</div>
</div>
</section>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>