-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
560 lines (548 loc) · 27 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
547
548
549
550
551
552
553
554
555
556
557
558
559
560
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400,700&family=Playfair+Display:ital@0;1&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/reset.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<a href="#" class="logo">
<img src="images/Logo.svg" alt="" />
</a>
<h3 class="header__title">LA COLLECTION PRIVÉE CHRISTIAN DIOR</h3>
<nav class="menu">
<ul class="menu__list">
<li class="menu__item">
<a href="#" class="menu__link">WOMEN'S FRAGRANCE</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">MEN'S FRAGRANCE</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">MAKEUP</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">SKINCARE</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">DIOR SPA</a>
</li>
</ul>
</nav>
<ul class="user-nav">
<li class="user-nav__item">
<a href="#" class="user-na__link">
<img src="images/Heart1.svg" alt="" />
</a>
</li>
<li class="user-nav__item">
<a href="#" class="user-na__link">
<img src="images/Sumka.svg" alt="" />
</a>
</li>
</ul>
</div>
</div>
</header>
<section class="top">
<div class="top__swiper swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="top-slide">
<div class="container">
<div class="top-slide__inner">
<img
class="top-slide__img--mini"
src="images/slider-top/slider-1.jpg"
alt=""
/>
<div class="top-slide__content">
<h1 class="top-slide__title">GRIS DIOR</h1>
<p class="top-slide__subtitle">Fragrance</p>
<p class="top-slide__text">
With Gris Dior you dare to reveal your most surprising,
mysterious and unexpected facets.
</p>
<a class="top-slide__btn button" href="#"> DISCOVER </a>
</div>
<img
class="top-slide__img"
src="images/slider-top/slider-2.jpg"
alt=""
/>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div
class="top-slide"
style="background-image: url(images/slider-top/slide-bg-1.jpg)"
>
<div class="container">
<div class="top-slide__inner">
<a class="top-slide__btn button" href="#">
YOUR NEW EXPERIENCE
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div
class="top-slide"
style="background-image: url(images/slider-top/slide-bg-2.jpg)"
>
<div class="container">
<div class="top-slide__inner">
<a class="top-slide__btn button" href="#">
YOUR NEW EXPERIENCE</a
>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="container container-arrow">
<div class="swiper-button-prev">
<img src="images/arrow-left.svg" alt="" />
</div>
<div class="swiper-button-next">
<img src="images/arrow-right.svg" alt="" />
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<div class="about__inner">
<h2 class="about__title">DARE IN GRIS DIOR</h2>
<div class="about__textbox">
<div class="about__text">
<p>
Gris Dior is the olfactory expression of gray, the iconic color
of the House of Dior that embodies the bold spirit of Christian
Dior.
</p>
<p>
A unisex eau de parfum that defies gender, Gris Dior is an
intense chypre fragrance that makes a strong, recognizable
statement, a fragrance you adopt and interpret to suit your own
rules.
</p>
<p>
Gris Dior uninhibitedly combines heritage with a modern twist
and plays the unisex card with confidence. It is multifaceted
and not as obvious as it seems, like the color gray, richly
nuanced w
</p>
</div>
<div class="about__text about__text--bold">
<p>
A backdrop for all desires, revealing all shades: dare to go
gray with Gris Diorш.
</p>
<p>
A bold embodiment of this elusive color, Gris Dior is a light
chypre fragrance that has become an icon, an unexpected master
of the game. Both a fragrance for women and a fragrance for men,
its unisex trail invites uninhibited expression today.
</p>
</div>
</div>
<div class="about__slider swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="about__item">
<h4 class="about__item-title">DISCOVER GRIS DIOR</h4>
<img src="images/about-slider/1.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="about__item">
<h4 class="about__item-title">DARE TO RISK IT</h4>
<img src="images/about-slider/2.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="about__item">
<h4 class="about__item-title">FEEL THE FLAVOUR</h4>
<img src="images/about-slider/3.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="about__item">
<h4 class="about__item-title">DISCOVER GRIS DIOR</h4>
<img src="images/about-slider/1.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="about__item">
<h4 class="about__item-title">DARE TO RISK IT</h4>
<img src="images/about-slider/2.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="about__item">
<h4 class="about__item-title">FEEL THE FLAVOUR</h4>
<img src="images/about-slider/3.jpg" alt="" />
</div>
</div>
</div>
<div class="container-arrow about__arrow">
<div class="swiper-button-prev">
<img src="images/arrow-left.svg" alt="" />
</div>
<div class="swiper-button-next">
<img src="images/arrow-right.svg" alt="" />
</div>
</div>
</div>
<a href="#" class="about__btn button">SHOW ME MORE</a>
</div>
</div>
</section>
<div class="accordeon">
<div class="container">
<div class="accordeon__inner">
<div class="accordeon__item">
<div class="accordeon__triger">
<p class="accordeon__triger-title">DESCRIPTION</p>
<p class="accordeon__triger-text">
Gris Dior is the olfactory expression of gray, the iconic color
of the House of Dior that embodies the bold spirit of Christian
Dior.
</p>
</div>
<div class="accordeon__content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
</div>
</div>
<div class="accordeon__item">
<div class="accordeon__triger">
<p class="accordeon__triger-title">PERFUMER'S WORD</p>
<p class="accordeon__triger-text">
"What if the Dior gray were a fragrance? This emphatic gray is
not merely a mix of black and white, but the result of a
chromatic blend.”
</p>
</div>
<div class="accordeon__content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
</div>
</div>
<div class="accordeon__item">
<div class="accordeon__triger">
<p class="accordeon__triger-title">APPLICATION TIPS</p>
<p class="accordeon__triger-text">
Spray Gris Dior on pulse points: neck and wrists.
</p>
</div>
<div class="accordeon__content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
</div>
</div>
<div class="accordeon__item">
<div class="accordeon__triger">
<p class="accordeon__triger-title">INGREDIENTS</p>
</div>
<div class="accordeon__content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
iste qui autem, eos reprehenderit, odit aspernatur harum unde
quibusdam sit quam quae! Sapiente laboriosam quod, perferendis
nostrum mollitia saepe deleniti.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="products">
<div class="container">
<div class="products__inner">
<p class="products__title">WHAT ELSE?</p>
<div class="products__items">
<div class="products__item">
<p class="products__item-step">
01 INITIATE THE OLFACTORY RITUAL
</p>
<img
class="products__itm-img"
src="images/products/1.jpg"
alt=""
/>
<p class="products__item-name">
<span>GRIS DIOR</span>
Hand and Body Lotion
</p>
<p class="products__item-price">87€</p>
</div>
<div class="products__item">
<p class="products__item-step">02 CONTINUE THE RITUAL</p>
<img
class="products__itm-img"
src="images/products/2.jpg"
alt=""
/>
<p class="products__item-name">
<span>GRIS DIOR</span>
Unisex Eau de Parfum
</p>
<p class="products__item-price">265€</p>
</div>
<div class="products__item">
<p class="products__item-step">03 ADD THE FINISHING TOUCH</p>
<img
class="products__itm-img"
src="images/products/3.jpg"
alt=""
/>
<p class="products__item-name">
<span>GRIS DIOR</span>
Hair Perfume
</p>
<p class="products__item-price">102€</p>
</div>
</div>
</div>
</div>
</div>
<div class="video">
<div class="container">
<div class="video__box">
<button class="video__btn">
<img src="images/btn.svg" alt="" />
</button>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer__top">
<a href="" class="footer__logo">
<img src="images/Logo.svg" alt="" />
</a>
<img src="images/footer-decor.jpg" alt="" class="footer__img" />
<div class="footer__items">
<div class="footer__item">
<h5 class="footer_item-title">SIGN UP FOR EXCLUSIVITY</h5>
<form action="#" class="footer__item-form">
<input
class="footer__item-input"
type="email"
placeholder="E-mail"
/>
<button class="footer__item-btn" type="submit">
<img src="images/arrow-right.svg" alt="" />
</button>
</form>
</div>
<div class="footer__item">
<h5 class="footer_item-title">FIND A BOUTIQUE</h5>
<ul class="footer__item-list">
<li>
<a href="#" class="footer__item-link"
>Parfums Christian Dior Boutiques</a
>
</li>
<li>
<a href="#" class="footer__item-link"
>Christian Dior Couture Boutiques</a
>
</li>
</ul>
</div>
<div class="footer__item">
<h5 class="footer_item-title">CLIENT SERVICES</h5>
<ul class="footer__item-list">
<li></li>
<a href="#" class="footer__item-link"
>Contact Parfums Christian Dior</a
>
<li>
<a href="#" class="footer__item-link">Delivery & Returns</a>
</li>
<li>
<a href="#" class="footer__item-link">FAQ</a>
</li>
</ul>
</div>
</div>
<ul class="footer__social-list">
<li class="footer__social-item">
<a href="#" class="footer__social-link">
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.49614 7.63176C9.18664 7.4549 8.80639 7.45617 8.49807 7.63509C8.18976 7.81401 8 8.14353 8 8.5V16.5C8 16.8565 8.18976 17.186 8.49807 17.3649C8.80639 17.5438 9.18664 17.5451 9.49614 17.3682L16.4961 13.3682C16.8077 13.1902 17 12.8589 17 12.5C17 12.1411 16.8077 11.8098 16.4961 11.6318L9.49614 7.63176ZM13.9844 12.5L10 14.7768V10.2232L13.9844 12.5Z"
fill="#0F0F0F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 12.5C0 8.75027 0 6.8754 0.954915 5.56107C1.26331 5.1366 1.6366 4.76331 2.06107 4.45491C3.3754 3.5 5.25027 3.5 9 3.5H15C18.7497 3.5 20.6246 3.5 21.9389 4.45491C22.3634 4.76331 22.7367 5.1366 23.0451 5.56107C24 6.8754 24 8.75027 24 12.5C24 16.2497 24 18.1246 23.0451 19.4389C22.7367 19.8634 22.3634 20.2367 21.9389 20.5451C20.6246 21.5 18.7497 21.5 15 21.5H9C5.25027 21.5 3.3754 21.5 2.06107 20.5451C1.6366 20.2367 1.26331 19.8634 0.954915 19.4389C0 18.1246 0 16.2497 0 12.5ZM9 5.5H15C16.9194 5.5 18.1983 5.50275 19.1673 5.60773C20.0989 5.70866 20.504 5.88448 20.7634 6.07295C21.018 6.25799 21.242 6.48196 21.4271 6.73664C21.6155 6.99605 21.7913 7.40113 21.8923 8.33269C21.9973 9.30167 22 10.5806 22 12.5C22 14.4194 21.9973 15.6983 21.8923 16.6673C21.7913 17.5989 21.6155 18.004 21.4271 18.2634C21.242 18.518 21.018 18.742 20.7634 18.9271C20.504 19.1155 20.0989 19.2913 19.1673 19.3923C18.1983 19.4973 16.9194 19.5 15 19.5H9C7.08058 19.5 5.80167 19.4973 4.83269 19.3923C3.90113 19.2913 3.49605 19.1155 3.23664 18.9271C2.98196 18.742 2.75799 18.518 2.57295 18.2634C2.38448 18.004 2.20866 17.5989 2.10773 16.6673C2.00275 15.6983 2 14.4194 2 12.5C2 10.5806 2.00275 9.30167 2.10773 8.33269C2.20866 7.40113 2.38448 6.99605 2.57295 6.73664C2.75799 6.48196 2.98196 6.25799 3.23664 6.07295C3.49605 5.88448 3.90113 5.70866 4.83269 5.60773C5.80167 5.50275 7.08058 5.5 9 5.5Z"
fill="#0F0F0F"
/>
</svg>
</a>
</li>
<li class="footer__social-item">
<a href="#" class="footer__social-link">
<svg
width="22"
height="19"
viewBox="0 0 22 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.7829 1.41849C19.1314 1.3359 19.3744 1.25469 19.5735 1.16939C19.8525 1.04985 20.0839 0.906651 20.4493 0.665481C20.7564 0.462801 21.15 0.445151 21.474 0.619531C21.798 0.793911 22.0001 1.13214 22.0001 1.5001C22.0001 2.58104 21.8655 3.46697 21.5536 4.24665C21.2912 4.90245 20.9227 5.43511 20.4818 5.91992C20.2955 9.2831 19.322 11.9241 17.8337 13.9251C16.2912 15.999 14.2387 17.3271 12.0752 18.0708C9.91796 18.8123 7.6387 18.978 5.59678 18.727C3.56824 18.4776 1.69312 17.806 0.386131 16.7894C0.0282006 16.511 -0.0976114 16.0267 0.0795906 15.6093C0.256781 15.1919 0.692641 14.946 1.14152 15.0101C2.42748 15.1939 3.66538 14.9015 4.68327 14.4834C4.48289 14.3744 4.29396 14.2564 4.11836 14.1349C3.19082 13.4927 2.44248 12.621 2.10564 11.9474C1.96626 11.6686 1.96482 11.3408 2.10175 11.0608C2.17239 10.9164 2.27569 10.7932 2.40111 10.6994C1.04685 9.5817 0.500071 8.0358 0.500071 7.0001C0.500071 6.69216 0.641941 6.4014 0.884671 6.21189C0.986721 6.13221 1.10182 6.07417 1.22316 6.03921C1.12182 5.74246 1.04318 5.44266 0.983231 5.15241C0.717471 3.86554 0.741061 2.41308 1.02992 1.25757C1.12877 0.862161 1.45772 0.566301 1.86136 0.509771C2.26501 0.453231 2.66257 0.647341 2.86625 1.00038C3.94376 2.86806 5.93123 4.00968 7.78094 4.68592C8.65057 5.00386 9.45606 5.20646 10.0597 5.33103C10.19 4.11043 10.5309 3.10384 11.0539 2.30435C11.744 1.24956 12.7065 0.625491 13.7402 0.347221C15.5228 -0.132679 17.5009 0.414071 18.7829 1.41849ZM9.74846 7.3087C9.06336 7.1711 8.12179 6.94001 7.0942 6.56432C5.73698 6.06813 4.16096 5.29442 2.84079 4.09595C2.86442 4.3165 2.89797 4.53516 2.9419 4.7479C3.16315 5.81924 3.57427 6.41923 3.94728 6.60574C4.40349 6.83384 4.61492 7.3687 4.43795 7.8471C4.19835 8.4948 3.56817 8.548 2.99558 8.4048C3.45611 9.0953 4.28385 9.7837 5.66447 10.0138C6.14065 10.0931 6.49215 10.5014 6.49994 10.984C6.50772 11.4667 6.16956 11.8861 5.69618 11.9807L4.82572 12.1548C4.95888 12.2706 5.10307 12.3841 5.25678 12.4905C5.95369 12.973 6.65344 13.181 7.25753 13.03C7.70998 12.9169 8.18054 13.1316 8.3917 13.5474C8.60286 13.9632 8.49853 14.4698 8.14025 14.7684C7.49633 15.3044 6.74432 15.7344 5.99065 16.0914C5.63683 16.259 5.24142 16.4244 4.81197 16.57C5.14226 16.6404 5.48593 16.6983 5.84086 16.7419C7.61143 16.9596 9.58216 16.8129 11.425 16.1794C13.2615 15.5482 14.9591 14.4388 16.229 12.7315C17.4972 11.0265 18.3821 8.6669 18.5008 5.46315C18.5101 5.21091 18.6145 4.97154 18.793 4.79306C19.2427 4.34341 19.6142 3.82802 19.797 3.21455C19.4771 3.31427 19.1169 3.40059 18.6879 3.48261C18.3624 3.54483 18.0273 3.44181 17.793 3.20751C17.0285 2.44299 15.5165 1.94023 14.2601 2.27846C13.6687 2.43765 13.1312 2.78228 12.7276 3.3993C12.3154 4.02928 12.0001 5.01069 12.0001 6.50015C12.0001 6.78312 11.8802 7.0528 11.6702 7.2425C11.1722 7.692 10.3341 7.4263 9.74846 7.3087Z"
fill="#0F0F0F"
/>
</svg>
</a>
</li>
<li class="footer__social-item">
<a href="#" class="footer__social-link">
<svg
width="22"
height="23"
viewBox="0 0 22 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19 0.5C20.6569 0.5 22 1.84315 22 3.5V19.5C22 21.1569 20.6569 22.5 19 22.5H3C1.34315 22.5 0 21.1569 0 19.5V3.5C0 1.84315 1.34315 0.5 3 0.5H19ZM19 2.5C19.5523 2.5 20 2.94772 20 3.5V19.5C20 20.0523 19.5523 20.5 19 20.5H14V13.4999H16.0762C16.5066 13.4999 16.8887 13.2245 17.0249 12.8161L17.4679 11.4871C17.6298 11.0014 17.2683 10.4999 16.7564 10.4999H14V8.49992C14 7.99992 14.5 7.49992 15 7.49992H17C17.5523 7.49992 18 7.0522 18 6.49992V5.81393C18 5.49091 17.7937 5.2013 17.4813 5.11887C16.1705 4.77295 15 4.77295 15 4.77295C12.5 4.77295 11 6.49992 11 7.99992V10.4999H9C8.44772 10.4999 8 10.9476 8 11.4999V12.4999C8 13.0522 8.44771 13.4999 9 13.4999H11V20.5H3C2.44772 20.5 2 20.0523 2 19.5V3.5C2 2.94772 2.44772 2.5 3 2.5H19Z"
fill="#0F0F0F"
/>
</svg>
</a>
</li>
<li class="footer__social-item">
<a href="#" class="footer__social-link">
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 18.5C15.3137 18.5 18 15.8137 18 12.5C18 9.18629 15.3137 6.5 12 6.5C8.68629 6.5 6 9.18629 6 12.5C6 15.8137 8.68629 18.5 12 18.5ZM12 16.5C14.2091 16.5 16 14.7091 16 12.5C16 10.2909 14.2091 8.5 12 8.5C9.79086 8.5 8 10.2909 8 12.5C8 14.7091 9.79086 16.5 12 16.5Z"
fill="#0F0F0F"
/>
<path
d="M18 5.5C17.4477 5.5 17 5.94772 17 6.5C17 7.05228 17.4477 7.5 18 7.5C18.5523 7.5 19 7.05228 19 6.5C19 5.94772 18.5523 5.5 18 5.5Z"
fill="#0F0F0F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.65396 4.77606C1 6.05953 1 7.73969 1 11.1V13.9C1 17.2603 1 18.9405 1.65396 20.2239C2.2292 21.3529 3.14708 22.2708 4.27606 22.846C5.55953 23.5 7.23969 23.5 10.6 23.5H13.4C16.7603 23.5 18.4405 23.5 19.7239 22.846C20.8529 22.2708 21.7708 21.3529 22.346 20.2239C23 18.9405 23 17.2603 23 13.9V11.1C23 7.73969 23 6.05953 22.346 4.77606C21.7708 3.64708 20.8529 2.7292 19.7239 2.15396C18.4405 1.5 16.7603 1.5 13.4 1.5H10.6C7.23969 1.5 5.55953 1.5 4.27606 2.15396C3.14708 2.7292 2.2292 3.64708 1.65396 4.77606ZM13.4 3.5H10.6C8.88684 3.5 7.72225 3.50156 6.82208 3.5751C5.94524 3.64674 5.49684 3.77659 5.18404 3.93597C4.43139 4.31947 3.81947 4.93139 3.43597 5.68404C3.27659 5.99684 3.14674 6.44524 3.0751 7.32208C3.00156 8.22225 3 9.38684 3 11.1V13.9C3 15.6132 3.00156 16.7777 3.0751 17.6779C3.14674 18.5548 3.27659 19.0032 3.43597 19.316C3.81947 20.0686 4.43139 20.6805 5.18404 21.064C5.49684 21.2234 5.94524 21.3533 6.82208 21.4249C7.72225 21.4984 8.88684 21.5 10.6 21.5H13.4C15.1132 21.5 16.2777 21.4984 17.1779 21.4249C18.0548 21.3533 18.5032 21.2234 18.816 21.064C19.5686 20.6805 20.1805 20.0686 20.564 19.316C20.7234 19.0032 20.8533 18.5548 20.9249 17.6779C20.9984 16.7777 21 15.6132 21 13.9V11.1C21 9.38684 20.9984 8.22225 20.9249 7.32208C20.8533 6.44524 20.7234 5.99684 20.564 5.68404C20.1805 4.93139 19.5686 4.31947 18.816 3.93597C18.5032 3.77659 18.0548 3.64674 17.1779 3.5751C16.2777 3.50156 15.1132 3.5 13.4 3.5Z"
fill="#0F0F0F"
/>
</svg>
</a>
</li>
</ul>
</div>
<div class="footer__nav">
<ul class="footer__nav-list">
<li class="footer__nav-item">
<a href="#" class="footer__nav-link"
>Legal Terms and Conditions</a
>
</li>
<li class="footer__nav-item">
<a href="#" class="footer__nav-link">Data Protection</a>
</li>
<li class="footer__nav-item">
<a href="#" class="footer__nav-link">Personalize my choices</a>
</li>
<li class="footer__nav-item">
<a href="#" class="footer__nav-link">General Sales Conditions</a>
</li>
<li class="footer__nav-item">
<a href="#" class="footer__nav-link">Ethics & compliance</a>
</li>
<li class="footer__nav-item">
<a href="#" class="footer__nav-link">Careers</a>
</li>
</ul>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>