-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (180 loc) · 12.3 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
<!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>Melody</title>
<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=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header_navbar">
<a href="./index.html" class="header_logo-link">
<img src="images/header-logo-img.svg" alt="logo" class="header_logo-img">
</a>
<nav class="header_nav">
<ul class="header_nav-menu">
<li class="header_nav-list-item">
<a href="" class="header_nav-list-link">Подобрать<br>квартиру</a>
</li>
<li class="header_nav-list-item">
<a href="" class="header_nav-list-link">Забронировать<br>квартиру</a>
</li>
<li class="header_nav-list-item">
<a href="" class="header_nav-list-link">Ход<br>строительства</a>
</li>
<li class="header_nav-list-item">
<a href="" class="header_nav-list-link">Проектная<br>декларация</a>
</li>
</ul>
</nav>
<div class="header_nav-contacts">
<span>Закажите звонок:<br></span>
<a href="tel:+78431234567" class="header_nav-contacts-phone">8 (843) 123-45-67</a>
</div>
</div>
</div>
</header>
<main class="main">
<div class="container">
<div class="main-wrapper">
<div class="main_image">
<svg class = "home-image" width="734" height="640" viewBox="0 0 734 640" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="734" height="640" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1_86" transform="translate(-0.00408719) scale(0.0013624 0.0015625)"/>
</pattern>
<image id="image0_1_86" width="740" height="640" xlink:href="images/home.png"/>
</defs>
<path data-floor='02' d="M222 538L442.8 546L512 532.3V554L443.5 573.7L222 562.7V538Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='03' d="M223 537V512L443.3 515.3L513 512V532L443.7 545L223 537Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='04' d="M223 511V486H444H513V509L445 516L223 511Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='05' d="M223 487V462L444.3 458.3L512 465V487H444" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='06' d="M223 461V435L444.5 431.7L513 442.7V464L444 457.3L223 461Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='07' d="M222 434V410.3L443 398L514 421V442.3L443 430L222 434Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='08' d="M222 412V387L444.2 370.7L514 399.3V420L443.7 398.3L222 412Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='09' d="M222 387V362L444.5 341.7L514 378.3V399L442 370.3L222 387Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='10' d="M222 361V337L445 312.3L514 356.3V378L444.7 340L222 361Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='11' d="M222 336V312L444.5 283.3L514 334.3V355L443.7 312.7L222 336Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='12' d="M221 312V288L443.3 255L514 314.3V334L444 283.3L221 312Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='13' d="M222 287V263L443.2 228L513 292V313L444.3 254.7L222 287Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='14' d="M222 263V238L444.3 200L513 270.3V291L444 227L222 263Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='15' d="M222 237V212L442.8 168.3L513 247.3V270L444 196.7L222 237Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='16' d="M223 213V188L443 140L513 225V248L442.3 168.7L223 213Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='17' d="M222 188V163L441.8 111L513 203.3V226L443.3 139.7L222 188Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-floor='18' d="M222 163V137L444 80.3L513 182V203L443.7 111.3L222 163Z" fill="#3595F6" fill-opacity="0.75"/>
</svg>
</div>
<div class="main-info">
<h2 class="main_info-title">Выберите желаемый этаж</h2>
<div class="counter-group">
<button class="counter-btn counter-up">
<img src="images/prev-img.svg" alt="arrow">
</button>
<span class="counter">02</span>
<button class="counter-btn counter-down">
<img src="images/next-img.svg" alt="arrow">
</button>
</div>
<button class="button-store button-primary">Смотреть квартиры на этаже</button>
</div>
</div>
</div>
</main>
<div class="modal">
<div class="modal-dialog">
<button class="modal-close-btn">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L26 26" stroke="#3596F5" stroke-width="3"/>
<path d="M26 2L2 26" stroke="#3596F5" stroke-width="3"/>
</svg>
</button>
<div class="modal-image">
<h3 class="modal-title">Этаж <span class="modal-counter">07</span></h3>
<svg class = "flats" width="433" height="408" viewBox="0 0 433 408" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="image0_28_15" width="433" height="408" xlink:href="images/modal-img.png"/>
<path data-flat-id = '10' d="M388 81V141H314V148H267.5V131H247V32.5H338.5V16H405V81H388Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '9' d="M314 148.5H268V200H367.5V205H387.5V141H314V148.5Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '8' d="M314.192 252.662H268V200H367.916V204.602H388V268H314.192V252.662Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '7' d="M314 253H268.5V309H295.5V376H340V393H405V328.5H388V268.5H314V253Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '6' d="M218 394.5V264H247.5V273.5H267.5V310.5H294.5V375H259.5V394.5H218Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '5' d="M217 394.5V264H187.5V273.5H167.5V310.5H140.5V375H175.5V394.5H217Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '4' d="M121 252H166.5V309H139.5V376H95V393H30V328.5H47V273.5H121V252Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '3' d="M119.5 273.5H46V198H167V250.822H119.5V273.5Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '2' d="M124.729 116H46V198H167V145.178H124.729V116Z" fill="#3595F6" fill-opacity="0.75"/>
<path data-flat-id = '1' d="M46.5 81V115.5H125V144.5H164V131H184.5V32.5H93V16H28V81H46.5Z" fill="#3595F6" fill-opacity="0.75"/>
</svg>
</div>
<div class="modal-info">
<h3 class="modal-title">Выберите квартиру</h3>
<ul class="flat-list">
<li class="flat-list-item">
<a href="" data-flat = '1' class="flat-link">кв. 40, 2 комн. 64,5 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '2' class="flat-link">кв. 41, 1 комн. 38,9 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '3' class="flat-link">кв. 42, 1 комн. 35,9 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '4' class="flat-link">кв. 43, 2 комн. 56 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '5' class="flat-link">кв. 44, 1 комн. 35,8 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '6' class="flat-link">кв. 45, 1 комн. 35,8 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '7' class="flat-link">кв. 46, 2 комн. 58,4 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '8' class="flat-link">кв. 47, 1 комн. 32,3 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '9' class="flat-link">кв. 48, 1 комн. 29,9 кв. м.</a>
</li>
<li class="flat-list-item">
<a href="" data-flat = '10' class="flat-link">кв. 49, 3 комн. 75,2 кв. м.</a>
</li>
</ul>
<p class="modal-flat-text">Квартиры, отмеченные серым, <br>уже выкуплены</p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer_wrapper">
<div class="footer_right">
<img src="images/footer-logo.svg" alt="logo" class="footer-logo">
<div class="contacts-block">
<span>Закажите звонок:</span><br>
<a href="+788431234567" class="footer_right-phone">8 (843) 123-45-67</a>
</div>
<div class="social-block">
<a href="https://www.facebook.com" class="social-link"><img src="images/facebook.svg" alt="facebook" class="facebook-img"></a>
<a href="https://www.instagram.com" class="social-link"><img src="images/instagram.svg" alt="instagram" class="instagram-img"></a>
<a href="https://twitter.com" class="social-link"><img src="images/twitter.svg" alt="twitter" class="twitter-img"></a>
<a href="https://www.youtube.com" class="social-link"><img src="images/youtube.svg" alt="youtube" class="youtube-img"></a>
</div>
</div>
<div class="footer_left">
<a href="#" class="footer_left-link">Политика конфиденциальности</a>
<a href="#" class="footer_left-link">Публичная оферта</a>
<a href="#" class="footer_left-link">Контакты</a>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>