-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (139 loc) · 6.82 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Leaclaire yummies</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="container-fluid" id="intro">
<h1 class="reponsive-text text-uppercase font-weight-bold pulse"><strong>Yummy pizza</strong></h1>
<p class="reponsive-text text-uppercase font-weight-bold pulse"><span>Satisfaction in every bite</span></p>
</div>
<div class="container">
<div class="land" id="aboutus">
<div class=" text-center">
<h1 style="color:blue;">ABOUT US</h1>
<p style="color:white;">Every pizza is made by our professionals at our open kitchen counter.</p>
<p style="color:white;">All our products are deliverd to your desired location/p>
<p style="color:white;">Our original hand-tossed pizza with premium flour makes the best pizza ever.</p>
<img src="./pizza images/pizza3.jpeg" alt="">
</div>
</div>
</div>
<div class="container">
<div class="menu" id="menu">
<div class=" text">
<h1>MENU</h1>
<div class="row">
<div class="col-md-4">
<img src="./pizza images/Margherita Pizza.jpeg" alt="">
<p>Margherita Pizza</p>
</div>
<div class="col-md-4">
<img src="./pizza images/pizza2.jpeg" alt="">
<p>pepperoni pizza</p>
</div>
<div class="col-md-4">
<img src="./pizza images/pizzza 1.jpeg" alt="">
<p>BBQ Pizza</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="./pizza images/hawaiian pizzaa.jpeg" alt="">
<p>Hawaian Pizza</p>
</div>
<div class="col-md-4">
<img src="./pizza images/meat lovers.jpeg" alt="">
<p>Meat lovers pizza</p>
</div>
<div class="col-md-4">
<img src="./pizza images/pizza2.jpeg" alt="">
<p>California Pizza</p>
</div>
</div>
</div>
</div>
</div>
<div class="back">
<div class="container-fluid order" id="make-order">
<div class="order-overlay">
<div class="controls-top text-center" id="Order-now">
<h3 class="h1-reponsive-text text-uppercase font-weight-bold pulse" style="color:blue;"><strong>MAKE YOUR ORDER HERE.
</h3>
</div>
<div class="order row">
<div class="col-md-6">
<h1 style="color:blue">FILL FORM</h1>
<form action="" id="pizzainfo">
<label for="select">Select Your Flavor</label>
<select class="browser-default custom-select custom-select-md mb-3" id="type">
<option value="Margherita Pizza">Margherita Pizza</option>
<option value="Peperoni Pizza" id="type">Peperoni Pizza</option>
<option value="BBQ Pizza" id="type">BBQ Chicken Pizza</option>
<option value="Hawaian Pizza" id="type">Hawaian Pizza</option>
<option value="Sunchoke Pizza" id="type">Sunchoke Pizza</option>
<option value="Meat Lovers Pizza" id="type">Meat Lovers Pizza</option>
</select>
<label for="">select size</label>
<select class="form-control" name="size" id="size">
<option value="1200">Large @ ksh 1200</option>
<option value="900">Medium @ ksh 800</option>
<option value="600">Small @ ksh 550</option>
</select>
<label for="">select crust</label>
<select class="form-control" name="" id="crust">
<option value="230" name="crust">Thin crust @ ksh230
<option value="250" name="crust">Thick crust @ ksh 250
<option value="300" name="crust">Deep crust @ ksh 300
<option value="300" name="crust">Glutten free crust @ ksh 300
<option value="300" name="crust">Crispy crust @ ksh 300
</select>
<label for="">Toppings @ 150 each</label> <br>
<input value="150" type="checkbox" id="tops">Broccoli
<input value="150" type="checkbox" id="tops">Bacon
<input value="150" type="checkbox" id="tops">Zucchini
<input value="150" type="checkbox" id="tops">Cheese
<input value="150" type="checkbox" id="tops">Mozarella Cheese <br>
<label for=""> Quantity</label>
<input class="form-control form-group" type="text" id="pizzaquantity">
<button name="button" type="submit" id="submit" value="Check-Out"
onclick="calctotalPrice()">Submit</button>
</form>
</div>
<div class="col-md-6">
<div id="formlocation">
<h3 style="color: blue;">DELIVERY INFORMATION</h3>
<form id="home">
<label for="name">Name</label>
<input class="form-control" type="text" name="" id="name" required="required">
<label for="location">Location</label>
<input class="form-control" type="text" id="location" placeholder="JUja..."><br>
<input class="form-control" type="text" id="email" placeholder="leakorirlags@gmail.com...">
<label for="phonenumber">Phone Number</label>
<input class="form-control" type="tel" placeholder="0769266345" id="number"> <br>
<button type="submit" name="button" id="submit">submit</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="index.js"></script>
</body>
</html>