-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
655 lines (581 loc) · 34.1 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
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fruit Shop Site</title>
<link rel="icon" href="./images/logo.png" />
<!-- tailwind and daisy UI -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<!-- google fonts manrope -->
<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=Manrope:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<style>
.font-manrope {
font-family: "Manrope", sans-serif;
}
</style>
<!-- coustom style -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
primary: '#F85559;',
footerbg:'#121212',
descriptionColor:'#777',
}
},
},
};
</script>
</head>
<body class=".font-manrope">
<!-- navbar start -->
<header>
<!-- Responsiveness for medium to Large Device-->
<nav class="hidden md:block max-w-screen-xl mx-auto">
<div class="navbar bg-[#F85559] rounded-full px-10 mx-auto my-12">
<div class="grid grid-flow-col gap-6 text-lg font-medium text-white">
<a class="link link-hover">Home</a>
<a class="link link-hover">About Us</a>
<a class="link link-hover">Shop</a>
<a class="link link-hover">All Fruits</a>
</div>
<div class="flex flex-1 justify-center gap-2 ">
<img src="./images/logo.png" alt="">
<h1 class="inline text-4xl font-bold text-white"> Fruit Brust</h1>
</div>
<div class="form-control border-none relative">
<input type="text" placeholder="Search" class=" input rounded-full w-24 md:w-auto" />
<img class="absolute top-1/2 transform -translate-y-1/2 left-3 text-gray-500 ml-40" src="./icons/Frame.svg" alt="">
</div>
</nav>
<!-- Responsiveness for mobile-->
<nav class="visible container flex justify-center items-center mx-auto md:hidden">
<div class="navbar flex-1 gap-2 justify-center mx-auto">
<img class=""src="./images/logo.png" alt="">
<h1 class="inline text-xl text-[#121212] font-bold"> Fruit Brust</h1>
</div>
</div>
<div class="navbar-end flex-1 justify-center mx-auto">
<div class="navbar-start flex justify-center mx-auto">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] shadow bg-base-100 rounded-box w-max p-0 ">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Shop</a></li>
<li><a>All Fruits</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- navbar end -->
<main >
<!-- slider section start -->
<div class=" lg:max-w-screen-xl mx-auto"><div class="carousel container max-w-screen-xl mx-auto">
<!-- slide 1 -->
<div id="slide1" class="carousel-item relative w-full mx-auto ">
<div class=" w-full absolute text-center bg-gradient-to-r from-[#121212] to-[#121212] opacity-70" >
<h1 class="mb-5 text-white lg:text-7xl font-bold">Exotic tastes at your <br> doorstep</h1>
<p class="mb-5 lg:font-medium lg:text-2xl text-white">We supply highly quality organic products</p>
<button class="btn btn-error text-white">Shop Now</button>
</div>
<img class="" src="./images/banner1.png" class="w-full mx-auto" />
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide4" class="btn btn-circle">❮</a>
<a href="#slide2" class="btn btn-circle">❯</a>
</div>
</div>
<!-- slide 2 -->
<div id="slide2" class="carousel-item relative w-full mx-auto">
<div class=" w-full absolute text-center bg-gradient-to-r from-[#121212] to-[#121212] opacity-70 " >
<h1 class="mb-5 text-white lg:text-7xl font-bold">Exotic tastes at your <br> doorstep</h1>
<p class="mb-5 lg:font-medium lg:text-2xl text-white">We supply highly quality organic products</p>
<button class="btn btn-error text-white">Shop Now</button>
</div>
<img class="" src="./images/banner2.png" class="w-full mx-auto" />
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide1" class="btn btn-circle">❮</a>
<a href="#slide3" class="btn btn-circle">❯</a>
</div>
</div>
<!-- slide 3 -->
<div id="slide3" class="carousel-item relative w-full mx-auto ">
<div class=" w-full absolute text-center bg-gradient-to-r from-[#121212] to-[#121212] opacity-70" >
<h1 class="mb-5 text-white lg:text-7xl font-bold">Exotic tastes at your <br> doorstep</h1>
<p class="mb-5 lg:font-medium lg:text-2xl text-white">We supply highly quality organic products</p>
<button class="btn btn-error text-white">Shop Now</button>
</div>
<img src="./images/banner3.png" class="w-full mx-auto" />
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide2" class="btn btn-circle">❮</a>
<a href="#slide4" class="btn btn-circle">❯</a>
</div>
</div>
<!-- slide 4 -->
<div id="slide4" class="carousel-item relative w-full mx-auto ">
<div class=" w-full absolute text-center bg-gradient-to-r from-[#121212] to-[#121212] opacity-70" >
<h1 class="mb-5 text-white lg:text-7xl font-bold">Exotic tastes at your <br> doorstep</h1>
<p class="mb-5 lg:font-medium lg:text-2xl text-white">We supply highly quality organic products</p>
<button class="btn btn-error text-white">Shop Now</button>
</div>
<img src="./images/banner4.png" class="w-full mx-auto" />
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
<a href="#slide3" class="btn btn-circle">❮</a>
<a href="#slide1" class="btn btn-circle">❯</a>
</div>
</div>
</div></div>
<!-- slider section end -->
<!-- lower-part-of-slider-section-start -->
<section class=" hidden lg:block max-w-screen-md mx-auto -mt-10 shadow-box">
<div class="relative z-30 flex gap-10 bg-white rounded justify-center mx-auto text-center p-5">
<div>
<img src="./images/fruit1.png" alt="">
<p class="text-xl">
Graps
</p>
</div>
<div>
<img src="./images/fruit2.png" alt="">
<p class="text-xl">
Orange
</p>
</div>
<div>
<img src="./images/fruit3.png" alt="">
<p class="text-xl">
Mango
</p>
</div>
<div>
<img src="./images/fruit4.png" alt="">
<p class="text-xl">
Stawberry
</p>
</div>
<div>
<img src="./images/fruit5.png" alt="">
<p class="text-xl">
Pomegranate
</p>
</div>
</div>
</section>
<!-- lower-part-of-slider-section-end -->
<!-- deal of the day section start -->
<div class=" flex flex-col space-y-10 my-5 lg:max-w-screen-xl mx-auto md:mt-30 lg:flex-row justify-center items-center lg:space-x-80 lg:mt-30 lg:mb-0">
<div class="flex-1 p-10 lg:mx-auto lg:p-5 first-letter:justify-center items-center">
<h2 class=" text-3xl lg:text-4xl lg:font-bold">Deal of the day</h2>
<p class=" lg:text-xl font-normal">Contrary to popular belief, is not simply random text. It has roots in a piece of classical <br> Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<div class="flex-1 justify-center items-center ">
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:15;"></span>
</span>
days
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:10;"></span>
</span>
hours
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:24;"></span>
</span>
min
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:50;"></span>
</span>
sec
</div>
</div>
</div>
</div>
<!-- cards-section -->
<div class=" max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-12 mt-12 px-10 md:px-20 lg:px-0">
<div class="card w-90 bg-base-100 shadow-xl">
<figure class="px-5 pt-5">
<img src="./images/fruit6.png" alt="Shoes" class="rounded-xl" />
</figure>
<div class="card-body px-auto justify-center items-center text-center">
<h2 class="card-title">12.90$ - 18.85$</h2>
<hr class="w-20 h-5">
<p>Apple</p>
<div class=" grid grid-cols-1 card-actions justify-center items-center mx-auto px-auto">
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<!-- modal -->
<div class="card-actions">
<button class="btn btn-link text-center mx-auto px-10 text-[#F85559]" onclick="my_modal_1.showModal()">Details</button>
<dialog id="my_modal_1" class="modal modal-bottom sm:modal-middle">
<form method="dialog" class="modal-box">
<div class="card-body items-center text-center space-y-5">
<img src="./images/fruit6.png" alt="apple" class="rounded-xl" />
<h2 class="card-title text-2xl font-bold">Apple</h2>
<p class="text-[#12121299]">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
<!--Ratings-->
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<div class="modal-action">
<button class="btn">Close</button>
<button class="btn btn-error text-white">Buy Now</button>
</div>
</form>
</dialog>
</div>
</div>
</div>
</div>
<div class="card w-90 bg-base-100 shadow-xl">
<figure class="px-10 pt-10">
<img src="./images/fruit7.png" alt="Shoes" class="rounded-xl" />
</figure>
<div class="card-body px-auto justify-center items-center text-center">
<h2 class="card-title">12.90$ - 18.85$</h2>
<hr class="w-20 h-5">
<p>Orange</p>
<div class="grid grid-cols-1 card-actions justify-center items-center mx-auto px-auto">
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<!-- modal -->
<div class="card-actions">
<button class="btn btn-link text-center mx-auto px-10 text-[#F85559]" onclick="my_modal_2.showModal()">Details</button>
<dialog id="my_modal_2" class="modal modal-bottom sm:modal-middle">
<form method="dialog" class="modal-box">
<div class="card-body items-center text-center space-y-5">
<img src="./images/fruit7.png" alt="apple" class="rounded-xl" />
<h2 class="card-title text-2xl font-bold">Orange</h2>
<p class="text-[#12121299]">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
<!--Ratings-->
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<div class="modal-action">
<button class="btn">Close</button>
<button class="btn btn-error text-white">Buy Now</button>
</div>
</form>
</dialog>
</div>
</div>
</div>
</div>
<div class="card w-90 bg-base-100 shadow-xl">
<figure class="px-10 pt-10">
<img src="./images/fruit8.png" alt="Shoes" class="rounded-xl" />
</figure>
<div class="card-body px-auto justify-center items-center text-center">
<h2 class="card-title">12.90$ - 18.85$</h2>
<hr class="w-20 h-5">
<p>Dragon</p>
<div class="grid grid-cols-1 card-actions justify-center items-center mx-auto px-auto">
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<!-- modal -->
<div class="card-actions">
<button class="btn btn-link text-center mx-auto px-10 text-[#F85559]" onclick="my_modal_3.showModal()">Details</button>
<dialog id="my_modal_3" class="modal modal-bottom sm:modal-middle">
<form method="dialog" class="modal-box">
<div class="card-body items-center text-center space-y-5">
<img src="./images/fruit8.png" alt="apple" class="rounded-xl" />
<h2 class="card-title text-2xl font-bold">Dragon</h2>
<p class="text-[#12121299]">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
<!--Ratings-->
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<div class="modal-action">
<button class="btn">Close</button>
<button class="btn btn-error text-white">Buy Now</button>
</div>
</form>
</dialog>
</div>
</div>
</div>
</div>
<div class="card w-90 bg-base-100 shadow-xl">
<figure class="px-10 pt-10">
<img src="./images/fruit9.png" alt="Shoes" class="rounded-xl" />
</figure>
<div class="card-body px-auto justify-center items-center text-center">
<h2 class="card-title">12.90$ - 18.85$</h2>
<hr class="w-20 h-5">
<p>Banana</p>
<div class="grid grid-cols-1 card-actions justify-center items-center mx-auto px-auto">
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<!-- modal -->
<div class="card-actions">
<button class="btn btn-link text-center mx-auto px-10 text-[#F85559]" onclick="my_modal_4.showModal()">Details</button>
<dialog id="my_modal_4" class="modal modal-bottom sm:modal-middle">
<form method="dialog" class="modal-box">
<div class="card-body items-center text-center space-y-5">
<img src="./images/fruit9.png" alt="apple" class="rounded-xl" />
<h2 class="card-title text-2xl font-bold">Banana</h2>
<p class="text-[#12121299]">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
<!--Ratings-->
<div class="rating">
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" checked />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
<input type="radio" name="rating-2" class="mask mask-star-2 bg-red-600" />
</div>
<div class="modal-action">
<button class="btn">Close</button>
<button class="btn btn-error text-white">Buy Now</button>
</div>
</form>
</dialog>
</div>
</div>
</div>
</div>
</div>
<div class=" text-center my-10 lg:max-w-screen-xl lg:mx-auto"><button class="btn text-white rounded-lg text-xl bg-red-600 btn-active">Shop All</button></div>
<!-- deal of the day section end -->
<!-- Meet-with-the-team-section-start-->
<section class="mt-20 max-w-screen-xl mx-auto ">
<div class="hero" style="background-image: url(./images/team.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="px-10 md:px-0">
<div class=" mb-16 lg:mb-32">
<div class="flex flex-col ">
<h3 class="text-center text-xl text-white md:text-3xl lg:text-5xl font-extrabold text-secondary mt-10 md:mt-20">Meet the team section</h3>
<p class="text-center max-w-2xl mx-auto text-sm text-white md:text-base font-medium text-secondary mt-6 ">Contrary to popular belief, is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-20 md:gap-24 lg:gap-36 mb-10">
<!-- 1st member -->
<div class="flex flex-col items-center gap-2">
<img src="./images/member1.png" class="w-36 h-36" alt="">
<h3 class="text-2xl text-secondary font-bold text-white">Awlad Hossain</h3>
<h4 class="text-secondary font-medium text-white">Fruits Expert</h4>
<div class="flex gap-3">
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/facebook-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/twitter-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/linkedin-1.svg" alt=""></a>
</div>
</div>
<!-- 2nd member -->
<div class="flex flex-col items-center gap-2">
<img src="./images/member2.png" class="w-36 h-36" alt="">
<h3 class="text-2xl text-secondary font-bold text-white">Safia Chowdhury</h3>
<h4 class="text-secondary font-medium text-white">Fruits Expert</h4>
<div class="flex gap-3">
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/facebook-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/twitter-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/linkedin-1.svg" alt=""></a>
</div>
</div>
<!-- 3rd member -->
<div class="flex flex-col items-center gap-2">
<img src="./images/member3.png" class="w-36 h-36" alt="">
<h3 class="text-2xl text-secondary font-bold text-white">Rokib Hossain</h3>
<h4 class="text-secondary font-medium text-white">Fruits Expert</h4>
<div class="flex gap-3">
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/facebook-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/twitter-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/linkedin-1.svg" alt=""></a>
</div>
</div>
<!-- 4th member -->
<div class="flex flex-col items-center gap-2">
<img src="./images/member4.png" class="w-36 h-36" alt="">
<h3 class="text-2xl text-secondary font-bold text-white">Chaity</h3>
<h4 class="text-secondary font-medium text-white">Fruits Expert</h4>
<div class="flex gap-3">
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/facebook-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/twitter-1.svg" alt=""></a>
<a href="#"><img class=" justify-center items-center w-7 h-7 " src="./icons/linkedin-1.svg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Meet-with-the-team-section-end-->
<!-- why-choose-us-section start -->
<section class="max-w-screen-xl mx-auto mt-36">
<div>
<h3 class="text-5xl font-extrabold text-titleColor text-center">Why Choose Us</h3>
<p class="text-xl font-medium text-descriptionColor text-center max-w-2xl mx-auto mt-6 mb-9" >Contrary to popular belief, is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
</section>
<div class="max-w-screen-xl mx-auto mt-20 flex flex-col md:flex-row justify-between">
<div class="flex flex-col">
<!-- dedicate teams -->
<div class="flex gap-6 mb-12">
<div>
<img src="./icons/why-choose-1.svg" class="bg-[#cfcece] w-10 h-10 p-1 rounded-full" alt="">
</div>
<div >
<h3 class="text-2xl font-extrabold text-descriptionColor ">Dedicated Team</h3>
<hr class="w-28 bg-[#bcbbbb] h-[2px] mt-4 mb-4">
<p class="text-base font-medium text-descriptionColor">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
</div>
</div>
<!-- fresh is best -->
<div class="flex gap-6 mb-12">
<div>
<img src="./icons/why-choose-2.svg" class="bg-[#cfcece] w-10 h-10 p-1 rounded-full" alt="">
</div>
<div >
<h3 class="text-2xl font-extrabold text-descriptionColor ">Fresh is Best</h3>
<hr class="w-28 bg-[#bcbbbb] h-[2px] mt-4 mb-4">
<p class="text-base font-medium text-descriptionColor">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
</div>
</div>
<!-- gift certificate -->
<div class="flex gap-6 mb-12">
<div>
<img src="./icons/why-choose-3.svg" class="bg-[#cfcece] w-10 h-10 p-1 rounded-full" alt="">
</div>
<div >
<h3 class="text-2xl font-extrabold text-descriptionColor ">Gift Certificates</h3>
<hr class="w-28 bg-[#bcbbbb] h-[2px] mt-4 mb-4">
<p class="text-base font-medium text-descriptionColor">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
</div>
</div>
</div>
<div class="mb-8"><img src="./images/whychoose1.png" alt=""></div>
<div>
<!-- Integrated Supplier -->
<div class="flex flex-row-reverse gap-6 mb-12">
<div>
<img src="./icons/why-choose-4.svg" class="bg-[#cfcece] w-10 h-10 p-1 rounded-full" alt="">
</div>
<div class="flex flex-col items-end">
<h3 class="text-2xl font-extrabold text-descriptionColor ">Integrated Supplier</h3>
<hr class="w-28 bg-[#bcbbbb] h-[2px] mt-4 mb-4">
<p class="text-base font-medium text-descriptionColor">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
</div>
</div>
<!-- Sustainable Practice -->
<div class="flex flex-row-reverse gap-6 mb-12">
<div>
<img src="./icons/why-chose-5.svg" class="bg-[#cfcece] w-10 h-10 p-1 rounded-full" alt="">
</div>
<div class="flex flex-col items-end">
<h3 class="text-2xl font-extrabold text-descriptionColor ">Sustainable Practice</h3>
<hr class="w-28 bg-[#bcbbbb] h-[2px] mt-4 mb-4">
<p class="text-base font-medium text-descriptionColor">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
</div>
</div>
<!-- The Benefits Only -->
<div class="flex flex-row-reverse gap-6 mb-12">
<div>
<img src="./icons/why-choose-6.svg" class="bg-[#cfcece] w-10 h-10 p-1 rounded-full" alt="">
</div>
<div class="flex flex-col items-end">
<h3 class="text-2xl font-extrabold text-descriptionColor ">The Benefits Only</h3>
<hr class="w-28 bg-[#bcbbbb] h-[2px] mt-4 mb-4">
<p class="text-base font-medium text-descriptionColor">Professional employees are there for you to pick the most amazing and fresh fruits.</p>
</div>
</div></div>
<!-- why-choose-us-section end-->
</main>
<!-- footer start -->
<footer class="max-w-screen-2xl mx-auto min-h-max flex justify-center items-center bg-footerbg mt-10">
<div class="flex flex-col gap-16 my-20">
<div class="flex justify-center">
<div class="flex items-center gap-2">
<img class="w-14 h-14" src="./images/logo.png" alt="logo">
<h3 class="text-white text-4xl font-bold ">Fruit Burst</h3>
</div>
</div>
<!--footer-menus-->
<div class="flex justify-center ">
<ul class="flex justify-center flex-wrap lg:flex-nowrap gap-10 px-5 md:px-0">
<li><a href="#" class="text-xl font-semibold text-white">Home</a></li>
<li><a href="#" class="text-xl font-semibold text-white">About Us</a></li>
<li><a href="#" class="text-xl font-semibold text-white">Shop</a></li>
<li><a href="#" class="text-xl font-semibold text-white">All Fruits</a></li>
<li><a href="#" class="text-xl font-semibold text-white">Support</a></li>
<li><a href="#" class="text-xl font-semibold text-white">My Account</a></li>
</ul>
</div>
<!-- all-Social-handles-->
<div class="flex justify-center">
<ul class="flex gap-4 md:gap-10">
<li><a href="#" >
<img src="./icons/twitter-1.svg" alt="">
</a></li>
<li><a href="#">
<img src="./icons/facebook-1.svg" alt="">
</a></li>
<li><a href="#">
<img src="./icons/youtube-1.svg" alt="">
</a></li>
<li><a href="#">
<img src="./icons/linkedin-1.svg" alt="">
</a></li>
<li><a href="#">
<img src="./icons/instagram-1.svg" alt="">
</a></li>
<li><a href="#">
<img src="./icons/apple-1.svg" alt="">
</a></li>
</ul>
</div>
</div>
</footer>
<!-- footer end -->
</body>
</html>