-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
239 lines (236 loc) · 27.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
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
<!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>Test project</title>
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="styles/select/virtual-select.min.css" />
<script src="styles/select/virtual-select.min.js"></script>
</head>
<body>
<header class="header">
<div class="header__content">
<div class="header__logo">
<svg width="245" height="21" viewBox="0 0 245 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.689706 20.5V0.619999H5.28171V16.468H14.9137V20.5H0.689706ZM24.5188 20.668C23.0441 20.668 21.7001 20.3787 20.4868 19.8C19.2735 19.2213 18.2375 18.4653 17.3788 17.532C16.5201 16.58 15.8481 15.4973 15.3628 14.284C14.8961 13.0707 14.6628 11.82 14.6628 10.532C14.6628 9.22533 14.9055 7.96533 15.3908 6.752C15.8948 5.53867 16.5855 4.47467 17.4628 3.56C18.3588 2.62667 19.4135 1.88933 20.6268 1.348C21.8401 0.787999 23.1655 0.507999 24.6028 0.507999C26.0775 0.507999 27.4215 0.797332 28.6348 1.376C29.8481 1.95467 30.8841 2.72 31.7428 3.672C32.6015 4.624 33.2641 5.70667 33.7308 6.92C34.1975 8.13333 34.4308 9.36533 34.4308 10.616C34.4308 11.9227 34.1788 13.1827 33.6748 14.396C33.1895 15.6093 32.5081 16.6827 31.6308 17.616C30.7535 18.5307 29.7081 19.268 28.4948 19.828C27.2815 20.388 25.9561 20.668 24.5188 20.668ZM19.3388 10.588C19.3388 11.3533 19.4508 12.1 19.6748 12.828C19.8988 13.5373 20.2255 14.172 20.6548 14.732C21.1028 15.292 21.6535 15.74 22.3068 16.076C22.9601 16.412 23.7068 16.58 24.5468 16.58C25.4241 16.58 26.1895 16.4027 26.8428 16.048C27.4961 15.6933 28.0375 15.236 28.4668 14.676C28.8961 14.0973 29.2135 13.4533 29.4188 12.744C29.6428 12.016 29.7548 11.2787 29.7548 10.532C29.7548 9.76667 29.6428 9.02933 29.4188 8.32C29.1948 7.592 28.8588 6.95733 28.4108 6.416C27.9628 5.856 27.4121 5.41733 26.7588 5.1C26.1241 4.764 25.3868 4.596 24.5468 4.596C23.6695 4.596 22.9041 4.77333 22.2508 5.128C21.6161 5.464 21.0748 5.912 20.6268 6.472C20.1975 7.032 19.8708 7.676 19.6468 8.404C19.4415 9.11333 19.3388 9.84133 19.3388 10.588ZM37.0842 20.5V0.619999H46.0442C46.9776 0.619999 47.8362 0.815999 48.6202 1.208C49.4229 1.6 50.1136 2.11333 50.6922 2.748C51.2709 3.38267 51.7189 4.10133 52.0362 4.904C52.3722 5.70667 52.5402 6.51867 52.5402 7.34C52.5402 7.956 52.4656 8.55333 52.3162 9.132C52.1669 9.692 51.9522 10.224 51.6722 10.728C51.3922 11.232 51.0469 11.6893 50.6362 12.1C50.2442 12.492 49.7962 12.828 49.2922 13.108L53.6602 20.5H48.4802L44.6722 14.088H41.6762V20.5H37.0842ZM41.6762 10.084H45.8762C46.4176 10.084 46.8842 9.832 47.2762 9.328C47.6682 8.80533 47.8642 8.14267 47.8642 7.34C47.8642 6.51867 47.6402 5.86533 47.1922 5.38C46.7442 4.89467 46.2589 4.652 45.7362 4.652H41.6762V10.084ZM69.8141 16.468V20.5H55.842V0.619999H69.5621V4.652H60.434V8.516H68.274V12.24H60.434V16.468H69.8141ZM88.2838 20.5V8.6L83.9718 17.252H81.5078L77.1958 8.6V20.5H72.6038V0.619999H77.5878L82.7398 11.008L87.9198 0.619999H92.8758V20.5H88.2838ZM96.6936 20.5V0.619999H101.286V20.5H96.6936ZM105.088 20.5V0.619999H113.572C114.524 0.619999 115.392 0.815999 116.176 1.208C116.979 1.6 117.66 2.11333 118.22 2.748C118.799 3.38267 119.247 4.10133 119.564 4.904C119.9 5.70667 120.068 6.51867 120.068 7.34C120.068 8.21733 119.909 9.05733 119.592 9.86C119.293 10.6627 118.864 11.3813 118.304 12.016C117.763 12.6507 117.1 13.1547 116.316 13.528C115.532 13.9013 114.664 14.088 113.712 14.088H109.68V20.5H105.088ZM109.68 10.084H113.432C113.973 10.084 114.44 9.85067 114.832 9.384C115.224 8.91733 115.42 8.236 115.42 7.34C115.42 6.87333 115.355 6.472 115.224 6.136C115.112 5.8 114.953 5.52 114.748 5.296C114.543 5.072 114.309 4.91333 114.048 4.82C113.787 4.708 113.525 4.652 113.264 4.652H109.68V10.084ZM134.461 6.444C134.405 6.36933 134.209 6.22933 133.873 6.024C133.537 5.81867 133.117 5.604 132.613 5.38C132.109 5.156 131.559 4.96 130.961 4.792C130.364 4.624 129.767 4.54 129.169 4.54C127.527 4.54 126.705 5.09067 126.705 6.192C126.705 6.528 126.789 6.808 126.957 7.032C127.144 7.256 127.405 7.46133 127.741 7.648C128.096 7.816 128.535 7.97467 129.057 8.124C129.58 8.27333 130.187 8.44133 130.877 8.628C131.829 8.88933 132.688 9.17867 133.453 9.496C134.219 9.79467 134.863 10.1773 135.385 10.644C135.927 11.092 136.337 11.6427 136.617 12.296C136.916 12.9493 137.065 13.7333 137.065 14.648C137.065 15.768 136.851 16.72 136.421 17.504C136.011 18.2693 135.46 18.8947 134.769 19.38C134.079 19.8467 133.285 20.192 132.389 20.416C131.493 20.6213 130.569 20.724 129.617 20.724C128.889 20.724 128.143 20.668 127.377 20.556C126.612 20.444 125.865 20.2853 125.137 20.08C124.409 19.856 123.7 19.5947 123.009 19.296C122.337 18.9973 121.712 18.652 121.133 18.26L123.149 14.256C123.224 14.3493 123.467 14.5267 123.877 14.788C124.288 15.0493 124.792 15.3107 125.389 15.572C126.005 15.8333 126.687 16.0667 127.433 16.272C128.18 16.4773 128.936 16.58 129.701 16.58C131.325 16.58 132.137 16.0853 132.137 15.096C132.137 14.7227 132.016 14.4147 131.773 14.172C131.531 13.9293 131.195 13.7147 130.765 13.528C130.336 13.3227 129.823 13.136 129.225 12.968C128.647 12.8 128.012 12.6133 127.321 12.408C126.407 12.128 125.613 11.8293 124.941 11.512C124.269 11.176 123.709 10.7933 123.261 10.364C122.832 9.93467 122.505 9.44 122.281 8.88C122.076 8.32 121.973 7.66667 121.973 6.92C121.973 5.87467 122.169 4.95067 122.561 4.148C122.953 3.34533 123.485 2.67333 124.157 2.132C124.829 1.572 125.604 1.152 126.481 0.871999C127.377 0.591999 128.32 0.451999 129.309 0.451999C130 0.451999 130.681 0.517332 131.353 0.647999C132.025 0.778666 132.669 0.946666 133.285 1.152C133.901 1.35733 134.471 1.59067 134.993 1.852C135.535 2.11333 136.029 2.37467 136.477 2.636L134.461 6.444ZM148.3 16.58C149.084 16.58 149.747 16.4213 150.288 16.104C150.829 15.768 151.268 15.3293 151.604 14.788C151.94 14.2467 152.173 13.6307 152.304 12.94C152.453 12.2307 152.528 11.512 152.528 10.784V0.619999H157.12V10.784C157.12 12.1653 156.943 13.4533 156.588 14.648C156.252 15.8427 155.72 16.888 154.992 17.784C154.283 18.68 153.368 19.3893 152.248 19.912C151.147 20.416 149.831 20.668 148.3 20.668C146.713 20.668 145.36 20.3973 144.24 19.856C143.12 19.3147 142.205 18.596 141.496 17.7C140.805 16.7853 140.292 15.7307 139.956 14.536C139.639 13.3413 139.48 12.0907 139.48 10.784V0.619999H144.072V10.784C144.072 11.5493 144.147 12.2773 144.296 12.968C144.445 13.6587 144.688 14.2747 145.024 14.816C145.36 15.3573 145.789 15.7867 146.312 16.104C146.853 16.4213 147.516 16.58 148.3 16.58ZM176.358 20.5V8.6L172.046 17.252H169.582L165.27 8.6V20.5H160.678V0.619999H165.662L170.814 11.008L175.994 0.619999H180.95V20.5H176.358ZM184.376 20.5V15.936H188.044V20.5H184.376Z"
fill="white" />
<path
d="M196.059 9.132V20.5H191.467V0.619999H195.051L204.319 12.296V0.619999H208.911V20.5H205.215L196.059 9.132ZM226.685 16.468V20.5H212.713V0.619999H226.433V4.652H217.305V8.516H225.145V12.24H217.305V16.468H226.685ZM244.623 4.652H238.575V20.5H233.983V4.652H227.907V0.619999H244.623V4.652Z"
fill="#42A9ED" />
</svg>
</div>
<span class="header__overlay"></span>
<nav class="header__nav navbar" id="navbar">
<ul class="navbar__list">
<li class="navbar__item navbar__item__active">
<a href="#">Бизнес</a>
</li>
<li class="navbar__item"><a href="#">О нас</a></li>
<li class="navbar__item"><a href="#">Цены</a></li>
<li class="navbar__item"><a href="#">Оформить заказ</a></li>
</ul>
</nav>
<div class="header__burger" id="burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<div class="hero">
<div class="hero__content">
<h1 class="hero__title">
<span>Lorem ipsum</span> dolor sit ametconsectetur
<span>adipiscing</span>
</h1>
<p class="hero__text">
At vero eos et accusamus et iusto odio dignissimos ducimus!
</p>
<ul class="hero__list">
<li>Totam rem aperiam eaque ipsa</li>
<li>Sit voluptatem accusantium doloremque laudantium</li>
<li>Sed ut perspiciatis, unde omnis iste natus error</li>
</ul>
<div class="hero__btns">
<button class="hero__btns__primary button">Заказать</button>
<button class="hero__btns__secondary button">Подробнее</button>
</div>
</div>
</div>
<div class="order-form">
<div class="order-form__content">
<h2 class="order-form__title">Оформление <span>Заказа</span></h2>
<p class="order-form__text">
Перед заполнением формы ознакомьтесь с нашей схемой работы!
</p>
<div class="order-form__line form-line">
<div class="form-line__item">
<div class="form-line__circle"><svg width="35" height="35" viewBox="0 0 35 35" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M23.9286 14.9286C23.9286 19.8906 19.8906 23.9286 14.9286 23.9286C9.96651 23.9286 5.92856 19.8906 5.92856 14.9286C5.92856 9.96651 9.96651 5.92856 14.9286 5.92856C19.8906 5.92856 23.9286 9.96651 23.9286 14.9286ZM34.2143 31.6429C34.2143 30.9598 33.933 30.2969 33.471 29.8348L26.5803 22.9442C28.2076 20.5937 29.0714 17.7812 29.0714 14.9286C29.0714 7.11383 22.7433 0.785706 14.9286 0.785706C7.11383 0.785706 0.785706 7.11383 0.785706 14.9286C0.785706 22.7433 7.11383 29.0714 14.9286 29.0714C17.7812 29.0714 20.5937 28.2076 22.9442 26.5803L29.8348 33.4509C30.2969 33.933 30.9598 34.2143 31.6429 34.2143C33.0491 34.2143 34.2143 33.0491 34.2143 31.6429Z"
fill="white" />
</svg></div>
<span class="form-line__text">Lorem ipsum dolor
sit amet</span>
</div>
<div class="form-line__item">
<div class="form-line__circle"><svg width="31" height="32" viewBox="0 0 31 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M25.7857 23.9643C25.7857 25.3705 24.6205 26.5357 23.2143 26.5357C21.808 26.5357 20.6429 25.3705 20.6429 23.9643C20.6429 22.558 21.808 21.3928 23.2143 21.3928C24.6205 21.3928 25.7857 22.558 25.7857 23.9643ZM10.3571 8.5357C10.3571 9.94195 9.19196 11.1071 7.78571 11.1071C6.37946 11.1071 5.21428 9.94195 5.21428 8.5357C5.21428 7.12945 6.37946 5.96427 7.78571 5.96427C9.19196 5.96427 10.3571 7.12945 10.3571 8.5357ZM30.9286 23.9643C30.9286 19.7053 27.4732 16.25 23.2143 16.25C18.9554 16.25 15.5 19.7053 15.5 23.9643C15.5 28.2232 18.9554 31.6786 23.2143 31.6786C27.4732 31.6786 30.9286 28.2232 30.9286 23.9643ZM29 2.10713C29 1.404 28.4174 0.821411 27.7143 0.821411H24.5C24.0982 0.821411 23.7165 1.0223 23.4754 1.34373L2.26116 29.6294C2.10044 29.8504 2 30.1116 2 30.3928C2 31.096 2.58259 31.6786 3.28571 31.6786H6.5C6.90178 31.6786 7.28348 31.4777 7.52455 31.1562L28.7388 2.87052C28.8996 2.64954 29 2.38838 29 2.10713ZM15.5 8.5357C15.5 4.27677 12.0446 0.821411 7.78571 0.821411C3.52678 0.821411 0.0714264 4.27677 0.0714264 8.5357C0.0714264 12.7946 3.52678 16.25 7.78571 16.25C12.0446 16.25 15.5 12.7946 15.5 8.5357Z"
fill="white" />
</svg></div>
<span class="form-line__text">Сonsecteturadipiscing elit</span>
</div>
<div class="form-line__item">
<div class="form-line__circle"><svg width="40" height="43" viewBox="0 0 40 43" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M15.9932 23.3724V22.0867C15.9932 21.7251 16.2745 21.4439 16.6361 21.4439H30.7789C31.1405 21.4439 31.4218 21.7251 31.4218 22.0867V23.3724C31.4218 23.734 31.1405 24.0153 30.7789 24.0153H16.6361C16.2745 24.0153 15.9932 23.734 15.9932 23.3724Z"
fill="white" />
<path
d="M16.6361 26.5867H30.7789C31.1405 26.5867 31.4218 26.868 31.4218 27.2296V28.5153C31.4218 28.8769 31.1405 29.1581 30.7789 29.1581H16.6361C16.2745 29.1581 15.9932 28.8769 15.9932 28.5153V27.2296C15.9932 26.868 16.2745 26.5867 16.6361 26.5867Z"
fill="white" />
<path
d="M16.6361 31.7296H30.7789C31.1405 31.7296 31.4218 32.0108 31.4218 32.3724V33.6581C31.4218 34.0198 31.1405 34.301 30.7789 34.301H16.6361C16.2745 34.301 15.9932 34.0198 15.9932 33.6581V32.3724C15.9932 32.0108 16.2745 31.7296 16.6361 31.7296Z"
fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.27892 15.3148C4.18373 15.3148 0.863922 11.995 0.863922 7.8998C0.863922 3.80461 4.18373 0.484802 8.27892 0.484802C11.7229 0.484802 14.6185 2.83277 15.4523 6.01529H28.2075C29.2722 6.01529 30.7588 6.63806 31.5021 7.38136L37.77 13.6492C38.5133 14.3925 39.1361 15.8791 39.1361 16.9439V40.0867C39.1361 41.1515 38.2722 42.0153 37.2075 42.0153H10.2075C9.14276 42.0153 8.27892 41.1515 8.27892 40.0867L8.27892 15.3148ZM10.8504 14.8568C13.4729 13.8871 15.397 11.477 15.6625 8.58672H26.2789V16.9439C26.2789 18.0086 27.1428 18.8724 28.2075 18.8724H36.5646V39.4439H10.8504V14.8568ZM29.674 9.1894C29.5334 9.04877 29.1919 8.86797 28.8504 8.74743V16.301H36.4039C36.2834 15.9595 36.1026 15.618 35.962 15.4773L29.674 9.1894ZM9.27892 8.89984H13.2789V6.89984H9.27892V2.89984H7.27892V6.89984H3.27892V8.89984H7.27892V12.8998H9.27892V8.89984Z"
fill="white" />
</svg></div>
<span class="form-line__text">Sed do eiusmod tempor</span>
</div>
<div class="form-line__item">
<div class="form-line__circle"><svg width="37" height="29" viewBox="0 0 37 29" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M33.7952 25.1071C33.7952 25.4487 33.4938 25.75 33.1523 25.75H3.58086C3.23935 25.75 2.93801 25.4487 2.93801 25.1071V9.67856C3.35988 10.1607 3.82193 10.6027 4.32417 11.0045C7.19693 13.2143 10.0898 15.4643 12.8822 17.7946C14.3889 19.0603 16.2572 20.6071 18.3465 20.6071H18.3666H18.3867C20.476 20.6071 22.3443 19.0603 23.851 17.7946C26.6434 15.4643 29.5362 13.2143 32.409 11.0045C32.9112 10.6027 33.3733 10.1607 33.7952 9.67856V25.1071ZM33.7952 3.99329C33.7952 5.70088 32.1478 7.93079 30.842 8.95535C28.1501 11.0647 25.4581 13.1942 22.7862 15.3237C21.7215 16.1875 19.7929 18.0357 18.3867 18.0357H18.3666H18.3465C16.9402 18.0357 15.0117 16.1875 13.9469 15.3237C11.2751 13.1942 8.5831 11.0647 5.89113 8.95535C4.08309 7.52901 2.93801 5.54017 2.93801 3.24999C2.93801 2.90847 3.23935 2.60713 3.58086 2.60713H33.1523C33.9157 2.60713 33.7952 3.49106 33.7952 3.99329ZM36.3666 3.24999C36.3666 1.48213 34.9202 0.0357056 33.1523 0.0357056H3.58086C1.81301 0.0357056 0.366577 1.48213 0.366577 3.24999V25.1071C0.366577 26.875 1.81301 28.3214 3.58086 28.3214H33.1523C34.9202 28.3214 36.3666 26.875 36.3666 25.1071V3.24999Z"
fill="white" />
</svg></div>
<span class="form-line__text">Esse cillum dolore
eu fugiat</span>
</div>
<div class="form-line__item">
<div class="form-line__circle"><svg width="39" height="27" viewBox="0 0 39 27" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M15.7287 18.5357V16.6071H18.3002V10.8214H18.26C17.9386 11.3237 17.6372 11.5446 17.1551 11.9665L15.6082 10.3594L18.5814 7.60713H20.8716V16.6071H23.443V18.5357H15.7287ZM26.0145 13.3928C26.0145 9.7366 23.8046 5.03571 19.5859 5.03571C15.3671 5.03571 13.1573 9.7366 13.1573 13.3928C13.1573 17.0491 15.3671 21.75 19.5859 21.75C23.8046 21.75 26.0145 17.0491 26.0145 13.3928ZM36.3002 18.5357C33.4676 18.5357 31.1573 20.846 31.1573 23.6786H8.01446C8.01446 20.846 5.70419 18.5357 2.8716 18.5357V8.24999C5.70419 8.24999 8.01446 5.93972 8.01446 3.10713H31.1573C31.1573 5.93972 33.4676 8.24999 36.3002 8.24999V18.5357ZM38.8716 1.82142C38.8716 1.11829 38.289 0.535706 37.5859 0.535706H1.58589C0.88276 0.535706 0.300171 1.11829 0.300171 1.82142V24.9643C0.300171 25.6674 0.88276 26.25 1.58589 26.25H37.5859C38.289 26.25 38.8716 25.6674 38.8716 24.9643V1.82142Z"
fill="white" />
</svg></div>
<span class="form-line__text">Excepteur sint occaecat cupidatat non proident</span>
</div>
</div>
<form class="order-form__form form" action="">
<div class="form__row">
<div class="form__input" id="sample-select">
</div>
<input name="email" class="form__input" type="email" placeholder="Ваш e-mail" />
<input name="name" class="form__input" type="text" placeholder="Ваше имя" />
</div>
<div class="form__row">
<div class="form__input form-range">
<div class="form-range__text">
<div>Sed ut perspiciatis, unde omnis iste natus</div>
<div id="rangeNumber">75 %</div>
</div>
<input name="range" type="range" min="0" max="100" id="range"/>
</div>
<div class="form__input form-file">
<input name="file" type="file" id="input__file" />
<label for="input__file"><svg width="18" height="21" viewBox="0 0 18 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16.8125 4.60899L13.3304 1.12685C12.9174 0.713902 12.0915 0.36792 11.5 0.36792H1.50002C0.9085 0.36792 0.428589 0.847831 0.428589 1.43935V19.2965C0.428589 19.888 0.9085 20.3679 1.50002 20.3679H16.5C17.0915 20.3679 17.5714 19.888 17.5714 19.2965V6.43935C17.5714 5.84783 17.2255 5.02194 16.8125 4.60899ZM11.8572 1.88578C12.0469 1.95274 12.2366 2.05319 12.3148 2.13131L15.8081 5.62462C15.8862 5.70274 15.9866 5.89247 16.0536 6.08221H11.8572V1.88578ZM16.1429 18.9394H1.85716V1.79649H10.4286V6.43935C10.4286 7.03087 10.9085 7.51078 11.5 7.51078H16.1429V18.9394ZM4.7143 9.29649V10.0108C4.7143 10.2117 4.87055 10.3679 5.07145 10.3679H12.9286C13.1295 10.3679 13.2857 10.2117 13.2857 10.0108V9.29649C13.2857 9.0956 13.1295 8.93935 12.9286 8.93935H5.07145C4.87055 8.93935 4.7143 9.0956 4.7143 9.29649ZM12.9286 11.7965H5.07145C4.87055 11.7965 4.7143 11.9527 4.7143 12.1536V12.8679C4.7143 13.0688 4.87055 13.2251 5.07145 13.2251H12.9286C13.1295 13.2251 13.2857 13.0688 13.2857 12.8679V12.1536C13.2857 11.9527 13.1295 11.7965 12.9286 11.7965ZM12.9286 14.6536H5.07145C4.87055 14.6536 4.7143 14.8099 4.7143 15.0108V15.7251C4.7143 15.926 4.87055 16.0822 5.07145 16.0822H12.9286C13.1295 16.0822 13.2857 15.926 13.2857 15.7251V15.0108C13.2857 14.8099 13.1295 14.6536 12.9286 14.6536Z"
fill="#272733" />
</svg>Прикрепить файл</label>
</div>
</div>
<button class="form__btn button" type="submit">Отправить</button>
</form>
</div>
</div>
</div>
<footer class="footer">
<div class="footer__content">
<div class="footer__privacy">
© 2018 «LoremIpsum.net» Все права защищены.</div>
<div class="footer__line"></div>
<div class="footer__wallets">
<div class="wallets-item">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.9118 13.4559C16.9719 13.8435 16.845 14.0076 16.7167 14.0076C16.5885 14.0076 16.4028 13.85 16.1957 13.5373C15.9887 13.2245 15.9179 12.8769 16.0181 12.6986C16.0558 12.6368 16.1167 12.5915 16.1881 12.572C16.2595 12.5525 16.3359 12.5604 16.4015 12.5939C16.7421 12.718 16.8757 13.2233 16.9118 13.4559ZM15.0241 14.3061C15.4343 14.6408 15.5585 15.0389 15.3421 15.3193C15.2762 15.3977 15.1922 15.46 15.0968 15.5013C15.0014 15.5426 14.8974 15.5617 14.793 15.557C14.5642 15.5574 14.3425 15.4801 14.1665 15.3386C13.7951 15.0246 13.6856 14.5142 13.9287 14.2247C13.9824 14.1653 14.0494 14.1186 14.1247 14.0881C14.2 14.0577 14.2814 14.0443 14.3629 14.049C14.6077 14.0569 14.8418 14.1479 15.0241 14.3061V14.3061ZM14.3402 17.5367C16.1022 17.5367 18.0139 18.1208 20.1313 19.9351C20.3424 20.1161 20.6243 19.8912 20.4399 19.6651C18.3599 17.1258 16.4322 16.6412 14.5178 16.2329C12.172 15.7315 10.9643 14.4535 10.1187 13.0514C9.95167 12.7723 9.87552 12.8214 9.86083 13.1806C9.84679 13.7131 9.88841 14.2456 9.98507 14.7701V14.7701C9.89022 14.7701 9.79403 14.7701 9.69918 14.7701C8.49698 14.7701 7.32179 14.4252 6.32219 13.7792C5.3226 13.1331 4.54352 12.2148 4.08346 11.1404C3.6234 10.0661 3.50302 8.88385 3.73756 7.7433C3.9721 6.60275 4.55101 5.55509 5.40109 4.7328C6.25117 3.91051 7.33424 3.35053 8.51334 3.12366C9.69244 2.89679 10.9146 3.01322 12.0253 3.45824C13.136 3.90326 14.0853 4.65688 14.7532 5.62379C15.4211 6.5907 15.7776 7.72748 15.7776 8.89037C15.7782 9.11877 15.7653 9.347 15.7389 9.57397C15.0985 9.49597 14.4514 9.48427 13.8085 9.53908C13.5773 9.55846 13.6107 9.6683 13.7844 9.69285C15.7883 10.0431 17.175 11.2435 17.4902 13.4339C17.4914 13.445 17.4961 13.4555 17.5037 13.4638C17.5114 13.4722 17.5215 13.478 17.5328 13.4804C17.544 13.4828 17.5558 13.4818 17.5664 13.4774C17.577 13.473 17.5859 13.4654 17.5918 13.4559C18.6342 11.7703 19.0706 9.79838 18.8329 7.84774C18.5952 5.89709 17.6968 4.07738 16.2778 2.67245C14.8588 1.26752 12.999 0.356356 10.9885 0.0810911C8.97799 -0.194174 6.92984 0.181935 5.1635 1.15075C3.39717 2.11957 2.01197 3.62662 1.22396 5.43683C0.435958 7.24704 0.289461 9.25863 0.807322 11.1578C1.32518 13.057 2.47828 14.737 4.08676 15.9358C5.69524 17.1346 7.66865 17.7848 9.69918 17.7849C11.0418 17.7887 12.379 17.5355 14.3402 17.5355V17.5367Z"
fill="#3E9CDC" />
</svg>
<span>Qiwi wallet</span>
</div>
<div class="wallets-item">
<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.779835 8.9307C0.779835 7.94664 0.863032 7.32213 2.91811 5.80087C4.61949 4.54138 10.073 0.237427 10.073 0.237427V7.42209H14.2203V17.7627H2.07518C1.36275 17.7627 0.779633 17.1844 0.779633 16.4778L0.779835 8.93076V8.9307Z"
fill="#3E9CDC" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.073 7.422V11.585L2.45212 16.7335L12.0874 13.6246V7.422H10.073Z" fill="black" fill-opacity="0.2" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.5904 7.20685C7.03609 6.68023 7.68696 6.49436 8.04435 6.79173C8.40174 7.08915 8.3303 7.75719 7.8846 8.2838C7.43925 8.81035 6.78811 8.99602 6.43072 8.69859C6.07333 8.40123 6.14497 7.73333 6.5904 7.20678V7.20685Z"
fill="#231F20" />
</svg>
<span>Yandex Money</span>
</div>
<div class="wallets-item">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4_184)">
<path
d="M9.34077 0C10.751 0 12.0928 0.323103 13.2969 0.901077C13.4857 0.986269 13.6758 1.08823 13.864 1.19028L13.0384 1.92159L11.8007 0.646297L9.66802 2.51651L8.41214 1.17307L4.49048 4.65889L7.00126 7.39646L6.02108 8.24641L8.49822 10.984L7.51795 11.8336L11.0613 15.7274L13.1585 13.823L14.9826 15.8639C14.6211 16.136 14.2255 16.4086 13.796 16.6462C12.4886 17.3773 10.9747 17.8016 9.35814 17.8016C4.38691 17.8016 0.345546 13.8066 0.345546 8.89314C0.327991 4.01286 4.37007 0 9.34077 0ZM7.68931 8.34864L9.83937 6.44418L11.7662 8.56952L9.61567 10.4738L7.68931 8.34864ZM9.22053 12.0214L11.3531 10.1001L13.2969 12.2253L11.1467 14.1298L9.22053 12.0214ZM6.15942 4.72713L8.30886 2.82267L10.2352 4.948L8.08507 6.85238L6.15942 4.72713ZM10.0974 3.70661L11.6971 2.27842L13.1423 3.85978L11.5426 5.30484L10.0974 3.70661ZM12.9529 10.2528L14.5521 8.82456L15.9972 10.4224L14.3974 11.8516L12.9529 10.2528ZM14.3631 13.4668L15.9629 12.0382L17.4068 13.6195L15.8076 15.0644L14.3631 13.4668ZM15.0168 6.12107L16.0831 5.16879L17.0459 6.22339L15.9799 7.17531L15.0168 6.12107ZM13.6408 2.97548L14.7071 2.00651L15.6707 3.07753L14.6036 4.02972L13.6408 2.97548ZM16.3755 9.26693L17.4417 8.31474L18.422 9.36899L17.3389 10.3209L16.3755 9.26693ZM11.5768 6.90341L13.1766 5.47513L14.6211 7.05614L13.022 8.48469L11.5768 6.90341Z"
fill="#3E9CDC" />
</g>
<defs>
<clipPath id="clip0_4_184">
<rect width="20" height="20" fill="white" transform="translate(0.5)" />
</clipPath>
</defs>
</svg>
<span>Web Money</span>
</div>
</div>
<div class="footer__line"></div>
<div class="footer__links">
<a href="#" class="links-item">
<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.7503 10.8491C14.7503 10.9914 14.6248 11.117 14.4825 11.117H2.16106C2.01876 11.117 1.89321 10.9914 1.89321 10.8491V4.42057C2.06899 4.62146 2.26151 4.80561 2.47077 4.97302C3.66776 5.89378 4.87312 6.83128 6.03662 7.80226C6.66441 8.32961 7.44287 8.97414 8.31341 8.97414H8.32178H8.33015C9.20068 8.97414 9.97914 8.32961 10.6069 7.80226C11.7704 6.83128 12.9758 5.89378 14.1728 4.97302C14.382 4.80561 14.5746 4.62146 14.7503 4.42057V10.8491ZM14.7503 2.05171C14.7503 2.7632 14.064 3.69233 13.5199 4.11923C12.3982 4.99813 11.2766 5.88541 10.1633 6.77269C9.71966 7.13262 8.91609 7.90271 8.33015 7.90271H8.32178H8.31341C7.72747 7.90271 6.9239 7.13262 6.48026 6.77269C5.36698 5.88541 4.24533 4.99813 3.12367 4.11923C2.37033 3.52492 1.89321 2.69624 1.89321 1.742C1.89321 1.5997 2.01876 1.47414 2.16106 1.47414H14.4825C14.8006 1.47414 14.7503 1.84244 14.7503 2.05171ZM15.8218 1.742C15.8218 1.00539 15.2191 0.40271 14.4825 0.40271H2.16106C1.42446 0.40271 0.821777 1.00539 0.821777 1.742V10.8491C0.821777 11.5857 1.42446 12.1884 2.16106 12.1884H14.4825C15.2191 12.1884 15.8218 11.5857 15.8218 10.8491V1.742Z"
fill="#3E9CDC" />
</svg>[email protected]</a>
<a href="#" class="links-item">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.1804 9.28625C11.1804 9.93665 11.0574 10.5079 10.8113 11.0001C10.5652 11.4923 10.2341 11.8995 9.81812 12.2218C9.32593 12.6085 8.78394 12.8839 8.19214 13.048C7.6062 13.212 6.85913 13.2941 5.95093 13.2941H0.712646V0.207153H5.33569C6.29663 0.207153 7.02319 0.245239 7.51538 0.321411C8.01343 0.391724 8.47925 0.544067 8.91284 0.778442C9.38159 1.0304 9.73022 1.36731 9.95874 1.78918C10.1931 2.21106 10.3103 2.69739 10.3103 3.24817C10.3103 3.88684 10.1492 4.4552 9.8269 4.95325C9.5105 5.45129 9.07104 5.8175 8.50854 6.05188V6.12219C9.31714 6.29211 9.9646 6.64075 10.4509 7.16809C10.9373 7.68958 11.1804 8.39563 11.1804 9.28625ZM6.97046 3.90735C6.97046 3.69641 6.91479 3.47961 6.80347 3.25696C6.698 3.0343 6.53101 2.87317 6.30249 2.77356C6.08569 2.67981 5.82788 2.63 5.52905 2.62415C5.23608 2.61243 4.79663 2.60657 4.21069 2.60657H3.98218V5.37512H4.39526C4.95776 5.37512 5.35034 5.36926 5.573 5.35754C5.80151 5.34583 6.03589 5.2843 6.27612 5.17297C6.53979 5.04993 6.72144 4.88 6.82104 4.66321C6.92065 4.44641 6.97046 4.19446 6.97046 3.90735ZM7.79663 9.22473C7.79663 8.82043 7.7146 8.50403 7.55054 8.27551C7.38647 8.047 7.14038 7.87415 6.81226 7.75696C6.61304 7.68079 6.33765 7.63977 5.98608 7.63391C5.64038 7.62219 5.17456 7.61633 4.58862 7.61633H3.98218V10.8947H4.15796C5.01343 10.8947 5.60522 10.8888 5.93335 10.8771C6.26147 10.8654 6.59546 10.7863 6.9353 10.6398C7.23413 10.5109 7.45093 10.3234 7.58569 10.0773C7.72632 9.82532 7.79663 9.54114 7.79663 9.22473Z"
fill="#3E9CDC" />
</svg>Мы вконтакте</a>
</div>
</div>
</footer>
<script>
VirtualSelect.init({
ele: '#sample-select',
placeholder: 'Выберите тип системы',
hideClearButton: true,
options: [
{ label: 'Sed ut perspiciatis', value: '1' },
{ label: 'Nemo enim ipsam', value: '2' },
{ label: 'Et harum quidem', value: '3' },
{ label: 'Temporibus autem', value: '4' },
{ label: 'Itaque earum rerum', value: '5' },
{ label: 'Et harum quidem', value: '6' },
{ label: 'Temporibus autem', value: '7' },
{ label: 'Itaque earum rerum', value: '8' },
],
});
</script>
<script src="script/script.js"></script>
</body>
</html>