-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
551 lines (544 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FIN Furniture</title>
<link rel="icon" href="images/logo.png">
<!-- Including Tailwind CSS for styling the website -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- css style -->
<link rel="stylesheet" href="styles.css">
<!-- google links -->
<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:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="scroll-smooth bg-[#EEF2F1] mb-[-60px]">
<!-- header section -->
<section class="bg-[#35736E]">
<header class="px-[5%] md:px-[2%] flex justify-between h-[80px] items-center">
<!-- header logo -->
<div>
<img src="images/logo.png" alt="FIN logo" class="w-[40px] sm:w-[50px]">
</div>
<!-- header link section -->
<div class="text-white flex justify-between items-center">
<ul class="hidden sm:flex gap-4 md:gap-5 mr-10 md:mr-20">
<li><a href="#" class="border-b-4 border-[#FFD748] font-light">Home</a></li>
<li><a href="#aboutUs" class="hover:border-b-2 border-[#FFD748] font-light">About us</a></li>
<li><a href="#services" class="hover:border-b-2 border-[#FFD748] font-light">Services</a></li>
<li><a href="#blog" class="hover:border-b-2 border-[#FFD748] font-light">Blog</a></li>
<li><a href="#contact" class="hover:border-b-2 border-[#FFD748] font-light">Contact us</a></li>
</ul>
<!-- Nav icons -->
<div class="flex justify-between gap-2 ms:gap-3 items-center">
<div class="w-[30px] h-[30px] rounded-full hover:bg-[#FFD748] flex justify-center items-center">
<img src="images/user.png" alt="img" class="w-[25px] sm:w-[30px]">
</div>
<div class="w-[30px] h-[30px] rounded-full hover:bg-[#FFD748] flex justify-center items-center">
<img src="images/cart.png" alt="img" class="w-[25px] sm:w-[30px]">
</div>
<div
class="w-[30px] h-[30px] rounded-full hover:bg-[#FFD748] flex justify-center items-center sm:hidden ">
<span class="material-symbols-outlined">
more_vert
</span>
</div>
</div>
</div>
</header>
</section>
<!-- main section started -->
<section class="bg-[#35736E] py-10">
<section class="wrapper flex flex-col md:flex-row justify-center items-center">
<div class="flex flex-col justify-center md:justify-start md:w-[45%]">
<h1
class="text-white md:text-start text-[24px] sm:text-[32px] lg:text-[38px] xl:text-[44px] 2xl:text-[52px] text-center font-bold hover:text-[#FFD748]">
"Transform your space <br> with elegance."</h1>
<div class="pt-10 hidden md:flex md:justify-start gap-5">
<a href="#" class="py-2 px-5 rounded-full bg-[#FFD748] hover:bg-[#ffd748e9]">Shop Now</a>
<a href="#products"
class="py-2 px-8 rounded-full border border-white hover:text-[#FFD748] hover:border-[#e8b809]">Explore</a>
</div>
</div>
<div class="py-5 md:w-[55%]">
<img src="images/home-right.png" alt="">
</div>
<div class="pt-10 flex justify-center gap-5 md:hidden">
<a href="#shop" class="py-2 px-5 rounded-full bg-[#FFD748]">Shop Now</a>
<a href="#products" class="py-2 px-8 rounded-full border border-white hover:text-[#FFD748]">Explore</a>
</div>
</section>
</section>
<!-- material section -->
<section class="py-16 min-[375px]:py-32 md:max-lg:pb-24 lg:py-20 lg:pb-32" id="products">
<section
class=" wrapper grid min-[375px]:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 md:gap-8 max-[375px]:mb-10">
<div
class=" h-[250px] flex flex-col justify-center text-center min-[375px]:text-start items-center mb-10 md:col-span-3 lg:col-span-1 ">
<div class="md:max-lg:text-center md:max-lg:w-[50%]">
<h2 class="text-[24px] md:text-[28px] font-semibold text-[#2F2F2F]">Crafted with <br> excellent
material.</h2>
<p class="text-[12px] font-medium text-[#6A6A6A] mb-5 ">Peruse our wide selection of furniture,
each piece meticulously crafted from premium materials for enduring quality and timeless
elegance in your home.</p>
<a href="#"
class="bg-[#35736E] hover:bg-[#FFD748] hover:text-black text-white rounded-full px-5 py-1 font-light transform transition duration-500 ease-in-out">Explore</a>
</div>
</div>
<!-- Moder Chair card -->
<div
class="mt-20 min-[375px]:mt-0 md:mt-0 bg-[#DDE3E6] text-[#2F2F2F] text-[15px] rounded-2xl flex justify-center flex-col items-center h-[230px]">
<img src="images/product-1.png" alt=""
class="absolute mb-44 lg:mb-36 w-[180px] min-[375px]:w-[130px] lg:w-[150px] transform hover:scale-105 transition duration-1000 ease-in-out">
<h2 class="mt-36 font-semibold">Moder Chair</h2>
<span class="font-semibold">$60.00</span>
</div>
<!-- Kruzo Aero Chair card -->
<div
class="mt-28 min-[375px]:mt-20 md:mt-0 bg-[#DDE3E6] text-[#2F2F2F] text-[15px] rounded-2xl flex justify-center flex-col items-center h-[230px]">
<img src="images/product-2.png" alt=""
class="absolute mb-44 lg:mb-36 w-[200px] min-[375px]:w-[150px] lg:w-[180px] transform hover:scale-105 transition duration-1000 ease-in-out">
<h2 class="mt-36 font-semibold">Kruzo Aero Chair</h2>
<span class="font-semibold">$78.00</span>
</div>
<!-- Ergonomic Chair Card -->
<div
class="mt-28 min-[375px]:mt-20 md:mt-0 bg-[#DDE3E6] text-[#2F2F2F] text-[15px] rounded-2xl flex justify-center flex-col items-center h-[230px]">
<img src="images/product-3.png" alt=""
class="absolute mb-40 lg:mb-32 min-[375px]:w-[130px] w-[150px] lg:w-[130px] transform hover:scale-105 transition duration-1000 ease-in-out">
<h2 class="mt-36 font-semibold">Ergonomic Chair</h2>
<span class="font-semibold">$88.00</span>
</div>
</section>
</section>
<!-- reason to choose us section started -->
<section class="sm:mb-14 md:mb-24 lg:mb-14">
<section class="wrapper md:flex justify-between">
<div class="lg:w-[40%]">
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-1 justify-center items-center">
<div class="text-center sm:text-start pb-10">
<h1 class="text-[24px] mb-2 font-bold md:mb-3 text-[#2F2F2F]">Why Choose Us</h1>
<p class="text-[14px] text-[#6A6A6A]">Discover the difference at FIN. We stand out with
curated
collections personalized service, and a commitment to quality. Let us help you create a
home that reflects your style and exceeds your expectations</p>
</div>
<div class="flex justify-center">
<img src="images/why-choose-us.png" alt="img"
class="lg:hidden sm:w-[80%] transform hover:scale-105 transition duration-1000 ease-in-out">
</div>
</div>
<!-- reson to choose -->
<div
class="pt-14 lg:py-0 grid grid-cols-1 min-[400px]:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-5 items-start">
<!-- Fast & Free Shipping -->
<div
class="flex flex-col justify-center items-center text-center md:text-start md:items-start mb-10 md:mb-0">
<div class="w-10 h-10 md:w-7 md:h-7 rounded-full bg-[#CBD9D9] ml-5 relative">
<img src="images/Truck.png" alt="img" class="absolute -left-3 w-8">
</div>
<h2 class="text-[16px] text-[#2F2F2F] font-semibold mt-2 lg:mt-1">Fast & Free Shipping</h2>
<p class="text-[12px] text-[#6A6A6A] mt-3">Swift delivery guaranteed! Enjoy expedited
shipping
at no extra cost. Get your furniture fast, hassle-free, and right on time.</p>
</div>
<!-- Easy to Shop -->
<div
class="flex flex-col justify-center items-center text-center md:text-start md:items-start mb-10 md:mb-0">
<div class="w-10 h-10 md:w-7 md:h-7 rounded-full bg-[#CBD9D9] ml-5 relative">
<img src="images/Shop-bag.png" alt="img" class="absolute -left-3 w-7 md:w-6">
</div>
<h2 class="items-start text-[16px] text-[#2F2F2F] font-semibold mt-2 lg:mt-1">Easy to Shop
</h2>
<p class="text-[12px] text-[#6A6A6A] mt-3">Effortlessly shop for furniture with our
user-friendly interface, intuitive search, and seamless checkout. Simplify your shopping
experience today.</p>
</div>
<!-- 24/7 Support -->
<div
class="flex flex-col justify-center items-center text-center md:text-start md:items-start mb-10 md:mb-0">
<div class="w-10 h-10 md:w-7 md:h-7 rounded-full bg-[#CBD9D9] ml-5 relative flex items-center">
<img src="images/Support.png" alt="img" class="absolute -left-2.5 w-8 md:w-6">
</div>
<h2 class="text-start text-[16px] text-[#2F2F2F] font-semibold mt-2 lg:mt-1">24/7 Support
</h2>
<p class="text-[12px] text-[#6A6A6A] mt-3">Round-the-clock assistance at your service! Get
reliable support anytime, anywhere. Your satisfaction is our priority, day or night.</p>
</div>
<!-- Hassle Free Returns -->
<div
class="flex flex-col justify-center items-center text-center md:text-start md:items-start mb-10 md:mb-0">
<div class="w-10 h-10 md:w-7 md:h-7 rounded-full bg-[#CBD9D9] ml-5 relative">
<img src="images/Return.png" alt="img" class="absolute -left-2 w-7 md:w-5">
</div>
<h2 class="text-[16px] text-[#2F2F2F] font-semibold mt-2 lg:mt-1">Hassle Free Returns</h2>
<p class="text-[12px] text-[#6A6A6A] mt-3">Seamless returns made easy! Enjoy stress-free
returns
with our simple process. Your satisfaction is guaranteed, no questions asked</p>
</div>
</div>
</div>
<!-- why choose use section side image -->
<div class="hidden lg:flex w-[55%] justify-center lg:justify-end lg:mr-10 items-center ">
<img src="images/why-choose-us.png" alt="img"
class="w-[75%] shadow-md bg-cover bg-center transform hover:scale-105 transition duration-1000 ease-in-out">
</div>
</section>
</section>
<!-- service section -->
<section class="mb-20" id="services">
<section>
<div class="wrapper lg:flex justify-between items-center">
<div
class="sm:grid sm:grid-cols-2 lg:grid-cols-1 justify-center items-center lg:justify-end lg:w-[60%] lg:mr-10">
<div class="text-center sm:text-start my-10 lg:hidden col-span-1 order-first sm:order-last">
<h1 class="text-[24px] font-bold mb-3 text-[#2F2F2F]">We help you make <br> Modern Interior
Design</h1>
<p class="text-[12px] text-[#6A6A6A] overflow-hidden h-[50%]">Elevate your living spaces
with
our modern interior design expertise. From sleek minimalism to bold contemporary
statements,
we craft personalized designs tailored to your style.</p>
</div>
<!-- service section images -->
<div
class="relative h-auto mb-10 lg:my-20 flex lg:w-[90%] col-span-1 order-last sm:order-first lg:justify-self-end">
<img src="images/help-3.png" alt="img"
class="w-[60%] transform hover:scale-105 transition duration-1000 ease-in-out">
<img src="images/help-2.png" alt="img"
class="ml-2 w-[25%] h-[34%] transform hover:scale-105 transition duration-1000 ease-in-out">
<img src="images/help-1.png" alt="img"
class="absolute right-5 top-[38%] w-[43%] transform hover:scale-105 transition duration-1000 ease-in-out">
</div>
</div>
<!-- content section -->
<div class="lg:w-[40%]">
<div class="text-center md:text-start py-10 hidden lg:block">
<h1 class="text-[24px] font-bold mb-5 text-[#2F2F2F]">We help you make <br> Modern Interior
Design</h1>
<p class="text-[12px] text-[#6A6A6A]">Embark on a journey of modern interior design with our
expert assistance. From conceptualization to execution, we're here to bring contemporary
elegance to your living space seamlessly.</p>
</div>
<!-- contents points -->
<div class="max-sm:mt-14">
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-5 text-[#6A6A6A]">
<li class="text-[12px] flex"><span
class="material-symbols-outlined text-[16px] text-[#35736E] font-bold mr-3 mt-0.5 ">fiber_manual_record</span>Our
team offers personalized guidance to understand your style, preferences, and needs
for a
bespoke modern interior design.</li>
<li class="text-[12px] flex"><span
class="material-symbols-outlined text-[16px] text-[#35736E] font-bold mr-3 mt-0.5 ">fiber_manual_record</span>Utilizing
the latest trends and technologies, we create innovative design concepts to elevate
your
space with modern flair.</li>
<li class="text-[12px] flex"><span
class="material-symbols-outlined text-[16px] text-[#35736E] font-bold mr-3 mt-0.5 ">fiber_manual_record</span>From
furniture selection to decor accents, we prioritize quality materials and
craftsmanship
to ensure lasting beauty and functionality.</li>
<li class="text-[12px] flex"><span
class="material-symbols-outlined text-[16px] text-[#35736E] font-bold mr-3 mt-0.5 ">fiber_manual_record</span>Enjoy
comprehensive support from initial planning to final implementation, ensuring a
seamless
and stress-free experience.</li>
</ul>
<!-- explore button for service section -->
<div class="flex justify-center sm:justify-start">
<a href="#"
class=" bg-[#35736E] hover:bg-[#FFD748] hover:text-black text-white rounded-full px-5 py-1 font-light transform transition duration-500 ease-in-out">Explore</a>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- chaires section -->
<section class="mb-20 min-[375px]:mt-36">
<section class="wrapper">
<div class="grid grid-cols-1 gap-10 md:grid-cols-2 min-[1150px]:grid-cols-3 justify-between">
<!-- Modern Chair -->
<div
class="flex max-[375px]:flex-col max-[375px]:items-center max-[375px]:text-center items-start gap-5 col-span-1">
<div>
<div
class="my-10 relative min-[375px]:mt-0 bg-[#B6CACB] flex justify-center rounded-xl w-[110px] h-[100px]">
<img src="images/product-1.png" alt="images"
class="absolute bottom-0 w-[95px] transform hover:scale-105 transition duration-1000 ease-in-out">
</div>
</div>
<div>
<h2 class="font-semibold text-[#2F2F2F]">Modern Chair</h2>
<p class="text-[14px] text-[#6A6A6A]">Discover sleek, innovative seating solutions in our
Modern Chair collection.</p>
<span class="text-[12px] font-semibold text-[#6A6A6A]">Read more</span>
</div>
</div>
<!-- Kruzi Aero -->
<div
class="flex max-[375px]:flex-col max-[375px]:items-center max-[375px]:text-center items-start gap-5 col-span-1">
<div>
<div
class="my-10 min-[375px]:mt-0 bg-[#B6CACB] flex justify-center rounded-xl w-[110px] h-[100px]">
<img src="images/product-2.png" alt="images"
class="absolute bottom- w-[120px] -mt-6 ml-3 transform hover:scale-105 transition duration-1000 ease-in-out">
</div>
</div>
<div>
<h2 class="font-semibold text-[#2F2F2F]">Kruzi Aero</h2>
<p class="text-[14px] text-[#6A6A6A]">Experience futuristic comfort with our Kruzi Aero
seating collection.</p>
<span class="text-[12px] font-semibold text-[#6A6A6A]">Read more</span>
</div>
</div>
<!-- Ergonomic Chair -->
<div
class="flex max-[375px]:flex-col max-[375px]:items-center max-[375px]:text-center items-start gap-5 col-span-1">
<div>
<div
class="my-10 relative min-[375px]:mt-0 bg-[#B6CACB] flex justify-center rounded-xl w-[110px] h-[100px]">
<img src="images/product-3.png" alt="images"
class="absolute bottom-0 w-[80px] transform hover:scale-105 transition duration-1000 ease-in-out">
</div>
</div>
<div>
<h2 class="font-semibold text-[#2F2F2F]">Ergonomic Chair</h2>
<p class="text-[14px] text-[#6A6A6A]">Enhance your posture and productivity with our
Ergonomic Chair selection.</p>
<span class="text-[12px] font-semibold text-[#6A6A6A]">Read more</span>
</div>
</div>
</div>
</section>
</section>
<!-- Testimonials section -->
<section class="mb-20">
<section class="wrapper text-center ">
<h2 class="text-[32px] font-semibold lg:mb-5 text-[#2F2F2F]">Testimonials</h2>
<div class="flex items-center justify-between gap-5 lg:px-10">
<!-- left button -->
<div class="[10%]">
<div
class="w-[30px] h-[30px] min-[376px]:w-[40px] min-[376px]:h-[40px] sm:w-[50px] sm:h-[50px] rounded-full bg-[#E3E3E3] flex items-center hover:bg-[#FFD748]">
<img src="images/arrow-left.png" alt="arrow image to go to previous Testimonials"
class="w-2 sm:w-2.5 m-auto ">
</div>
</div>
<!-- Testimonials contents -->
<div class="w-[75%] lg:w-[65%] h-[115px] lg:h-[150px] overflow-y-scroll relative text-justify mt-3">
<p class="text-[14px] max-sm:text-[12px] text-[#6A6A6A] leading-relaxed font-medium">
"From the moment I laid eyes on the sleek design of the Kruzi Aero chair at FIN, I knew it
was the perfect addition to my home office. Not only does it exude a modern elegance, but
its ergonomic features have truly transformed my workspace. I can now sit comfortably for
hours on end, enhancing both my productivity and posture. The quality craftsmanship of this
chair is evident, and the customer service provided by the team at FIN was outstanding."
</p>
</div>
<!-- right button -->
<div class="[10%]">
<div
class="w-[30px] h-[30px] min-[376px]:w-[40px] min-[376px]:h-[40px] sm:w-[50px] sm:h-[50px] rounded-full bg-[#E3E3E3] flex items-center hover:bg-[#FFD748]">
<img src="images/arrow-right.png" alt="arrow image to go to next Testimonials"
class="w-2 sm:w-2.5 m-auto ">
</div>
</div>
</div>
<!-- icon for scroll -->
<span class="material-symbols-outlined text-[#afaeae] mt-2 lg:hidden">
keyboard_arrow_down
</span>
</section>
</section>
<!-- founder profile section -->
<section class="flex flex-col justify-center items-center my-32">
<!-- founder image -->
<img src="images/profile.png" alt="CEO Image" class="mb-3">
<!-- founder name -->
<h3 class="text-[16px] font-semibold text-[#2F2F2F]">Zain Bin Noor</h3>
<!-- position -->
<h4 class="text-[14px] font-medium text-[#6A6A6A]">CEO, Co-Founder, FIN inc.</h4>
</section>
<!-- blog section -->
<section class="pb-10 sm:py-10 mb-32 lg:mb-44" id="blog">
<section class="wrapper">
<!-- blog header -->
<div class="flex justify-center sm:justify-between items-center pb-5 sm:pb-10">
<h2 class="text-[32px] font-semibold text-[#2F2F2F]">Recently Blog</h2>
<span
class="font-medium border-b-4 border-[#FFD748] hidden sm:block hover:border-[#35736E] text-[#2F2F2F]">View
All Posts</span>
</div>
<!-- blog container -->
<div
class="text-center grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 sm:text-center md:text-start text-[#2F2F2F]">
<!-- first blog -->
<div class="sm:my-10 sm:col-span-2 md:col-span-1">
<img src="images/blog-1.png" alt="Blog"
class="rounded-xl transform hover:scale-105 transition duration-1000 ease-in-out">
<div class="mt-5 sm:mt-10">
<h3 class="text-[18px] md:text-[14px] min-[1000px]:text-[18px] font-semibold">First Time
Home
Ideas</h3>
<p class="text-[14px] md:text-[12px] min-[1000px]:text-[14px] font-semibold"><span
class="text-[14px] font-normal">by</span> Nana Ama <span
class="text-[14px] font-normal">on</span> Nov 18th, 2024</p>
</div>
</div>
<!-- second blog -->
<div class="sm:my-10">
<img src="images/blog-2.png" alt="Blog"
class="rounded-xl transform hover:scale-105 transition duration-1000 ease-in-out">
<div class="mt-5 sm:mt-10">
<h3 class="text-[18px] md:text-[14px] min-[1000px]:text-[18px] font-semibold">
Budget-Friendly
DIY Decor</h3>
<p class="text-[14px] md:text-[12px] min-[1000px]:text-[14px] font-semibold"><span
class="text-[14px] font-normal">by</span> Jamie Smith <span
class="text-[14px] font-normal">on</span> May 1st, 2024 </p>
</div>
</div>
<!-- third blog -->
<div class="sm:my-10 w-[100%]">
<img src="images/blog-3.png" alt="Blog"
class="rounded-xl transform hover:scale-105 transition duration-1000 ease-in-out">
<div class="mt-5 sm:mt-10">
<h3 class="text-[18px] md:text-[14px] min-[1000px]:text-[18px] font-semibold">Crafting the
Reading Nook </h3>
<p class="text-[14px] md:text-[12px] min-[1000px]:text-[14px] font-semibold"><span
class="text-[14px] font-normal">by</span> Emily Chen <span
class="text-[14px] font-normal">on</span> May 2nd, 2024</p>
</div>
</div>
<div class="flex justify-center sm:hidden mt-5">
<span
class="font-medium border-b-4 border-[#FFD748] items-center hover:border-[#35736E] text-[#2F2F2F]">View
All Posts</span>
</div>
</div>
</section>
</section>
<!-- footer -->
<footer class="bg-white">
<section class="wrapper">
<div class="flex flex-col sm:flex-row-reverse justify-center sm:justify-between pb-10">
<!-- footer sofa image -->
<div
class="w-[100%] sm:w-[50%] md:w-[35%] relative mt-20 text-[#2F2F2F] text-[15px] rounded-2xl flex justify-center flex-col items-center h-[80px]">
<img src="images/sofa.png" alt="footer image"
class="absolute mb-40 lg:mb-36 w-[200px] min-[376px]:w-[250px] lg:w-[400px] xl:w-[500px] transform hover:scale-105 transition duration-1000 ease-in-out">
</div>
<!-- mail format -->
<div class="md:w-[65%] lg:w-[50%] mt-10 flex flex-col items-center justify-start md:items-start">
<div class="flex gap-2 items-center mb-3 justify-center sm:justify-start text-center">
<span
class="material-symbols-outlined text-[#b9b9b9] text-[30px] hover:text-[#35736E]">mail</span>
<h2 class="font-semibold text-[#2F2F2F]">Subscribe to Newsletter</h2>
</div>
<div class="flex flex-col md:flex-row gap-5 w-[80%] sm:w-full" id="contact">
<input type="text" id="name" name="name" placeholder="Enter your name"
class="w-full px-3 py-2 border border-gray-400 rounded-lg focus:outline-none focus:border-[#35736E] text-[12px] md:text-[14px] placeholder-[#6A6A6A] text-[#35736E]"
required>
<input type="email" id="email" name="email" placeholder="Enter your email"
class="w-full px-3 py-2 border border-gray-400 rounded-lg focus:outline-none focus:border-[#35736E] text-[12px] md:text-[14px] placeholder-[#6A6A6A] text-[#35736E]"
required>
<div class="flex justify-center">
<div
class="bg-[#35736E] rounded-lg flex justify-center w-[40px] h-[40px] p-3 justify-self-center hover:bg-[#2f817a]">
<img src="images/send.png" alt="send message">
</div>
</div>
</div>
</div>
</div>
<!-- footer logo -->
<img src="images/logo-green.png" alt="footer logo" class="w-[60px] mb-4">
<div class="flex flex-col md:flex-row gap-12 text-[#6A6A6A] items-center" id="aboutUs">
<div class="md:w-[25%]">
<p class="text-[12px] text-justify">
Discover elegance and comfort at FIN Furniture Store. Our curated selection offers
stylish furniture pieces designed to enhance any living space. Explore timeless classics
and modern trends crafted with quality and care. Elevate your home with FIN, where fine
living begins.
</p>
</div>
<div
class="text-[10px] sm:text-[12px] font-medium grid gap-10 grid-cols-4 max-[450px]:grid-cols-2 leading-tight">
<ul>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">About us</a></li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Services</a></li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Blog</a></li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Contact us</a>
</li>
</ul>
<ul>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Support</a></li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Knowledge base</a>
</li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Live chat</a></li>
</ul>
<ul>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Jobs</a></li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Our team</a></li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Leadership</a>
</li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Privacy Policy</a>
</li>
</ul>
<ul>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Nordic Chair</a>
</li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Kruzo Aero</a>
</li>
<li class="mb-2"><a href="#" class="hover:underline hover:text-[#35736E]">Ergnomic</a></li>
</ul>
</div>
</div>
</section>
<!-- footer social icons -->
<div class="px-[2%] py-9">
<div class="flex gap-4 pb-8 justify-center md:justify-start">
<!-- facebook icon -->
<div
class="bg-[#D9D9D9] rounded-full flex justify-center w-[35px] h-[35px] p-2.5 justify-self-center hover:bg-[#35736E]">
<img src="images/facebook.png" alt="send message" class=" ">
</div>
<!-- instagram icon -->
<div
class="bg-[#D9D9D9] rounded-full flex justify-center w-[35px] h-[35px] p-2.5 justify-self-center hover:bg-[#35736E]">
<img src="images/instagram.png" alt="send message" class=" ">
</div>
<!-- twitter icon -->
<div
class="bg-[#D9D9D9] rounded-full flex justify-center w-[35px] h-[35px] p-2.5 justify-self-center hover:bg-[#35736E]">
<img src="images/twitter.png" alt="send message" class=" ">
</div>
<!-- linkedin icon -->
<div
class="bg-[#D9D9D9] rounded-full flex justify-center w-[35px] h-[35px] p-2.5 justify-self-center hover:bg-[#35736E]">
<img src="images/linkedin-in.png" alt="send message" class=" ">
</div>
</div>
<hr>
</div>
<div class="px-[5%] md:px-[20%] text-[10px] sm:text-[12px] font-medium text-[#6A6A6A] pb-10 text-center">
<!-- terms & condition links -->
<div class="flex justify-center md:justify-end gap-6 pb-10">
<a href="#" class="hover:underline hover:text-[#35736E]">Term & Conditions</a>
<a href="#" class="hover:underline hover:text-[#35736E]">Privacy Policy</a>
</div>
<!-- copy right link -->
<div class="flex justify-center">
<span class="items-center m-auto hover:text-[#35736E]">Copyright 2022 zainali00769@gmail.com. All
Rights Reserved</span>
</div>
</div>
</footer>
</body>
</html>