-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
266 lines (248 loc) · 17.2 KB
/
index.html
File metadata and controls
266 lines (248 loc) · 17.2 KB
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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoftHouse</title>
<link rel="icon" type="image/svg+xml" href="./img/favicon.svg">
<link rel="icon" type="image/png" href="./img/favicon.png">
<link rel="stylesheet" href="./libs/youtubeLightbox/youtubeLightbox.css">
<link rel="stylesheet" href="./css/main.css">
<script defer src="https://api-maps.yandex.ru/2.1/?apikey=7bf9543b-506e-4ab7-9b66-268af2cc8e73&lang=ru_RU"
type="text/javascript">
</script>
<script defer src="./libs/phoneMask/mask.js"></script>
<script defer src="./libs/phoneMask/mask_list.js"></script>
<script defer src="./libs/youtubeLightbox/youtubeLightbox.js"></script>
<script defer src="./js/ymap.js"></script>
<script defer src="./js/main.js"></script>
</head>
<body>
<header class="header header_main">
<div class="header__container container">
<div class="header__top">
<img class="header__logo" src="./img/logo.svg" alt="Логотип Loft House">
<div class="header__nav">
<nav class="nav">
<ul class="nav__list">
<li><a href="./html/about.html">О комплексе</a></li>
<li><a href="./html/district.html">Район</a></li>
<li><a href="./html/catalog.html">Каталог квартир</a></li>
<li><a href="./html/mortgage.html">Ипотека</a></li>
<li><a href="./html/contacts.html">Контакты</a></li>
</ul>
</nav>
</div>
<div class="header__nav-btn">
<button class="nav-icon-btn nav-icon" aria-label="Открыть меню"></button>
</div>
</div>
<h1 class="header__title header__title_index title-main">Жилой комплекс в историческом центре
<a class="header__title-scroll" href="#benefits" aria-label="Перейти в следующий раздел"></a>
</h1>
<div class="header__footer">
<a href="#district" class="info info_address"
aria-label="Перейти в раздел с картой, чтобы посмотреть расположение ЖК">Наб. реки Фонтанки 10-15</a>
<a href="tel:+78121234567" class="info info_phone" aria-label="Позвонить в отдел продаж Loft House">8 (812)
123-45-67</a>
</div>
</div>
</header>
<main>
<section id="benefits" class="benefits">
<h2 class="visually-hidden">Преимущества ЖК</h2>
<div class="container container_min">
<ul class="benefits__list">
<li class="benefits__item">
<img src="./img/benefits/bench.svg" alt="" class="benefits__item-img">
<p class="benefits__item-text">Рядом исторические парки и скверы</p>
</li>
<li class="benefits__item">
<img src="./img/benefits/building.svg" alt="" class="benefits__item-img">
<p class="benefits__item-text">Полностью обустроенный</p>
</li>
<li class="benefits__item">
<img src="./img/benefits/fountain.svg" alt="" class="benefits__item-img">
<p class="benefits__item-text">10 фонтанов на территории</p>
</li>
<li class="benefits__item">
<img src="./img/benefits/bicycle.svg" alt="" class="benefits__item-img">
<p class="benefits__item-text">6 км велодорожек</p>
</li>
</ul>
</div>
</section>
<section id="catalog" class="apartments">
<div class="container">
<h2 class="apartments__title title-section">Наши квартиры</h2>
<ul class="apartments__list">
<li class="apartments__item">
<a class="card" href="./html/catalog.html" aria-label="Перейти на страницу с каталогом квартир">
<div class="card__descr">
<h3 class="card__title">Пентхаус “Loft Олимп”</h3>
</div>
<img class="card__img" srcset="./img/apartments/01@2x.jpg 2x" src="./img/apartments/01.jpg"
alt="Фотография пентхауса Loft Олимп">
</a>
</li>
<li class="apartments__item">
<a class="card" href="./html/catalog.html" aria-label="Перейти на страницу с каталогом квартир">
<div class="card__descr">
<h3 class="card__title">Апартаменты “Nice Loft”</h3>
</div>
<img class="card__img" srcset="./img/apartments/02@2x.jpg 2x" src="./img/apartments/02.jpg"
alt="Фотография апартаментов Nice Loft">
</a>
</li>
<li class="apartments__item">
<a class="card" href="./html/catalog.html" aria-label="Перейти на страницу с каталогом квартир">
<div class="card__descr">
<h3 class="card__title">Апартаменты “Loft Studio”</h3>
</div>
<img class="card__img" srcset="./img/apartments/03@2x.jpg 2x" src="./img/apartments/03.jpg"
alt="Фотография апартаментов Loft Studio">
</a>
</li>
<li class="apartments__item">
<a class="card" href="./html/catalog.html" aria-label="Перейти на страницу с каталогом квартир">
<div class="card__descr">
<h3 class="card__title">Loft квартира “Престиж”</h3>
</div>
<img class="card__img" srcset="./img/apartments/04@2x.jpg 2x" src="./img/apartments/04.jpg"
alt="Фотография лофт квартиры Престиж">
</a>
</li>
</ul>
</div>
</section>
<section class="cta">
<div class="container">
<h2 class="cta__title title-section">Хотите посмотреть?</h2>
<div class="cta__wrapper">
<div class="cta__text">
<p>
ЖК LoftHouse — это проект бизнес-класса, расположенный в центре города,
на Наб. реки Фонтанки 10-15. Комплекс предлагает своим жильцам квартиры площадью
от 40 до 170 кв. м. В здании будет три секции, в которых
разместится всего 56 квартир.
</p>
</div>
<form action="" class="cta__form form">
<input type="text" class="form__input" placeholder="Ваше имя">
<input data-tel-input type="tel" class="form__input" placeholder="Ваш телефон">
<p class="form__privacy form__privacy_bottom">
*Мы никому не передаем ваши данные.
И не сохраняем ваш номер в базу.
</p>
<button type="submit" class="form__btn"
aria-label="Отправить заявку, чтобы сотрудники Loft House связались с вами">Посмотреть район</button>
</form>
</div>
</div>
</section>
<section class="video">
<h2 class="visually-hidden">Видео про ЖК Loft House</h2>
<div class="container">
<a href="https://www.youtube.com/watch?v=jqw7fLpnuR8" data-youtubelightbox class="video__link"
aria-label="Открыть видео с youtube">
<img class="video__icon" src="./img/video/play.svg" alt="Иконка play">
<img class="video__img" srcset="./img/video/video-img@2x.jpg 2x" src="./img/video/video-img@2x.jpg"
alt="Кадр из видео про ЖК Loft House">
</a>
</div>
</section>
<section id="district" class="section-map section-map_index">
<div class="container">
<h2 class="section-map__title title-section">Район на карте</h2>
<div class="section-map__map">
<div id="map" class="map"></div>
</div>
</div>
</section>
<section class="feedback">
<div class="container">
<h2 class="feedback__title title-section">Есть вопросы?</h2>
<form class="feedback__form form">
<p class="form__privacy form__privacy_bottom">
*Мы никому не передаем ваши данные.
И не сохраняем ваш номер в базу.
</p>
<input type="text" class="form__input" placeholder="Ваше имя">
<input data-tel-input type="tel" class="form__input" placeholder="Ваш телефон">
<button type="submit" class="form__btn"
aria-label="Отправить заявку, чтобы сотрудники Loft House связались с вами">Посмотреть район</button>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__logo">
<a href="#" aria-label="Перейти на главную страницу сайта">
<img src="./img/logo.svg" alt="Логотип Loft House">
</a>
</div>
<nav class="footer__nav">
<ul class="footer__nav-list">
<li class="footer__nav-item"><a href="./html/about.html">О комплексе</a></li>
<li class="footer__nav-item"><a href="./html/district.html">Район</a></li>
<li class="footer__nav-item"><a href="./html/catalog.html">Каталог квартир</a></li>
<li class="footer__nav-item"><a href="./html/mortgage.html">Ипотека</a></li>
<li class="footer__nav-item"><a href="./html/contacts.html">Контакты</a></li>
</ul>
<ul class="footer__nav-list">
<li class="footer__nav-item"><a href="./html/moving.html">Заселение и переезд</a></li>
<li class="footer__nav-item"><a href="./html/service.html">Сервисные услуги</a></li>
<li class="footer__nav-item"><a href="./html/ecology.html">Экологическая устойчивость</a></li>
<li class="footer__nav-item"><a href="./html/investments.html">Инвестиционные возможности</a></li>
<li class="footer__nav-item"><a href="./html/loyalty.html">Программа лояльности </a></li>
</ul>
</nav>
<div class="footer__contacts">
<ul class="footer__address">
<li class="footer__address-item">
Адрес: Наб. реки Фонтанки 10-15
</li>
<li class="footer__address-item">
Телефон: <a href="tel:+78121234567" aria-label="Позвонить в отдел продаж Loft House">8 (812) 123-45-67</a>
</li>
<li class="footer__address-item">
Отдел продаж: 10:00 - 20:00
</li>
<li class="footer__address-item">
E-mail: <a class="link-bold" href="mailto:vip@lofthouse.ru"
aria-label="Написать e-mail">vip@lofthouse.ru</a>
</li>
</ul>
<ul class="footer__socials social">
<li>
<a class="social__link" href="http://www.youtube.com" aria-label="Перейти на youtube канал Loft House">
<svg class="social__icon" width="31" height="20" viewBox="0 0 31 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.8927 0H6.26295C2.80401 0 0 2.62807 0 5.86998V14.13C0 17.3719 2.80401 20 6.26295 20H23.8927C27.3517 20 30.1557 17.3719 30.1557 14.13V5.86998C30.1557 2.62807 27.3517 0 23.8927 0ZM19.6571 10.4019L11.4111 14.088C11.1914 14.1862 10.9376 14.036 10.9376 13.8079V6.20534C10.9376 5.97396 11.1981 5.82399 11.4182 5.92859L19.6643 9.84507C19.9094 9.9615 19.9052 10.291 19.6571 10.4019Z" />
</svg>
</a>
</li>
<li>
<a class="social__link" href="http://vk.ru" aria-label="Перейти в группу в ВК Loft House">
<svg class="social__icon" width="38" height="20" viewBox="0 0 38 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M37.483 18.0622C37.4377 17.9707 37.3955 17.8948 37.3563 17.834C36.7074 16.7387 35.4673 15.3942 33.6369 13.8002L33.5982 13.7637L33.5788 13.7458L33.5593 13.7275H33.5396C32.7089 12.9852 32.1828 12.4861 31.9625 12.2306C31.5594 11.7439 31.4691 11.2512 31.6894 10.752C31.8451 10.3749 32.4297 9.57835 33.442 8.3614C33.9745 7.71645 34.3962 7.19955 34.7076 6.81011C36.9537 4.01144 37.9275 2.22306 37.6287 1.44425L37.5127 1.26225C37.4348 1.15269 37.2336 1.05245 36.9094 0.961035C36.5844 0.869813 36.1691 0.854728 35.6627 0.915521L30.0546 0.95183C29.9638 0.921657 29.834 0.92447 29.665 0.961035C29.4962 0.997601 29.4118 1.01595 29.4118 1.01595L29.3142 1.06165L29.2367 1.11657C29.1718 1.15288 29.1003 1.21674 29.0224 1.30803C28.9448 1.39899 28.88 1.50575 28.8281 1.6274C28.2176 3.09967 27.5234 4.46851 26.7443 5.73386C26.2639 6.48838 25.8227 7.14227 25.4199 7.69593C25.0175 8.2494 24.68 8.65718 24.4075 8.91858C24.1347 9.18022 23.8885 9.38984 23.6674 9.54818C23.4466 9.70659 23.2781 9.77352 23.1614 9.74904C23.0444 9.72455 22.9342 9.70026 22.83 9.67597C22.6483 9.5664 22.5022 9.41739 22.3921 9.22881C22.2815 9.04023 22.207 8.80287 22.168 8.51693C22.1293 8.2308 22.1064 7.98469 22.0998 7.77776C22.0938 7.57109 22.0965 7.27875 22.1097 6.90159C22.1232 6.52424 22.1293 6.26892 22.1293 6.13506C22.1293 5.67262 22.1389 5.17074 22.1582 4.62929C22.1779 4.08784 22.1937 3.65883 22.207 3.34278C22.2203 3.02641 22.2264 2.6917 22.2264 2.33883C22.2264 1.98596 22.2035 1.70922 22.1582 1.50837C22.1135 1.30777 22.0448 1.11305 21.9543 0.924278C21.8632 0.735697 21.7299 0.589819 21.5551 0.486259C21.3798 0.382827 21.162 0.300747 20.9028 0.239761C20.2146 0.0938189 19.3384 0.0148707 18.2736 0.00259691C15.8591 -0.0216949 14.3076 0.124439 13.6196 0.440808C13.347 0.574476 13.1003 0.757112 12.8797 0.98814C12.646 1.25592 12.6134 1.40206 12.7821 1.4261C13.5611 1.53547 14.1126 1.79712 14.4372 2.21078L14.5542 2.42999C14.6452 2.58814 14.736 2.86813 14.827 3.26959C14.9177 3.67104 14.9763 4.11513 15.0021 4.60161C15.0669 5.48998 15.0669 6.25044 15.0021 6.88305C14.9371 7.51592 14.8757 8.00859 14.8171 8.36146C14.7585 8.71433 14.671 9.00027 14.5542 9.21922C14.4372 9.43823 14.3594 9.57209 14.3204 9.62067C14.2815 9.66926 14.249 9.69988 14.2232 9.71189C14.0545 9.7725 13.879 9.80337 13.6973 9.80337C13.5154 9.80337 13.2949 9.7181 13.0353 9.54767C12.7757 9.37724 12.5064 9.14315 12.2272 8.845C11.9481 8.54678 11.6332 8.13005 11.2826 7.59474C10.9322 7.05942 10.5687 6.42675 10.1922 5.69672L9.88071 5.16729C9.68598 4.82669 9.41998 4.33075 9.08243 3.67993C8.74468 3.02884 8.44615 2.39904 8.18662 1.79066C8.08288 1.53515 7.92703 1.34063 7.71935 1.20677L7.62188 1.15185C7.55709 1.10327 7.45308 1.05168 7.31039 0.996706C7.1675 0.941794 7.0184 0.902415 6.86249 0.878187L1.52685 0.914498C0.981621 0.914498 0.611676 1.03027 0.416881 1.26149L0.338923 1.37086C0.299978 1.43178 0.280334 1.52908 0.280334 1.663C0.280334 1.79686 0.31928 1.96115 0.397238 2.15568C1.17614 3.87145 2.02318 5.52617 2.93836 7.12009C3.85354 8.71402 4.64882 9.99796 5.32371 10.9708C5.99873 11.9443 6.68679 12.8631 7.38787 13.7268C8.08895 14.5907 8.55302 15.1444 8.78008 15.3876C9.00741 15.6313 9.18597 15.8135 9.31576 15.9351L9.80268 16.3731C10.1142 16.6652 10.5718 17.015 11.1754 17.4225C11.7793 17.8303 12.4478 18.2317 13.1812 18.6275C13.9148 19.0226 14.7683 19.3451 15.7421 19.5944C16.7157 19.8441 17.6633 19.9442 18.5851 19.8959H20.8246C21.2788 19.8591 21.6229 19.7253 21.8567 19.4943L21.9342 19.4028C21.9863 19.3302 22.0351 19.2173 22.0801 19.0655C22.1257 18.9134 22.1483 18.7459 22.1483 18.5636C22.135 18.0405 22.1775 17.5691 22.2746 17.1493C22.3717 16.7297 22.4823 16.4134 22.606 16.2003C22.7297 15.9874 22.8692 15.8078 23.0246 15.6622C23.1802 15.5162 23.2911 15.4278 23.3562 15.3974C23.4208 15.3668 23.4725 15.346 23.5114 15.3335C23.823 15.2362 24.1896 15.3305 24.612 15.6167C25.0339 15.9026 25.4297 16.2557 25.8 16.6753C26.17 17.0953 26.6145 17.5665 27.1337 18.0896C27.6532 18.6129 28.1075 19.0018 28.4968 19.2577L28.8861 19.4767C29.1461 19.6229 29.4837 19.7567 29.8992 19.8784C30.3139 20 30.6773 20.0304 30.9894 19.9696L35.9743 19.8967C36.4673 19.8967 36.851 19.8202 37.1231 19.6684C37.3958 19.5163 37.5578 19.3488 37.6101 19.1665C37.6622 18.9841 37.665 18.7771 37.6199 18.5457C37.5738 18.3148 37.5283 18.1534 37.483 18.0622Z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div id="youtubelightbox" class="youtubelightbox">
<div class="youtubelightbox__centeredchild">
<div class="youtubelightbox__videowrapper">
<div id="youtubelightboxPlayer"></div>
</div>
</div>
</div>
</body>
</html>