-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (140 loc) · 7.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>beautiful flowers</title>
<link rel="stylesheet" href="./assets/index-BuYNXD45.css">
</head>
<body>
<!-- beautiful flowers start -->
<header class="bg-[rgba(229,84,115,0.10)] mb-20">
<div class="container w-10/12 mx-auto pt-10 grid gap-6 md:grid-cols-2">
<div class="">
<h1 class="text-3xl md:text-4xl lg:text-6xl xl:text-7xl my-9 font-serif">Let's make beautiful flowers a part of your life.</h1>
<p class="my-9">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
<button class="py-2 px-5 bg-[#E55473] text-rad font-semibold rounded-[5px] shadow-md hover:bg-red-500 my-3">Shop Now</button>
</div>
<div>
<img class="w-72 lg:w-96 pt-5 md:pt-16 md:ms-auto" src="./assets/pngwing1-BJ4GfHM3.png" alt="image">
</div>
</div>
</header>
<!-- -------------beautiful flowers end---------- -->
<!-- Our Featured Flowers start -->
<section class="my-20">
<div class="container w-10/12 mx-auto mt-6 pt-3">
<div class="text-center">
<h2 class="text-4xl font-serif">Our Featured Flowers</h2>
<div class="w-72 sm:w-[500px] text-[rgba(39,39,39,0.55)] mx-auto my-5">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<div class="grid gap-4 md:grid-cols-3">
<div>
<div class="bg-[rgba(167,33,98,0.15)] rounded-t-full flex items-end pt-5">
<img class="m-auto mt-10" src="./assets/pngwing2-BYXSOhLX.png" alt="image">
</div>
<strong class="text-center block">Pink Flower Tree</strong>
</div>
<div>
<div class="bg-[rgba(5,152,160,0.16)] rounded-t-full flex items-end pt-5 md:pb-16">
<img class="m-auto mt-8" src="./assets/pngwing3-DTXVBTpL.png" alt="image">
</div>
<strong class="text-center block">Pink Flower Tree</strong>
</div>
<div>
<div class="bg-[rgba(71,125,17,0.11)] rounded-t-full flex items-end pt-4">
<img class="m-auto" src="./assets/pngwing4-C-E1fD6v.png" alt="image">
</div>
<strong class="text-center block">Pink Flower Tree</strong>
</div>
</div>
</div>
</section>
<!-- -----------Our Featured Flowers end-------- -->
<!-- Delivery start -->
<section class="my-20">
<div class="container w-10/12 mx-auto bg-[rgba(39,39,39,0.08)] mt-6 pt-3">
<div class="grid gap-4 md:grid-cols-3 p-10">
<div class=" pt-5 mx-auto">
<img class="mx-auto my-4" src="./assets/Group7-Dotshvoh.png" alt="image">
<span>Same Day Delivery. Click & Collect.</span>
</div>
<div class=" pt-5 mx-auto">
<img class="mx-auto my-4" src="./assets/Group6-vmMpL06b.png" alt="image">
<span>Fresh Flowers. Local Growers.</span>
</div>
<div class="pt-5 mx-auto">
<img class="mx-auto my-4" src="./assets/Group7-Dotshvoh.png" alt="image">
<span>24/7 Free Support.</span>
</div>
</div>
</div>
</section>
<!-- ---------Delivery end--------- -->
<!-- Hot Deal start -->
<header class="bg-[rgba(229,84,115,0.10)] mb-20">
<div class="container w-10/12 mx-auto mt-6 grid gap-6 md:grid-cols-2 pt-3">
<div class="m-auto">
<h2 class="text-2xl md:text-3xl lg:text-4xl my-9 text-center font-serif">Hot Deal ! Sale Up To 25% Off</h2>
<p class="my-8 px-7 lg:px-18 text-[rgba(39,39,39,0.55)]">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="flex items-center justify-center">
<button class="py-2 px-5 bg-[#E55473] text-rad font-semibold rounded-[5px] shadow-md hover:bg-red-500">Sign Up</button>
</div>
</div>
<div>
<img class="w-72 lg:w-96 py-4 md:pt-24 md:ms-auto" src="./assets/pngwing8-Dae2TD4a.png" alt="image">
</div>
</div>
</header>
<!-- -----------------Hot Deal end--------------------- -->
<section class="my-20">
<div class="container w-10/12 mx-auto mt-6 pt-3">
<div class="text-center">
<h2 class="text-4xl font-serif">Instagram</h2>
<div class="w-72 sm:w-[500px] text-[rgba(39,39,39,0.55)] mx-auto my-5">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
<div class="grid gap-4 md:grid-cols-4 bg-slate-100">
<img src="./assets/Rectangle9-apAEPRfr.png" alt="image">
<img src="./assets/Rectangle10-B6wIuESJ.png" alt="image">
<img src="./assets/Rectangle11-DRGYyfhA.png" alt="image">
<img src="./assets/Rectangle12-BAvtLRIQ.png" alt="image">
</div>
</div>
</section>
<!-- Hot Deal end -->
<!-- ---------------The Latest Deals start----------------------- -->
<section class="my-20 ">
<div class="container w-10/12 mx-auto mt-6 py-3 bg-custom-image bg-cover bg-center bg-teal-100">
<div class="text-center">
<h2 class="text-4xl font-serif">Get The Latest Deals</h2>
<div class="w-72 sm:w-[500px] text-[rgba(39,39,39,0.55)] mx-auto my-5">
<p>$30 coupon for first shopping</p>
</div>
</div>
<div class="flex justify-center">
<input class="input input-bordered join-item bg-white w-10/12 md:w-6/12 input input-bordered max-w-xs px-3" type="text" placeholder="Enter your email here...."/>
<button class="btn join-item py-2 px-5 mx-4 bg-[#E55473] text-rad font-semibold rounded-[5px] shadow-md hover:bg-red-500 my-3">Subscribe</button>
</div>
</div>
</section>
<!-- The Latest Deals end -->
<!-- ---------------FlowerShop start-------------- -->
<section class="bg-black">
<div class=" mx-auto mt-6 py-10">
<div class="text-center">
<h2 class="text-4xl font-serif text-[#E55473]">FlowerShop</h2>
<div class=" md:w-[500px] text-[rgba(39,39,39,0.55)] mx-auto my-5">
<span class="text-[rgba(255,255,255,0.87)]">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
</div>
<div class="w-11/12 md:w-[500px] text-[rgba(39,39,39,0.55)] mx-auto my-5">
<p class="text-[rgba(255,255,255,0.45)] pt-2">@2020-2023, FlowerShop.com. All rights reserved. </p>
</div>
</div>
</div>
</section>
</body>
</html>