-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
464 lines (464 loc) · 37.8 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
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
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Интернет-магазин гаджетов с оригинальным дизайном «Девайс»</title>
<link href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<header class="main-header">
<div class="container bg-yellow">
<nav class="row header-nav">
<a class="logo" href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 35">
<path d="m0.35 0.7v33.6h13.532a15.723 15.723 0 0 0 11.72-4.824 16.464 16.464 0 0 0 4.712-11.976 16.465 16.465 0 0 0-4.712-11.976 15.723 15.723 0 0 0-11.72-4.824zm7.733 26.208v-18.819h5.8a8.648 8.648 0 0 1 6.5 2.568 9.412 9.412 0 0 1 2.489 6.84 9.41 9.41 0 0 1-2.489 6.84 8.646 8.646 0 0 1-6.5 2.568h-5.8zm34.8-5.952h12.082v-7.3h-12.086v-5.567h13.291v-7.389h-21.024v33.6h21.265v-7.392h-13.532v-5.952zm36.343 13.344 11.019-33.6h-8.458l-7.491 24.72-7.491-24.72h-8.457l11.019 33.6zm14.4 0h7.733v-33.6h-7.733zm38.615-1.416a15.514 15.514 0 0 0 6.041-5.688l-6.67-3.84a7.488 7.488 0 0 1-3.165 3.024 9.874 9.874 0 0 1-4.664 1.1 9.594 9.594 0 0 1-7.177-2.736 9.907 9.907 0 0 1-2.682-7.248 9.908 9.908 0 0 1 2.682-7.248 9.594 9.594 0 0 1 7.177-2.736 9.914 9.914 0 0 1 4.64 1.08 7.6 7.6 0 0 1 3.189 3.048l6.67-3.84a15.881 15.881 0 0 0-6.09-5.688 17.419 17.419 0 0 0-8.409-2.088 17.12 17.12 0 0 0-17.592 17.472 17.12 17.12 0 0 0 17.589 17.476 17.519 17.519 0 0 0 8.458-2.088zm17.881-11.928h12.082v-7.3h-12.085v-5.567h13.29v-7.389h-21.022v33.6h21.264v-7.392h-13.532v-5.952z"/>
</svg>
</a>
<div class="row justify-between search-form-wrapper">
<form class="search-form" action="https://echo.htmlacademy.ru" method="post">
<label for="site-search" class="visually-hidden">Поиск по сайту</label>
<input type="search" class="search-form-input" id="site-search" name="site-search"
placeholder="Поиск по сайту">
<button type="submit" class="search-form-submit">Найти</button>
</form>
<div class="row user-actions">
<div class="authorization">
<span>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12">
<path fill="#272525" d="M.032 12h12.937c-.163-2.643-2.074-4.837-4.671-5.543a3.47 3.47 0 0 0 1.687-2.972 3.485 3.485 0 0 0-6.97 0c0 1.264.68 2.361 1.688 2.972C2.106 7.163.194 9.357.032 12z"/>
</svg>
Войти
</a>
</span>
</div>
<span>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
<path d="M8 2h1.984v8H8zM0 3h1.984v7H0zM4 0h2v10H4z"/>
</svg>
Сравнить
</a>
</span>
<span>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M11.864 3.017a.429.429 0 0 0-.327-.154H9.225V4.09c0 .563-.484 1.022-1.08 1.022-.594 0-1.078-.458-1.078-1.022V2.863H4.909V4.09c0 .563-.485 1.022-1.08 1.022-.595 0-1.078-.458-1.078-1.022V2.863H.438a.43.43 0 0 0-.327.154.472.472 0 0 0-.108.358l.776 7.134c.015.806.642 1.455 1.411 1.455h7.595c.77 0 1.396-.649 1.411-1.455l.776-7.134a.476.476 0 0 0-.108-.358z"/>
<path d="M3.829 4.499c.239 0 .433-.184.433-.409V1.84c0-.632.672-1.022 1.295-1.022h1.079c.655 0 1.078.401 1.078 1.022v2.25c0 .225.194.409.431.409.239 0 .433-.184.433-.409V1.84C8.577.773 7.761 0 6.636 0H5.557c-1.19 0-2.159.826-2.159 1.84v2.25c0 .225.194.409.431.409z"/>
</svg>
Корзина
</a>
</span>
</div>
</div>
<ul class="row main-menu">
<li class="menu-item h2-title catalog-link"><a href="">Каталог товаров</a>
<div class="container submenu-wrapper">
<ul class="submenu">
<li class="menu-item"><a href="">Виртуальная реальность</a></li>
<li class="menu-item"><a href="inner.html">Моноподы для селфи</a></li>
<li class="menu-item"><a href="">Экшн-камеры</a></li>
</ul>
<ul class="submenu">
<li class="menu-item"><a href="">Фитнес-браслеты</a></li>
<li class="menu-item"><a href="">Умные часы</a></li>
</ul>
<ul class="submenu">
<li class="menu-item"><a href="">Квадрокоптеры</a></li>
</ul>
</div>
</li>
<li class="menu-item h2-title"><a href="">Доставка</a></li>
<li class="menu-item h2-title"><a href="">Гарантия</a></li>
<li class="menu-item h2-title contacts"><a href="">Контакты</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container reset-padding">
<h1 class="visually-hidden">Интернет-магазин гаджетов с оригинальным дизайном «Девайс»</h1>
<div class="row">
<section class="row slider slider-show">
<h2 class="visually-hidden">Слайдер</h2>
<div class="container">
<div class="row slider-wrapper">
<div class="slider-img">
<img class="monopad" src="img/slider-1.png" alt="Палка для селфи" width="384" height="486">
</div>
<div class="slider-content slider-1">
<div class="h1-title">Делай селфи,<br>как Бен Стиллер!</div>
<p class="slider-description">Самая длинная палка для селфи доступна в нашем магазине.<br>Восемь (Восемь,
Карл!) метров длиной и весом всего 5 килограмм.</p>
<div class="row slider-tabs-wrapper">
<button class="button" type="button">Подробнее</button>
<div class="slider-tabs">
<div class="slider-tab active"></div>
<div class="slider-tab"></div>
<div class="slider-tab"></div>
</div>
</div>
<div class="row">
<div class="property">
<p class="stat">8,5 м</p>
<p>Длина палки</p>
</div>
<div class="property">
<p class="stat">5 кг</p>
<p>Вес палки</p>
</div>
<div class="property">
<p class="stat">Карбон</p>
<p>Материал</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="row slider">
<h2 class="visually-hidden">Слайдер</h2>
<div class="container">
<div class="row slider-wrapper">
<div class="slider-img">
<img src="img/slider-2.png" alt="Фитнес браслет" width="345" height="485">
</div>
<div class="slider-content slider-2">
<div class="h1-title">Худеем<br>правильно!</div>
<p class="slider-description">Мотивирующие фитнес-браслеты помогут найти в себе силы
не пропускать занятия и соблюдать диету.</p>
<div class="row slider-tabs-wrapper">
<button class="button" type="button">Подробнее</button>
<div class="slider-tabs">
<div class="slider-tab active"></div>
<div class="slider-tab"></div>
<div class="slider-tab"></div>
</div>
</div>
<div class="row">
<div class="property">
<p class="stat">48 часов</p>
<p>Без зарядки</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="row slider">
<h2 class="visually-hidden">Слайдер</h2>
<div class="container">
<div class="row slider-wrapper">
<div class="slider-img">
<img src="img/slider-3.png" alt="Квадрокоптер с лазером" width="526" height="334">
</div>
<div class="slider-content slider-3">
<div class="h1-title">Порхает как бабочка,
жалит как пчела!
</div>
<p class="slider-description">Этот обычный, на первый взгляд, квадрокоптер оснащен
мощным лазером, замаскированным под стандартную камеру.
</p>
<div class="row slider-tabs-wrapper">
<button class="button" type="button">Подробнее</button>
<div class="slider-tabs">
<div class="slider-tab active"></div>
<div class="slider-tab"></div>
<div class="slider-tab"></div>
</div>
</div>
<div class="row">
<div class="property">
<p class="stat">800 м</p>
<p>Дальность полета</p>
</div>
<div class="property">
<p class="stat">50 м</p>
<p>Радиус поражения</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="row">
<h2 class="visually-hidden">Каталог товаров</h2>
<ul class="row popular">
<li>
<a href="">
<div class="popular-img">
<svg xmlns="http://www.w3.org/2000/svg" width="97" height="55" viewBox="0 0 97 55">
<g fill="#363636">
<path d="M84.131 32.639V20.003c0-1.309 1.045-2.37 2.335-2.37l8.326 1.581V11.02c0-2.355-1.708-3.431-4.202-4.265L67.403.175c1.616 1.391 1.889 2.04 1.889 4.396V49.78c0 2.356-.45 4.066-1.967 5.21l23.265-7.065c2.401-.833 4.202-4.216 4.202-6.572V33.44l-8.326 1.567c-1.29.002-2.335-1.06-2.335-2.368z"/>
<path d="M95.129 20.979l-7.598-1.444c-1.008 0-1.824.829-1.824 1.851v9.868c0 1.023.816 1.852 1.824 1.852l7.598-1.431c1.154-.419 1.824-.829 1.824-1.852V22.83c0-1.022-.766-1.507-1.824-1.851zM67.17 4.483c0-5.08-4.232-4.459-4.232-4.459S5.832 4.738 2.838 5.145.001 9.532.001 9.532L0 45.812c0 3.743 2.599 3.753 2.599 3.753l16.477 1.403L27.212 39.3s1.109-1.828 2.505-1.828c1.397 0 2.432 1.861 2.432 1.861l9.061 13.521s18.895 1.909 22.521 1.909c3.626-.001 3.439-5.024 3.439-5.024V4.483zM12.982 37.192c-3.698 0-6.696-4.601-6.696-10.275s2.998-10.275 6.696-10.275c3.698 0 6.696 4.601 6.696 10.275s-2.998 10.275-6.696 10.275zm36.158 1.426c-4.662 0-8.441-5.239-8.441-11.701 0-6.463 3.78-11.702 8.441-11.702 4.662 0 8.442 5.239 8.442 11.702 0 6.462-3.78 11.701-8.442 11.701z"/>
</g>
</svg>
</div>
<p class="h3-title">Виртуальная реальность</p>
</a>
</li>
<li>
<a href="inner.html">
<div class="popular-img selfie">
<svg xmlns="http://www.w3.org/2000/svg" width="86" height="117" viewBox="0 0 86 117">
<g fill="#363636">
<path d="M82.821 4.011H3.33A3.188 3.188 0 0 0 .142 7.199v46.413a3.187 3.187 0 0 0 3.188 3.189h79.492a3.188 3.188 0 0 0 3.189-3.189V7.199a3.189 3.189 0 0 0-3.19-3.188zM8.392 37.236h-.226a3.19 3.19 0 0 1-3.189-3.189v-7.283a3.188 3.188 0 0 1 3.189-3.188h.226v13.66zm61.231 15.172H13.341V8.402h56.282v44.006zM78.4 34.552c-2.289 0-4.146-1.855-4.146-4.147s1.856-4.147 4.146-4.147a4.146 4.146 0 1 1 0 8.294zM31.497 0h23.157v2.758H31.497zM46.608 64.861v-2.973h8.046V59.13H31.498v2.758h8.045v35.246a6.068 6.068 0 0 0-3.635 5.559V117h14.335v-14.307a6.062 6.062 0 0 0-3.636-5.557v-27.99h4.796l5.051 1.213v-6.711l-5.051 1.213h-4.795z"/>
</g>
</svg>
</div>
<p class="h3-title">Моноподы<br>для селфи</p>
</a>
</li>
<li>
<a href="">
<div class="popular-img">
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="87" viewBox="0 0 71 87">
<g fill="#363636">
<path d="M53.349 1.49c0-.736-.578-1.49-1.311-1.49H9.053C8.32 0 7.672.754 7.672 1.49v3.522h45.676V1.49zM54.202 81.809h-9.597V71.426h-6.958v2.507H18.774c-.537-1.254-1.757-2.148-3.181-2.148H3.559C1.642 71.784 0 73.387 0 75.311v3.018c0 1.924 1.642 3.48 3.559 3.48h12.035c1.511 0 2.792-.896 3.269-2.326h18.785v2.326H28.13c-.533 0-1.01.437-1.01.972v3.172c0 .535.478 1.048 1.01 1.048h26.072c.533 0 .93-.513.93-1.048V82.78c0-.535-.397-.971-.93-.971zM60.666 12.39a7.037 7.037 0 0 0-6.771-5.05H7.148C3.25 7.34 0 10.449 0 14.361v46.9c0 3.912 3.25 7.121 7.148 7.121h46.747c3.898 0 7.126-3.209 7.126-7.121V50.915a23.228 23.228 0 0 0 10.001-19.164c-.001-8.079-4.132-15.181-10.356-19.361zM12.238 62.151c-3.259 0-5.901-2.65-5.901-5.921 0-3.27 2.642-5.922 5.901-5.922s5.902 2.652 5.902 5.922c0 3.271-2.643 5.921-5.902 5.921zm5.961-32.605a1.42 1.42 0 0 1-1.418 1.422h-8.94a1.42 1.42 0 0 1-1.418-1.422v-14.16a1.42 1.42 0 0 1 1.418-1.423h8.939a1.42 1.42 0 0 1 1.418 1.423v14.16zm29.563 22.312c-11.076 0-20.057-9.01-20.057-20.123s8.98-20.124 20.057-20.124c11.077 0 20.058 9.01 20.058 20.124s-8.981 20.123-20.058 20.123z"/>
<ellipse cx="47.762" cy="31.735" rx="12.188" ry="12.229"/>
<circle cx="31.562" cy="31.736" r="1.435"/>
<circle cx="63.963" cy="31.736" r="1.435"/>
<circle cx="39.109" cy="17.994" r="1.435"/>
<ellipse cx="56.415" cy="45.476" rx="1.43" ry="1.436"/>
<circle cx="55.697" cy="17.565" r="1.435"/>
<circle cx="39.828" cy="45.906" r="1.435"/>
</g>
</svg>
</div>
<p class="h3-title">Экшн-камеры</p>
</a>
</li>
<li>
<a href="">
<div class="popular-img">
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="65">
<g fill="#363636">
<path d="M98.967 4.074c.752 1.441 1.209 3.08 1.209 4.818v21.102c0 4.616-3.092 8.527-7.246 9.9-1.325 3.987-3.778 7.854-8.051 10.432-8.676 5.231-31.124 4.837-31.198 4.837-.078 0-22.513.395-31.189-4.837-4.216-2.545-6.708-6.347-8.042-10.279-4.418-1.209-7.756-5.251-7.756-10.053V8.893c0-1.688.427-3.282 1.139-4.693C4.17 5.109 0 6.918 0 10.434v29.983C0 50.668 11.839 64.85 53.657 64.85c41.82 0 53.657-14.182 53.657-24.433V10.434c-.001-3.684-4.576-5.494-8.347-6.36z"/>
<path d="M20.561 38.459h65.523c5.564 0 10.074-4.513 10.074-10.077V9.935c0-5.563-4.51-10.075-10.074-10.075H20.561c-5.564 0-10.075 4.511-10.075 10.075v18.447c0 5.564 4.511 10.077 10.075 10.077zM83.695 9.468c.867 0 1.569.703 1.569 1.57 0 .866-.702 1.569-1.569 1.569s-1.568-.703-1.568-1.569c0-.868.701-1.57 1.568-1.57zm0 4.039c.867 0 1.569.703 1.569 1.568 0 .867-.702 1.569-1.569 1.569s-1.568-.702-1.568-1.569c0-.865.701-1.568 1.568-1.568zm0 4.039c.867 0 1.569.702 1.569 1.569 0 .866-.702 1.569-1.569 1.569s-1.568-.703-1.568-1.569c0-.867.701-1.569 1.568-1.569zm0 3.827c.867 0 1.569.704 1.569 1.569 0 .867-.702 1.568-1.569 1.568s-1.568-.701-1.568-1.568c0-.866.701-1.569 1.568-1.569zm0 4.039c.867 0 1.569.702 1.569 1.569 0 .865-.702 1.568-1.569 1.568s-1.568-.704-1.568-1.568c0-.867.701-1.569 1.568-1.569zM79.656 9.468c.867 0 1.568.703 1.568 1.57 0 .866-.701 1.569-1.568 1.569-.865 0-1.568-.703-1.568-1.569 0-.868.703-1.57 1.568-1.57zm0 15.944c.867 0 1.568.702 1.568 1.569 0 .865-.701 1.568-1.568 1.568-.865 0-1.568-.704-1.568-1.568 0-.867.703-1.569 1.568-1.569zM75.619 9.468c.865 0 1.568.703 1.568 1.57 0 .866-.703 1.569-1.568 1.569-.867 0-1.569-.703-1.569-1.569 0-.868.702-1.57 1.569-1.57zm0 4.039c.865 0 1.568.703 1.568 1.568 0 .867-.703 1.569-1.568 1.569-.867 0-1.569-.702-1.569-1.569 0-.865.702-1.568 1.569-1.568zm0 4.039c.865 0 1.568.702 1.568 1.569 0 .866-.703 1.569-1.568 1.569-.867 0-1.569-.703-1.569-1.569 0-.867.702-1.569 1.569-1.569zm0 3.827c.865 0 1.568.704 1.568 1.569 0 .867-.703 1.568-1.568 1.568-.867 0-1.569-.701-1.569-1.568 0-.866.702-1.569 1.569-1.569zm0 4.039c.865 0 1.568.702 1.568 1.569 0 .865-.703 1.568-1.568 1.568-.867 0-1.569-.704-1.569-1.568 0-.867.702-1.569 1.569-1.569zM67.965 9.468c.867 0 1.568.703 1.568 1.57 0 .866-.701 1.569-1.568 1.569s-1.568-.703-1.568-1.569c-.001-.868.703-1.57 1.568-1.57zm0 8.078c.867 0 1.568.702 1.568 1.569 0 .866-.701 1.569-1.568 1.569s-1.568-.703-1.568-1.569c-.001-.867.703-1.569 1.568-1.569zm0 3.881c.867 0 1.568.701 1.568 1.568 0 .865-.701 1.569-1.568 1.569s-1.568-.704-1.568-1.569c-.001-.867.703-1.568 1.568-1.568zm0 3.985c.867 0 1.568.702 1.568 1.569 0 .865-.701 1.568-1.568 1.568s-1.568-.704-1.568-1.568c-.001-.867.703-1.569 1.568-1.569zM63.926 9.468c.867 0 1.57.703 1.57 1.57 0 .866-.703 1.569-1.57 1.569-.865 0-1.569-.703-1.569-1.569-.001-.868.704-1.57 1.569-1.57zm0 8.078c.867 0 1.57.702 1.57 1.569 0 .866-.703 1.569-1.57 1.569-.865 0-1.569-.703-1.569-1.569-.001-.867.704-1.569 1.569-1.569zm0 7.866c.867 0 1.57.702 1.57 1.569 0 .865-.703 1.568-1.57 1.568-.865 0-1.569-.704-1.569-1.568-.001-.867.704-1.569 1.569-1.569zM59.888 9.468c.865 0 1.569.703 1.569 1.57 0 .866-.704 1.569-1.569 1.569-.867 0-1.568-.703-1.568-1.569-.001-.868.701-1.57 1.568-1.57zm0 4.039c.865 0 1.569.703 1.569 1.568 0 .867-.704 1.569-1.569 1.569-.867 0-1.568-.702-1.568-1.569-.001-.865.701-1.568 1.568-1.568zm0 4.039c.865 0 1.569.702 1.569 1.569 0 .866-.704 1.569-1.569 1.569-.867 0-1.568-.703-1.568-1.569-.001-.867.701-1.569 1.568-1.569zm0 7.866c.865 0 1.569.702 1.569 1.569 0 .865-.704 1.568-1.569 1.568-.867 0-1.568-.704-1.568-1.568-.001-.867.701-1.569 1.568-1.569zm-8.29-15.944c.867 0 1.569.703 1.569 1.57 0 .866-.702 1.569-1.569 1.569s-1.568-.703-1.568-1.569c-.001-.868.701-1.57 1.568-1.57zm0 4.039c.867 0 1.569.703 1.569 1.568 0 .867-.702 1.569-1.569 1.569s-1.568-.702-1.568-1.569c-.001-.865.701-1.568 1.568-1.568zm0 4.039c.867 0 1.569.702 1.569 1.569 0 .866-.702 1.569-1.569 1.569s-1.568-.703-1.568-1.569c-.001-.867.701-1.569 1.568-1.569zm0 3.881c.867 0 1.569.701 1.569 1.568 0 .865-.702 1.569-1.569 1.569s-1.568-.704-1.568-1.569c-.001-.867.701-1.568 1.568-1.568zm0 3.985c.867 0 1.569.702 1.569 1.569 0 .865-.702 1.568-1.569 1.568s-1.568-.704-1.568-1.568c-.001-.867.701-1.569 1.568-1.569zm-4.039-11.905c.867 0 1.568.703 1.568 1.568 0 .867-.701 1.569-1.568 1.569s-1.569-.702-1.569-1.569c0-.865.701-1.568 1.569-1.568zm-8.502-.212c.865 0 1.569.703 1.569 1.568 0 .867-.704 1.569-1.569 1.569-.867 0-1.571-.703-1.571-1.569 0-.865.703-1.568 1.571-1.568zm0 4.038c.865 0 1.569.703 1.569 1.57 0 .866-.704 1.57-1.569 1.57-.867 0-1.571-.704-1.571-1.57 0-.867.703-1.57 1.571-1.57zm-4.039-8.078c.865 0 1.568.703 1.568 1.57 0 .866-.704 1.568-1.568 1.568-.867 0-1.569-.703-1.569-1.568 0-.867.701-1.57 1.569-1.57zm0 4.04c.865 0 1.568.703 1.568 1.568 0 .867-.704 1.569-1.568 1.569-.867 0-1.569-.703-1.569-1.569 0-.865.701-1.568 1.569-1.568zm0 4.038c.865 0 1.568.703 1.568 1.57 0 .866-.704 1.57-1.568 1.57-.867 0-1.569-.704-1.569-1.57 0-.867.701-1.57 1.569-1.57zm0 4.04c.865 0 1.568.704 1.568 1.569 0 .867-.704 1.568-1.568 1.568-.867 0-1.569-.701-1.569-1.568 0-.866.701-1.569 1.569-1.569zm-4.254-8.078c.867 0 1.569.703 1.569 1.568 0 .867-.702 1.569-1.569 1.569s-1.568-.703-1.568-1.569c0-.865.701-1.568 1.568-1.568zm0 4.038c.867 0 1.569.703 1.569 1.57 0 .866-.702 1.57-1.569 1.57s-1.568-.704-1.568-1.57c0-.867.701-1.57 1.568-1.57zm0 4.04c.867 0 1.569.704 1.569 1.569 0 .867-.702 1.568-1.569 1.568s-1.568-.701-1.568-1.568c0-.866.701-1.569 1.568-1.569zm0 4.039c.867 0 1.569.702 1.569 1.569 0 .865-.702 1.568-1.569 1.568s-1.568-.704-1.568-1.568c0-.867.701-1.569 1.568-1.569zM26.3 9.255c.867 0 1.571.703 1.571 1.57 0 .866-.704 1.568-1.571 1.568-.865 0-1.569-.703-1.569-1.568 0-.867.704-1.57 1.569-1.57zm0 4.04c.867 0 1.571.703 1.571 1.568 0 .867-.704 1.569-1.571 1.569-.865 0-1.569-.703-1.569-1.569 0-.865.704-1.568 1.569-1.568zm0 4.038c.867 0 1.571.703 1.571 1.57 0 .866-.704 1.57-1.571 1.57-.865 0-1.569-.704-1.569-1.57 0-.867.704-1.57 1.569-1.57zm0 4.04c.867 0 1.571.704 1.571 1.569 0 .867-.704 1.568-1.571 1.568-.865 0-1.569-.701-1.569-1.568 0-.866.704-1.569 1.569-1.569zm-4.037-8.078c.865 0 1.569.703 1.569 1.568 0 .867-.704 1.569-1.569 1.569-.867 0-1.569-.703-1.569-1.569 0-.865.702-1.568 1.569-1.568zm0 4.038c.865 0 1.569.703 1.569 1.57 0 .866-.704 1.57-1.569 1.57-.867 0-1.569-.704-1.569-1.57 0-.867.702-1.57 1.569-1.57z"/>
</g>
</svg>
</div>
<p class="h3-title">Фитнес-браслеты</p>
</a>
</li>
<li>
<a href="">
<div class="popular-img">
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="98" viewBox="0 0 56 98">
<g fill="#363636">
<path d="M54.494 32.197h-1.515v-4.64c0-5.052-4.087-9.186-9.082-9.186H9.082C4.086 18.372 0 22.505 0 27.557v42.868c0 5.052 4.087 9.185 9.083 9.185h34.815c4.995 0 9.082-4.133 9.082-9.185V67.01h1.515a.764.764 0 0 0 .757-.764V52.467a.765.765 0 0 0-.757-.766H52.98v-8.788h1.515c.832 0 1.514-.688 1.514-1.531v-7.654a1.529 1.529 0 0 0-1.515-1.531zm-20.412-3.109c2.926 0 5.299 2.398 5.299 5.358s-2.373 5.358-5.299 5.358-5.298-2.398-5.298-5.358 2.372-5.358 5.298-5.358zm-15.137 0c2.925 0 5.298 2.398 5.298 5.358s-2.373 5.358-5.298 5.358c-2.926 0-5.298-2.398-5.298-5.358s2.372-5.358 5.298-5.358zM5.297 49.397c0-2.959 2.371-5.358 5.298-5.358 2.926 0 5.298 2.399 5.298 5.358 0 2.959-2.373 5.358-5.298 5.358-2.927.001-5.298-2.399-5.298-5.358zm13.648 19.497c-2.926 0-5.298-2.398-5.298-5.358s2.372-5.358 5.298-5.358c2.925 0 5.298 2.398 5.298 5.358s-2.373 5.358-5.298 5.358zm1.49-19.903c0-3.382 2.711-6.124 6.055-6.124s6.055 2.742 6.055 6.124-2.711 6.124-6.055 6.124c-3.344-.001-6.055-2.742-6.055-6.124zm13.647 19.903c-2.926 0-5.298-2.398-5.298-5.358s2.372-5.358 5.298-5.358 5.299 2.398 5.299 5.358-2.373 5.358-5.299 5.358zm8.302-14.138c-2.927 0-5.298-2.399-5.298-5.358 0-2.959 2.371-5.358 5.298-5.358 2.926 0 5.298 2.399 5.298 5.358 0 2.958-2.372 5.358-5.298 5.358zM9.646 15.31h33.687c.843 0 1.432-.681 1.306-1.514L43.023 3.028l-.002-.002C42.771 1.362 41.189 0 39.506 0H13.474c-1.686 0-3.268 1.362-3.517 3.028L8.342 13.795c-.125.833.461 1.515 1.304 1.515zM43.333 82.671H9.646c-.843 0-1.429.683-1.304 1.516l1.615 10.767c.25 1.666 1.832 3.028 3.516 3.028h26.032c1.684 0 3.266-1.362 3.517-3.026v-.002l1.615-10.767c.128-.833-.461-1.516-1.304-1.516z"/>
</g>
</svg>
</div>
<p class="h3-title">Умные часы</p>
</a>
</li>
<li>
<a href="">
<div class="popular-img">
<svg xmlns="http://www.w3.org/2000/svg" width="132" height="69" viewBox="0 0 132 69">
<g fill="#363636">
<path d="M12.052.258C6.507.745 1.838 1.85.575 2.93c-.722.616-.722.616-.232 1.156.644.72 3.713 1.645 7.247 2.237 3.998.668 12.51.693 13.724.051 1.211-.668 1.624-1.414 1.624-2.981 0-1.619-.62-2.416-2.218-2.853C19.274.154 14.94 0 12.052.258zM25.774.488c-.129.283-.258 2.108-.258 4.112 0 4.061.155 3.778-2.192 3.933l-1.03.077-.13 2.545-.129 2.544-1.186.283c-2.58.668-4 2.595-3.792 5.294.128 1.927 1.03 3.341 2.579 4.087 1.109.513 1.47.538 11.246.538 5.545 0 10.137.079 10.188.18.051.13-1.11 9.408-2.58 20.64-1.444 11.23-2.682 20.997-2.708 21.666-.051 1.617.826 2.62 2.348 2.62 1.237 0 2.012-.64 2.321-1.9.13-.514 1.496-10.334 3.018-21.822 1.522-11.463 2.863-20.869 2.94-20.869.104 0 1.084 1.413 2.193 3.136 2.94 4.626 2.399 4.317 7.635 4.317h4.359v5.63l-5.133.077c-4.72.077-5.21.127-5.881.615-1.573 1.157-1.625 1.415-1.625 10.977 0 9.534.026 9.792 1.522 11.05l.851.695H81.695l.851-.696c1.496-1.257 1.52-1.515 1.52-11.05 0-9.56-.05-9.819-1.622-10.976-.671-.488-1.161-.538-5.882-.615l-5.132-.077v-5.63h4.36c5.234 0 4.693.309 7.633-4.317 1.11-1.723 2.09-3.136 2.194-3.136.076 0 1.418 9.406 2.94 20.869 1.522 11.488 2.889 21.308 3.018 21.821.31 1.26 1.082 1.902 2.321 1.902 1.521 0 2.4-1.004 2.347-2.621-.026-.67-1.264-10.436-2.71-21.666-1.468-11.232-2.63-20.51-2.577-20.64.05-.101 4.641-.18 10.19-.18 9.774 0 10.135-.025 11.243-.538 1.548-.746 2.45-2.16 2.58-4.087.206-2.699-1.212-4.626-3.792-5.294l-1.187-.283-.127-2.544-.13-2.545-1.031-.077c-2.347-.155-2.194.128-2.194-3.933 0-2.004-.128-3.829-.257-4.112-.206-.36-.543-.488-1.367-.488-.619 0-1.238.128-1.42.309-.206.205-.31 1.465-.31 3.932 0 2.467-.102 3.727-.309 3.932-.18.18-.901.308-1.65.308-1.625 0-1.65.052-1.65 3.11v2.287H32.48v-2.287c0-3.058-.024-3.11-1.65-3.11-.748 0-1.47-.129-1.65-.308-.207-.205-.31-1.465-.31-3.932 0-2.467-.103-3.727-.31-3.932-.18-.18-.8-.309-1.418-.309-.825 0-1.16.128-1.368.488zm42.843 40.12c2.889.899 5.392 3.393 6.166 6.168.439 1.543.31 4.216-.284 5.784-.696 1.875-2.685 4.01-4.565 4.935-1.29.642-1.754.719-3.921.719s-2.631-.077-3.92-.719c-1.885-.926-3.87-3.06-4.567-4.935-.592-1.568-.722-4.24-.283-5.784.748-2.723 3.25-5.27 6.061-6.168 2.012-.642 3.3-.642 5.313 0z"/>
<path d="M63.794 44.438c-2.037.925-3.507 3.649-3.069 5.73.774 3.677 4.823 5.553 7.996 3.702 1.985-1.158 2.99-3.547 2.45-5.783-.568-2.39-2.734-4.138-5.158-4.138-.646 0-1.626.232-2.22.489zM36.092.154c-3.92.668-4.513 1.131-4.513 3.444 0 1.825.463 2.416 2.268 2.956 1.55.462 7.172.514 10.5.128 6.86-.822 11.321-2.544 9.698-3.752-1.265-.9-4.902-1.876-9.054-2.39-2.475-.308-7.996-.54-8.9-.386zM89.484.258C83.165.848 77.62 2.339 77.62 3.444c0 1.722 7.84 3.47 15.63 3.495 5.804 0 7.196-.642 7.196-3.34 0-1.825-.619-2.622-2.373-3.085C96.423.103 92.398 0 89.484.258zM112.776.283c-1.78.231-3.018.77-3.43 1.491-.387.77-.31 2.904.154 3.572.928 1.31 1.652 1.465 7.068 1.465 3.661 0 5.802-.129 7.867-.488 3.534-.592 6.603-1.517 7.248-2.237.49-.54.49-.54-.233-1.156-1.34-1.13-5.958-2.185-11.916-2.672-3.481-.283-4.488-.283-6.758.025z"/>
</g>
</svg>
</div>
<p class="h3-title">Квадрокоптеры</p>
</a>
</li>
</ul>
</section>
</div>
<div class="services-block bg-gray">
<div class="container reset-padding">
<section class="row services">
<div class="services-tabs">
<a href="" class="tab button active">Доставка</a>
<a href="" class="tab button">Гарантия</a>
<a href="" class="tab button">Кредит</a>
</div>
<div class="tab-content content-show">
<div class="tab-text">
<h2 class="h1-title">Доставка</h2>
<p>Мы с удовольствием доставим ваш товар прямо к вашему подъезду совершенно бесплатно! Ведь мы неплохо
заработаем, поднимая его на ваш этаж.</p>
</div>
<img src="img/delivery.svg" alt="Иллюстрация. Курьер несет посылку." width="136" height="164">
</div>
<div class="tab-content">
<div class="tab-text">
<h2 class="h1-title">Гарантия</h2>
<p>Если из-за возгорания купленного у нас товара у вас сгорит дом — не переживайте, мы выдадим вам новый.
Товар, не дом, конечно же.</p>
</div>
<img src="img/warranty.png" alt="Иллюстрация. Техподдержка по телефону." width="171" height="194">
</div>
<div class="tab-content">
<div class="tab-text">
<h2 class="h1-title">Кредит</h2>
<p>Залезть в долговую яму стало проще! Кредитные консультанты подберут для вас наиболее выгодные
условия кредита. Выгодные для нашего банка, разумеется.</p>
</div>
<img src="img/credit.png" alt="Иллюстрация. Человек тащит на спине кредитную карту." width="156" height="186">
</div>
</section>
</div>
</div>
<div class="container reset-padding">
<section class="row partners">
<h2 class="visually-hidden">Партнеры</h2>
<a href="" class="partners-logo logo-1">
<img src="img/logo-1.jpg" alt="Логотип компании DJI" width="260" height="100">
</a>
<a href="" class="partners-logo logo-3">
<img src="img/logo-3.jpg" alt="Логотип компании SP Gadjet" width="260" height="100">
</a>
<a href="" class="partners-logo logo-2">
<img src="img/logo-2.jpg" alt="Логотип компании Go Pro" width="260" height="100">
</a>
<a href="" class="partners-logo logo-4">
<img src="img/logo-4.jpg" alt="Логотип компании Vive" width="260" height="100">
</a>
</section>
<div class="row justify-between about-company">
<section class="about">
<h2 class="h1-title">О нас</h2>
<p>Огромный выбор гаджетов не оставит равнодушным гика,<br> который есть в каждом из нас.</p>
<p>Мы можем доставить ваш товар в самые отдаленные точки<br>России! DEVICE работает со многими
транспортными компаниями:
</p>
<ul class="partners-list">
<li class="h4-title">Деловые Линии</li>
<li class="h4-title">Автотрейдинг</li>
<li class="h4-title">ЖелДорЭкспедиция</li>
</ul>
<a class="button" href="">Подробнее о нас</a>
</section>
<section class="contacts">
<h2 class="h1-title">Контакты</h2>
<p>Вы можете забрать товар сами, заехав в наш офис. Заодно, вы сможете проверить
работоспособность покупки. Всякое бывает.</p>
<a href="">
<img src="img/map.jpg" class="preview-map" alt="город Москва, улица Строителей, 15" width="560"
height="222">
</a>
<a href="" class="button contact-btn">Напишите нам</a>
</section>
</div>
</div>
<form class="visually-hidden" action="https://echo.htmlacademy.ru" method="post" tabindex="0">
<button type="button">Закрыть</button>
<label for="user-name">
Ваше имя:
<input type="text" id="user-name" name="user-name" placeholder="Имя Фамилия">
</label>
<label for="e-mail-1">
Ваш e-mail:
<input type="email" id="e-mail-1" name="e-mail" placeholder="[email protected]">
</label>
<label for="message">
Текст письма:
<textarea name="message" id="message" cols="30" rows="10" placeholder="В свободной форме">
</textarea>
</label>
<button class="button" type="submit">Отправить</button>
</form>
<div class="visually-hidden">
<button type="button">Закрыть</button>
<img class="contacts-img" src="img/map-big.jpg" alt="город Москва, улица Строителей, 15" width="960"
height="559">
</div>
</main>
<footer class="footer bg-dark">
<div class="container reset-padding">
<div class="row justify-between">
<a href="index.html">
<img src="img/logo-device-y.svg" alt="Логотип Device" width="163" height="35">
</a>
<div class="row user-actions footer-actions">
<div class="authorization">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" fill="#f0c52e" viewBox="0 0 13 12">
<path d="M.032 12h12.937c-.163-2.643-2.074-4.837-4.671-5.543a3.47 3.47 0 0 0 1.687-2.972 3.485 3.485 0 0 0-6.97 0c0 1.264.68 2.361 1.688 2.972C2.106 7.163.194 9.357.032 12z"/>
</svg>
<a href="">Войти</a>
</span>
</div>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="#f0c52e" viewBox="0 0 10 10">
<path d="M8 2h1.984v8H8zM0 3h1.984v7H0zM4 0h2v10H4z"/>
</svg>
<a href="">Сравнить</a>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#f0c52e" viewBox="0 0 12 12">
<path d="M11.864 3.017a.429.429 0 0 0-.327-.154H9.225V4.09c0 .563-.484 1.022-1.08 1.022-.594 0-1.078-.458-1.078-1.022V2.863H4.909V4.09c0 .563-.485 1.022-1.08 1.022-.595 0-1.078-.458-1.078-1.022V2.863H.438a.43.43 0 0 0-.327.154.472.472 0 0 0-.108.358l.776 7.134c.015.806.642 1.455 1.411 1.455h7.595c.77 0 1.396-.649 1.411-1.455l.776-7.134a.476.476 0 0 0-.108-.358z"/>
<path d="M3.829 4.499c.239 0 .433-.184.433-.409V1.84c0-.632.672-1.022 1.295-1.022h1.079c.655 0 1.078.401 1.078 1.022v2.25c0 .225.194.409.431.409.239 0 .433-.184.433-.409V1.84C8.577.773 7.761 0 6.636 0H5.557c-1.19 0-2.159.826-2.159 1.84v2.25c0 .225.194.409.431.409z"/>
</svg>
<a href="">Корзина</a>
</span>
</div>
</div>
<div class="row justify-between">
<p class="footer-adress">г. Москва, ул. Строителей, 15</p>
<ul class="main-menu">
<li class="menu-item h2-title"><a href="#">Доставка</a></li>
<li class="menu-item h2-title"><a href="#">Гарантия</a></li>
<li class="menu-item h2-title"><a href="#">Контакты</a></li>
</ul>
<p class="footer-phone">Тел.: <a href="tel:+74954959595">+7 (495) 495-95-95</a></p>
</div>
<div class="row justify-between">
<div class="brick yellow"></div>
<ul class="footer-social-media">
<li>
<a href="#" aria-label="Facebook">
<img src="img/fb.svg" alt="Наша группа в Фейсбук" width="32" height="32">
</a>
</li>
<li>
<a href="#" aria-label="Instagram">
<img src="img/instagram.svg" alt="Мы в Инстаграм" width="32" height="32">
</a>
</li>
<li>
<a href="#" aria-label="Twitter">
<img src="img/twitter.svg" alt="Наш Твиттер" width="32" height="32">
</a>
</li>
</ul>
<a href="https://htmlacademy.ru/intensive/htmlcss" class="footer-html-icon">
<img src="img/logo-html.svg" aria-label="Htmlacademy" alt="Сделано в htmlacademy" width="27" height="35">
</a>
</div>
</div>
</footer>
<div id="contact-form" class="modal">
<div class="modal-close" id="form-close"></div>
<form method="post" action="https://echo.htmlacademy.ru">
<div class="row justify-between">
<div class="field">
<label for="name">Ваше имя</label>
<input type="text" name="name" id="name" placeholder="Имя Фамилия">
</div>
<div class="field">
<label for="e-mail-2">Ваш e-mail</label>
<input type="email" id="e-mail-2" name="email" placeholder="[email protected]">
</div>
</div>
<div class="row field">
<label for="mail">Текст письма</label>
<textarea name="text" id="mail" cols="30" rows="5"></textarea>
</div>
<button type="submit" class="button">Отправить</button>
</form>
</div>
<div class="modal map" id="map-form">
<div class="modal-close" id="map-close"></div>
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2249.1125488779976!2d37.52742931592807!3d55.687030980535816!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54cf65f5c8955%3A0x694710ccd55501e!2z0YPQuy4g0KHRgtGA0L7QuNGC0LXQu9C10LksIDE1LCDQnNC-0YHQutCy0LAsIDExOTMxMQ!5e0!3m2!1sru!2sru!4v1572808113895!5m2!1sru!2sru" style="border:0;" allowfullscreen=""></iframe>
</div>
<script src="js/modal.min.js"></script>
</body>
</html>