-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (170 loc) · 16.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
<!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>Promo section</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<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=Rubik:wght@300;500&display=swap" rel="stylesheet">
<script src="./js/modal.js" defer></script>
</head>
<body>
<div class="container main">
<span class="container-title main-title"><strong>Получи скидку 50%</strong> на первый месяц аренды <strong>или бесплатный переезд!</strong></span>
<button class="container-btn">Как это работает</button>
<div class="container-cards cards">
<div class="container-card">
<img class="container-card-img" src="./img/img_container_1.svg" alt="#">
<p class="container-card-title title">Вы находите помещение</p>
<p class="container-card-subtitle subtitle">Направляете нам ссылку
на объявление, мы свяжемся с собственником и назначим встречу</p>
</div>
<div class="container-card">
<img class="container-card-img" src="./img/img_container_2.svg" alt="#">
<p class="container-card-title title">Мы выезжаем с вами как агенты</p>
<p class="container-card-subtitle subtitle">Вместе с вами отправляемся к собственнику помещения в качестве агентов</p>
</div>
<div class="container-card">
<img class="container-card-img" src="./img/img_container_3.svg" alt="#">
<p class="container-card-title title">Оплата комисии</p>
<p class="container-card-subtitle subtitle">Собственник платит нам
комиссию, и мы делимся ею
с вами на месте</p>
</div>
</div>
<svg class="container-svg" width="493" height="372" viewBox="0 0 493 372" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.7175 367.694C93.0329 368.46 92.6684 369.34 91.8851 369.61C91.5067 369.74 91.1197 369.864 90.7251 369.982C89.9314 370.22 89.1144 369.729 88.9112 368.926C88.7081 368.123 89.1961 367.312 89.9887 367.071C90.2446 366.993 90.4954 366.913 90.7408 366.83C91.526 366.566 92.4021 366.928 92.7175 367.694ZM65.0514 369.333C64.8739 370.143 64.0726 370.659 63.2725 370.444C62.8613 370.334 62.4607 370.216 62.0725 370.092C61.2834 369.84 60.9098 368.963 61.2175 368.194C61.5252 367.425 62.3979 367.054 63.1894 367.298C63.4249 367.371 63.6673 367.442 63.9164 367.51C64.7152 367.73 65.229 368.524 65.0514 369.333ZM81.0036 370.181C81.0708 371.006 80.456 371.732 79.6289 371.779C77.8946 371.879 76.1448 371.908 74.4247 371.868C73.5965 371.849 72.9571 371.145 72.9959 370.318C73.0348 369.49 73.737 368.853 74.5653 368.871C76.1589 368.906 77.7794 368.879 79.3855 368.788C80.2126 368.742 80.9364 369.355 81.0036 370.181Z" fill="#0085FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M492.718 248.694C493.012 247.92 492.625 247.051 491.842 246.779C491.483 246.654 491.122 246.533 490.759 246.415C489.971 246.16 489.137 246.618 488.905 247.413C488.672 248.208 489.129 249.039 489.917 249.296C490.203 249.389 490.489 249.485 490.774 249.584C491.557 249.855 492.423 249.468 492.718 248.694ZM465.051 246.485C464.851 245.681 464.036 245.188 463.242 245.422C462.852 245.537 462.466 245.659 462.084 245.786C461.299 246.05 460.917 246.922 461.218 247.694C461.518 248.466 462.386 248.845 463.173 248.586C463.435 248.5 463.699 248.417 463.966 248.337C464.76 248.099 465.251 247.289 465.051 246.485ZM481.037 245.763C481.144 244.941 480.564 244.187 479.74 244.104C477.964 243.926 476.195 243.843 474.449 243.855C473.621 243.861 472.976 244.561 473.009 245.388C473.041 246.216 473.739 246.858 474.567 246.854C476.143 246.847 477.744 246.922 479.355 247.081C480.179 247.162 480.931 246.584 481.037 245.763Z" fill="#0085FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M272.424 0.137963C273.177 0.484559 273.507 1.37612 273.147 2.12219C272.119 4.2521 270.982 6.37411 269.729 8.4693C269.303 9.1802 268.377 9.39323 267.674 8.95428C266.972 8.51534 266.759 7.59067 267.184 6.87945C268.368 4.89636 269.445 2.88646 270.422 0.866867C270.782 0.12104 271.672 -0.208633 272.424 0.137963ZM261.803 17.0738C262.439 17.6045 262.526 18.5515 261.982 19.1764C260.422 20.9685 258.751 22.7093 256.962 24.3838C256.357 24.9498 255.407 24.8968 254.854 24.2799C254.302 23.663 254.355 22.7159 254.959 22.1492C256.638 20.575 258.209 18.9389 259.678 17.2541C260.222 16.6297 261.167 16.5431 261.803 17.0738ZM87.9653 26.5106C87.9366 27.3385 87.2422 27.9857 86.414 27.9645C84.0437 27.9037 81.6531 27.8935 79.2385 27.9399C78.4102 27.9558 77.7195 27.3047 77.6956 26.4766C77.6716 25.6485 78.3236 24.9571 79.1518 24.941C81.632 24.8929 84.0862 24.9034 86.518 24.9662C87.3461 24.9875 87.994 25.6827 87.9653 26.5106ZM67.4416 27.1159C67.5209 27.9405 66.9167 28.6725 66.093 28.7601C63.7488 29.0095 61.3777 29.3175 58.9767 29.6892C58.1581 29.8159 57.3862 29.2634 57.2514 28.446C57.1166 27.6286 57.6699 26.8559 58.4885 26.729C60.9571 26.3464 63.3952 26.0297 65.8055 25.7738C66.6293 25.6863 67.3622 26.2913 67.4416 27.1159ZM108.418 28.3551C108.303 29.1755 107.545 29.7471 106.724 29.6375C104.351 29.3208 101.967 29.0399 99.569 28.8014C98.7446 28.7194 98.1371 27.9898 98.2128 27.1649C98.2885 26.3399 99.0187 25.732 99.8431 25.8138C102.291 26.057 104.722 26.3436 107.139 26.6664C107.961 26.776 108.533 27.5346 108.418 28.3551ZM128.654 31.888C128.491 32.7002 127.7 33.226 126.888 33.0649C124.518 32.595 122.149 32.1417 119.777 31.7122C118.962 31.5646 118.418 30.7866 118.562 29.9709C118.706 29.1551 119.484 28.6103 120.3 28.758C122.697 29.1922 125.089 29.6498 127.479 30.1237C128.292 30.2848 128.818 31.0758 128.654 31.888ZM47.176 30.4506C47.3639 31.2574 46.8619 32.0631 46.0569 32.2585C44.9043 32.5382 43.7442 32.8332 42.5765 33.1438C41.331 33.4752 40.1044 33.8305 38.8964 34.2083C38.1058 34.4557 37.2574 34.0308 36.9967 33.2445C36.736 32.4581 37.1617 31.6081 37.9522 31.3604C39.2168 30.964 40.501 30.5917 41.8052 30.2447C43.0032 29.926 44.1935 29.6234 45.3765 29.3365C46.1816 29.1412 46.9881 29.6437 47.176 30.4506ZM246.929 30.3927C247.385 31.0841 247.196 32.0159 246.494 32.4573C244.496 33.7155 242.394 34.8979 240.184 35.994C239.442 36.3621 238.548 36.039 238.195 35.2895C237.842 34.54 238.164 33.6478 238.906 33.2791C240.985 32.2459 242.962 31.1339 244.842 29.9528C245.543 29.5121 246.473 29.7012 246.929 30.3927ZM141.652 36.1337C141.057 36.0072 140.463 35.8809 139.869 35.7547C139.059 35.5826 138.541 34.7864 138.713 33.976C138.884 33.1655 139.681 32.6478 140.491 32.8199C141.088 32.9469 141.686 33.0739 142.284 33.2011C144.053 33.5773 145.826 33.9542 147.605 34.3292C148.415 34.5001 148.935 35.2952 148.765 36.106C148.595 36.9168 147.8 37.4363 146.989 37.2654C145.204 36.8891 143.425 36.5108 141.652 36.1337ZM26.9346 37.2684C27.2879 38.0177 26.9662 38.9104 26.2228 39.2762C23.8979 40.4202 21.6565 41.6482 19.4965 42.9473C18.7866 43.3743 17.8621 43.1609 17.4237 42.458C16.9854 41.755 17.1992 40.8288 17.9089 40.4014C20.1656 39.0426 22.5097 37.7582 24.9434 36.5622C25.687 36.1969 26.5814 36.5191 26.9346 37.2684ZM168.934 40.0036C168.795 40.8204 168.021 41.3705 167.205 41.2286C164.787 40.8082 162.392 40.3665 160.015 39.9101C159.201 39.7539 158.671 38.9659 158.829 38.1528C158.988 37.3397 159.776 36.8094 160.589 36.9656C162.945 37.4179 165.316 37.855 167.706 38.2708C168.522 38.4127 169.072 39.1868 168.934 40.0036ZM228.869 38.9325C229.119 39.7221 228.683 40.5666 227.888 40.8024C225.65 41.4671 223.326 42.0533 220.914 42.5543C220.103 42.7228 219.317 42.1875 219.162 41.3737C219.007 40.56 219.541 39.7759 220.352 39.6069C222.647 39.1288 224.856 38.5717 226.982 37.9422C227.776 37.7069 228.619 38.1428 228.869 38.9325ZM184.02 43.6845C182.799 43.5443 181.585 43.3959 180.378 43.2398C179.556 43.1336 178.98 42.3778 179.091 41.5568C179.202 40.7358 179.957 40.1606 180.779 40.2667C181.967 40.4202 183.161 40.5662 184.362 40.7041C185.537 40.8389 186.697 40.9583 187.844 41.0626C188.669 41.1377 189.285 41.8601 189.218 42.6858C189.152 43.5116 188.429 44.128 187.604 44.0532C186.423 43.946 185.228 43.8232 184.02 43.6845ZM209.231 42.7254C209.301 43.5509 208.689 44.2779 207.863 44.3365C205.545 44.5009 203.16 44.595 200.707 44.6148C199.878 44.6215 199.209 43.9461 199.213 43.1177C199.216 42.2893 199.891 41.6216 200.719 41.6146C203.084 41.5948 205.38 41.5041 207.609 41.347C208.435 41.2887 209.161 41.9 209.231 42.7254ZM8.56862 48.6925C9.08175 49.3428 8.96971 50.2852 8.32703 50.8079C6.31196 52.4469 4.38736 54.1407 2.55065 55.8729C1.94798 56.4413 0.999121 56.4274 0.42249 55.8326C-0.15414 55.2378 -0.140174 54.2874 0.462293 53.7188C2.36934 51.9189 4.3705 50.1575 6.46862 48.4525C7.11152 47.93 8.05548 48.0421 8.56862 48.6925Z" fill="#0085FF"/>
</svg>
</div>
<!-- /.container -->
<div class="prom main">
<span class="prom-title main-title">Для вас это абсолютно <strong>бесплатно!</strong></span>
<svg class="prom-svg" width="207" height="14" viewBox="0 0 207 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 12.1931C34 5.69311 133.5 -4.80676 205 8.19311" stroke="#0084FF" stroke-width="3" stroke-linecap="round"/>
</svg>
<div class="prom-cards cards">
<div class="prom-card">
<img src="./img/img_prom_1.svg" alt="#">
<span class="prom-card-title title">157000 рублей</span>
<p class="prom-card-subtitle subtitle">максимальная сумма, которую мы заплатили клиентам</p>
</div>
<div class="prom-card">
<img src="./img/img_prom_2.svg" alt="#">
<span class="prom-card-title title">3 дня</span>
<p class="prom-card-subtitle subtitle">в среднем длится поиск офиса с использованием базы собственников</p>
</div>
<div class="prom-card">
<img src="./img/img_prom_3.svg" alt="#">
<span class="prom-card-title title">9000 руб/мес</span>
<p class="prom-card-subtitle subtitle">в среднем экономим клиентам на аренде помещений</p>
</div>
<div class="prom-card">
<img src="./img/img_prom_4.svg" alt="#">
<span class="prom-card-title title">87%</span>
<p class="prom-card-subtitle subtitle">собственников платят нам комиссию, а мы делимся ею с вами</p>
</div>
</div>
</div>
<!-- /.prom -->
<div class="actual main">
<span class="actual-title main-title">Наше <strong>предложение</strong> актуально <strong>для:</strong></span>
<div class="actual-cards cards">
<div class="actual-card">
<div class="actual-card-text">
<span class="actual-card-title title">Владельцев бизнеса</span>
<p class="actual-card-subtitle subtitle">Ищете помещение и хотите сэкономить средства
компании – мы поможем вам в этом: выберем вместе с вами наилучший вариант,
договоримся по условиям с собственником и вернем вам половину нашей комиссии.</p>
</div>
<img src="./img/img_actual_1.svg" alt="#">
</div>
<div class="actual-card">
<div class="actual-card-text">
<span class="actual-card-title title">Сотрудников компании</span>
<p class="actual-card-subtitle subtitle">Если вы занимаетесь поиском нового помещения
вашей компании, мы поможем вам выбрать наилучший вариант, который устроит
вашего руководителя, а также выплатим вам напрямую половину нашей комиссии.</p>
</div>
<img src="./img/img_actual_2.svg" alt="#">
</div>
</div>
</div>
<!-- /.actual -->
<div class="bonus main">
<span class="bonus-title main-title"><strong>Бонусом</strong> по вашему желанию <strong>мы:</strong></span>
<div class="bonus-cards">
<div class="bonus-card">
<img src="./img/img_bonus_1.svg" alt="#">
<div class="bonus-card-text">
<span class="bonus-card-title title">Составим компанию</span>
<p class="bonus-card-subtitle subtitle">Составим компанию на просмотре и обратим внимание
на нюансы, которые без опыта очень сложно заметить.</p>
</div>
</div>
<div class="bonus-card">
<img src="./img/img_bonus_2.svg" alt="#">
<div class="bonus-card-text">
<span class="bonus-card-title title">Проверим договор</span>
<p class="bonus-card-subtitle subtitle">Проверим договор аренды и юридический статус самого
задания.</p>
</div>
</div>
<div class="bonus-card">
<img src="./img/img_bonus_3.svg" alt="#">
<div class="bonus-card-text">
<span class="bonus-card-title title">Грамотно поторгуемся</span>
<p class="bonus-card-subtitle subtitle">Грамотно поторгуемся и вы сможет сэкономить свои деньги.</p>
</div>
</div>
<div class="bonus-card">
<img src="./img/img_bonus_4.svg" alt="#">
<div class="bonus-card-text">
<span class="bonus-card-title title">Придадим спокойствия</span>
<p class="bonus-card-subtitle subtitle">Придадим спокойствия и уверенности в успешном
решении вопроса.</p>
</div>
</div>
</div>
</div>
<!-- /.bonus -->
<div class="footer main">
<img class="footer-img" src="./img/img_footer.svg" alt="#">
<div class="footer-text">
<span class="footer-title main-title"><strong>Получите</strong> крутую
<strong>скидку</strong> до 50% </span>
<p class="footer-subtitle subtitle">Оставьте заявку сейчас и получите
персональную скидку на первый месяц
аренды или бесплатный переезд</p>
<button class="footer-btn more">Оставить заявку</button>
</div>
</div>
<div class="modal hidden">
<div class="overlay"></div>
<div class="modal-wrapper">
<span class="modal-title main-title">
Получите крутую скидку до 50%
</span>
<p class="modal__descr title">
Оставьте адрес электронной почты, на
который хотите получить купон на скидку
</p>
<form class="modal-form">
<input type="text" name="name" class="modal-input" placeholder="Имя">
<input type="mail" name="mail" class="modal-input" placeholder="Электронная почта">
<div class="modal-buttons">
<button type="submit" class="modal__button">
Отправить
</button>
</div>
</form>
</div>
</div>
<!-- /.modal -->
</body>
</html>