-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
289 lines (274 loc) · 21.9 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
<!doctype html>
<html>
<head>
<title>Wira Ganteng Sedunia</title>
<meta name="description" content="Our first page">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/css/output.css">
<script src="./main.js"></script>
</head>
<body>
<div id="main" class="flex flex-col w-screen h-full justify-between relative bg-white">
<div id="Header" class="flex-grow relative">
<div class="relative left-[93px] top-[20px]">
<div class="h-auto w-auto absolute text-white text-[35px] 2xl:text-[55px] font-normal font-ClickerScript">Sky’s Coffee
<div class="flex space-x-5 ">
<a href="#" class="text-white text-sm hover:underline font-medium font-Playfair">Home</a>
<a href="./userProfile.html" class="text-white text-sm hover:underline font-medium font-Playfair">Menu</a>
<a href="./about.html" class="text-white text-sm hover:underline font-medium font-Playfair">About Us</a>
</div>
</div>
</div>
<div class="flex justify-end absolute space-x-2 top-6 right-5">
<button class="w-[100px] h-12 left-0 top-0 bg-transparent rounded-lg shadow text-white text-sm font-medium font-Playfair hover:underline">SignIn</button>
<button class="w-[100px] h-12 left-0 top-0 bg-orange-300 rounded-3xl shadow text-stone-900 text-sm font-medium font-Playfair">SignUp</button>
</div>
<img class="w-screen flex flex-col left-0 top-0" src="./src/img/coffee_image.png" />
<div id="Header-Content" class="w-[516px] h-[490px] left-[93px] top-[183px] absolute">
<div class="w-[516px] h-[422px] left-0 top-0 absolute">
<div class="left-0 top-0 absolute text-white text-[22px] font-medium font-Playfair">Make your day will be wonderful</div>
<div class="left-0 top-[320px] absolute text-white text-xl font-normal font-Playfair leading-[34px]">Coffee is a perfect place to start your day. <br/>It’s just enough to re-energize and get you going.<br/>Let's get some coffee, and then let's get some more coffee.</div>
<div class="left-0 top-[29px] absolute text-white text-[220px] font-normal font-ClickerScript">Coffee</div>
</div>
<div class="w-[134px] h-12 left-0 top-[442px] absolute">
<div class="w-[134px] h-12 left-0 top-0 absolute bg-orange-300 rounded-3xl shadow"></div>
<div class="left-[26px] top-[14px] absolute text-stone-900 text-base font-bold font-Playfair">Order Now</div>
</div>
</div>
</div>
<div id="Second-Slide" class="w-screen flex flex-col relative">
<div class="flex flex-row-reverse w-screen justify-center">
<img class="w-[500px] h-[476px] left-0 top-14 relative" src="./src/img/ochin.png" />
<div class="w-[800px] relative justify-center left-24 top-0 flex flex-col">
<h2 class="left-0 top-0 relative text-yellow-900 text-[54px] font-bold font-Playfair whitespace-nowrap ">The Difference of our Coffee</h2>
<br>
<p class="w-[590px] left-0 top-0 relative text-justify text-neutral-500 text-xl font-normal font-Playfair leading-[34px]">Explore the world of exceptional coffee with us. Our carefully selected beans from around the globe promise a flavor adventure like no other. Whether you're a fan of strong, dark roasts or prefer the gentle taste of light blends, we've got something for everyone.</p>
</div>
</div>
<img class="w-[377px] h-[273px] relative bottom-40" src="./src/img/coffee_blast.png" />
</div>
<div id="Third-Content">
<div id="Main Third-Content" class="flex flex-col bottom-48 w-screen justify-center relative ">
<div class="flex flex-col relative place-items-center w-screen">
<div class="w-[900px] flex tracking-wide text-center left-0 top-0 relative text-yellow-900 text-[54px] font-bold font-Playfair">Enjoy a new blend of coffee style</div>
<br>
<div class="w-[980px] flex tracking-wide left-16 top-0 relative text-neutral-500 text-xl font-normal font-Playfair leading-[34px]">Explore all flavours of coffee with us. There is always a new cup worth experiencing</div>
</div>
<div id="Here the shit" class="flex flex-row justify-center space-x-3 top-5 w-screen relative ">
<div class="flex relative">
<div class="w-[280px] h-[364px] left-0 top-0 absolute bg-orange-50 border border-orange-300/opacity-40"></div>
<img class="w-[280px] h-[222px] left-0 top-0 relative" src="./src/img/Rectangle 7.png" />
<div class="w-[134px] h-12 left-[73px] top-[340px] absolute">
<div class="w-[134px] h-12 left-0 top-0 absolute bg-orange-300 rounded-3xl shadow"></div>
<div class="left-[26px] top-[14px] absolute text-stone-900 text-base font-bold font-Playfair">Order Now</div>
</div>
<div class="w-[155px] h-[86px] left-[63px] top-[236px] absolute">
<div class="left-[16px] top-0 absolute text-yellow-900 text-[22px] font-bold font-Playfair">Cappuccino</div>
<div class="left-0 top-[35px] absolute text-stone-900 text-base font-normal font-Playfair">Coffee 70% | Milk 30%</div>
<div class="left-[37px] top-[62px] absolute text-yellow-900 text-lg font-bold font-Playfair">Rp.35.000</div>
</div>
</div>
<div class="flex relative">
<div class="w-[280px] h-[364px] left-0 top-0 absolute bg-orange-50 border border-orange-300/opacity-40"></div>
<img class="w-[280px] h-[222px] left-0 top-0 relative" src="./src/img/Rectangle 9.png" />
<div class="w-[134px] h-12 left-[73px] top-[340px] absolute">
<div class="w-[134px] h-12 left-0 top-0 absolute bg-orange-300 rounded-3xl shadow"></div>
<div class="left-[26px] top-[14px] absolute text-stone-900 text-base font-bold font-Playfair">Order Now</div>
</div>
<div class="w-[156px] h-[86px] left-[63px] top-[236px] absolute">
<div class="left-[25px] top-0 absolute text-yellow-900 text-[22px] font-bold font-Playfair">Americano</div>
<div class="left-0 top-[35px] absolute text-stone-900 text-base font-normal font-Playfair">Coffee 100% | Milk 0%</div>
<div class="left-[36px] top-[62px] absolute text-yellow-900 text-lg font-bold font-Playfair">Rp.25.000</div>
</div>
</div>
<div class="flex relative">
<div class="w-[280px] h-[364px] left-0 top-0 absolute bg-orange-50 border border-orange-300/opacity-40"></div>
<img class="w-[280px] h-[222px] left-0 top-0 relative" src="./src/img/Rectangle 11.png" />
<div class="w-[134px] h-12 left-[73px] top-[340px] absolute">
<div class="w-[134px] h-12 left-0 top-0 absolute bg-orange-300 rounded-3xl shadow"></div>
<div class="left-[26px] top-[14px] absolute text-stone-900 text-base font-bold font-Playfair">Order Now</div>
</div>
<div class="w-[157px] h-[86px] left-[63px] top-[236px] absolute">
<div class="left-[24px] top-0 absolute text-yellow-900 text-[22px] font-bold font-Playfair">Macchiato</div>
<div class="left-0 top-[35px] absolute text-stone-900 text-base font-normal font-Playfair">Coffee 60% | Milk 40%</div>
<div class="left-[36px] top-[62px] absolute text-yellow-900 text-lg font-bold font-Playfair">Rp.30.000</div>
</div>
</div>
<div class="flex relative">
<div class="w-[280px] h-[364px] left-0 top-0 absolute bg-orange-50 border border-orange-300/opacity-40"></div>
<img class="w-[280px] h-[222px] left-0 top-0 relative" src="./src/img/Rectangle 13.png" />
<div class="w-[134px] h-12 left-[73px] top-[340px] absolute">
<div class="w-[134px] h-12 left-0 top-0 absolute bg-orange-300 rounded-3xl shadow"></div>
<div class="left-[26px] top-[14px] absolute text-stone-900 text-base font-bold font-Playfair">Order Now</div>
</div>
<div class="w-[156px] h-[91px] left-[63px] top-[236px] absolute">
<div class="left-[31px] top-0 absolute text-yellow-900 text-[22px] font-bold font-Playfair">Expresso</div>
<div class="left-0 top-[35px] absolute text-stone-900 text-base font-normal font-Playfair">Coffee 100% | Milk 0%</div>
<div class="left-[35px] top-[67px] absolute text-yellow-900 text-lg font-bold font-Playfair">Rp.20.000</div>
</div>
</div>
</div>
</div>
<div class="w-screen flex relative justify-end">
<img class="w-[371px] h-[261px] left-0 top-0 relative" src="./src/img/coffee_blast(1).png" />
</div>
</div>
<div id="Fourth-Content" class="w-screen h-fit flex flex-col justify-center items-center left-0 bottom-28 relative">
<!-- Text -->
<div class="w-[980px] h-[122px] left-0 top-0 relative">
<div class="w-[980px] left-0 top-[70px] absolute text-center text-neutral-500 text-xl font-normal font-Playfair leading-[34px]">We don’t just make your coffee, we make your day!</div>
<div class="left-[221px] top-0 absolute text-yellow-900 text-[54px] font-bold font-Playfair">Why are we different?</div>
</div>
<!-- Text -->
<br>
<div class="w-[1180px] h-[284px] flex flex-row justify-center space-x-4 left-0 top-0 relative">
<div class="w-[280px] h-[284px] left-0 top-0 relative">
<div class="w-[280px] h-[284px] left-0 top-0 absolute bg-orange-100"></div>
<div class="w-[201px] h-[212px] left-[39px] top-[36px] absolute">
<div class="left-0 top-[113px] absolute text-yellow-900 text-[28px] font-bold font-Playfair">Supreme Beans</div>
<div class="left-[13px] top-[158px] absolute text-center text-neutral-500 text-xl font-normal font-Playfair">Beans that provides<br/>great taste</div>
<img class="w-[88px] h-[88px] left-[57px] top-0 absolute" src="./src/img/coffee-beans 1.png" />
</div>
</div>
<div class="w-[280px] h-[284px] left-0 top-0 relative">
<div class="w-[280px] h-[284px] left-0 top-0 absolute bg-orange-50 border border-orange-300/opacity-40"></div>
<div class="w-[166px] h-[212px] left-[57px] top-[36px] absolute">
<div class="left-0 top-[113px] absolute text-yellow-900 text-[28px] font-bold font-Playfair">High Quality</div>
<div class="left-[16px] top-[158px] absolute text-center text-neutral-500 text-xl font-normal font-Playfair">We provide the<br/>highest quality</div>
<img class="w-[88px] h-[88px] left-[39px] top-0 absolute" src="./src/img/badge 1.png" />
</div>
</div>
<div class="w-[280px] h-[284px] left-0 top-0 relative">
<div class="w-[280px] h-[284px] left-0 top-0 absolute bg-orange-50 border border-orange-300/opacity-40"></div>
<div class="w-[183px] h-[212px] left-[49px] top-[36px] absolute">
<div class="left-0 top-[113px] absolute text-yellow-900 text-[28px] font-bold font-Playfair">Extraordinary </div>
<div class="left-[3px] top-[158px] absolute text-center text-neutral-500 text-xl font-normal font-Playfair">Coffee like you have<br/>never tasted</div>
<img class="w-[88px] h-[88px] left-[48px] top-0 absolute" src="./src/img/coffee-cup 1.png" />
</div>
</div>
<div class="w-[280px] h-[284px] left-0 top-0 relative">
<div class="w-[280px] h-[284px] left-0 top-0 absolute bg-orange-50 border border-orange-300/opacity-40"></div>
<div class="w-[211px] h-[212px] left-[35px] top-[36px] absolute">
<div class="left-0 top-[113px] absolute text-yellow-900 text-[28px] font-bold font-Playfair">Affordable Price</div>
<div class="left-[10px] top-[158px] absolute text-center text-neutral-500 text-xl font-normal font-Playfair">Our Coffee prices are<br/>easy to afford</div>
<img class="w-[88px] h-[88px] left-[62px] top-0 absolute" src="./src/img/best-price 1.png" />
</div>
</div>
</div>
<div class="flex flex-col relative place-items-center w-screen top-8">
<span class="text-neutral-500 text-xl font-normal font-Playfair">Great ideas start with great coffee, Lets help you achieve that<br/></span>
<span class="text-yellow-900 text-3xl font-bold font-Playfair">Get started today.</span>
</div>
</div>
<div id="Fifth-Content" class="w-screen h-fit left-0 top-0 relative">
<div class="w-screen h-[574px] left-0 top-0 relative">
<img class="w-screen h-[574px] bg-[url('/src/img/hot_coffee.png')] bg-cover bg-no-repeat bg-center bg-fixed left-0 top-0 relative" src="./src/img/tytyd.png" />
</div>
<div class="w-[575px] h-[304px] left-[93px] top-[135px] absolute">
<div class="left-[4px] top-[166px] absolute text-white text-xl font-normal font-Playfair leading-[34px]">We are giving you are one time opportunity to<br/>experience a better life with coffee.</div>
<div class="left-0 top-0 absolute text-white text-[54px] font-bold font-Playfair">Get a chance to have an<br/>Amazing day</div>
<div class="w-[134px] h-12 left-0 top-[256px] absolute">
<div class="w-[134px] h-12 left-0 top-0 absolute bg-orange-300 rounded-3xl shadow"></div>
<div class="left-[26px] top-[14px] absolute text-stone-900 text-base font-bold font-Playfair">Order Now</div>
</div>
</div>
<img class="w-[533px] h-[574px] bottom-0 right-0 absolute" src="./src/img/coffee_bean.png" />
<img class="w-[300px] h-[467px] bottom-5 right-28 absolute shadow" src="./src/img/cup.png" />
</div>
<div id="Sixth-Content">
<div class="w-screen h-[747px] left-0 top-20 relative">
<div id="Center_this" class="items-center flex flex-col justify-center w-screen h-full relative">
<div class="w-[924.50px] h-36 relative">
<div class="w-[720.73px] left-[90px] top-0 absolute text-yellow-900 text-[54px] font-bold font-Playfair whitespace-nowrap">Our coffee perfection feedback</div>
<div class="w-[924.50px] left-0 top-[88px] absolute text-center text-neutral-500 text-xl font-normal font-Playfair leading-[34px]">Our owner has amazing things to say about us</div>
</div>
<div class="w-[924.50px] h-[524px] flex justify-center items-center flex-col relative bg-orange-50 border border-orange-300/opacity-40">
<div class="w-[95px] absolute top-14 left-6 text-yellow-900 text-[220px] font-bold font-Playfair leading-[112px]">“</div>
<span class="w-[735.83px] h-[185px] relative text-neutral-500 text-center text-[40px] font-semibold font-Playfair leading-9">"Join us on a journey to explore the boundless depths of flavor and the endless possibilities of pleasure that coffee has to offer."</span>
<div class="flex justify-center items-center flex-col relative top-12">
<div class="w-auto relative text-yellow-900 text-[32px] font-bold font-Playfair whitespace-nowrap">Wira Aribima</div>
<div class="w-[130.19px] relative text-center text-neutral-500 text-xl font-normal font-Playfair leading-[34px] whitespace-nowrap">Coffee’s Owner</div>
</div>
</div>
<img class="w-[105.66px] h-28 -top-14 left-2 relative rounded-2xl shadow" src="./src/img/pain.png" />
</div>
<img class="w-[469.80px] h-[272px] top-10 right-0 absolute" src="./src/img/betuah_punya_blast.png" />
<img class="w-[390.56px] h-[226px] bottom-0 left-0 absolute" src="./src/img/tak_guna_blast.png" />
</div>
</div>
<div id="Footer-Conten" class="w-screen flex flex-col relative top-40">
<div id="Footer-Content-First" class="flex flex-col justify-center relative w-screen h-[374px]">
<div class="w-screen h-[374px] left-0 top-0 relative">
<img class="w-screen h-[374px] bg-[url('/src/img/hot_coffee.png')] bg-cover bg-no-repeat bg-center left-0 top-0 relative" src="./src/img/tytyd.png" />
</div>
<div class="w-screen h-[241px] justify-center items-center flex flex-col absolute">
<div class="w-[980px] h-[122px] left-0 top-0 relative">
<div class="left-[92px] top-0 absolute text-white text-[54px] font-bold font-Playfair">Subscribe to get the Latest News</div>
<div class="w-[980px] left-0 top-[88px] absolute text-center text-white text-xl font-normal font-Playfair leading-[34px]">Don’t miss out on our latest news, updates, tips and special offers</div>
</div>
<div class="w-[642px] h-[100px] left-0 top-0 relative">
<div class="w-[642px] h-[66px] left-0 top-[7px] absolute bg-orange-50 rounded border border-orange-300/opacity-40"></div>
<div class="w-[137px] h-[100px] left-[505px] top-0 absolute">
<div class="w-[137px] h-[66px] left-0 top-[7px] absolute bg-orange-300 rounded shadow"></div>
<div class="left-[24px] top-[26px] absolute text-yellow-900 text-[22px] font-bold font-Playfair">Subscribe</div>
</div>
<div class="left-[26px] top-[23px] absolute text-center text-black/opacity-30 text-xl font-normal font-Playfair leading-[34px]">Enter your mail</div>
</div>
</div>
</div>
<div id="Footer-Content-Second" class="flex flex-row w-screen relative">
<img id="Very-Footer-Opacity" class="w-screen bg-cover bg-bottom bg-no-repeat bg-[url('/src/img/fotter_image(1).png')] left-0 top-0 absolute" src="./src/img/tytyd.png" />
<div class="relative flex-1 flex-row h-full top-44 items-baseline w-screen">
<div class="w-[380px] flex flex-col m-auto h-[214px] left-20 absolute">
<div class="text-white relative text-[54px] font-normal font-ClickerScript">Sky’s Coffee</div>
<div class="flex flex-col -space-y-5 relative">
<div class="w-[380px] text-white text-[50px] font-normal font-Playfair tracking-tight leading-snug">Low Price</div>
<div class="w-[380px] text-white text-[50px] font-normal font-Playfair tracking-tight leading-snug">High Quality</div>
</div>
<div class="left-0 top-10 relative justify-start items-start gap-2 inline-flex">
<div class="w-10 h-10 relative rounded">
<div class="w-6 h-6 left-[8px] top-[8px] absolute">
<img class="w-5 h-[19.92px] left-[2px] top-[2.04px] absolute" src="./src/img/Icon.png" />
</div>
</div>
<div class="w-10 h-10 relative rounded">
<div class="w-6 h-6 left-[8px] top-[8px] absolute">
<img class="w-[18px] h-[18px] left-[3px] top-[3px] absolute" src="./src/img/Icon (2).png" />
</div>
</div>
<div class="w-10 h-10 relative rounded">
<div class="w-6 h-6 left-[8px] top-[8px] absolute">
<img class="w-5 h-5 left-[2px] top-[2px] absolute" src="./src/img/Icon (3).png" />
</div>
</div>
</div>
</div>
<div class="w-screen flex relative m-auto justify-end space-x-28 flex-row right-20 end-0">
<div class="w-[102px] h-[216px] left-0 top-0 relative">
<div class="left-0 top-0 absolute text-white text-[26px] font-bold font-Playfair">About</div>
<div class="left-0 top-[40px] absolute text-white text-lg font-normal font-Playfair leading-[42px]">Menu<br/>Social Media<br/>About Us</div>
</div>
<div class="w-[134px] h-[174px] left-0 top-0 relative">
<div class="left-0 top-0 absolute text-white text-[26px] font-bold font-Playfair">Company</div>
<div class="left-0 top-[40px] absolute text-white text-lg font-normal font-Playfair leading-[42px]">Terms of service<br/>FAQ</div>
</div>
<div class="w-[332px] h-[258px] left-0 top-0 relative">
<div class="left-0 top-0 absolute text-white text-[26px] font-bold font-Playfair">Contact Us</div>
<div class="w-[332px] h-48 left-0 top-[48.5px] absolute">
<div class="w-[332px] h-[54px] left-0 top-0 absolute text-white text-lg font-normal font-Playfair">Jl. Kelapa Dua Raya No.93, Klp. Dua, Kec. Klp. Dua, Kabupaten Tangerang, Banten 15810</div>
<div class="left-0 top-[82px] absolute text-white text-lg font-normal font-Playfair">+6281367911749 </div>
<div class="left-0 top-[122px] absolute text-white text-lg font-normal font-Playfair">[email protected]</div>
<div class="left-0 top-[168px] absolute text-white text-lg font-normal font-Playfair">www.skyscoffee.com</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-screen top-36 h-[358px] justify-center absolute flex">
<img class="end-0 w-[297px] h-[358px] absolute" src="./src/img/pngwing 2.png" />
<img class="start-0 w-[297px] h-[358px] absolute" src="./src/img/pngwing 1.png" />
</div>
</div>
</div>
</body>
</html>