-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
546 lines (541 loc) · 38.4 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
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="кофе, кофеин, напиток, свежесваренный">
<meta name="description" content="Сбалансированная доза кофеина даст мощный заряд энергии">
<link rel="icon" href="./favicon.ico">
<link rel="icon" href="./img/favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="./img/favicons/apple.png">
<link rel="manifest" href="./manifest.webmanifest">
<link rel="preload" href="./fonts/montserrat-regular.woff2" type="font/woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="./fonts/montserrat-medium.woff2" type="font/woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="./fonts/montserrat-semibold.woff2" type="font/woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="./fonts/montserrat-bold.woff2" type="font/woff2" as="font" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/nouislider.min.css">
<link rel="stylesheet" href="./css/style.css">
<title>Интернет магазин: Drink2Go</title>
</head>
<body class="page__body">
<header class="header">
<div class="header__wrapper">
<div class="header__logo-container">
<a class="header__logo-link" href="index.html">
<picture>
<source media="(min-width: 1440px)" srcset="./img/logo/logo-desktop.svg" width="170" height="36">
<source media="(min-width: 768px)" srcset="./img/logo/logo-tablet.svg" width="82" height="36">
<img class="header__logo-image" src="./img/logo/logo-mobile.svg" width="32" height="36" alt="Логотип сайта Drink2Go.">
</picture>
</a>
<p class="header__text">Интернет-магазин кофейных напитков</p>
</div>
<nav class="header__nav nav nav--closed nav--nojs">
<ul class="nav__list site-list">
<li class="site-list__item">
<a class="site-list__link site-list__link--current" href="#!">Главная</a>
</li>
<li class="site-list__item">
<a class="site-list__link" href="#!">Каталог</a>
</li>
<li class="site-list__item">
<a class="site-list__link" href="#!">Доставка</a>
</li>
<li class="site-list__item">
<a class="site-list__link" href="#!">О нас </a>
</li>
</ul>
</nav>
<ul class="header__list user-list user-list--nojs">
<li class="user-list__item">
<a class="user-list__link" href="#!">
<svg class="user-list__icon user-list__icon--user" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6667 4C10.6667 5.47276 9.47276 6.66667 8 6.66667C6.52724 6.66667 5.33333 5.47276 5.33333 4C5.33333 2.52724 6.52724 1.33333 8 1.33333C9.47276 1.33333 10.6667 2.52724 10.6667 4ZM12 4C12 6.20914 10.2091 8 8 8C5.79086 8 4 6.20914 4 4C4 1.79086 5.79086 0 8 0C10.2091 0 12 1.79086 12 4ZM3.19673 12.3102C4.43611 11.2774 6.1613 10.6667 8 10.6667C9.8387 10.6667 11.5639 11.2774 12.8033 12.3102C14.0354 13.337 14.6667 14.6719 14.6667 16H16C16 14.2321 15.1573 12.5363 13.6569 11.286C12.1566 10.0357 10.1218 9.33333 8 9.33333C5.87821 9.33333 3.8434 10.0357 2.34315 11.286C0.842686 12.5363 0 14.2321 0 16L1.33333 16C1.33333 14.6719 1.96465 13.337 3.19673 12.3102Z" />
</svg>
<span class="user-list__text">Войти</span>
</a>
</li>
<li class="user-list__item">
<a class="user-list__link" href="#!">
<svg class="user-list__icon user-list__icon--cart" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.66091 3.87546L5.89351 6.66667H10.1065L10.3391 3.87546C10.4531 2.50699 9.37321 1.33333 8 1.33333C6.62679 1.33333 5.54687 2.50699 5.66091 3.87546ZM11.4444 6.66667L11.6678 3.98618C11.8466 1.84036 10.1533 0 8 0C5.84674 0 4.15336 1.84036 4.33218 3.98618L4.55556 6.66667H1.34687H0L0.190476 8L1.00626 13.7105C1.19393 15.0242 2.31905 16 3.64612 16H12.3539C13.6809 16 14.8061 15.0242 14.9937 13.7105L15.8095 8L16 6.66667H14.6531H11.4444ZM11.3333 8H11.2801L11.0579 10.6667H14.0817L14.4627 8H11.3333ZM9.94213 8H6.05787L6.28009 10.6667H9.71991L9.94213 8ZM4.71991 8H4.66667H1.53735L1.9183 10.6667H4.94213L4.71991 8ZM6.61342 14.6667L6.3912 12H9.6088L9.38658 14.6667H6.61342ZM10.9468 12L10.7245 14.6667H12.3539C13.0174 14.6667 13.58 14.1788 13.6738 13.5219L13.8912 12H10.9468ZM5.05324 12L5.27547 14.6667H3.64612C2.98259 14.6667 2.42003 14.1788 2.32619 13.5219L2.10877 12H5.05324Z" />
</svg>
<span class="user-list__text">Корзина</span>
</a>
</li>
<li class="user-list__item user-list__item--button">
<button class="user-list__toggle toggle toggle--closed" type="button">
<span class="visually-hidden">Открыть меню.</span>
</button>
</li>
</ul>
</div>
</header>
<main class="main-container">
<h1 class="visually-hidden">Интернет магазин: Drink2Go.</h1>
<section class="promo">
<h2 class="visually-hidden">Новые товары.</h2>
<div class="slider swiper">
<ul class="slider__list swiper-wrapper">
<li class="slider__item slider__item--decaf swiper-slide">
<div class="slider__item-wrapper">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="./img/new/[email protected], ./img/new/[email protected] 2x" width="280" height="280">
<source media="(min-width: 1440px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="600" height="600">
<source media="(min-width: 768px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="./img/new/[email protected]" srcset="./img/new/[email protected] 2x" width="280" height="280" alt="Банка бежевого цвета с кофе.">
</picture>
<div class="slider__info-container">
<span class="slider__badge badge">Новинка!</span>
<h3 class="slider__header">Декаф Флэт Уайт</h3>
<p class="slider__text">Свежесваренный кофе без кофеина из Эфиопии с натуральным фермерским молоком — то, что нужно для расслабления после тяжёлого рабочего дня</p>
<div class="slider__buttom-container">
<div class="slider__price-container">
<del class="slider__old-price">295₽</del>
<b class="slider__price">225₽</b>
</div>
<a class="slider__button button" href="#!">Заказать</a>
</div>
</div>
</div>
</li>
<li class="slider__item slider__item--latte swiper-slide">
<div class="slider__item-wrapper">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="./img/new/[email protected], ./img/new/[email protected] 2x" width="280" height="280">
<source media="(min-width: 1440px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="600" height="600">
<source media="(min-width: 768px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="./img/new/[email protected]" srcset="./img/new/[email protected] 2x" width="280" height="280" alt="Банка фиолетового цвета с кофе.">
</picture>
<div class="slider__info-container">
<span class="slider__badge badge">Новинка!</span>
<h3 class="slider__header">Лавандовый Латте</h3>
<p class="slider__text">Невероятное сочетание перуанской высокогорной арабики с молоком ламы и лавандовым сиропом унесёт вас прямо на вершину Радужных гор</p>
<div class="slider__buttom-container">
<div class="slider__price-container">
<del class="slider__old-price">285₽</del>
<b class="slider__price">265₽</b>
</div>
<a class="slider__button button" href="#!">Заказать</a>
</div>
</div>
</div>
</li>
<li class="slider__item slider__item--triple swiper-slide">
<div class="slider__item-wrapper">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="600" height="600">
<source type="image/webp" media="(min-width: 768px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="476" height="476">
<source type="image/webp" srcset="./img/new/[email protected], ./img/new/[email protected] 2x" width="280" height="280">
<source media="(min-width: 1440px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="600" height="600">
<source media="(min-width: 768px)" srcset="./img/new/[email protected] 1x, ./img/new/[email protected] 2x" width="476" height="476">
<img class="slider__image" src="./img/new/[email protected]" srcset="./img/new/[email protected] 2x" width="280" height="280" alt="Банка черного цвета с кофе.">
</picture>
<div class="slider__info-container">
<span class="slider__badge badge">Новинка!</span>
<h3 class="slider__header">Тройной Эспрессо</h3>
<p class="slider__text">Мощнее укола адреналина, чернее самой тёмной ночи, этот тройной эспрессо из Колумбии покажет вам, что такое настоящая бодрость</p>
<div class="slider__buttom-container">
<div class="slider__price-container">
<del class="slider__old-price">395₽</del>
<b class="slider__price">375₽</b>
</div>
<a class="slider__button button" href="#!">Заказать</a>
</div>
</div>
</div>
</li>
</ul>
<div class="slider__slider-button slider-button slider-button--prev swiper-button-prev"></div>
<div class="slider__slider-button slider-button slider-button--next swiper-button-next"></div>
<div class="slider__slider-pagination slider-pagination swiper-pagination"></div>
</div>
</section>
<section class="features">
<div class="features__wrapper">
<h2 class="features__title title">Главные причины выбрать Drink2Go</h2>
<span class="features__badge badge">Преимущества</span>
<ul class="features__list">
<li class="features__item features__item--speed">
<h3 class="features__header">Скорость</h3>
<p class="features__text">Готовый напиток всегда под рукой — просто открой банку</p>
</li>
<li class="features__item features__item--fit">
<h3 class="features__header">Удобство</h3>
<p class="features__text">Легко помещается и в карман,
и в маленькую сумочку</p>
</li>
<li class="features__item features__item--energy">
<h3 class="features__header">Бодрость</h3>
<p class="features__text">Сбалансированная доза кофеина даст мощный заряд энергии</p>
</li>
<li class="features__item features__item--ecology">
<h3 class="features__header">Экологичность</h3>
<p class="features__text">Вся упаковка сделана из перерабатываемых материалов</p>
</li>
</ul>
</div>
</section>
<section class="catalog">
<div class="catalog__wrapper">
<div class="catalog__text-container">
<h2 class="catalog__title title">Каталог кофейных напитков</h2>
<span class="catalog__badge badge">Каталог</span>
</div>
<form class="catalog__form form" method="get" action="https://echo.htmlacademy.ru/">
<fieldset class="form__group">
<legend class="form__heading">Цена</legend>
<div class="form__range range-slider"></div>
<div class="form__number number">
<label class="visually-hidden" for="min-price">Минимальная цена.</label>
<input class="number__input" type="number" value="0" name="min-price" id="min-price" placeholder="0">
<label class="visually-hidden" for="max-price">Максимальная цена.</label>
<input class="number__input" type="number" value="900" name="max-price" id="max-price" placeholder="1000">
</div>
</fieldset>
<fieldset class="form__group form__group--milk">
<legend class="form__heading">Наличие молока</legend>
<ul class="form__list">
<li class="form__item radio">
<input class="radio__input visually-hidden" type="radio" id="no-matter" name="milk" value="no-matter" checked>
<label class="radio__label" for="no-matter">Неважно</label>
</li>
<li class="form__item radio">
<input class="radio__input visually-hidden" type="radio" id="animal" name="milk" value="animal">
<label class="radio__label" for="animal">Только животное</label>
</li>
<li class="form__item radio">
<input class="radio__input visually-hidden" type="radio" id="vegetable" name="milk" value="vegetable">
<label class="radio__label" for="vegetable">Только растительное</label>
</li>
<li class="form__item radio">
<input class="radio__input visually-hidden" type="radio" id="no-milk" name="milk" value="no-milk" disabled>
<label class="radio__label" for="no-milk">Без молока</label>
</li>
</ul>
</fieldset>
<fieldset class="form__group form__group--country">
<legend class="form__heading">Страна произрастания</legend>
<ul class="form__list">
<li class="form__item checkbox">
<input class="checkbox__input visually-hidden" type="checkbox" id="brazil" name="country" value="brazil" checked>
<label class="checkbox__label" for="brazil">Бразилия</label>
</li>
<li class="form__item checkbox">
<input class="checkbox__input visually-hidden" type="checkbox" id="ethiopia" name="country" value="ethiopia">
<label class="checkbox__label" for="ethiopia">Эфиопия</label>
</li>
<li class="form__item checkbox">
<input class="checkbox__input visually-hidden" type="checkbox" id="colombia" name="country" value="colombia">
<label class="checkbox__label" for="colombia">Колумбия</label>
</li>
<li class="form__item checkbox">
<input class="checkbox__input visually-hidden" type="checkbox" id="costa" name="country" value="costa-rica">
<label class="checkbox__label" for="costa">Коста-Рика</label>
</li>
<li class="form__item checkbox">
<input class="checkbox__input visually-hidden" type="checkbox" id="peru" name="country" value="peru" disabled>
<label class="checkbox__label" for="peru">Перу</label>
</li>
</ul>
</fieldset>
<div class="form__button-container">
<button class="form__button button" type="submit">Применить</button>
<button class="form__button button button--reset" type="reset">Сбросить</button>
</div>
</form>
<div class="catalog__products products">
<fieldset class="products__group-select">
<label class="products__label" for="sorting">Сортировка:</label>
<select class="products__select" name="sorting" id="sorting">
<option class="products__option" value="default">по умолчанию</option>
<option class="products__option" value="ascending">по возрастанию</option>
<option class="products__option" value="descending">по убыванию</option>
</select>
</fieldset>
<ol class="products__list">
<li class="products__item">
<a class="products__link products__link--image" href="#!">
<picture>
<source type="image/webp" srcset="./img/products/[email protected], ./img/products/[email protected] 2x" width="130" height="188">
<img class="products__image" src="./img/products/[email protected]" srcset="./img/products/[email protected] 2x" width="130" height="188" alt="Банка бежевого цвета с кофе.">
</picture>
</a>
<a class="products__link" href="#!">
<h3 class="products__header">Декаф Флэт Уайт</h3>
</a>
<p class="products__text">Кофе без кофеина из Эфиопии
с натуральным фермерским молоком</p>
<div class="products__buttom-conainer">
<b class="products__price">225₽</b>
<button class="products__button button button--cart" type="button">
<svg class="button__icon" width="20" height="16" aria-hidden="true" focusable="false">
<use xlink:href="./img/icons/stack.svg#icon-cart-add" />
</svg>
В корзину
</button>
</div>
</li>
<li class="products__item">
<a class="products__link products__link--image" href="#!">
<picture>
<source type="image/webp" srcset="./img/products/[email protected], ./img/products/[email protected] 2x" width="130" height="188">
<img class="products__image" src="./img/products/[email protected]" srcset="./img/products/[email protected] 2x" width="130" height="188" alt="Банка фиолетового цвета с кофе.">
</picture>
</a>
<a class="products__link" href="#!">
<h3 class="products__header">Декаф Флэт Уайт</h3>
</a>
<p class="products__text">Кофе без кофеина из Эфиопии
с натуральным фермерским молоком</p>
<div class="products__buttom-conainer">
<b class="products__price">225₽</b>
<button class="products__button button button--cart" type="button">
<svg class="button__icon" width="20" height="16" aria-hidden="true" focusable="false">
<use xlink:href="./img/icons/stack.svg#icon-cart-add" />
</svg>
В корзину
</button>
</div>
</li>
<li class="products__item">
<a class="products__link products__link--image" href="#!">
<picture>
<source type="image/webp" srcset="./img/products/[email protected], ./img/products/[email protected] 2x" width="130" height="188">
<img class="products__image" src="./img/products/[email protected]" srcset="./img/products/[email protected] 2x" width="130" height="188" alt="Банка черного цвета с кофе.">
</picture>
</a>
<a class="products__link" href="#!">
<h3 class="products__header">Декаф Флэт Уайт</h3>
</a>
<p class="products__text">Кофе без кофеина из Эфиопии
с натуральным фермерским молоком</p>
<div class="products__buttom-conainer">
<b class="products__price">225₽</b>
<button class="products__button button button--cart" type="button">
<svg class="button__icon" width="20" height="16" aria-hidden="true" focusable="false">
<use xlink:href="./img/icons/stack.svg#icon-cart-add" />
</svg>
В корзину
</button>
</div>
</li>
<li class="products__item">
<a class="products__link products__link--image" href="#!">
<picture>
<source type="image/webp" srcset="./img/products/[email protected], ./img/products/[email protected] 2x" width="130" height="188">
<img class="products__image" src="./img/products/[email protected]" srcset="./img/products/[email protected] 2x" width="130" height="188" alt="Банка малинового цвета с кофе.">
</picture>
</a>
<a class="products__link" href="#!">
<h3 class="products__header">Декаф Флэт Уайт</h3>
</a>
<p class="products__text">Кофе без кофеина из Эфиопии
с натуральным фермерским молоком</p>
<div class="products__buttom-conainer">
<b class="products__price">225₽</b>
<button class="products__button button button--cart" type="button">
<svg class="button__icon" width="20" height="16" aria-hidden="true" focusable="false">
<use xlink:href="./img/icons/stack.svg#icon-cart-add" />
</svg>
В корзину
</button>
</div>
</li>
<li class="products__item">
<a class="products__link products__link--image" href="#!">
<picture>
<source type="image/webp" srcset="./img/products/[email protected], ./img/products/[email protected] 2x" width="130" height="188">
<img class="products__image" src="./img/products/[email protected]" srcset="./img/products/[email protected] 2x" width="130" height="188" alt="Банка коричневого цвета с кофе.">
</picture>
</a>
<a class="products__link" href="#!">
<h3 class="products__header">Декаф Флэт Уайт</h3>
</a>
<p class="products__text">Кофе без кофеина из Эфиопии
с натуральным фермерским молоком</p>
<div class="products__buttom-conainer">
<b class="products__price">225₽</b>
<button class="products__button button button--cart" type="button">
<svg class="button__icon" width="20" height="16" aria-hidden="true" focusable="false">
<use xlink:href="./img/icons/stack.svg#icon-cart-add" />
</svg>
В корзину
</button>
</div>
</li>
<li class="products__item">
<a class="products__link products__link--image" href="#!">
<picture>
<source type="image/webp" srcset="./img/products/[email protected], ./img/products/[email protected] 2x" width="130" height="188">
<img class="products__image" src="./img/products/[email protected]" srcset="./img/products/[email protected] 2x" width="130" height="188" alt="Банка светло-коричневого цвета с кофе.">
</picture>
</a>
<a class="products__link" href="#!">
<h3 class="products__header">Декаф Флэт Уайт</h3>
</a>
<p class="products__text">Кофе без кофеина из Эфиопии
с натуральным фермерским молоком</p>
<div class="products__buttom-conainer">
<b class="products__price">225₽</b>
<button class="products__button button button--cart" type="button">
<svg class="button__icon" width="20" height="16" aria-hidden="true" focusable="false">
<use xlink:href="./img/icons/stack.svg#icon-cart-add" />
</svg>
В корзину
</button>
</div>
</li>
</ol>
<ul class="products__pagination pagination">
<li class="pagination__item">
<a class="pagination__link pagination__link--text" href="#!">
<svg class="pagination__icon" width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.80847 -5.20835e-08L6 1.23899L2.38306 5L6 8.76101L4.80847 10L-1.09891e-07 5L4.80847 -5.20835e-08Z" />
</svg>
<span class="pagination__text">Назад</span>
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#!">1</a>
</li>
<li class="pagination__item">
<a class="pagination__link pagination__link--current">2</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#!">3</a>
</li>
<li class="pagination__item">
<a class="pagination__link pagination__link--text" href="#!">
<span class="pagination__text">Вперёд</span>
<svg class="pagination__icon" width="6" height="10" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.19153 -5.20835e-08L5.41581e-08 1.23899L3.61694 5L3.82956e-07 8.76101L1.19153 10L6 5L1.19153 -5.20835e-08Z" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="map">
<h2 class="visually-hidden">Карта.</h2>
<div class="map__wrapper" id="map">
<picture>
<source type="image/webp" media="(min-width: 1440px)" srcset="./img/map/[email protected] 1x, ./img/map/[email protected] 2x" width="1440" height="540">
<source type="image/webp" media="(min-width: 768px)" srcset="./img/map/[email protected] 1x, ./img/map/[email protected] 2x" width="768" height="480">
<source type="image/webp" srcset="./img/map/[email protected] 1x, ./img/map/[email protected] 2x" width="320" height="420">
<source media="(min-width: 1440px)" srcset="./img/map/[email protected] 1x, ./img/map/[email protected] 2x" width="1440" height="540">
<source media="(min-width: 768px)" srcset="./img/map/[email protected] 1x, ./img/map/[email protected] 2x" width="768" height="480">
<img class="map__map-image" src="./img/map/[email protected]" srcset="./img/map/[email protected] 2x" width="320" height="420" alt="Ардес магазина по адресу г. Санкт-Петербург, набережная реки Карповки, дом 5.">
</picture>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__wrapper">
<div class="footer__header-container">
<a class="footer__logo" href="index.html">
<picture>
<source media="(min-width: 768px)" srcset="./img/logo/logo-desktop.svg" width="170" height="36">
<img class="footer__logo-image" src="./img/logo/logo-tablet.svg" width="82" height="36" alt="Логотип сайта Drink2Go.">
</picture>
</a>
<span class="footer__text">Интернет-магазин кофейных напитков</span>
<section class="footer__social social">
<h2 class="visually-hidden">Социальные сети.</h2>
<ul class="social__list">
<li class="social__item">
<a class="social__link" href="#!" target="_blank">
<svg class="social__icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.40589 1.40589C0 2.81177 0 5.0745 0 9.6V10.4C0 14.9255 0 17.1882 1.40589 18.5941C2.81177 20 5.0745 20 9.6 20H10.4C14.9255 20 17.1882 20 18.5941 18.5941C20 17.1882 20 14.9255 20 10.4V9.6C20 5.0745 20 2.81177 18.5941 1.40589C17.1882 0 14.9255 0 10.4 0H9.6C5.0745 0 2.81177 0 1.40589 1.40589ZM3.37505 6.08337C3.48338 11.2834 6.08337 14.4084 10.6417 14.4084H10.9001V11.4334C12.5751 11.6 13.8417 12.825 14.35 14.4084H16.7167C16.0667 12.0417 14.3583 10.7334 13.2916 10.2334C14.3583 9.61671 15.8583 8.11671 16.2166 6.08337H14.0666C13.5999 7.73337 12.2168 9.23337 10.9001 9.37504V6.08337H8.75V11.85C7.41667 11.5167 5.73338 9.90004 5.65837 6.08337H3.37505Z" />
</svg>
<span class="visually-hidden">Вконтакте.</span>
</a>
</li>
<li class="social__item">
<a class="social__link social__link--pinterest" href="#!" target="_blank">
<svg class="social__icon" width="22" height="22" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M11 8.96454e-05C4.92488 8.96454e-05 0 4.92497 0 11C0 15.6602 2.8994 19.644 6.99129 21.2467C6.89517 20.3764 6.80825 19.0379 7.02943 18.0878C7.22934 17.2293 8.31931 12.6201 8.31931 12.6201C8.31931 12.6201 7.99028 11.9612 7.99028 10.987C7.99028 9.45743 8.87682 8.31552 9.98068 8.31552C10.9192 8.31552 11.3724 9.0201 11.3724 9.86499C11.3724 10.8088 10.7716 12.2199 10.4615 13.5275C10.2023 14.6223 11.0105 15.5152 12.0904 15.5152C14.0454 15.5152 15.5483 13.4537 15.5483 10.4781C15.5483 7.84429 13.6558 6.00285 10.9535 6.00285C7.82365 6.00285 5.98653 8.35042 5.98653 10.7765C5.98653 11.7219 6.35073 12.7357 6.80518 13.2868C6.89508 13.3958 6.90824 13.4912 6.88146 13.6023C6.79797 13.9498 6.6124 14.6969 6.57597 14.8498C6.528 15.0512 6.41655 15.0939 6.20808 14.9969C4.83426 14.3574 3.9753 12.3488 3.9753 10.7355C3.9753 7.26559 6.49644 4.07891 11.2434 4.07891C15.0593 4.07891 18.0247 6.79806 18.0247 10.432C18.0247 14.223 15.6344 17.2739 12.3167 17.2739C11.202 17.2739 10.1542 16.6949 9.79547 16.0109C9.79547 16.0109 9.2439 18.1111 9.11018 18.6258C8.86186 19.5812 8.19145 20.7788 7.74303 21.5095C8.77223 21.8281 9.86598 22 11 22C17.0751 22 22 17.0751 22 11C22 4.92497 17.0751 8.96454e-05 11 8.96454e-05Z" />
</svg>
<span class="visually-hidden">Пинтерест.</span>
</a>
</li>
<li class="social__item">
<a class="social__link" href="#!" target="_blank">
<svg class="social__icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.4 1.4C3.33786e-06 2.812 3.35195e-06 5.074 3.35195e-06 9.6V10.4L1.66545e-06 10.5136C-9.77702e-05 14.97 -0.00014782 17.2117 1.4 18.6C2.812 20 5.074 20 9.6 20H10.4H10.5131C14.9698 20.0001 17.2117 20.0001 18.6 18.6C20 17.188 20 14.926 20 10.4V9.6V9.48685C20.0001 5.03015 20.0001 2.7883 18.6 1.4C17.188 3.33786e-06 14.926 3.35195e-06 10.4 3.35195e-06H9.6L9.48639 1.66545e-06C5.03 -9.77702e-05 2.78825 -0.00014782 1.4 1.4ZM10.0194 10.1972C11.6876 10.1972 13.0477 8.83717 13.0477 7.16889C13.0477 5.50061 11.6876 4.14061 10.0194 4.14061C8.33296 4.14061 6.97295 5.50061 6.97295 7.16889C6.97295 8.83717 8.33296 10.1972 10.0194 10.1972ZM10.0194 5.91768C10.7084 5.91768 11.2706 6.47982 11.2706 7.16889C11.2706 7.85796 10.7084 8.4201 10.0194 8.4201C9.3303 8.4201 8.76816 7.85796 8.76816 7.16889C8.75003 6.47982 9.31216 5.91768 10.0194 5.91768ZM11.2343 12.6815C11.8509 12.5364 12.4493 12.3007 12.9933 11.9561C13.4103 11.7023 13.5372 11.1401 13.2653 10.7231C13.0114 10.306 12.4493 10.1791 12.0322 10.4511C10.7991 11.2308 9.18524 11.2308 7.95216 10.4511C7.53509 10.1972 6.99109 10.306 6.71909 10.7231C6.48336 11.1401 6.61029 11.6841 7.02736 11.938C7.57137 12.2825 8.16977 12.5183 8.7863 12.6634L7.0999 14.3498C6.75536 14.6943 6.75536 15.2565 7.0999 15.601C7.28123 15.7823 7.49883 15.8548 7.73456 15.8548C7.9703 15.8548 8.1879 15.7641 8.36923 15.601L10.0375 13.9327L11.7058 15.601C12.0503 15.9455 12.6124 15.9455 12.957 15.601C13.3015 15.2565 13.3015 14.6943 12.957 14.3498L11.2343 12.6815Z" />
</svg>
<span class="visually-hidden">Одноклассники.</span>
</a>
</li>
</ul>
</section>
</div>
<section class="footer__menu menu">
<h3 class="menu__title title-small">Интернет-магазин
<span class="visually-hidden"> ссылки.</span>
</h3>
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="#!">Каталог</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#!">Доставка</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#!">Способы оплаты</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#!">О нас</a>
</li>
</ul>
</section>
<section class="footer__media media">
<h3 class="media__title title-small">Медиа
<span class="visually-hidden"> ссылки.</span>
</h3>
<ul class="media__list">
<li class="media__item">
<a class="media__link" href="#!">Блог</a>
</li>
<li class="media__item">
<a class="media__link" href="#!">Информация для СМИ</a>
</li>
<li class="media__item">
<a class="media__link" href="#!">Правовая информация</a>
</li>
</ul>
</section>
<section class="footer__contacts contacts">
<h3 class="contacts__title title-small">Контакты</h3>
<address class="contacts__address">
<p class="contacts__text">
Санкт-Петербург, набережная реки Карповки, дом 5
</p>
<a class="contacts__link" href="tel:+79999999999">
+7 (999) 999-99-99</a>
</address>
</section>
<section class="footer__copyright copyright">
<h2 class="visually-hidden">Авторское право.</h2>
<p class="copyright__text">Разработано в</p>
<a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive" target="_blank">HTML Academy
<svg class="copyright__icon" width="12" height="16" aria-hidden="true" focusable="false">
<use xlink:href="./img/icons/stack.svg#logo-html-academy" />
</svg>
</a>
</section>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/nouislider.min.js"></script>
<script src="./js/main.js" type="module"></script>
</body>
</html>