-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
323 lines (315 loc) · 12.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
<!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" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./css/bootstrap.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="./css/style.css" />
<!-- Tab bar logo -->
<link rel="shortcut icon" href="./images/tabIcon.png" type="image/x-icon" />
<title>Pizza-chapchap</title>
</head>
<body>
<!-- Navigation Bar-->
<header>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container">
<!-- Brand Name-->
<a href="#" class="navbar-brand D">
<img
class="img-fluid"
src="./images/tabIcon.png"
alt="brand logo"
width="120px"
/>
<span class="display-6">Pizza - CHAPCHAP</span>
</a>
<!-- Bugger Menu Icon -->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation Links-->
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#carousel" class="nav-link">PIZZAS</a>
</li>
<li class="nav-item">
<a href="#order" class="nav-link">PLACE ORDER</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<!-- Hero Section-->
<section class="p-5 text-center text-sm-start">
<div class="container">
<div class="d-sm-flex">
<div class="my-5">
<h1>NAIROBI'S <span class="text-warning">NO.1 PIZZERIA</span></h1>
<p class="lead my-5">
<span class="text-warning">Must be the Pizza.</span>
We priotise value-for-money & options that keep our satisfied
customers coming back time after time. Serving crowds of all
ages.
</p>
<a href="#order"><button class="btn btn-warning btn-lg">Make Order</button></a>
<button class="btn btn-light btn-lg my-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-play-circle-fill"
viewBox="0 0 16 16"
>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"
/>
</svg>
Order Process
</button>
</div>
<img
class="img-fluid w-50 d-none d-sm-block"
src="./images/banner.png"
alt=""
/>
</div>
</div>
</section>
<!-- Customer Retention Quote-->
<section id="carousel" class="px-5 text-center">
<p>
<div class="vr"></div>
<span class="display-6">When you are lazy to cook, we are just one click away!</span>
</p>
<div class="container pt-2">
<div
id="carouselExampleIndicators"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="./images/carousel1.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="./images/carousel2.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="./images/carousel3.png"
class="d-block w-100"
alt="..."
/>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- Place Order Form -->
<section class="p-5 text-center">
<p class="my-5">
<span class="display-6">HABITUALLY ON TIME!</span>
<span class="vr"></span>
</p>
<div class="container">
<form id="order">
<div class="row">
<div class="form-group col-md-4">
<label for="size">Select Size</label>
<select class="form-control" id="pizzaSize">
<option value="">Choose...</option>
<option value ="600">Small - Ksh 600</option>
<option value ="900">Medium - Ksh 900</option>
<option value ="1200">Large - Ksh 1200</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="crust">Pick Crust Size</label>
<select class="form-control" id="pizzacrust">
<option value="">Choose...</option>
<option value = "150">Cripsy Ksh 150</option>
<option value = "175">Stuffed Ksh 175</option>
<option value = "200">Gluten free Ksh 200</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="toppings">Pick Toppings</label>
<select class="form-control" id="pizzaToppings">
<option value="">Choose...</option>
<option value = "225">Pepperoni Ksh 225</option>
<option value = "245">Mushrooms Ksh 245</option>
<option value = "265">Gorgonzola Ksh 265</option>
</select>
</div>
</div>
<a href="#order-details"><button type="submit" class="btn btn-warning my-5">Click to select your choices</button></a>
<br>
<br>
<br>
</form>
</div>
<!-- Divisions below remain hidden and will only appear as part of the order process -->
<!-- Order total amount table-->
<div id="order-details" class="table-responsive-sm">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#Order No</th>
<th scope="col">Pizza Size</th>
<th scope="col">Toppings</th>
<th scope="col">Crust</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody id="PizzaDisplay"></tbody>
</table>
<a href="#checkout"><button type="submit" id="target" class="btn btn-warning">PROCEED</button></a>
</div>
</div>
<!-- Order confirmation-->
<div class="p-5 align-items-lg-center">
<div class="row">
<div id="checkout" class="col-md-4 order-md-2 mb-4 select">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Oder id : <span id="track"></span> </span>
</h4>
<div class="list-group mb-3">
<div class="col list-group-item d-flex justify-content-between lh-condensed">Your total Amount is <span id="total"></span> </div>
<div id="wouldYou">
<div class="col list-group-item d-flex justify-content-between lh-condensed">
<p>Would you like a delivery?</p>
<br>
<br>
<div class="list-group-item d-flex justify-content-between lh-condensed">
<button type="submit" id="delivery" class="btn btn-success spice">Yes</button>
<br>
<button type="submit" id="nodeli" class="btn btn-danger spice">No</button>
</div>
</div>
</div>
<!-- Delivery Confirmation-->
<div id="stayLocation" class="col list-group-item">
<div class="col">
<p>You will incur an extra cost of 200 Ksh.</p>
</div>
<label id="stay-text" for="stay">Where do you stay?</label>
<br>
<input type="text" name="stay" id="stay">
<input type="button" id="withLoc" class="btn btn-warning check" value="Submit Location">
</div>
</div>
<div id="final" class="check">
<button type="submit" id="confirm" class="btn btn-success">Confirm Order</button>
<input type="button" onclick="reset()" value="Cancel Order" id="cansel" class="btn btn-danger">
</div>
<div id="message" class="col btn-warning">
<br>
<p> Thank you for shopping with us ! Enjoy our Pizza.</p>
<input type="button" class="btn btn-danger check" onclick="reset()" value="X">
<p id="delly"></p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer Section-->
<footer class="text-center bg-warning p-2 ">
<p>
Made with Love
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg>
| All Rights Reserved | 2022
</p>
</footer>
<!-- Separate Popper and Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"
></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>