-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
350 lines (350 loc) · 19.2 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "icon" type = "image/png" href = "Images/Frame.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<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=Jost:ital,wght@0,100;0,200;0,300;0,400;1,100&family=Montserrat:wght@500&family=Vazirmatn:wght@200&family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "CSS/Home.css">
<title> Tea Setup - Home </title>
</head>
<body>
<nav class = "navbar navbar-expand-lg navbar-light bg-light fixed-top bd-navbar sticky-top">
<div class = "container-fluid first_one">
<a href = "index.html" class = "navbar-brand"> Tea Setup </a>
<div class = "collapse navbar-collapse d-flex flex_wrap" id = "navbarSupportedContent">
<ul class = "navbar-nav me-auto nav-pills list_names">
<li class = "nav-item">
<a href = "index.html" class = "nav-link active text-warning bg-dark " aria-current = "page"> Delightful Home </a>
</li>
<li class = "nav-item">
<a href = "about_us.html" class = "nav-link text-warning"> About Us </a>
</li>
<li class = "nav-item">
<a href = "contact_us.html" class = "nav-link text-warning"> Contact Us </a>
</li>
<li class="nav-item dropdown">
<a class = "nav-link dropdown-toggle text-warning" href = "#" id = "navbarDropdown" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false"> Help Center </a>
<ul class = "dropdown-menu bg-dark list_names" aria-labelledby = "navbarDropdown">
<li> <a class = "dropdown-item text-warning" href = "create_cart.html"> Create Cart </a> </li>
<li> <a class = "dropdown-item text-warning" href = "log_in.html"> Log In </a></li>
</ul>
</li>
</ul>
<form class = "d-flex">
<input type = "text" class = "form-control me-2 list_names" type = "Search" placeholder = "Search" aria-label = "Search" required>
<button class = "btn btn-warning list_names" type = "Submit"> Search </button>
</form>
</div>
</div>
</nav>
<div class = "intro d-flex justify-content-around flex_wrap">
<div class = "phase1 shadow p-2 mb-2 bg-body rounded">
<h1> Tea Delights </h1>
<p>
We provide you the best one that you have ever got before.
</p>
</div>
<div class = "phase2">
<ul class = "list-group list-group-flush shadow p-3 mb-2 bg-body rounded
">
<li class = "list-group-item"> Delightful Menu </li>
<li class = "list-group-item"> Free Home Delivery on A-2 Orders </li>
<li class = "list-group-item"> Order completion within 20-min </li>
<li class = "list-group-item"> Eco-Friendly Working Status </li>
<li class = "list-group-item"> Design with New Tech Era </li>
</ul>
</div>
</div>
<div class = "delighted_menu">
<h2 class = "heading_famed text-warning"> Our Famed Menu </h2>
<div class = "d-flex justify-content-around card_party_one flex_wrap">
<div class = "card shadow p-3 mb-3 bg-body rounded carded_one">
<img src = "Images/English Breakfast Tea.jpg" class = "card-img-top" alt = "English Breakfast Tea">
<div class = "card-body">
<h5 class = "card-title text-dark card_title"> English Breakfast Tea </h5>
<p class = "card-text text-primary para__1">
This tea blend usually consists of varieties that have a rich flavour and a dark brown or coppery colour
and is one of the best tasting teas in the world. Malty Assam blacks, some Sri Lankan teas, mixed together
with some Kenyan grades.
</p>
</div>
</div>
<div class = "card shadow p-3 mb-3 bg-body rounded carded_one">
<img src = "Images/Irish Breakfast Tea.jpg" class = "card-img-top img1" alt = "Irish Breakfast Tea">
<div class = "card-body">
<h5 class = "card-title text-dark card_title"> Irish Breakfast Tea </h5>
<p class = "card-text text-primary para__1">
A tribute to the Irish's love for strong, dark tea is this version of the English Breakfast tea.
The Irish Breakfast tea is a comparatively stronger blend made with malty Assam black tea and higher
grades of the Kenyan Broken Pekoe. Best drunk with milk.
</p>
</div>
</div>
<div class = "card shadow p-3 mb-3 bg-body rounded carded_one">
<img src = "Images/The Early Grey.jpg" class = "card-img-top img1" alt = "The Early Grey">
<div class = "card-body">
<h5 class = "card-title text-dark card_title"> The Early Grey </h5>
<p class = "card-text text-primary para__1">
This tea is a blend of any black tea and the oil of bergamot, derived from the citrus tree
found in Morocco, Tunisia, Algeria, and the Ivory Coast. Over the years, many other variations
of the Earl Grey tea have been made, some becoming popular on their own.
</p>
</div>
</div>
</div>
<div class = "d-flex justify-content-around card_party_one flex_wrap">
<div class = "card shadow p-3 mb-3 bg-body rounded carded_two">
<img src = "Images/Flat White.jpg" class = "card-img-top" alt = "Flat White Coffee">
<div class = "card-body">
<h5 class = "card-title text-dark card_title"> Flat White </h5>
<p class = "card-text text-primary para__1">
Flat white is a coffee variety that couples a double shot of freshly brewed espresso and milk,
which is usually steamed to create a light, silky microfoam. A perfect flat white should have an
intense coffee flavor, and milk.
</p>
</div>
</div>
<div class = "card shadow p-3 mb-3 bg-body rounded carded_two">
<img src = "Images/Cappuccino.jpg" class = "card-img-top img2" alt = "Cappuccino Coffee">
<div class = "card-body">
<h5 class = "card-title text-dark card_title"> Cappuccino </h5>
<p class = "card-text text-primary para__1">
Cappuccino is an Italian coffee made with espresso and steam-foamed milk. It is believed that
it developed from kapuziner—a coffee-based beverage that was enjoyed in Austrian
coffee houses in the 18th century.
</p>
</div>
</div>
<div class = "card shadow p-3 mb-3 bg-body rounded carded_two">
<img src = "Images/Espresso.jpg" class = "card-img-top img2" alt = "Espresso">
<div class = "card-body">
<h5 class = "card-title text-dark card_title"> Espresso </h5>
<p class = "card-text text-primary para__1">
Espresso is both the name of a coffee beverage and the method of brewing coffee that originated
in Italy. Nowadays it is prepared worldwide with the espresso machine - invented in Turin in
1884 by Angelo Moriondo.
</p>
</div>
</div>
</div>
</div>
<div class = "main_intro">
<h1 class = "heading_tea text-warning"> The One of Tea </h1>
<div class = "d-flex justify-content-center">
<div class = "card shadow bg-body p-3 mb-3 rounded card_blocked">
<img src = "Images/Tea Design.jpg" class = "card-img img3" alt = "Tea Delights">
<div class = "card-img-overlay">
<h3 class = "card-title text-white p-2 font_one"> Together with Tea of Indian Culture </h3>
<p class = "card-text text-warning para__2 p-2">
Tea is an aromatic beverage prepared by pouring hot or boiling water over cured or fresh leaves of
Camellia sinensis, an evergreen shrub native to China, India and other East Asian countries. Tea is
also rarely made from the leaves of Camellia taliensis. After water, it is the most widely consumed
drink in the world. There are many different types of tea; some have a cooling, slightly bitter, and
astringent flavour, while others have vastly different profiles that include sweet, nutty, floral,
or grassy notes. Tea has a stimulating effect in humans primarily due to its caffeine content.
</p>
</div>
</div>
</div>
<h1 class = "heading_famed text-warning"> Together with Coffee </h1>
<div class = "d-flex justify-content-center">
<div class = "card mb-3 shadow p-3 bg-body rounded card_blocked">
<img src = "Images/Coffee.jpg" class = "card-img img3" alt = "Coffee Delights">
<div class = "card-img-overlay">
<h3 class = "card-title text-white p-2 font_one"> The Coffee is also being provided </h3>
<p class = "card-text text-primary para__2 p-2">
Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain
flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a
stable, raw product: unroasted green coffee. The seeds are then roasted, a process which transforms
them into a consumable product: roasted coffee, which is ground into fine particles that are
typically steeped in hot water before being filtered out, producing a cup of coffee.
</p>
</div>
</div>
</div>
<div class = "more _one d-flex justify-content-center mb-3">
<div class = "card text-center info_center">
<div class = "card-header text-dark card_header"> The Clue for Delight here! </div>
<div class = "card-body bg-dark">
<h4 class = "card-title text-white card_title"> For Getting the Delight Ready! </h4>
<p class = "card-text text-warning text_card">
With the support of whole our team we provide you the best we could.
</p>
<button class = "btn btn-primary bttn_size" type = "button" data-bs-toggle = "modal" data-bs-target = "#order_button"> ! Order Now ! </button>
<div class = "modal fade" id = "order_button" tab-index = "-1" aria-labelledby = "#heading_of_label" aria-hidden = "true">
<div class = "modal-dialog bg-light" style = "border-radius: 10px;">
<div class = "modal-content content_size">
<div class = "modal-header">
<h4 class = "modal-title text-dark content_title" id = 'heading_of_label'> Welcome to Tea Setup Order lists! </h4>
<button class = "btn-close bttn_corner" type = "button" data-bs-dismiss = "modal" aria-label = "Close"></button>
</div>
<div class = "modal-body bg-light">
<form>
<div class = "form-floating mb-2">
<input type = "text" class = "form-control text-primary form_text_size form_text_gaps" id = "customer_name" placeholder = "user_name" required>
<label id = "customer_name form_text_size" class = "text-success form_text_size"> Name </label>
</div>
<div class = "form-floating mb-2">
<input type = "address" class = "form-control text-primary form_text_size form_text_gaps" id = "address" placeholder = "example 146/46P" required>
<label id = "address" class = "text-success form_text_size"> Address </label>
</div>
<div class = "form-floating mb-2">
<input type = "tel" class = "form-control text-primary form_text_gaps form_text_size" id = "contact_no" placeholder = "+91XXXXX" required>
<label id = "contact_no" class = "text-success form_text_size"> Contact No. </label>
</div>
<div class = "row gd-2">
<div class = "col-md">
<div class = "form-floating">
<select class = "form-select text-primary form_text_size2" id = "Tea_delights" aria-label = "floating Label" required>
<option selected> None </option>
<option value = "1"> English Breakfast Tea </option>
<option value = "2"> Jasmine </option>
<option value = "3"> The Early Grey </option>
<option value = "4"> Darjeeling </option>
<option value = "5"> Matcha Tea </option>
<option value = "6"> Chai / Normal Tea </option>
<option value = "7"> Chamomile </option>
<option value = "8"> Oolong Tes </option>
<option value = "9"> Yerba Mate </option>
<option value = "10"> Rooibos Tea </option>
<option value = "11"> Puer Tea </option>
<option value = "12"> Mint Tea </option>
</select>
<label class = "text-success form_text_size1 form_text_gaps" id = "Tea_delights"> Tea </label>
</div>
</div>
<div class = "col-md">
<div class = "form-floating">
<select class = "form-select text-primary form_text_size2" id = "Coffee_delights" ara-label = "floating Label" required>
<option selected > None </option>
<option value = "1"> Espresso </option>
<option value = "2"> Cappuccino </option>
<option value = "3"> Flat White </option>
<option value = "4"> Cortado </option>
<option value = "5"> Ristretto </option>
<option value = "6"> Frappe </option>
<option value = "7"> Turkish </option>
<option value = "8"> Caffe Americano </option>
<option value = "9"> Ioph White </option>
<option value = "10"> Long Black </option>
<option value = "11"> Galao </option>
<option value = "12"> Macchiato </option>
</select>
<label class = "text-success form_text_size1 form_text_gaps" id = "Coffee_delights"> Coffee </label>
</div>
</div>
</div>
<div class = "row gd-2">
<div class = "col-md">
<div class = "form-floating mt-2">
<input type = "number" class = "form-control text-primary form_text_size" id = "number_of_tea" placeholder = "0" required>
<label id = "number_of_tea" class = "text-success form_text_size"> Quantity of Tea </label>
</div>
</div>
<div class = "col-md">
<div class = "form-floating mt-2">
<input type = "number" class = "form-control text-primary form_text_size" id = "number_of_coffee" placeholder = "0" required>
<label id = "number_of_coffee" class = "text-success form_text_size"> Quantity of Coffee </label>
</div>
</div>
</div>
<div class = "d-flex justify-content-around mt-3">
<div class="form-check">
<input class="form-check-input form_text_size" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label form_text_size" for="flexRadioDefault1"> Pay Online </label>
</div>
<div class="form-check">
<input class="form-check-input form_text_size" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
<label class="form-check-label form_text_size" for="flexRadioDefault2"> Cash On Delivery </label>
</div>
</div>
</form>
</div>
<div class = "modal-footer">
<button class = "btn btn-primary form_text_size" type = "button" data-bs-dismiss = "modal"> Close </button>
<button class = "btn btn-primary form_text_size" type = "button"> Send Request </button>
</div>
</div>
</div>
</div>
</div>
<div class = "card-footer text-primary card_header"> Free-delivery for first 100 Orders. </div>
</div>
</div>
</div>
<div class = "footer bg-dark">
<div class = "d-flex justify-content-around">
<div class = "card" style = "width: 20rem; border: none; margin: 20px 0px 10px 30px;">
<img src = "Images/All_in_one.jpg" class = "card-img-top slight_one_img" alt = "All in Final One">
<div class = "card-body bg-dark">
<h4 class = "card-title text-warning slight_one_text"> Tea Setup </h4>
</div>
</div>
<div class = "part2 d-flex" style = "margin: 20px 0px 10px 0px;">
<div class = "bg-dark">
<h3 class = "B_w_one text-white"> We Provides </h3>
<nav class = "nav d-flex flex-column lined_list">
<a href = "Sub-Sections/Teas.html" class = "text-white one_all"> Teas </a>
<a href = "Sub-Sections/Coffee.html" class = "text-white one_all"> Coffees </a>
<a href = "Sub-Sections/detailed_menu.html" class = "text-white one_all"> Detailed View </a>
<a href = "Sub-Sections/Menu.html" class = "text-white one_all"> Menu </a>
</nav>
</div>
<div class = "bg-dark">
<h3 class = "B_w_one text-white"> You Share </h3>
<nav class = "nav d-flex flex-column lined_list">
<a href = "#" class = "text-white one_all"> Experience </a>
<a href = "#" class = "text-white one_all"> Ideas </a>
<a href = "#" class = "text-white one_all"> Moments </a>
<a href = "#" class = "text-white one_all"> Happiness </a>
</nav>
</div>
</div>
<div class = "part3">
<div class = "card bg-light last_card">
<div class = "card-body bg-light" style = "border-radius: 10px;">
<h4 class = "card-title text-dark card_title"> Join Us here! </h4>
<form>
<div class = "form-floating mb-2 form_text_size">
<input type = "email" class = "form-control another_form_size" id = "floatinginput" placeholder = "[email protected]" required>
<label id = "floatinginput" class = "another_form_size"> Email </label>
</div>
<div class = "form-floating mb-2 form_text_size">
<input type = "password" class = "form-control another_form_size" id = "floatingpassword" placeholder = "Password" required>
<label id = "floatingpassword" class = "another_form_size"> Password </label>
</div>
<input type = "Submit" value = "Send" class = "btn btn-primary form_text_size">
<input type = "Reset" value = "Clear" class = "btn btn-primary form_text_size">
</form>
</div>
</div>
</div>
</div>
<div class = "down_one bg-dark" style = "margin-bottom: 0;">
<nav class = "nav d-flex justify-content-center last_one">
<a href = "#" class = "text-white one_all"> Features </a>
<a href = "#" class = "text-white one_all"> Discounts </a>
<a href = "#" class = "text-white one_all"> FAQs </a>
</nav>
<div align = "center" class = "last_div"></div>
<div class = "d-flex justify-content-between" style = "margin: 10px 40px 0px 40px;">
<div>
<p class = "text-white form_text_size"> © 2022 Company, Inc 24 x 7 </p>
</div>
<div style = "margin-right: 50px; margin-bottom: 0;">
<button type = "button" class = "btn bg-dark button_one d-flex justify-content-around flex_gap">
<a href = "#" class = "button_one"> <i class="fa fa-instagram button_one button_on" aria-hidden="true"></i> </a>
<a href = "#" class = "button_one"> <i class="fa fa-facebook button_one button_on" aria-hidden="true"></i> </a>
</button>
</div>
</div>
</div>
</div>
</body>
</html>