-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
613 lines (483 loc) · 35.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
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
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
<!doctype html>
<html class="js" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Candleaf</title>
<link rel="stylesheet" href="build/output.css" />
<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=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet" />
</head>
<body class="font-poppins">
<!-- Navbar -->
<nav id="navbar" class="fixed flex justify-around h-24 w-full bg-white z-50 shadow-lg lg:h-16">
<div class="flex justify-between items-center md:justify-evenly md:w-full">
<svg onClick="showNav()" class="ml-5 lg:hidden" width="32" height="100" viewBox="0 0 32 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="3" fill="#272727" />
<rect y="7" width="32" height="3" fill="#272727" />
<rect y="14" width="32" height="3" fill="#272727" />
</svg>
<!-- Mobile navbar slide -->
<div onClick="hideNav()" id="navbar-overlay"
class="absolute bg-black/30 w-screen h-screen top-0 left-0 transition-all ease-out duration-300 z-40 hidden lg:hidden">
</div>
<div id="navbar-mobile"
class="absolute flex place-items-start justify-center bg-white shadow-lg w-2/3 h-screen top-0 -left-full transition-all ease-out duration-300 z-50 md:w-2/5">
<svg onClick="hideNav()" class="absolute mt-10 ml-44" width="25" height="25" viewBox="0 0 32 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="21" width="32" height="3" transform="rotate(-40 3 21)" fill="#272727" />
<rect x="5" width="32" height="3" transform="rotate(40 5 0)" fill="#272727" />
</svg>
<nav id="navbar-mobile-links" class="flex flex-col flex-wrap mt-48 gap-10 items-center justify-center">
<a class="font-sans font-semibold text-xl active:bg-base-300 active:px-8 active:py-2 active:rounded-md active:transition-all active:duration-100"
href="#">Discovery</a>
<a class="font-sans font-semibold text-xl active:bg-base-300 active:px-8 active:py-2 active:rounded-md active:transition-all active:duration-100"
href="#">About</a>
<a class="font-sans font-semibold text-xl active:bg-base-300 active:px-8 active:py-2 active:rounded-md active:transition-all active:duration-100"
href="#">Contact us</a>
</nav>
<div id="navbar-mobile-social" class="absolute flex top-3/4 gap-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-instagram"
viewBox="0 0 16 16">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-facebook"
viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-youtube"
viewBox="0 0 16 16">
<path
d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</div>
</div>
<!-- Header logo -->
<a class="h-2/5 w-2/5 ml-5 lg:h-auto md:w-[180px] lg:w-[126px]" href="index.html"><img src="img/logo-header.png"
alt="Background mobile" /></a>
<div class="hidden lg:flex">
<nav id="navbar-desktop-links" class="flex gap-10 mx-96 items-center justify-center text-md">
<a class="font-sans font-semibold" href="#">Discovery</a>
<a class="font-sans font-semibold" href="#">About</a>
<a class="font-sans font-semibold" href="#">Contact us</a>
</nav>
</div>
<div class="flex justify-between items-center">
<svg class="mr-5" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.375 23.25C21.375 23.25 23.25 23.25 23.25 21.375C23.25 19.5 21.375 13.875 12 13.875C2.625 13.875 0.75 19.5 0.75 21.375C0.75 23.25 2.625 23.25 2.625 23.25H21.375ZM2.63438 21.48V21.4762V21.48ZM2.66625 21.375H21.3337C21.3425 21.374 21.3513 21.3727 21.36 21.3713L21.375 21.3675C21.3731 20.9063 21.0863 19.5187 19.815 18.2475C18.5925 17.025 16.2919 15.75 12 15.75C7.70625 15.75 5.4075 17.025 4.185 18.2475C2.91375 19.5187 2.62875 20.9063 2.625 21.3675C2.63872 21.3701 2.65247 21.3726 2.66625 21.375V21.375ZM21.3675 21.48V21.4762V21.48ZM12 10.125C12.9946 10.125 13.9484 9.72991 14.6516 9.02665C15.3549 8.32339 15.75 7.36956 15.75 6.375C15.75 5.38044 15.3549 4.42661 14.6516 3.72335C13.9484 3.02009 12.9946 2.625 12 2.625C11.0054 2.625 10.0516 3.02009 9.34835 3.72335C8.64509 4.42661 8.25 5.38044 8.25 6.375C8.25 7.36956 8.64509 8.32339 9.34835 9.02665C10.0516 9.72991 11.0054 10.125 12 10.125V10.125ZM17.625 6.375C17.625 7.86684 17.0324 9.29758 15.9775 10.3525C14.9226 11.4074 13.4918 12 12 12C10.5082 12 9.07742 11.4074 8.02252 10.3525C6.96763 9.29758 6.375 7.86684 6.375 6.375C6.375 4.88316 6.96763 3.45242 8.02252 2.39752C9.07742 1.34263 10.5082 0.75 12 0.75C13.4918 0.75 14.9226 1.34263 15.9775 2.39752C17.0324 3.45242 17.625 4.88316 17.625 6.375V6.375Z"
fill="#272727" />
</svg>
<svg class="mr-5" width="25" height="25" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 2.15625C0 1.96563 0.0757252 1.78281 0.210517 1.64802C0.345309 1.51323 0.528126 1.4375 0.71875 1.4375H2.875C3.03533 1.43754 3.19103 1.49119 3.31736 1.58991C3.44369 1.68863 3.53339 1.82675 3.57219 1.98231L4.15437 4.3125H20.8437C20.95 4.31256 21.055 4.3362 21.1511 4.38172C21.2471 4.42723 21.3319 4.49349 21.3993 4.57571C21.4666 4.65793 21.5149 4.75407 21.5407 4.8572C21.5664 4.96033 21.569 5.06789 21.5481 5.17213L20.1106 12.3596C20.0792 12.5164 19.9964 12.6581 19.8753 12.7625C19.7543 12.8669 19.6018 12.928 19.4422 12.9361L5.934 13.6146L6.34656 15.8125H18.6875C18.8781 15.8125 19.0609 15.8882 19.1957 16.023C19.3305 16.1578 19.4062 16.3406 19.4062 16.5312C19.4062 16.7219 19.3305 16.9047 19.1957 17.0395C19.0609 17.1743 18.8781 17.25 18.6875 17.25H5.75C5.58243 17.2498 5.42019 17.1911 5.29131 17.0841C5.16243 16.977 5.07502 16.8282 5.04419 16.6635L2.88937 5.18506L2.31437 2.875H0.71875C0.528126 2.875 0.345309 2.79927 0.210517 2.66448C0.0757252 2.52969 0 2.34687 0 2.15625ZM4.45912 5.75L5.66662 12.1886L18.8111 11.5288L19.9669 5.75H4.45912ZM7.1875 17.25C6.425 17.25 5.69373 17.5529 5.15457 18.0921C4.6154 18.6312 4.3125 19.3625 4.3125 20.125C4.3125 20.8875 4.6154 21.6188 5.15457 22.1579C5.69373 22.6971 6.425 23 7.1875 23C7.95 23 8.68126 22.6971 9.22043 22.1579C9.7596 21.6188 10.0625 20.8875 10.0625 20.125C10.0625 19.3625 9.7596 18.6312 9.22043 18.0921C8.68126 17.5529 7.95 17.25 7.1875 17.25ZM17.25 17.25C16.4875 17.25 15.7562 17.5529 15.2171 18.0921C14.6779 18.6312 14.375 19.3625 14.375 20.125C14.375 20.8875 14.6779 21.6188 15.2171 22.1579C15.7562 22.6971 16.4875 23 17.25 23C18.0125 23 18.7438 22.6971 19.2829 22.1579C19.8221 21.6188 20.125 20.8875 20.125 20.125C20.125 19.3625 19.8221 18.6312 19.2829 18.0921C18.7438 17.5529 18.0125 17.25 17.25 17.25ZM7.1875 18.6875C6.80625 18.6875 6.44062 18.839 6.17103 19.1085C5.90145 19.3781 5.75 19.7438 5.75 20.125C5.75 20.5062 5.90145 20.8719 6.17103 21.1415C6.44062 21.411 6.80625 21.5625 7.1875 21.5625C7.56875 21.5625 7.93438 21.411 8.20397 21.1415C8.47355 20.8719 8.625 20.5062 8.625 20.125C8.625 19.7438 8.47355 19.3781 8.20397 19.1085C7.93438 18.839 7.56875 18.6875 7.1875 18.6875ZM17.25 18.6875C16.8687 18.6875 16.5031 18.839 16.2335 19.1085C15.9639 19.3781 15.8125 19.7438 15.8125 20.125C15.8125 20.5062 15.9639 20.8719 16.2335 21.1415C16.5031 21.411 16.8687 21.5625 17.25 21.5625C17.6312 21.5625 17.9969 21.411 18.2665 21.1415C18.536 20.8719 18.6875 20.5062 18.6875 20.125C18.6875 19.7438 18.536 19.3781 18.2665 19.1085C17.9969 18.839 17.6312 18.6875 17.25 18.6875Z"
fill="#272727" />
</svg>
</div>
</div>
</nav>
<!-- Hero section -->
<section id="hero-section">
<div class="relative flex h-auto items-center justify-center">
<div
class="h-full w-full md:block md:w-full md:h-auto lg:hidden lg:h-[780px] delay-[300ms] duration-[600ms] taos:translate-y-[-200px] taos:opacity-0"
data-taos-offset="500">
<img class="object-cover" src="img/hero-mobile.jpg" alt="Background mobile" />
</div>
<div
class="hidden lg:block lg:h-[780px] lg:w-full delay-[300ms] duration-[600ms] taos:translate-y-[-200px] taos:opacity-0"
data-taos-offset="500">
<img class="object-cover" src="img/hero-desktop.jpg" alt="Background desktop" />
</div>
<div
class="absolute flex flex-wrap items-center justify-center rounded-lg backdrop-blur-md bg-white/70 w-11/12 h-96 lg:w-[730px] lg:mt-[100px] delay-[300ms] duration-[600ms] taos:translate-x-[200px] taos:opacity-0"
data-taos-offset="400">
<div class="flex flex-col gap-0 items-center justify-center md:mt-10">
<div class="flex flex-col gap-0 items-center justify-center mt-10"><span
class="left-40 text-4xl lg:mb-5">🌱</span>
<div class="flex flex-col md:flex-row lg:flex-row"><span class="font-semibold text-5xl">The nature </span>
<span class="self-center font-semibold text-5xl md:ml-2 lg:ml-2"> candle</span>
</div>
</div>
<div class="mt-5">
<p class="mx-5 font-sans text-center text-lg">
All handmade with natural soy wax,
Candleaf is a companion for all your
pleasure moments
</p>
</div>
</div>
<button
class="btn btn-primary font-sans font-normal text-lg active:bg-emerald-600 text-white py-0 px-8 mb-10 rounded mt-5 lg:mb-5">
Discover our collection
</button>
</div>
</div>
</section>
<!-- Products section -->
<section id="products-section">
<div
class="flex flex-col items-center justify-center relative h-auto lg:mb-40 delay-[300ms] duration-[600ms] taos:[transform:translate3d(-200px,0,0)_scale(0.6)] taos:opacity-0"
data-taos-offset="500">
<div class="flex flex-col items-center justify-center lg:mt-24">
<p class="mt-16 text-5xl font-medium text-[#0B254B]">Products</p>
<p
class="flex flex-wrap text-center mt-2 mb-10 font-medium text-lg max-w-[250px] lg:max-w-[400px] text-[#0B254B]/70">
Order it for you or for your beloved ones
</p>
</div>
<div
class="flex flex-col items-center justify-center gap-10 md:flex-row md:flex-wrap md:w-5/6 lg:flex-row lg:flex-wrap lg:gap-10 lg:w-5/6">
<!-- Item card 1 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item1.png" alt="Item 1">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Spiced Mint</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 2 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]"
data-taos-offset="500">
<img class="object-contain h-full w-full" src="img/item2.png" alt="Item 2">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Sweet Strawberry</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 3 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item3.png" alt="Item 3">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Juicy Lemon</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 4 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item4.png" alt="Item 4">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Clean Lavender</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 5 - Desktop only -->
<div id="item-card-mobile"
class="relative items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] hidden md:block md:w-[255px] md:h-[230px] lg:block lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item5.png" alt="Item 5">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Salted Orange</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 6 - Desktop only -->
<div id="item-card-mobile"
class="relative items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] hidden md:block md:w-[255px] md:h-[230px] lg:block lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item6.png" alt="Item 6">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Fragant Cinnamon</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 7 - Desktop only -->
<div id="item-card-mobile"
class="relative items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] hidden md:block md:w-[255px] md:h-[230px] lg:block lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item7.png" alt="Item 7">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Summer Cherries</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 8 - Desktop only -->
<div id="item-card-mobile"
class="relative items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] hidden md:block md:w-[255px] md:h-[230px] lg:block lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item8.png" alt="Item 8">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Cool Blueberries</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<button
class="btn btn-primary font-sans font-normal top-20 left-14 text-lg active:bg-emerald-600 text-white py-0 px-8 rounded mb-16 md:hidden lg:hidden">
See more
</button>
</div>
</div>
</section>
<!-- Benefits section -->
<section id="benefits-section">
<div
class="flex items-center justify-center bg-base-200 w-full h-[945px] md:mt-20 md:h-[1045px] delay-[300ms] duration-[600ms] taos:[transform:translate3d(-200px,0,0)_scale(0.6)] taos:opacity-0"
data-taos-offset="500">
<div class="flex flex-col items-center justify-center md:py-20 lg:flex-row lg:flex-shrink lg:max-w-3/4 lg:mx-40">
<div class="flex flex-col max-w-1/2 h-auto">
<div
class="flex flex-col mt-30 mb-10 justify-center items-center w-auto h-auto lg:justify-center lg:items-start">
<span class="font-medium text-4xl lg:text-5xl">Clean and</span>
<span class="font-medium text-4xl lg:text-5xl">fragant soy wax</span>
<span class="text-[#56B280] font-medium text-lg mt-2">Made for your home and for your
wellness</span>
</div>
<div class="mr-5 ml-5 shadow-xl lg:w-3/4 lg:hidden">
<img src="img/benefits-image.png" alt="Benefits image">
</div>
<div class="flex flex-col lg:flex-col lg:items-start lg:justify-start">
<div class="flex flex-wrap mt-10 gap-5 justify-center lg:flex lg:justify-start lg:items-start lg:-ml-3">
<div class="ml-3 flex items-start justify-center">
<svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path
d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="font-medium text-xl">Eco-sustainable: All recycable material, 0% CO2
emissions</span>
</div>
<div class="ml-3 flex items-start justify-center">
<svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path
d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="font-medium text-xl self-center">Hypoallergenic: 100% natural, human-friendly
ingredients</span>
</div>
<div class="ml-3 flex items-start justify-center">
<svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path
d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
</svg>
<span class="font-medium text-xl self-center">Handmade: All candles are craftly made with love</span>
</div>
</div>
</div>
<button
class="btn btn-primary font-sans font-normal top-20 left-14 text-lg active:bg-emerald-600 text-white self-center py-0 px-8 rounded lg:self-auto mt-10 max-w-[200px]">
Learn more
</button>
</div>
<div
class="mr-5 ml-5 shadow-xl lg:max-w-[600px] hidden lg:block delay-[300ms] duration-[600ms] taos:translate-y-[100%] taos:invisible"
data-taos-offset="300">
<img src="img/benefits-image.png" alt="Benefits image">
</div>
</div>
</div>
</section>
<!-- Testimonials section -->
<section>
<div
class="bg-[#56B280]/10 w-full h-[650px] flex flex-col justify-center delay-[300ms] duration-[600ms] taos:translate-x-[200px] taos:opacity-0"
data-taos-offset="300">
<p class="mt-16 text-5xl font-medium text-[#0B254B] self-center">Testimonials</p>
<p
class="self-center flex flex-wrap text-center mt-2 mb-10 font-medium text-lg max-w-[250px] lg:max-w-[400px] text-[#0B254B]/70">
Some quotes from our happy costumers
</p>
<!-- Testimonial cards scroll -->
<div
class="max-w-full h-auto overflow-x-scroll no-scrollbar px-5 flex gap-5 justify-between self-start md:overflow-auto md:self-center lg:overflow-hidden lg:self-center">
<!-- Testimonial card 1 -->
<div
class="flex flex-col items-center justify-center min-h-[225px] min-w-[267px] rounded-md bg-white shadow-lg md:w-[267px] lg:min-h-[295px] lg:min-w-[350px] lg:max-h-[295px] lg:max-w-[350px]">
<div class="w-[80px] h-[80px] lg:w-[120px] lg:h-[120px] rounded-full">
<img class="object-cover" src="img/reviewer1.png" alt="Reviewer 1">
</div>
<div class="rating">
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" checked />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
</div>
<div
class="self-center text-xl font-medium text-center text-[#0B254B] max-w-[200px] md:text-md lg:text-lg lg:flex lg:flex-wrap lg:mt-5">
"I
love it! No
more air fresheners"
</div>
<div class="text-secondary lg:text-md">Luisa</div>
</div>
<!-- Testimonial card 2 -->
<div
class="flex flex-col items-center justify-center min-h-[225px] min-w-[267px] rounded-md bg-white shadow-lg md:w-[267px] lg:min-h-[295px] lg:min-w-[350px] lg:max-h-[295px] lg:max-w-[350px]">
<div class="w-[80px] h-[80px] lg:w-[120px] lg:h-[120px] rounded-full">
<img class="object-cover" src="img/reviewer2.png" alt="Reviewer 2">
</div>
<div class="rating">
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" checked />
</div>
<div
class="self-center text-xl font-medium text-center text-[#0B254B] max-w-[200px] md:text-md lg:text-lg lg:flex lg:flex-wrap lg:mt-5">
"Recommended for everyone"
</div>
<div class="text-secondary lg:text-md">Eduardo</div>
</div>
<!-- Testimonial card 3 -->
<div
class="flex flex-col items-center justify-center min-h-[225px] min-w-[267px] rounded-md bg-white shadow-lg md:w-[267px] lg:min-h-[295px] lg:min-w-[350px] lg:max-h-[295px] lg:max-w-[350px]">
<div class="w-[80px] h-[80px] lg:w-[120px] lg:h-[120px] rounded-full">
<img class="object-cover" src="img/reviewer3.png" alt="Reviewer 3">
</div>
<div class="rating">
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" checked />
<input type="radio" name="rating-1" class="bg-[#56B280] mask mask-star" />
</div>
<div
class="self-center text-xl font-medium text-center text-[#0B254B] max-w-[210px] md:text-md lg:text-lg lg:flex lg:flex-wrap lg:mt-5">
"Looks very natural, the smell is
awesome"
</div>
<div class="text-secondary lg:text-md">Mart</div>
</div>
</div>
</div>
</section>
<!-- Popular products -->
<section id="products-section">
<div
class="flex flex-col items-center justify-center relative h-auto mb-20 lg:mb-40 delay-[300ms] duration-[600ms] taos:translate-x-[200px] taos:opacity-0"
data-taos-offset="300">
<div class="flex flex-col items-center justify-center">
<p class="mt-16 text-5xl font-medium text-[#0B254B]">Popular</p>
<p
class="flex flex-wrap text-center mt-2 mb-10 font-medium text-lg max-w-[250px] lg:max-w-[400px] text-[#0B254B]/70">
Our top selling products that you may like<br />
</p>
</div>
<div
class="flex flex-col items-center justify-center gap-10 md:flex-row md:flex-wrap md:w-5/6 lg:flex-row lg:flex-wrap lg:gap-10 lg:w-5/6">
<!-- Item card 1 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item1.png" alt="Item 1">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Spiced Mint</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 2 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item2.png" alt="Item 2">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Sweet Strawberry</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 3 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item3.png" alt="Item 3">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Juicy Lemon</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
<!-- Item card 4 -->
<div id="item-card-mobile"
class="relative flex items-end justify-center bg-base-200 w-[356px] h-[147px] shadow-[0_0px_20px_1px_rgba(0,0,0,0.1)] md:w-[255px] md:h-[230px] lg:w-[255px] lg:h-[230px]">
<img class="object-contain h-full w-full" src="img/item4.png" alt="Item 4">
<div class="flex flex-col absolute bg-white bottom-0 w-full h-[50px]">
<span class="text-lg text-[#0B254B] font-medium mt-1 ml-5">Clean Lavender</span>
<span
class="absolute text-xl text-[#56B280] font-medium self-end top-5 right-5 md:text-sm lg:text-sm">9,99$</span>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="relative flex flex-col bg-black h-[674px] w-full lg:px-48 md:h-[500px] lg:h-[450px] lg:pb-48">
<div class="flex flex-col justify-center mt-10 mx-5 border-t-2 lg:mt-20">
</div>
<div class="relative lg:flex lg:justify-between h-auto">
<div class="flex flex-col justify-center mx-5 lg:max-w-[500px]">
<div class="w-[150px] mt-5 h-auto lg:w-[250px]"><img class="object-cover" src="img/logo-footer.png"
alt="Logo footer">
</div>
<span class="mt-5 text-white">Your natural candle made for your home and for your wellness.</span>
<div id="footer-social" class="absolute text-white top-36 flex gap-5 md:top-32 lg:top-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-instagram"
viewBox="0 0 16 16">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-facebook"
viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-youtube"
viewBox="0 0 16 16">
<path
d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
</svg>
</div>
</div>
<!-- Links -->
<div class="relative flex gap-14 ml-5 mt-16 flex-wrap md:mt-20">
<div class="text-white font-medium gap-5 flex flex-col">
<span class="text-[#56B280] mb-2">Discovery</span>
<span>New season</span>
<span>Most searched</span>
<span>Most selled</span>
</div>
<div class="text-white font-medium gap-5 flex flex-col">
<span class="text-[#56B280] mb-2">Info</span>
<span>Contact us</span>
<span>Privacy policies</span>
<span>Terms & conditions</span>
</div>
<div class="text-white font-medium gap-5 flex flex-col">
<span class="text-[#56B280] mb-2">About</span>
<span>Help</span>
<span>Shipping</span>
<span>Affiliate</span>
</div>
</div>
</div>
</div>
</section>
<!-- Credits -->
<div class="bg-base-300 flex justify-center items-center py-5 h-auto w-full lg:flex-row">
<div class="flex flex-col items-center justify-center lg:flex-row lg:gap-10">
<div>Coded by <a class="underline" href="https://github.com/scsoares">Sarah Soares</a></div>
<div>Original UI/UX design by <a class="underline" href="https://www.figma.com/@uxbly">Uxbly</a></div>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/taos.js"></script>
<script src="js/script.js"></script>
</body>
</html>