-
Notifications
You must be signed in to change notification settings - Fork 0
/
index copy.html
526 lines (499 loc) · 35.8 KB
/
index copy.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
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="/vite.svg">
<link rel="preload" href="/fonts/inter-v13-cyrillic_latin-regular.woff2" type="font/woff2" as="font" crossorigin>
<link rel="preload" href="/fonts/open-sans-v36-cyrillic_latin-700.woff2" type="font/woff2" as="font" crossorigin>
<link rel="preload" href="/fonts/open-sans-v36-cyrillic_latin-regular.woff2" type="font/woff2" as="font" crossorigin>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мебельный маркет Koff</title>
<script type="module" src="/main.js"></script>
</head>
<body>
<header class="header">
<div class="container header__container">
<a href="/" class="header__link-logo">
<img class="header__logo" src="/img/logo.svg" alt="Логотип мебельного маркета Koff">
</a>
<form action="/api/product" class="header__search">
<input type="search" class="header__input" placeholder="Введите запрос" name="search">
<button type="submit" class="header__btn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.66665 13.9999C11.1644 13.9999 14 11.1644 14 7.66659C14 4.16878 11.1644 1.33325 7.66665 1.33325C4.16884 1.33325 1.33331 4.16878 1.33331 7.66659C1.33331 11.1644 4.16884 13.9999 7.66665 13.9999Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.6666 14.6666L13.3333 13.3333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</form>
<div class="header__control">
<a href="/favorite" class="header__link">
<span class="header__link-text">Избранное</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.41334 13.8733C8.18668 13.9533 7.81334 13.9533 7.58668 13.8733C5.65334 13.2133 1.33334 10.46 1.33334 5.79332C1.33334 3.73332 2.99334 2.06665 5.04001 2.06665C6.25334 2.06665 7.32668 2.65332 8.00001 3.55998C8.67334 2.65332 9.75334 2.06665 10.96 2.06665C13.0067 2.06665 14.6667 3.73332 14.6667 5.79332C14.6667 10.46 10.3467 13.2133 8.41334 13.8733Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<a href="/cart" class="header__link">
<span class="header__link-text">Корзина</span>
<span class="header__count">(5)</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.87336 1.33325L3.46002 3.75325" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.1266 1.33325L12.54 3.75325" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.33331 5.23324C1.33331 3.9999 1.99331 3.8999 2.81331 3.8999H13.1866C14.0066 3.8999 14.6666 3.9999 14.6666 5.23324C14.6666 6.66657 14.0066 6.56657 13.1866 6.56657H2.81331C1.99331 6.56657 1.33331 6.66657 1.33331 5.23324Z" stroke="currentColor"/>
<path class="svg-white" d="M6.50665 9.33325V11.6999" stroke="currentColor" stroke-linecap="round"/>
<path class="svg-white" d="M9.5733 9.33325V11.6999" stroke="currentColor" stroke-linecap="round"/>
<path d="M2.33331 6.66675L3.27331 12.4267C3.48665 13.7201 3.99998 14.6667 5.90665 14.6667H9.92665C12 14.6667 12.3066 13.7601 12.5466 12.5067L13.6666 6.66675" stroke="currentColor" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
</header>
<main>
<section class="catalog">
<div class="container catalog__container">
<ul class="catalog__list">
<li class="catalog__item">
<a href="/category?slug=Диваны" class="catalog__link">Диваны</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Шкафы" class="catalog__link">Шкафы</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Стулья" class="catalog__link">Стулья</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Тумбы" class="catalog__link">Тумбы</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Кровати" class="catalog__link">Кровати</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Столы" class="catalog__link">Столы</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Комоды" class="catalog__link">Комоды</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Матрасы" class="catalog__link">Матрасы</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Пуфики" class="catalog__link">Пуфики</a>
</li>
<li class="catalog__item">
<a href="/category?slug=Стеллажи" class="catalog__link">Стеллажи</a>
</li>
</ul>
</div>
</section>
<div class="breadcrumbs" hidden>
<div class="container">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="/" class="breadcrumbs__link">Главная</a>
<span class="breadcrumbs__separator">></span>
</li>
<li class="breadcrumbs__item">
<a href="/category?slug=Кресла" class="breadcrumbs__link">Кресла</a>
<span class="breadcrumbs__separator">></span>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link">Кресло с подлокотниками</a>
<span class="breadcrumbs__separator">></span>
</li>
</ul>
</div>
</div>
<section class="goods" hidden>
<div class="container">
<h2 class="goods__title">Избранное</h2>
<ul class="goods__list">
<li class="goods__item">
<article class="goods__card card">
<a href="/product" class="card__link card__link_img">
<img class="card__img" src="/img/photo.jpg" alt="Кресло">
</a>
<div class="card__info">
<h3 class="card__title">
<a href="/product" class="card__link">Кресло с подлокотниками</a>
</h3>
<p class="card__price">5 000 ₽</p>
</div>
<button class="card__btn" type="button">В корзину</button>
<button class="card__favorite" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.41325 13.8733C8.18658 13.9533 7.81325 13.9533 7.58658 13.8733C5.65325 13.2133 1.33325 10.46 1.33325 5.79332C1.33325 3.73332 2.99325 2.06665 5.03992 2.06665C6.25325 2.06665 7.32658 2.65332 7.99992 3.55998C8.67325 2.65332 9.75325 2.06665 10.9599 2.06665C13.0066 2.06665 14.6666 3.73332 14.6666 5.79332C14.6666 10.46 10.3466 13.2133 8.41325 13.8733Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</article>
</li>
<li class="goods__item">
<article class="goods__card card">
<a href="/product" class="card__link card__link_img">
<img class="card__img" src="/img/photo.jpg" alt="Кресло">
</a>
<div class="card__info">
<h3 class="card__title">
<a href="/product" class="card__link">Кресло с подлокотниками</a>
</h3>
<p class="card__price">5 000 ₽</p>
</div>
<button class="card__btn" type="button">В корзину</button>
<button class="card__favorite" type="button" aria-label="Добавить в избранное">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.41325 13.8733C8.18658 13.9533 7.81325 13.9533 7.58658 13.8733C5.65325 13.2133 1.33325 10.46 1.33325 5.79332C1.33325 3.73332 2.99325 2.06665 5.03992 2.06665C6.25325 2.06665 7.32658 2.65332 7.99992 3.55998C8.67325 2.65332 9.75325 2.06665 10.9599 2.06665C13.0066 2.06665 14.6666 3.73332 14.6666 5.79332C14.6666 10.46 10.3466 13.2133 8.41325 13.8733Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</article>
</li>
<li class="goods__item">
<article class="goods__card card">
<a href="/product" class="card__link card__link_img">
<img class="card__img" src="/img/photo.jpg" alt="Кресло">
</a>
<div class="card__info">
<h3 class="card__title">
<a href="/product" class="card__link">Кресло с подлокотниками</a>
</h3>
<p class="card__price">5 000 ₽</p>
</div>
<button class="card__btn" type="button">В корзину</button>
<button class="card__favorite" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.41325 13.8733C8.18658 13.9533 7.81325 13.9533 7.58658 13.8733C5.65325 13.2133 1.33325 10.46 1.33325 5.79332C1.33325 3.73332 2.99325 2.06665 5.03992 2.06665C6.25325 2.06665 7.32658 2.65332 7.99992 3.55998C8.67325 2.65332 9.75325 2.06665 10.9599 2.06665C13.0066 2.06665 14.6666 3.73332 14.6666 5.79332C14.6666 10.46 10.3466 13.2133 8.41325 13.8733Z" fill="white" stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</article>
</li>
<li class="goods__item">
<article class="goods__card card">
<a href="/product" class="card__link card__link_img">
<img class="card__img" src="/img/photo.jpg" alt="Кресло">
</a>
<div class="card__info">
<h3 class="card__title">
<a href="/product" class="card__link">Кресло с подлокотниками</a>
</h3>
<p class="card__price">5 000 ₽</p>
</div>
<button class="card__btn" type="button">В корзину</button>
<button class="card__favorite" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8.41325 13.8733C8.18658 13.9533 7.81325 13.9533 7.58658 13.8733C5.65325 13.2133 1.33325 10.46 1.33325 5.79332C1.33325 3.73332 2.99325 2.06665 5.03992 2.06665C6.25325 2.06665 7.32658 2.65332 7.99992 3.55998C8.67325 2.65332 9.75325 2.06665 10.9599 2.06665C13.0066 2.06665 14.6666 3.73332 14.6666 5.79332C14.6666 10.46 10.3466 13.2133 8.41325 13.8733Z" fill="white" stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</article>
</li>
</ul>
<div class="pagination">
<div class="pagination__bar" style="--width: calc(12 / 31 * 100%)"></div>
<div class="pagination__arrows">
<button class="pagination__arrow pagination__arrow_left">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.86395 8.0001L8.52528 2.1821C8.5719 2.13522 8.60874 2.07955 8.6337 2.01833C8.65866 1.95711 8.67122 1.89155 8.67068 1.82544C8.67013 1.75933 8.65647 1.69398 8.6305 1.63318C8.60453 1.57239 8.56676 1.51734 8.51938 1.47124C8.472 1.42513 8.41594 1.38888 8.35445 1.36458C8.29297 1.34028 8.22727 1.32842 8.16117 1.32968C8.09507 1.33094 8.02988 1.34529 7.96936 1.37191C7.90885 1.39854 7.85421 1.43689 7.80862 1.48477L1.80862 7.65143C1.7178 7.74478 1.66699 7.86987 1.66699 8.0001C1.66699 8.13033 1.7178 8.25542 1.80862 8.34877L7.80862 14.5154C7.85421 14.5633 7.90885 14.6017 7.96936 14.6283C8.02988 14.6549 8.09507 14.6693 8.16117 14.6705C8.22727 14.6718 8.29297 14.6599 8.35445 14.6356C8.41594 14.6113 8.472 14.5751 8.51938 14.529C8.56676 14.4829 8.60453 14.4278 8.6305 14.367C8.65647 14.3062 8.67013 14.2409 8.67068 14.1748C8.67122 14.1087 8.65866 14.0431 8.6337 13.9819C8.60874 13.9207 8.5719 13.865 8.52528 13.8181L2.86395 8.0001Z" fill="#1C1C1C"/>
</svg>
</button>
<p class="pagination__number">
<span class="pagination__current">12</span>
<span>из</span>
<span class="pagination__total">31</span>
</p>
<button class="pagination__arrow pagination__arrow_right">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.136 8.0001L7.47472 2.1821C7.4281 2.13522 7.39126 2.07955 7.3663 2.01833C7.34134 1.95711 7.32878 1.89155 7.32932 1.82544C7.32987 1.75933 7.34353 1.69398 7.3695 1.63318C7.39547 1.57239 7.43324 1.51734 7.48062 1.47124C7.528 1.42513 7.58406 1.38888 7.64555 1.36458C7.70703 1.34028 7.77273 1.32842 7.83883 1.32968C7.90493 1.33094 7.97012 1.34529 8.03064 1.37191C8.09115 1.39854 8.14579 1.43689 8.19138 1.48477L14.1914 7.65143C14.2822 7.74478 14.333 7.86987 14.333 8.0001C14.333 8.13033 14.2822 8.25542 14.1914 8.34877L8.19138 14.5154C8.14579 14.5633 8.09115 14.6017 8.03064 14.6283C7.97012 14.6549 7.90493 14.6693 7.83883 14.6705C7.77273 14.6718 7.70703 14.6599 7.64555 14.6356C7.58406 14.6113 7.528 14.5751 7.48062 14.529C7.43324 14.4829 7.39547 14.4278 7.3695 14.367C7.34353 14.3062 7.32987 14.2409 7.32932 14.1748C7.32878 14.1087 7.34134 14.0431 7.3663 13.9819C7.39126 13.9207 7.4281 13.865 7.47472 13.8181L13.136 8.0001Z" fill="#1C1C1C"/>
</svg>
</button>
</div>
</div>
</div>
</section>
<section class="product">
<div class="container product__container">
<h2 class="product__title">Кресло с подлокотниками</h2>
<div class="product__picture">
<div class="swiper product__slider-main">
<div class="swiper-wrapper product__main-list">
<div class="swiper-slide product__slide">
<img class="product__img" src="/img/photo.jpg">
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-7.jpg" />
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-8.jpg" />
</div>
<div class="swiper-slide product__slide">
<img class="product__img" src="https://swiperjs.com/demos/images/nature-10.jpg" />
</div>
</div>
<button class="product__arrow product__arrow_next">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="16" transform="matrix(-1 0 0 1 32 0)" fill="currentColor"/>
<path d="M20.136 16.0001L14.4747 10.1821C14.4281 10.1352 14.3913 10.0796 14.3663 10.0183C14.3413 9.95711 14.3288 9.89155 14.3293 9.82544C14.3299 9.75933 14.3435 9.69398 14.3695 9.63318C14.3955 9.57239 14.4332 9.51734 14.4806 9.47124C14.528 9.42513 14.5841 9.38888 14.6455 9.36458C14.707 9.34028 14.7727 9.32842 14.8388 9.32968C14.9049 9.33094 14.9701 9.34529 15.0306 9.37191C15.0912 9.39854 15.1458 9.43689 15.1914 9.48477L21.1914 15.6514C21.2822 15.7448 21.333 15.8699 21.333 16.0001C21.333 16.1303 21.2822 16.2554 21.1914 16.3488L15.1914 22.5154C15.1458 22.5633 15.0912 22.6017 15.0306 22.6283C14.9701 22.6549 14.9049 22.6693 14.8388 22.6705C14.7727 22.6718 14.707 22.6599 14.6455 22.6356C14.5841 22.6113 14.528 22.5751 14.4806 22.529C14.4332 22.4829 14.3955 22.4278 14.3695 22.367C14.3435 22.3062 14.3299 22.2409 14.3293 22.1748C14.3288 22.1087 14.3413 22.0431 14.3663 21.9819C14.3913 21.9207 14.4281 21.865 14.4747 21.8181L20.136 16.0001Z" fill="#1C1C1C"/>
</svg>
</button>
<button class="product__arrow product__arrow_prev">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="16" fill="currentColor"/>
<path d="M11.864 16.0001L17.5253 10.1821C17.5719 10.1352 17.6087 10.0796 17.6337 10.0183C17.6587 9.95711 17.6712 9.89155 17.6707 9.82544C17.6701 9.75933 17.6565 9.69398 17.6305 9.63318C17.6045 9.57239 17.5668 9.51734 17.5194 9.47124C17.472 9.42513 17.4159 9.38888 17.3545 9.36458C17.293 9.34028 17.2273 9.32842 17.1612 9.32968C17.0951 9.33094 17.0299 9.34529 16.9694 9.37191C16.9088 9.39854 16.8542 9.43689 16.8086 9.48477L10.8086 15.6514C10.7178 15.7448 10.667 15.8699 10.667 16.0001C10.667 16.1303 10.7178 16.2554 10.8086 16.3488L16.8086 22.5154C16.8542 22.5633 16.9088 22.6017 16.9694 22.6283C17.0299 22.6549 17.0951 22.6693 17.1612 22.6705C17.2273 22.6718 17.293 22.6599 17.3545 22.6356C17.4159 22.6113 17.472 22.5751 17.5194 22.529C17.5668 22.4829 17.6045 22.4278 17.6305 22.367C17.6565 22.3062 17.6701 22.2409 17.6707 22.1748C17.6712 22.1087 17.6587 22.0431 17.6337 21.9819C17.6087 21.9207 17.5719 21.865 17.5253 21.8181L11.864 16.0001Z" fill="#1C1C1C"/>
</svg>
</button>
</div>
<div class="swiper product__slider-thumbnails">
<div class="swiper-wrapper product__thumbnails-list">
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="/img/photo.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-7.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-8.jpg" />
</div>
<div class="swiper-slide product__thumbnails-slide">
<img class="product__thumbnails-img" src="https://swiperjs.com/demos/images/nature-10.jpg" />
</div>
</div>
</div>
</div>
<div class="product__info">
<p class="product__price">5 000 ₽</p>
<p class="product__article">арт. 84348945757</p>
<div class="product__characteristics">
<h3 class="product__characteristics-title">Общие характеристики</h3>
<ul class="product__characteristics-list">
<li class="product__characteristics-item">
<p class="product__characteristics-name">Коллекция</p>
<p class="product__characteristics-value">Мирсаж</p>
</li>
<li class="product__characteristics-item">
<p class="product__characteristics-name">Производитель</p>
<p class="product__characteristics-value">Россия</p>
</li>
<li class="product__characteristics-item">
<p class="product__characteristics-name">Гарантия</p>
<p class="product__characteristics-value">18 мес.</p>
</li>
<li class="product__characteristics-item">
<p class="product__characteristics-name">Срок службы</p>
<p class="product__characteristics-value">5 лет</p>
</li>
<li class="product__characteristics-item">
<p class="product__characteristics-name">Цвет</p>
<p class="product__characteristics-value">Желтый</p>
</li>
<li class="product__characteristics-item">
<p class="product__characteristics-name">Макс. нагрузка</p>
<p class="product__characteristics-value">130 кг</p>
</li>
</ul>
<div class="product__btns">
<button class="product__btn" type="button">В корзину</button>
<button class="product__favorite" type="button" aria-label="добавить в Избранное">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.4135 13.8733C8.18683 13.9533 7.8135 13.9533 7.58683 13.8733C5.6535 13.2133 1.3335 10.46 1.3335 5.79332C1.3335 3.73332 2.9935 2.06665 5.04016 2.06665C6.2535 2.06665 7.32683 2.65332 8.00016 3.55998C8.6735 2.65332 9.7535 2.06665 10.9602 2.06665C13.0068 2.06665 14.6668 3.73332 14.6668 5.79332C14.6668 10.46 10.3468 13.2133 8.4135 13.8733Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<section class="cart" hidden>
<div class="container cart__container">
<h2 class="cart__title">Корзина</h2>
<ul class="cart__products">
<li class="cart__product">
<img src="/img/photo.jpg" alt="" class="cart__img">
<h3 class="cart__title-product">Кресло с подлокотниками</h3>
<p class="cart__price">5 000 ₽</p>
<p class="cart__article">арт. 84348945757</p>
<div class="cart__product-control">
<button class="cart__product-btn">-</button>
<p class="cart__product-count">1</p>
<button class="cart__product-btn">+</button>
</div>
</li>
<li class="cart__product">
<img src="/img/photo.jpg" alt="" class="cart__img">
<h3 class="cart__title-product">Кресло с подлокотниками</h3>
<p class="cart__price">5 000 ₽</p>
<p class="cart__article">арт. 84348945757</p>
<div class="cart__product-control">
<button class="cart__product-btn">-</button>
<p class="cart__product-count">1</p>
<button class="cart__product-btn">+</button>
</div>
</li>
<li class="cart__product">
<img src="/img/photo.jpg" alt="" class="cart__img">
<h3 class="cart__title-product">Кресло с подлокотниками</h3>
<p class="cart__price">5 000 ₽</p>
<p class="cart__article">арт. 84348945757</p>
<div class="cart__product-control">
<button class="cart__product-btn">-</button>
<p class="cart__product-count">1</p>
<button class="cart__product-btn">+</button>
</div>
</li>
</ul>
<div class="cart__place">
<h3 class="cart__subtitle">Оформление</h3>
<div class="cart__place-info">
<p class="cart__place-count">4 товара на сумму:</p>
<p class="cart__place-price">20 000 ₽</p>
</div>
<p class="cart__place-delivery">Доставка 0 ₽</p>
<button class="cart__place-btn" type="submit" form="order">Оформить заказ</button>
</div>
<form action="#" class="cart__form form-order" id="form" method="post">
<h3 class="cart__subtitle cart__subtitle_form-order">Данные для доставки</h3>
<fieldset class="form-order__fieldset form-order__fieldset_input">
<input type="text" class="form-order__input" name="name" placeholder="Фамилия Имя Отчество">
<input type="tel" class="form-order__input" name="phone" placeholder="Телефон">
<input type="email" class="form-order__input" name="email" placeholder="E-mail">
<input type="text" class="form-order__input" name="address" placeholder="Адрес доставки">
<textarea class="form-order__textarea" name="comments" placeholder="Комментарий к заказу"></textarea>
</fieldset>
<fieldset class="form-order__fieldset form-order__fieldset_radio">
<legend class="form-order__legend">Доставка</legend>
<label class="form-order__label radio">
<input class="radio__input" type="radio" name="deliveryType" value="delivery">
Доставка
</label>
<label class="form-order__label radio">
<input class="radio__input" type="radio" name="deliveryType" value="pickup">
Самовывоз
</label>
</fieldset>
<fieldset class="form-order__fieldset form-order__fieldset_radio">
<legend class="form-order__legend">Оплата</legend>
<label class="form-order__label radio">
<input class="radio__input" type="radio" name="paymentType" value="card">
Картой при получении
</label>
<label class="form-order__label radio">
<input class="radio__input" type="radio" name="paymentType" value="cash">
Наличными при получении
</label>
</fieldset>
</form>
</div>
</section>
<section class="order" hidden>
<div class="container order__container">
<div class="order__wrapper">
<div class="order__header">
<h2 class="order__title">Заказ успешно размещен</h2>
<p class="order__total-sum">20 000 ₽</p>
</div>
<p class="order__order-number">№43435</p>
<p class="order__subtitle">Данные доставки</p>
<ul class="order__list">
<li class="order__item">
<p class="order__name">Получатель</p>
<p class="order__value">Иванов Петр Александрович</p>
</li>
<li class="order__item">
<p class="order__name">Телефон</p>
<p class="order__value">+7 (737) 346 23 00</p>
</li>
<li class="order__item">
<p class="order__name">E-mail</p>
<p class="order__value">Ivanov84@gmail.com</p>
</li>
<li class="order__item">
<p class="order__name">Адрес доставки</p>
<p class="order__value">Москва, ул. Ленина, 21, кв. 33</p>
</li>
<li class="order__item">
<p class="order__name">Способ оплаты</p>
<p class="order__value">Картой при получении</p>
</li>
<li class="order__item">
<p class="order__name">Способ получения</p>
<p class="order__value">Доставка</p>
</li>
</ul>
<a href="/" class="order__link">На главную</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer__container">
<a href="/" class="footer__link-logo">
<img src="/img/logo.svg" alt="Логотип мебельного маркета Koff" class="footer__logo">
</a>
<div class="footer__contacts contacts">
<a href="tel:+7 (939) 839 12 97" class="contacts__phone">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.48572 1.54445L5.59257 1.21074C5.95787 1.10078 6.3507 1.12746 6.69778 1.2858C7.04486 1.44415 7.32248 1.72334 7.47886 2.07131L8.25486 3.79703C8.38954 4.09641 8.42708 4.43046 8.36221 4.75227C8.29734 5.07408 8.1333 5.36749 7.89315 5.59131L6.712 6.69188C6.55372 6.84217 6.67372 7.42788 7.252 8.43017C7.83086 9.43303 8.27829 9.8296 8.48457 9.76788L10.032 9.29474C10.3457 9.1988 10.6815 9.20341 10.9924 9.30794C11.3033 9.41246 11.5737 9.61166 11.7657 9.8776L12.8686 11.4062C13.0913 11.7148 13.1945 12.0939 13.1588 12.4728C13.1232 12.8518 12.9512 13.205 12.6749 13.4667L11.8223 14.2742C11.5471 14.5348 11.2076 14.7178 10.8386 14.8044C10.4696 14.891 10.0842 14.8782 9.72172 14.7673C7.93543 14.2205 6.28115 12.5976 4.73657 9.9216C3.18857 7.2416 2.604 4.98103 3.01143 3.13417C3.09361 2.76203 3.27354 2.41853 3.53269 2.1391C3.79183 1.85966 4.12081 1.65439 4.48572 1.54445Z" fill="white"/>
</svg>
<span>+7 (939) 839 12 97</span>
</a>
<ul class="contacts__list">
<li class="contacts__item">
<a href="#" class="contacts__link" target="_blank">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00001 0.320068C3.75841 0.320068 0.320007 3.75847 0.320007 8.00007C0.320007 12.2417 3.75841 15.6801 8.00001 15.6801C12.2416 15.6801 15.68 12.2417 15.68 8.00007C15.68 3.75847 12.2416 0.320068 8.00001 0.320068ZM10.9536 8.98487C10.9536 8.98487 11.6328 9.65527 11.8 9.96647C11.8048 9.97287 11.8072 9.97927 11.8088 9.98247C11.8768 10.0969 11.8928 10.1857 11.8592 10.2521C11.8032 10.3625 11.6112 10.4169 11.5456 10.4217H10.3456C10.2624 10.4217 10.088 10.4001 9.87681 10.2545C9.71441 10.1409 9.55441 9.95447 9.39841 9.77287C9.16561 9.50247 8.96401 9.26887 8.76081 9.26887C8.735 9.26882 8.70935 9.27287 8.68481 9.28087C8.53121 9.33047 8.33441 9.54967 8.33441 10.1337C8.33441 10.3161 8.19041 10.4209 8.08881 10.4209H7.53921C7.35201 10.4209 6.37681 10.3553 5.51281 9.44407C4.45521 8.32807 3.50321 6.08967 3.49521 6.06887C3.43521 5.92407 3.55921 5.84647 3.69441 5.84647H4.90641C5.06801 5.84647 5.12081 5.94487 5.15761 6.03207C5.20081 6.13367 5.35921 6.53767 5.61921 6.99207C6.04081 7.73287 6.29921 8.03367 6.50641 8.03367C6.54526 8.03321 6.58342 8.02333 6.61761 8.00487C6.88801 7.85447 6.83761 6.89047 6.82561 6.69047C6.82561 6.65287 6.82481 6.25927 6.68641 6.07047C6.58721 5.93367 6.41841 5.88167 6.31601 5.86247C6.35745 5.80528 6.41206 5.7589 6.47521 5.72727C6.66081 5.63447 6.99521 5.62087 7.32721 5.62087H7.51201C7.87201 5.62567 7.96481 5.64887 8.09521 5.68167C8.35921 5.74487 8.36481 5.91527 8.34161 6.49847C8.33441 6.66407 8.32721 6.85127 8.32721 7.07207C8.32721 7.12007 8.32481 7.17127 8.32481 7.22567C8.31681 7.52247 8.30721 7.85927 8.51681 7.99767C8.54415 8.01481 8.57574 8.02396 8.60801 8.02407C8.68081 8.02407 8.90001 8.02407 9.49361 7.00567C9.67668 6.67788 9.83576 6.33725 9.96961 5.98647C9.98161 5.96567 10.0168 5.90167 10.0584 5.87687C10.0891 5.86122 10.1231 5.85326 10.1576 5.85367H11.5824C11.7376 5.85367 11.844 5.87687 11.864 5.93687C11.8992 6.03207 11.8576 6.32247 11.2072 7.20327L10.9168 7.58647C10.3272 8.35927 10.3272 8.39847 10.9536 8.98487Z" fill="white"/>
</svg>
</a>
</li>
<li class="contacts__item">
<a href="#" class="contacts__link" target="_blank">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66665 9.99992L10.1266 7.99992L6.66665 5.99992V9.99992ZM14.3733 4.77992C14.46 5.09325 14.52 5.51325 14.56 6.04658C14.6066 6.57992 14.6266 7.03992 14.6266 7.43992L14.6666 7.99992C14.6666 9.45992 14.56 10.5333 14.3733 11.2199C14.2066 11.8199 13.82 12.2066 13.22 12.3733C12.9066 12.4599 12.3333 12.5199 11.4533 12.5599C10.5866 12.6066 9.79331 12.6266 9.05998 12.6266L7.99998 12.6666C5.20665 12.6666 3.46665 12.5599 2.77998 12.3733C2.17998 12.2066 1.79331 11.8199 1.62665 11.2199C1.53998 10.9066 1.47998 10.4866 1.43998 9.95325C1.39331 9.41992 1.37331 8.95992 1.37331 8.55992L1.33331 7.99992C1.33331 6.53992 1.43998 5.46659 1.62665 4.77992C1.79331 4.17992 2.17998 3.79325 2.77998 3.62659C3.09331 3.53992 3.66665 3.47992 4.54665 3.43992C5.41331 3.39325 6.20665 3.37325 6.93998 3.37325L7.99998 3.33325C10.7933 3.33325 12.5333 3.43992 13.22 3.62659C13.82 3.79325 14.2066 4.17992 14.3733 4.77992Z" fill="white"/>
</svg>
</a>
</li>
<li class="contacts__item">
<a href="#" class="contacts__link" target="_blank">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 0 10.1217 0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0C10.1217 0 12.1566 0.842855 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8ZM8.287 5.906C7.509 6.23 5.953 6.9 3.621 7.916C3.243 8.066 3.044 8.214 3.026 8.358C2.996 8.601 3.301 8.697 3.716 8.828L3.891 8.883C4.299 9.016 4.849 9.171 5.134 9.177C5.394 9.183 5.683 9.077 6.002 8.857C8.181 7.386 9.306 6.643 9.376 6.627C9.426 6.615 9.496 6.601 9.542 6.643C9.589 6.684 9.584 6.763 9.579 6.784C9.549 6.913 8.352 8.025 7.733 8.601C7.54 8.781 7.403 8.908 7.375 8.937C7.31334 9.00001 7.25067 9.06202 7.187 9.123C6.807 9.489 6.523 9.763 7.202 10.211C7.529 10.427 7.791 10.604 8.052 10.782C8.336 10.976 8.62 11.169 8.988 11.411C9.081 11.471 9.171 11.536 9.258 11.598C9.589 11.834 9.888 12.046 10.255 12.012C10.469 11.992 10.69 11.792 10.802 11.192C11.067 9.775 11.588 6.706 11.708 5.441C11.7153 5.33584 11.711 5.2302 11.695 5.126C11.6856 5.04192 11.6449 4.96446 11.581 4.909C11.49 4.84619 11.3815 4.81365 11.271 4.816C10.971 4.821 10.508 4.982 8.287 5.906Z" fill="white"/>
</svg>
</a>
</li>
</ul>
</div>
<ul class="footer__developer-list">
<li class="footer__developer-item">
<a class="footer__developer-link" href="https://t.me/Mrshmallowww" target="_blank">Designer: Anastasia Ilina</a>
</li>
<li class="footer__developer-item">
<a class="footer__developer-link" href="https://t.me/Olga_Zh_1" target="_blank">Developer: Olga Zhebit</a>
</li>
</ul>
<p class="footer__copyright">© Koff, 2023</p>
</div>
</footer>
</body>
</html>