-
Notifications
You must be signed in to change notification settings - Fork 0
/
menu.html
233 lines (230 loc) · 11.5 KB
/
menu.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
<!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">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
<title>Menu</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/menu.css">
</head>
<body>
<!-- Navbar -->
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-js">
<div class="container-fluid">
<a id="restaurant-name" class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="Logo javaScrEat" class="logo">
javaScr<strong>Eat</strong>
</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" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item align-self-center">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link active" href="#">Menu</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="contactus.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Carousel -->
<section class="carousel-margin">
<div id="hamburgerCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#hamburgerCarousel" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#hamburgerCarousel" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#hamburgerCarousel" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/double-hamburger.jpg" class="d-block w-100" alt="Double hamburger">
<div class="carousel-caption d-none d-md-block">
<h5>Try out our favorites</h5>
<p>Double burger with a lot of meat to stop your starving.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/vegan.jpg" class="d-block w-100" alt="Vegetarian hamburger">
<div class="carousel-caption d-none d-md-block">
<h5>Try out our favorites</h5>
<p>Vegan burger with potato cake to replace the meat.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/deconstructed-burger.jpg" class="d-block w-100" alt="Deconstructed hamburger">
<div class="carousel-caption d-none d-md-block">
<h5>Try out our favorites</h5>
<p>A deconstructed burger for you who never want quit the job and need to use forks here too.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Menu Cards -->
<section class="card-group container">
<section class="row row-cols-1 row-cols-md-3">
<!-- 1-3 -->
<div class="card text-white bg-dark border-light px-0">
<img src="img/double-hamburger.jpg" class="card-img-top" alt="Double hamburger">
<div class="card-header">
<h5 class="card-title"><span class="red">SyntaxError</span>: expected meat, got <span
class="dark-green">"double meat"</span></h5>
</div>
<div class="card-body">
<p class="card-text">Did you hear double meat? Yes! This one's for the hungries.</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<div class="card text-white bg-dark border-light px-0">
<img src="img/vegan.jpg" class="card-img-top" alt="Vegetarian hamburger">
<div class="card-header">
<h5 class="card-title"><span class="red">ReferenceError</span>: <span
class="dark-green">"meat"</span>
is not <span class="red">defined</span></h5>
</div>
<div class="card-body">
<p class="card-text">This is our vegetarian hamburger option with potato cake replacing the meat.
</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<div class="card text-white bg-dark border-light px-0">
<img src="img/deconstructed-burger.jpg" class="card-img-top" alt="Deconstructed hamburger">
<div class="card-header">
<h5 class="card-title"><span class="red">SyntaxError</span>: Unexpected <span
class="dark-green">'meat'</span> used outside <span class="blue">of class</span> bread
<span class="red">body</span>
</h5>
</div>
<div class="card-body">
<p class="card-text">This is our deconstructed hamburger option for those who likes to eat with
forks
(not the git one)</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<!-- 4-6 -->
<div class="card text-white bg-dark border-light px-0">
<img src="img/pepperoni-pizza.jpg" class="card-img-top" alt="Pepperoni pizza">
<div class="card-header">
<h5 class="card-title"><span class="red">TypeError</span>: <span class="dark-green">"pizza"</span>
<span class="red">is</span> (not) <span class="dark-green">"burger"</span>
</h5>
</div>
<div class="card-body">
<p class="card-text">One pepperoni pizza :)</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<div class="card text-white bg-dark border-light px-0">
<img src="img/chicken-burger.jpg" class="card-img-top" alt="Chicken burger">
<div class="card-header">
<h5 class="card-title"><span class="red">SyntaxError</span>: expected <span
class="dark-green">'meat'</span> after argument bread, got <span
class="dark-green">"chicken"</span></h5>
</div>
<div class="card-body">
<p class="card-text">This is our chicken burger option
</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<div class="card text-white bg-dark border-light px-0">
<img src="img/hawaiian-pizza.jpg" class="card-img-top" alt="Hawaiian pizza">
<div class="card-header">
<h5 class="card-title"><span class="red">SyntaxError</span>: illegal <span
class="red">pineapple</span>
</h5>
</div>
<div class="card-body">
<p class="card-text">A Hawaiian pizza</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<!-- 7-9 -->
<div class="card text-white bg-dark border-light px-0">
<img src="img/cheesecake.jpg" class="card-img-top" alt="Cheesecake">
<div class="card-header">
<h5 class="card-title"><span class="red">SyntaxError</span>: Missing cheese <span class="blue">in
const</span> <span class="red">cake</span></h5>
</div>
<div class="card-body">
<p class="card-text">Our cheesecake!</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<div class="card text-white bg-dark border-light px-0">
<img src="img/hamburger.jpg" class="card-img-top" alt="Hamburger">
<div class="card-header">
<h5 class="card-title"><span class="red">SyntaxError</span>: redeclaration <span
class="blue">of</span> formal parameter <span class="dark-green">"burger"</span></h5>
</div>
<div class="card-body">
<p class="card-text">The classic burger</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
<div class="card text-white bg-dark border-light px-0">
<img src="img/french-fries.jpg" class="card-img-top" alt="French fries">
<div class="card-header">
<h5 class="card-title"><span class="red">TypeError</span>: <span class="dark-green">'french
fries'</span> is not a Set <span class="red">burger</span>
</h5>
</div>
<div class="card-body">
<p class="card-text">The classic french fries</p>
</div>
<div class="card-footer">
<small class="text-muted">Buy it</small>
</div>
</div>
</section>
</section>
<!-- Footer -->
<footer class="bg-js p-4 mt-3 text-center">
<a class="red" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Click Me!">Warning:
scroll all the page up
manually are deprecated.</a>
</footer>
<!-- Javascript -->
<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>
</body>
</html>