-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (197 loc) · 11.7 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
<!DOCTYPE html>
<html lang="ru">
<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>ЖК Мелодия</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="./css/normalize.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="header">
<div class="navbar">
<a href="./index.html" class="navbar-logo">
<img src="img/logo.svg" alt="Logo: ЖК Мелодия">
</a>
<nav class="navbar-nav">
<ul class="navbar-menu">
<li class="navbar-item">
<a href="#" class="navbar-link">Подобрать квартиру</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Забронировать квартиру</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Ход строительства</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link">Проектная декларация</a>
</li>
</ul>
</nav>
<div class="navbar-contacts">
<span class="navbar-text">Закажите звонок!</span>
<a class="navbar-phone" href="tel: +78431234567">8 (843) 123-45-67</a>
</div>
<!-- /.navbar-contacts -->
</div>
<!-- /.navbar -->
</header>
<main class="main">
<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">
<image id="image0" width="740" height="640" xlink:href="img/home.png" />
<path data-floor='02' d="M223 531L443.8 539L513 525.3V547L444.5 566.7L223 555.7V531Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='03' d="M224 530V505L444.3 508.3L514 505V525L444.7 538L224 530Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='04' d="M224 504V479H445H514V502L446 509L224 504Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='05' d="M224 480V455L445.3 451.3L513 458V480H445" fill="#3595F6" fill-opacity="0.75" />
<path data-floor='06' d="M224 454V428L445.5 424.7L514 435.7V457L445 450.3L224 454Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='07' d="M223 427V403.3L444 391L515 414V435.3L444 423L223 427Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='08' d="M223 405V380L445.2 363.7L515 392.3V413L444.7 391.3L223 405Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='09' d="M223 380V355L445.5 334.7L515 371.3V392L443 363.3L223 380Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='10' d="M223 354V330L446 305.3L515 349.3V371L445.7 333L223 354Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='11' d="M223 329V305L445.5 276.3L515 327.3V348L444.7 305.7L223 329Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='12' d="M222 305V281L444.3 248L515 307.3V327L445 276.3L222 305Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='13' d="M223 280V256L444.2 221L514 285V306L445.3 247.7L223 280Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='14' d="M223 256V231L445.3 193L514 263.3V284L445 220L223 256Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='15' d="M223 230V205L443.8 161.3L514 240.3V263L445 189.7L223 230Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='16' d="M224 206V181L444 133L514 218V241L443.3 161.7L224 206Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='17' d="M223 181V156L442.8 104L514 196.3V219L444.3 132.7L223 181Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-floor='18' d="M223 156V130L445 73.3L514 175V196L444.7 104.3L223 156Z" fill="#3595F6"
fill-opacity="0.75" />
</svg>
</div>
<!-- /.main-image -->
<div class="main-info">
<h2 class="main-title">Выберите желаемый этаж</h2>
<div class="counter-group">
<button class="counter-button counter-up">
<img class="counter-arrow counter-arrow-up" src="./img/arrow.svg" alt="arrow-up">
</button>
<span class="counter">02</span>
<button class="counter-button counter-down">
<img class="counter-arrow counter-arrow-down" src="./img/arrow.svg" alt="arrow-down">
</button>
</div>
<!-- /.counter-group -->
<button class="button button-primary">Смотреть квартиры на этаже</button>
</div>
<!-- /.main-info -->
</main>
<footer class="footer">
<div class="wrapper">
<img class="footer-logo" src="./img/logo-footer.png" alt="Logo: Стандарт Строй">
<div class="footer-contacts">
<span class="contacts-text">Закажите звонок!</span>
<a class="contacts-phone" href="tel: +78431234567">8 (843) 123-45-67</a>
</div>
<nav class="socials">
<ul class="socials-list">
<li class="socials-item"><a href="#" class="socials-link socials-link-facebook"></a></li>
<li class="socials-item"><a href="#" class="socials-link socials-link-instagram"></a></li>
<li class="socials-item"><a href="#" class="socials-link socials-link-twitter"></a></li>
<li class="socials-item"><a href="#" class="socials-link socials-link-youtube"></a></li>
</ul>
</nav>
<nav class="about">
<ul class="about-list">
<li class="about-item"><a href="#" class="about-link">Политика конфиденциальности</a></li>
<li class="about-item"><a href="#" class="about-link">Публичная оферта</a></li>
<li class="about-item"><a href="#" class="about-link">Контакты</a></li>
</ul>
</nav>
</div>
<!-- /.wrapper -->
</footer>
<div class="modal">
<div class="modal-dialog">
<div class="modal-image">
<h3 class="modal-title">Этаж <span class="modal-counter counter">02</span></h3>
<svg class='floor-image' 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' width='433' heigth='408' xlink:href='img/floor.png' />
<path data-flat='9' d="M388 81V141H314V148H267.5V131H247V32.5H338.5V16H405V81H388Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-flat='8' d="M314 148.5H268V200H367.5V205H387.5V141H314V148.5Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-flat='7' d="M314.192 252.662H268V200H367.916V204.602H388V268H314.192V252.662Z"
fill="#3595F6" fill-opacity="0.75" />
<path data-flat='6' d="M314 253H268.5V309H295.5V376H340V393H405V328.5H388V268.5H314V253Z"
fill="#3595F6" fill-opacity="0.75" />
<path data-flat='5' d="M218 394.5V264H247.5V273.5H267.5V310.5H294.5V375H259.5V394.5H218Z"
fill="#3595F6" fill-opacity="0.75" />
<path data-flat='4' d="M217 394.5V264H187.5V273.5H167.5V310.5H140.5V375H175.5V394.5H217Z"
fill="#3595F6" fill-opacity="0.75" />
<path data-flat='3' d="M121 252H166.5V309H139.5V376H95V393H30V328.5H47V273.5H121V252Z"
fill="#3595F6" fill-opacity="0.75" />
<path data-flat='2' d="M119.5 273.5H46V198H167V250.822H119.5V273.5Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-flat='1' d="M124.729 116H46V198H167V145.178H124.729V116Z" fill="#3595F6"
fill-opacity="0.75" />
<path data-flat='0' d="M46.5 81V115.5H125V144.5H164V131H184.5V32.5H93V16H28V81H46.5Z" fill="#3595F6"
fill-opacity="0.75" />
</svg>
</div>
<!-- /.modal-image -->
<div class="modal-info">
<h3 class="modal-title">Выберите квартиру</h3>
<ul class="flat-list">
<li class="flat-item"><a href="#" class="flat-link" data-flat="0">кв. 40, 2 комн. 64,5 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="1">кв. 41, 1 комн. 38,9 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="2">кв. 42, 1 комн. 35,9 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="3">кв. 43, 2 комн. 56,0 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="4">кв. 44, 1 комн. 35,8 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="5">кв. 45, 1 комн. 35,8 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="6">кв. 46, 2 комн. 58,4 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="7">кв. 47, 1 комн. 32,2 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="8">кв. 48, 1 комн. 29,9 кв. м.</a>
</li>
<li class="flat-item"><a href="#" class="flat-link" data-flat="9">кв. 49, 3 комн. 75,2 кв. м.</a>
</li>
</ul>
<p class="modal-alert">Квартиры отмеченные серым<br />уже выкуплены</p>
</div>
<!-- /.modal-info -->
<button class="modal-close-button">
<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>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<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>