-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (240 loc) · 18.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Tea House</title>
<link rel="shortcut icon" href="assets/cup.png" type="image/x-icon">
<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:[email protected]&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<style>
.font-manrope {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
.text-c1{
color: rgb(119, 119, 119);
}
.gradient-orange{
background: linear-gradient(270.00deg, rgb(255, 0, 0) 0%,rgb(255, 137, 56) 100%);
}
.text-clip{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
input:focus{
outline: none;
}
footer input:first-child::placeholder{
color: rgb(119, 119, 119);
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body class="font-manrope">
<header class="flex justify-center mt-10 gap-12">
<div>
<h3 class="text-[80px] font-extrabold">It's good <br> tea time at The <br> Tea House</h3>
<p class="text-lg my-[30px] text-c1 font-medium">Tea and Botanical Solutions Supplier Give Optimum <br> Satisfaction To Your Taste Buds.</p>
<button class="gradient-orange rounded-lg text-xl font-bold text-white flex justify-center items-center gap-[9px] p-[18px]">
Explore More <svg class="h-[15px] w-[15px] -rotate-45" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#ffffff" d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/></svg>
</button>
</div>
<div class="relative mt-24">
<img src="assets/banner.png">
<div class="absolute left-[110px] bottom-[22px] flex justify-center items-center gap-3 bg-white rounded-[10px] shadow-md px-4 py-3">
<div><svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#FFD43B" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg></div>
<div class="justify-center flex items-start flex-col gap-1">
<h3 class="font-extrabold text-[30px]">5.00</h3>
<p class="font-semibold text-4 text-c1">Trust Pilot Ratings</p>
</div>
</div>
</div>
</header>
<main>
<section id="products">
<h1 class="text-center font-extrabold text-[45px] mt-32">Our Featured Products</h1>
<p class="text-[16px] font-medium text-center mt-7 mb-12 text-c1">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some <br> form, by injected humour, or randomised words which don't look even slightly believable. </p>
<div class="flex justify-center items-center gap-6 mb-32 flex-row">
<div class="flex flex-col justify-center items-center bg-gradient-to-b from-stone-200 to-white p-[30px] rounded-lg">
<img src="assets/tea-1.png">
<h3 class="mt-[30px] mb-[15px] font-extrabold text-[24px] ">Milk Tea</h3>
<p class="text-[16px] text-c1 font-medium text-center">Creamer could be <br> replaced by fresh milk</p>
</div>
<div class="flex flex-col justify-center items-center bg-gradient-to-b from-stone-200 to-white p-[30px] rounded-lg">
<img src="assets/tea-2.png">
<h3 class="mt-[30px] mb-[15px] font-extrabold text-[24px] ">Black Tea</h3>
<p class="text-[16px] text-c1 font-medium text-center">Creamer could be <br> replaced by fresh milk</p>
</div>
<div class="flex flex-col justify-center items-center bg-gradient-to-b from-stone-200 to-white p-[30px] rounded-lg">
<img src="assets/tea-3.png">
<h3 class="mt-[30px] mb-[15px] font-extrabold text-[24px] ">Lemon Tea</h3>
<p class="text-[16px] text-c1 font-medium text-center">Creamer could be <br> replaced by fresh milk</p>
</div>
<div class="flex flex-col justify-center items-center bg-gradient-to-b from-stone-200 to-white p-[30px] rounded-lg">
<img src="assets/tea-4.png">
<h3 class="mt-[30px] mb-[15px] font-extrabold text-[24px] ">Green Tea</h3>
<p class="text-[16px] text-c1 font-medium text-center">Creamer could be <br> replaced by fresh milk</p>
</div>
</div>
</section>
<section id="tea" class="flex flex-row gap-[52px] justify-center items-center">
<div class="grid grid-cols-2 grid-rows-3 gap-[30px]">
<div class="bg-gradient-to-r from-red-100 to-red-50 rounded-xl w-60"></div>
<div class="row-span-2 flex justify-center items-center bg-orange-50 h-[355px] rounded-xl">
<img class="w-46" src="assets/fresh-1.png">
</div>
<div class="row-span-2 flex justify-center items-center bg-green-50 h-[355px] rounded-xl">
<img class="w-35" src="assets/fresh-2.png">
</div>
<div class="bg-gradient-to-r from-stone-200 to-stone-50 rounded-xl w-60"></div>
</div>
<div class="">
<h2 class=" font-extrabold text-[45px]">Great Tea, Freshly <br> Presented</h2>
<p class=" w-[582px] text-c1 font-medium text-[16px] mt-[34px] mb-[30px]">The meaning of gong cha is chanese 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 custoers because of good words of mouth and unique customized service orginated from Taiwan.</p>
<h4 class="font-extrabold text-[20px]">Unique Taste</h4>
<p class="text-c1 font-medium text-[16px] mt-[14px] mb-[20px]">A Unique and different style from other teapots gives a <br> luxurious and minimalist impression</p>
<h4 class="font-extrabold text-[20px]">Premium Quality</h4>
<p class="text-c1 font-medium text-[16px] mt-[14px]">Premium Quality that makes tea more elegant and more <br> durable when you use it.</p>
</div>
</section>
<section id="clients" class="justify-center items-center flex my-[130px]">
<div class="w-[1140px] h-[650px] bg-gradient-to-r from-orange-500 to-red-600 rounded-xl relative justify-center items-center flex gap-9">
<img src="assets/bg_cup.png" class="z-0 top-[314px] left-[170px] absolute">
<div class="z-10">
<h1 class="text-white font-extrabold text-[45px]">Meet Our Super <br> Clients</h1>
<p class="text-white mt-[34px] mb-[30px] w-[440px] text-[16px] font-medium">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
<button class="bg-white rounded-lg px-6 py-3 cursor-pointer"><p class="cursor-pointer text-clip bg-gradient-to-r from-orange-500 to-red-600 text-[20px] font-bold ">Show All</p></button>
</div>
<div class="h-full">
<div class="z-[5] relative left-[106px] top-[100px] opacity-30">
<div id="1">
<div class="h-[203px] w-[400px] bg-white rounded-lg relative flex flex-col justify-center items-left">
<img src="assets/client.png" class="absolute -top-5 -left-5 border-[4px] border-white rounded-full">
<p class="text-c1 w-[340px] text-[16px] font-normal mb-5 ml-[50px]">We are providing the best and suitable home insurance services for the people who are interested to treatment</p>
<div class="flex flex-col justify-start ml-[50px]">
<h3 class="font-bold text-[16px] text-left">Ilham Yuda</h3>
<p class="font-medium text-[16px] text-left text-c1">Businessman</p>
</div>
</div>
</div>
</div>
<div class="z-[5] relative left-[106px] top-[140px] opacity-30">
<div id="1">
<div class="h-[203px] w-[400px] bg-white rounded-lg relative flex flex-col justify-center items-left">
<img src="assets/client.png" class="absolute -top-5 -left-5 border-[4px] border-white rounded-full">
<p class="text-c1 w-[340px] text-[16px] font-normal mb-5 ml-[50px]">We are providing the best and suitable home insurance services for the people who are interested to treatment</p>
<div class="flex flex-col justify-start ml-[50px]">
<h3 class="font-bold text-[16px] text-left">Ilham Yuda</h3>
<p class="font-medium text-[16px] text-left text-c1">Designer</p>
</div>
</div>
</div>
</div>
<div class="z-10 absolute top-[215px]">
<div id="1">
<div class="h-[203px] w-[400px] bg-white rounded-lg relative flex flex-col justify-center items-left">
<img src="assets/client.png" class="absolute -top-5 -left-5 border-[4px] border-white rounded-full">
<p class="text-c1 w-[340px] text-[16px] font-normal mb-5 ml-[50px]">We are providing the best and suitable home insurance services for the people who are interested to treatment</p>
<div class="flex flex-col justify-start ml-[50px]">
<h3 class="font-bold text-[16px] text-left">Ilham Yuda</h3>
<p class="font-medium text-[16px] text-left text-c1">Businessman</p>
</div>
<img src="assets/circles.png" class="w-[25px] left-[353px] bottom-[25px] absolute">
</div>
</div>
</div>
</div>
</div>
</section>
<section id="news" class="flex flex-col justify-center items-center mb-[130px] mt-[-130px]">
<h1 class="text-center font-extrabold text-[45px] mt-32">News & Events</h1>
<p class="text-[16px] font-medium text-center mt-7 mb-12 text-c1">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some <br> form, by injected humour, or randomised words which don't look even slightly believable. </p>
<div class="flex flex-row gap-6 justify-center items-center">
<div class="flex flex-col justify-center items-start border-[2px] border-stone-200 rounded-xl py-[21px] px-[22px]">
<img src="assets/news-1.png">
<p class="text-[16px] font-medium text-c1 mt-[20px] mb-[10px]">Feb 05, 2027</p>
<h3 class="text-[20px] font-extrabold">Collecting 8 points for <br> discount</h3>
<p class="text-[16px] font-medium text-c1 mt-[17px] mb-[10px]">There are many variations of passages <br> of Lorem Ipsum available.</p>
<h3 class="text-[16px] font-bold">Learn More</h3>
</div>
<div class="flex flex-col justify-center items-start border-[2px] border-stone-200 rounded-xl py-[21px] px-[22px]">
<img src="assets/news-2.png">
<p class="text-[16px] font-medium text-c1 mt-[20px] mb-[10px]">Feb 05, 2027</p>
<h3 class="text-[20px] font-extrabold">Collecting 8 points for <br> discount</h3>
<p class="text-[16px] font-medium text-c1 mt-[17px] mb-[10px]">There are many variations of passages <br> of Lorem Ipsum available.</p>
<h3 class="text-[16px] font-bold">Learn More</h3>
</div>
<div class="flex flex-col justify-center items-start border-[2px] border-stone-200 rounded-xl py-[21px] px-[22px]">
<img src="assets/news-3.png">
<p class="text-[16px] font-medium text-c1 mt-[20px] mb-[10px]">Feb 05, 2027</p>
<h3 class="text-[20px] font-extrabold">Collecting 8 points for <br> discount</h3>
<p class="text-[16px] font-medium text-c1 mt-[17px] mb-[10px]">There are many variations of passages <br> of Lorem Ipsum available.</p>
<h3 class="text-[16px] font-bold">Learn More</h3>
</div>
</div>
</section>
</main>
<footer class="bg-gradient-to-r from-orange-100 to-red-100 flex flex-col justify-center items-center">
<div class="w-[1140px] my-[130px]">
<div class="flex justify-between items-center mb-[104px]">
<img src="assets/cup.png">
<div class="w-[410px] bg-white rounded-xl flex justify-between">
<input type="text" placeholder="Ready to get strated?" class="text-c1 text-[20px] ml-[16px]"><button class="gradient-orange rounded-lg text-xl font-bold text-white px-[25px] py-[15px]">Get Started</button>
</div>
</div>
<div class="flex flex-row justify-between ">
<div>
<h3 class="font-semibold text-[20px] mb-[25px]">Quick Links</h3>
<ul class="font-normal text-[16px] text-c1">
<li>Home</li>
<li>About Us</li>
<li>Insurance</li>
<li>Privacy Policy</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-[20px] mb-[25px]">Our Service</h3>
<ul class="font-normal text-[16px] text-c1">
<li>Life Insurance</li>
<li>Car Insurance</li>
<li>Health Insurance</li>
<li>House Insurance</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-[20px] mb-[25px]">Help</h3>
<ul class="font-normal text-[16px] text-c1">
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</div>
<div class="h-[240px] w-[300px] flex flex-col gap-10 justify-between items-start">
<h2 class="text-[24px] font-semibold">Subscribe to our <br> newsletter</h2>
<div class="flex flex-row align-middle">
<input class="bg-transparent pb-[23px] border-b-[2px] border-stone-400 w-[253px]" type="email" placeholder="Email address">
<button class="gradient-orange rounded-full text-xl font-bold text-white w-[32px] h-[32px] flex items-center justify-center">
<svg class="w-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="#ffffff" d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
</button>
</div>
<div class="flex gap-[32px]">
<svg class="w-[10px] h-[20px] cursor-pointer"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="#4d4d4d" d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg>
<svg class="w-[20px] h-[16px] cursor-pointer"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#4d4d4d" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
<svg class="w-[20px] h-[20px] cursor-pointer"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#4d4d4d" d="M194.4 211.7a53.3 53.3 0 1 0 59.3 88.7 53.3 53.3 0 1 0 -59.3-88.7zm142.3-68.4c-5.2-5.2-11.5-9.3-18.4-12c-18.1-7.1-57.6-6.8-83.1-6.5c-4.1 0-7.9 .1-11.2 .1c-3.3 0-7.2 0-11.4-.1c-25.5-.3-64.8-.7-82.9 6.5c-6.9 2.7-13.1 6.8-18.4 12s-9.3 11.5-12 18.4c-7.1 18.1-6.7 57.7-6.5 83.2c0 4.1 .1 7.9 .1 11.1s0 7-.1 11.1c-.2 25.5-.6 65.1 6.5 83.2c2.7 6.9 6.8 13.1 12 18.4s11.5 9.3 18.4 12c18.1 7.1 57.6 6.8 83.1 6.5c4.1 0 7.9-.1 11.2-.1c3.3 0 7.2 0 11.4 .1c25.5 .3 64.8 .7 82.9-6.5c6.9-2.7 13.1-6.8 18.4-12s9.3-11.5 12-18.4c7.2-18 6.8-57.4 6.5-83c0-4.2-.1-8.1-.1-11.4s0-7.1 .1-11.4c.3-25.5 .7-64.9-6.5-83l0 0c-2.7-6.9-6.8-13.1-12-18.4zm-67.1 44.5A82 82 0 1 1 178.4 324.2a82 82 0 1 1 91.1-136.4zm29.2-1.3c-3.1-2.1-5.6-5.1-7.1-8.6s-1.8-7.3-1.1-11.1s2.6-7.1 5.2-9.8s6.1-4.5 9.8-5.2s7.6-.4 11.1 1.1s6.5 3.9 8.6 7s3.2 6.8 3.2 10.6c0 2.5-.5 5-1.4 7.3s-2.4 4.4-4.1 6.2s-3.9 3.2-6.2 4.2s-4.8 1.5-7.3 1.5l0 0c-3.8 0-7.5-1.1-10.6-3.2zM448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM357 389c-18.7 18.7-41.4 24.6-67 25.9c-26.4 1.5-105.6 1.5-132 0c-25.6-1.3-48.3-7.2-67-25.9s-24.6-41.4-25.8-67c-1.5-26.4-1.5-105.6 0-132c1.3-25.6 7.1-48.3 25.8-67s41.5-24.6 67-25.8c26.4-1.5 105.6-1.5 132 0c25.6 1.3 48.3 7.1 67 25.8s24.6 41.4 25.8 67c1.5 26.3 1.5 105.4 0 131.9c-1.3 25.6-7.1 48.3-25.8 67z"/></svg>
</div>
</div>
</div>
<p class="text-[16px] font-medium text-stone-600 text-center mt-[62px]">© 2027 UIDesign.to - All rights reserved.</p>
</div>
</footer>
</body>
</html>
<!-- © All rights are reserved by Md Rafsan Afnan Rushan
Email: [email protected]
Github: Rushberry -->