-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (255 loc) · 15.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tea House Tailwind</title>
<!-- font awesome -->
<script src="https://kit.fontawesome.com/29c82678d5.js" crossorigin="anonymous"></script>
<!-- tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- header -->
<header class="w-full max-w-6xl mx-auto md:flex justify-center items-center p-20 space-y-3">
<div class="space-y-5">
<h1 class="font-bold text-7xl text-slate-700">It's good <br> tea time at The Tea House</h1>
<p class="text-lg text-slate-700">Tea and Botanical Solutions Supplier Give Optimum Satisfaction To Your
Taste Buds.</p>
<button
class="bg-gradient-to-r from-[#FF0000] to-[#FF8938] font-semibold text-xl p-4 text-white rounded-lg">Explore
More
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-4 inline">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</button>
</div>
<div class="relative">
<img src="images/banner.png" alt="">
<div
class="absolute bottom-0 left-7 flex justify-evenly items-center gap-3 bg-white drop-shadow-2xl rounded-lg w-fit px-1 py-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFC850" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-9 h-9">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
</svg>
<div>
<h3 class="font-bold text-xl">5.00</h3>
<p>Trust Pilot Ratings</p>
</div>
</div>
</div>
</header>
<!-- main -->
<main>
<!-- feature section -->
<section class="w-full max-w-6xl mx-auto p-20 text-center space-y-5">
<h1 class="text-7xl font-bold text-slate-700">Our Featured Products</h1>
<p class="text-lg text-slate-700">There are many variations of passages of Lorem Ipsum available, but the
majority have suffered alteration in some form, by injected humour, or randomized words which don't look
even slightly believable. </p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5 pt-6">
<div class="bg-gradient-to-b from-slate-200 to-slate-50 rounded-lg p-4 flex flex-col items-center">
<div>
<img src="images/tea-1.png" alt="">
</div>
<h2 class="text-xl font-bold my-3 text-slate-700">Milk Tea</h2>
<p class="font-semibold text-slate-700">Creamer could be replaced by fresh milk</p>
</div>
<div class="bg-gradient-to-b from-slate-200 to-slate-50 rounded-lg p-4 flex flex-col items-center">
<div>
<img src="images/tea-2.png" alt="">
</div>
<h2 class="text-xl font-bold my-3 text-slate-700">Black Tea</h2>
<p class="font-semibold text-slate-700">Creamer could be replaced by fresh milk</p>
</div>
<div class="bg-gradient-to-b from-slate-200 to-slate-50 rounded-lg p-4 flex flex-col items-center">
<div>
<img src="images/tea-3.png" alt="">
</div>
<h2 class="text-xl font-bold my-3 text-slate-700">Lemon Tea</h2>
<p class="font-semibold text-slate-700">Creamer could be replaced by fresh milk</p>
</div>
<div class="bg-gradient-to-b from-slate-200 to-slate-50 rounded-lg p-4 flex flex-col items-center">
<div>
<img src="images/tea-4.png" alt="">
</div>
<h2 class="text-xl font-bold my-3 text-slate-700">Green Tea</h2>
<p class="font-semibold text-slate-700">Creamer could be replaced by fresh milk</p>
</div>
</div>
</section>
<!-- freshly made section -->
<section class="w-full max-w-6xl mx-auto p-20 md:flex justify-center items-center gap-8">
<div class="w-full md:w-1/2 grid md:grid-cols-2 gap-5">
<div class="rounded-lg h-32 bg-gradient-to-r from-red-100 to-red-50"></div>
<div
class="row-span-3 rounded-lg p-12 bg-gradient-to-r from-red-100 to-red-50 flex items-center justify-center">
<img src="images/fresh-1.png" alt="">
</div>
<div
class="row-span-3 p-12 rounded-lg bg-gradient-to-r from-slate-200 to-slate-50 flex items-center justify-center">
<img src="images/fresh-2.png" alt="">
</div>
<div class="rounded-lg h-32 p-12 bg-gradient-to-r from-slate-200 to-slate-50"></div>
</div>
<div class="w-full md:w-1/2 space-y-4">
<h1 class="font-bold text-slate-700 text-2xl">Great Tea, Freshly Presented</h1>
<p class="font-semibold text-slate-700">The meaning of gong cha is chances is to provide the best tea to
emperor from all possessions . It represents the highest quality and self expectation. Establishing
in 2006, Gong cha had been deeply appreciated by its customers because of good words of mouth and
unique customized service originated from Taiwan.</p>
<h4 class="font-bold text-slate-700">Unique Taste</h4>
<p class="font-semibold text-slate-700">A Unique and different style from other teapots gives a
luxurious and minimalist impression</p>
<h4 class="font-bold text-slate-700">Premium Quality</h4>
<p class="font-semibold text-slate-700">Premium Quality that makes tea more elegant and more durable
when you use it.</p>
</div>
</section>
<!-- client section -->
<section
class="w-full max-w-5xl mx-auto px-10 md:flex justify-center items-center gap-12 bg-gradient-to-r from-[#FF0000] to-[#FF8938] rounded-lg space-x-6">
<div class="space-y-5 pt-6 w-full md:w-1/2">
<h2 class="text-2xl font-bold text-white">Meet Our Super Clients</h2>
<p class="font-semibold text-lg text-white">There are many variations of passages of Lorem Ipsum
available, but the majority have suffered alteration in some form, by injected humour, or randomized
words which don't look even slightly believable. </p>
<!-- adding text gradient -->
<button class=" bg-white font-semibold py-2 px-4 rounded-lg">
<span class="bg-gradient-to-r from-[#FF0000] to-[#FF8938] text-transparent bg-clip-text">Show
All</span>
</button>
</div>
<div class="w-full md:w-1/2">
<div class="bg-white py-5 px-8 mx-4 rounded-lg space-y-2 relative top-16 opacity-30">
<p class="text-lg text-slate-700">We are providing the best and suitable home insurance services
for
the people who are interested to treatment</p>
<h5 class="font-bold text-lg text-slate-700">Ilham Yuda</h5>
<p class="text-slate-700 text-lg">Businessman</p>
<div class="absolute top-0 left-0">
<img class="-mt-6 -ml-4" src="images/client.png" alt="">
</div>
</div>
<div class="bg-white py-5 px-8 mx-4 rounded-lg space-y-2 h-52 relative right-16 z-20">
<p class="text-lg text-slate-700">We are providing the best and suitable home insurance services
for the
people who are interested to treatment</p>
<h5 class="font-bold text-lg text-slate-700">Ilham Yuda</h5>
<p class="text-slate-700 text-lg">Businessman</p>
<div class="absolute top-0 left-0">
<img class="-mt-6 -ml-4" src="images/client.png" alt="">
</div>
</div>
<div class="bg-white py-5 px-8 mx-4 rounded-lg space-y-2 relative bottom-16 opacity-30">
<p class="text-lg text-slate-700">We are providing the best and suitable home insurance services
for the
people who are interested to treatment</p>
<h5 class="font-bold text-lg text-slate-700">Ilham Yuda</h5>
<p class="text-slate-700 text-lg">Businessman</p>
<div class="absolute top-0 left-0">
<img class="-mt-6 -ml-4" src="images/client.png" alt="">
</div>
</div>
</div>
</section>
<!-- news section -->
<section class="w-full max-w-6xl mx-auto p-20 space-y-5">
<h1 class="text-7xl font-bold text-slate-700 text-center">News & Events</h1>
<p class="text-lg text-slate-700 text-center">There are many variations of passages of Lorem Ipsum
available, but the majority have suffered alteration in some form, by injected humour, or randomized
words which don't look even slightly believable. </p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 pt-6">
<div class="border rounded-lg p-4">
<div>
<img src="images/news-1.png" alt="">
</div>
<p class="text-gray-600 my-3">Feb 05, 2027</p>
<h2 class="text-lg font-bold mb-3 text-slate-700">Collecting 8 points for discount</h2>
<p class="text-slate-700">There are many variations of passages of Lorem Ipsum available.</p>
<h5 class="font-bold text-slate-700 mt-3">Learn More</h5>
</div>
<div class="border rounded-lg p-4">
<div>
<img src="images/news-2.png" alt="">
</div>
<p class="text-gray-600 my-3">Feb 05, 2027</p>
<h2 class="text-lg font-bold mb-3 text-slate-700">Collecting 8 points for discount</h2>
<p class="text-slate-700">There are many variations of passages of Lorem Ipsum available.</p>
<h5 class="font-bold text-slate-700 mt-3">Learn More</h5>
</div>
<div class="border rounded-lg p-4">
<div>
<img src="images/news-3.png" alt="">
</div>
<p class="text-gray-600 my-3">Feb 05, 2027</p>
<h2 class="text-lg font-bold mb-3 text-slate-700">Collecting 8 points for discount</h2>
<p class="text-slate-700">There are many variations of passages of Lorem Ipsum available.</p>
<h5 class="font-bold text-slate-700 mt-3">Learn More</h5>
</div>
</div>
</section>
<!-- footer -->
<footer class="w-full p-20 bg-gradient-to-r from-pink-100 to-pink-50 text-center">
<!-- top section -->
<section class="flex justify-between items-center px-5">
<div>
<img src="images/cup.png" alt="">
</div>
<div class="flex items-center justify-between gap-8">
<p class="font-semibold text-slate-700">Ready to get started?</p>
<button
class="bg-gradient-to-r from-[#FF0000] to-[#FF8938] font-semibold text-xl p-4 text-white rounded-lg">Get
Started</button>
</div>
</section>
<!-- down section -->
<section class="my-16 px-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-12">
<div class="space-y-3 text-start">
<h3 class="font-semibold text-slate-700">Quick Links</h3>
<p class="text-gray-600">Home</p>
<p class="text-gray-600">About Us</p>
<p class="text-gray-600">Insurance</p>
<p class="text-gray-600">Privacy Policy</p>
</div>
<div class="space-y-3 text-start">
<h3 class="font-semibold text-slate-700">Our Service</h3>
<p class="text-gray-600">Life Insurance</p>
<p class="text-gray-600">Car Insurance</p>
<p class="text-gray-600">Health Insurance</p>
<p class="text-gray-600">House Insurance</p>
</div>
<div class="space-y-3 text-start">
<h3 class="font-semibold text-slate-700">Help</h3>
<p class="text-gray-600">FAQs</p>
<p class="text-gray-600">Contact Us</p>
</div>
<div class="space-y-5 text-start">
<h3 class="font-semibold text-slate-700 text-xl">Subscribe to our newsletter</h3>
<div class="flex justify-start items-center gap-8">
<div>
<p class="text-gray-600">Email Address</p>
<hr class=" w-44 border border-gray-600 mt-3">
</div>
<button class="bg-gradient-to-r from-[#FF0000] to-[#FF8938] text-white rounded-full p-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
<p class="text-gray-600 pt-3">
<i class="fa-brands fa-facebook-f mr-3"></i>
<i class="fa-brands fa-twitter mr-3"></i>
<i class="fa-brands fa-square-instagram mr-3"></i>
</p>
</div>
</section>
<small class="text-slate-600">© 2027 UIDesign.to - All rights reserved.</small>
</footer>
</main>
</body>
</html>