-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathorder-pizza.html
More file actions
150 lines (150 loc) · 10.1 KB
/
order-pizza.html
File metadata and controls
150 lines (150 loc) · 10.1 KB
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
<!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">
<title>Pizza</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="the-nav">
<div class="container-fluid row-align-items-center">
<a class="navbar-brand mb-1 mt-2" href="#">Pizza World</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active mt-2" aria-current="page" href="#">Order Online</a>
</li>
<li class="nav-item">
<a class="nav-link mt-2" href="#">Menu</a>
</li>
<form class="d-flex mt-2" style="height: 2.5em">
<input class="form-control me-2" type="search" placeholder="Zip Code" aria-label="Search">
<button class="btn btn-outline-primary text-nowrap" style="height: 2.5em" type="submit">Search stores near you!</button>
</form>
</ul>
<ul class="justify-content-end navbar-nav" id="make-work">
<li class="nav-item">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill mt-3" viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
</li>
<li>
<a class="nav-link mt-1" href="#">Sign Up!</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-5">
<div class="jumbotron" id="main-container">
<h1 class="d-md-block bg-light p-2 text-dark bg-opacity-75 text-center">Welcome to Pizza World!</h1>
</div>
</div>
<div class="container">
<h2>Build your own pizza</h2>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true"><h6 class="badge bg-secondary">1</h6>Size and Crust</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false"><h6 class="badge bg-secondary">2</h6>Cheese and Sauce</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false"><h6 class="badge bg-secondary">3</h6>Toppings</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="card-header bg-primary text-light">Choose Size and Crust</div>
<div class="card-header bg-white border border-light">
<div class="card-header">Hand Tossed</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Garlic seasoned crust, with a rich buttery taste!</li>
<li class="list-group-item"><input type="checkbox">Small (10")</li>
<li class="list-group-item"><input type="checkbox">Medium (12")</li>
</ul>
<div class="card-header mt-3">Crispy Thin</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Thin enough for optimum crispy to crunchy ratio</li>
<li class="list-group-item"><input type="checkbox">Medium (12")</li>
<li class="list-group-item"><input type="checkbox">Large (14")</li>
</ul>
</div>
<div class="nav justify-content-end bg-light">
<button type="button" class="btn btn-primary" data-bs-toggle="tab" data-bs-target="#nav-profile">Next Step</button>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="card-header bg-primary text-light">Choose Cheese and Sauce</div>
<div class="card-header bg-white border border-light">
<div class="card-header">Cheese</div>
<div class="dropdown">
<li class="list-group-item">How Much?</li>
<a class="btn btn-white dropdown-toggle w-100 text-start list-group-item" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Normal</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Light</a></li>
<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item" href="#">Extra</a></li>
<li><a class="dropdown-item" href="#">Double</a></li>
</ul>
</div>
<div class="card-header mt-3">Sauce</div>
<li class="list-group-item">What Type?</li>
<div class="dropdown">
<a class="btn btn-white dropdown-toggle w-100 text-start list-group-item" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Tomato</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Tomato</a></li>
<li><a class="dropdown-item" href="#">Marinara</a></li>
<li><a class="dropdown-item" href="#">BBQ</a></li>
<li><a class="dropdown-item" href="#">Alfredo</a></li>
</ul>
</div>
<li class="list-group-item">How Much?</li>
<div class="dropdown">
<a class="btn btn-white dropdown-toggle w-100 text-start list-group-item" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Normal</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Light</a></li>
<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item" href="#">Extra</a></li>
</ul>
</div>
</div>
<div class="nav justify-content-end bg-light">
<button type="button" class="btn btn-primary" data-bs-toggle="tab" data-bs-target="#nav-home">Previous Step</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tab" data-bs-target="#nav-contact">Next Step</button>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class="card-header bg-primary text-light">Choose Toppings</div>
<div class="card-header bg-white border border-light">
<div class="card-header">Choose Meats</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><input type="checkbox">Beef</li>
<li class="list-group-item"><input type="checkbox">Ham</li>
<li class="list-group-item"><input type="checkbox">Philly Steak</li>
<li class="list-group-item"><input type="checkbox">Bacon</li>
</ul>
<div class="card-header mt-3">Choose Non-Meats</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><input type="checkbox">Green Pepper</li>
<li class="list-group-item"><input type="checkbox">Mushrooms</li>
<li class="list-group-item"><input type="checkbox">Onions</li>
<li class="list-group-item"><input type="checkbox">Jalapeno Peppers</li>
</ul>
</div>
<div class="nav justify-content-end bg-light">
<button type="button" class="btn btn-primary">Checkout <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg></button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
</body>
</html>