-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
418 lines (409 loc) · 16.9 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
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Le-Chatelier</title>
<link rel="stylesheet" href="css/reset.css" />
<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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet" />
</head>
<body>
<!-----nav----->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Le-Chatelier</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#Home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Dishes">Dishes</a>
<a class="dropdown-item" href="#Desserts">Desserts</a>
<a class="dropdown-item" href="#Drinks">Drinks</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#Order">Order</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
</ul>
</div>
</nav>
<!-----image carousel----->
<div class="carousel" id="Home">
<div id="carouselCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselCaptions" data-slide-to="1"></li>
<li data-target="#carouselCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/rest.jpg" class="d-block w-100" alt="restoraunt" />
<div class="carousel-caption d-none d-md-block">
<h5 class="title">welcome to Le-Chatelier</h5>
<p class="description">
in our lovely restaurant you will have very friendly atmosphere
and most importantly delicious food.
</p>
</div>
</div>
<div class="carousel-item">
<img src="img/bar.jpg" class="d-block w-100" alt="bar" />
<div class="carousel-caption d-none d-md-block">
<h5 class="title">our restaurant bar</h5>
<p class="description">
In our bar you can enjoy refreshing drinks. Alcoholic or non
alcoholic.
</p>
</div>
</div>
<div class="carousel-item">
<img src="img/dessert.jpg" class="d-block w-100" alt="desserts" />
<div class="carousel-caption d-none d-md-block">
<h5 class="title">desserts</h5>
<p class="description">
And make sure to try our delicious desserts.
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!----Food--->
<div class="container my-2">
<h1 class="menu" id="Menu">Menu</h1>
<h3 class="dishes my-1" id="Dishes">Dishes</h3>
<div class="card-deck">
<div class="card">
<img src="img/f1 (1).jpg" class="card-img-top" alt="Bucatini" />
<div class="card-body">
<h5 class="card-title">Caprese Salad</h5>
<p class="card-text">
tomatoes, and I gussy it up with a balsamic reduction, avocado,
and toasted pecans for a sweet, nutty crunch.
</p>
</div>
<div class="card-footer">
<small class="text-muted">13$</small>
</div>
</div>
<div class="card">
<img src="img/f2,.jpg" class="card-img-top" alt="Shrimp" />
<div class="card-body">
<h5 class="card-title">Squash soup</h5>
<p class="card-text">
Let’s cozy up with a bowl of warm, creamy butternut squash soup.
Butternut squash and cool weather go together like they were made
for each other
</p>
</div>
<div class="card-footer">
<small class="text-muted">20$</small>
</div>
</div>
<div class="card">
<img src="img/f3 (3).jpg" class="card-img-top" alt="Salmon" />
<div class="card-body">
<h5 class="card-title">Chicken curry</h5>
<p class="card-text">
chicken, onions, garlic, pantry spices, heavy cream, and canned
tomatoes. Don't be spooked if you're not a spice lover. While
there are a lot of warm ground spices that season the dish, this
curry isn't spicy at all.
</p>
</div>
<div class="card-footer">
<small class="text-muted">18$</small>
</div>
</div>
<div class="card">
<img src="img/food4.jpg" class="card-img-top" alt="Moqueca" />
<div class="card-body">
<h5 class="card-title">Moqueca</h5>
<p class="card-text">
A simple Brazilian Fish Stew called Moqueca made with your choice
of fish, simmered in coconut milk with onion, tomatoes, chilies
and lime. Easy, fast and full of flavor! .
</p>
</div>
<div class="card-footer">
<small class="text-muted">17$</small>
</div>
</div>
</div>
<!---desserts--->
<h3 class="desserts my-1" id="Desserts">Desserts</h3>
<div class="card-deck">
<div class="card">
<img src="img/dessert1.jpg" class="card-img-top" alt="mousse" />
<div class="card-body">
<h5 class="card-title">chocolate mousse</h5>
<p class="card-text">
Creamy chocolate mousse is an absolute classic.Stunning dinner
party desserts don't get better than this!
</p>
</div>
<div class="card-footer">
<small class="text-muted">12$</small>
</div>
</div>
<div class="card">
<img src="img/dessert2.jpg" class="card-img-top" alt="Cupcake" />
<div class="card-body">
<h5 class="card-title">Chocolate Cupcakes</h5>
<p class="card-text">
These super moist chocolate cupcakes pack TONS of chocolate flavor
in each cupcake wrapper!
</p>
</div>
<div class="card-footer">
<small class="text-muted">10$</small>
</div>
</div>
<div class="card">
<img src="img/dessert3.jpg" class="card-img-top" alt="brownies" />
<div class="card-body">
<h5 class="card-title">Chocolate brownie</h5>
<p class="card-text">
These are neither "cake" brownies nor "fudge" brownies; they fall
somewhere in between.
</p>
</div>
<div class="card-footer">
<small class="text-muted">18$</small>
</div>
</div>
<div class="card">
<img src="img/dessert4.jpg" class="card-img-top" alt="bars" />
<div class="card-body">
<h5 class="card-title">Nanaimo bars</h5>
<p class="card-text">
Need ideas for a coffee morning or afternoon tea? These bars from
Canada are so moreish, with a crunchy biscuit base, custard layer
and chocolate topping
</p>
<p class="card-text"></p>
</div>
<div class="card-footer">
<small class="text-muted">8$</small>
</div>
</div>
</div>
<!-----drinks---->
<h3 class="drinks my-1" id="Drinks">Drinks</h3>
<div class="card-deck">
<div class="card">
<img src="img/1.jpg" class="card-img-top" alt="cocktail" />
<div class="card-body">
<h5 class="card-title">Aviation</h5>
<p class="card-text">
It is typically made with gin, maraschino liqueur, creme de
violette and lemon juice. While some choose to omit the
flower-powered creme de violette, others consider it essential to
create the Aviation’s signature lavender hue.
</p>
</div>
<div class="card-footer">
<small class="text-muted">12$</small>
</div>
</div>
<div class="card">
<img src="img/2.jpg" class="card-img-top" alt="wine" />
<div class="card-body">
<h5 class="card-title">Apothic Red</h5>
<p class="card-text">
Apothic Red is the bold and intriguing red blend that launched the
Apothic legacy, featuring a mix of merlot, cabernet sauvignon,
syrah, and zinfandel wine grapes.
</p>
</div>
<div class="card-footer">
<small class="text-muted">19$</small>
</div>
</div>
<div class="card">
<img src="img/3.jpg" class="card-img-top" alt="Tonic" />
<div class="card-body">
<h5 class="card-title">Gin and Tonic</h5>
<p class="card-text">
Made with just gin and tonic water garnished with a wedge of lime,
the G&T is a classy drink with a secret. It glows! Due to quinine,
a chemical found in tonic water, the drink will glow when exposed
to ultraviolet light.
</p>
</div>
<div class="card-footer">
<small class="text-muted">10$</small>
</div>
</div>
<div class="card">
<img src="img/4.jpg" class="card-img-top" alt="wine" />
<div class="card-body">
<h5 class="card-title">Edna Valley</h5>
<p class="card-text">
Citrus notes are complemented by tropical fruit flavors on the
palate, while a balanced, crisp acidity leads to a lingering
finish.
</p>
</div>
<div class="card-footer">
<small class="text-muted">16$</small>
</div>
</div>
</div>
</div>
<!-----forms--->
<div class="container-fluid background py-2">
<div class="row justify-content-center d-flex">
<div class="greyy">
<form>
<h3 class="Order my-2" id="Order">Order here</h3>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="text" class="form-control" id="inputfirst4" placeholder="First" />
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="text" class="form-control" id="inputlast4" placeholder="Last" />
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" />
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" />
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity" placeholder="City" />
</div>
<div class="form-group col-md-6">
<label for="inputZip">Phone Number</label>
<input type="number" class="form-control" id="inputnumber" placeholder="Number" />
</div>
</div>
<select class="custom-select my-2">
<option selected>Open this dish select menu</option>
<option value="1">Caprese Salad</option>
<option value="2">Squash soup</option>
<option value="3">Chicken curry</option>
<option value="3">Moqueca</option>
</select>
<select class="custom-select my-2">
<option selected>Open this dessert select menu</option>
<option value="1">chocolate mousse</option>
<option value="2">Chocolate Cupcakes</option>
<option value="3">Chocolate brownie</option>
<option value="3">Nanaimo bars</option>
</select>
<select class="custom-select my-2">
<option selected>Open this drink select menu</option>
<option value="1">Aviation</option>
<option value="2">Apothic Red</option>
<option value="3">Gin and Tonic</option>
<option value="3">Edna Valley</option>
</select>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input" />
<label class="custom-control-label" for="customRadioInline1">Delivery</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input" />
<label class="custom-control-label" for="customRadioInline2">Pick-up</label>
</div>
<div class="button">
<button type="submit" class="btn btn-secondary">Order</button>
</div>
</form>
</div>
</div>
</div>
<!---about-->
<div class="container text-center">
<div class="row">
<div calss="about">
<h3 class="about my-2" id="About">About</h3>
<p class="About-us">
in our lovely restaurant you will have very friendly atmosphere and
most importantly delicious food. this is place where you always know
you will get the best of everything.Restaurant will feature a cozy
dining room and an elegant bar.<br />
Our attentive staff ensures that your entire dining experience at
ilili is stellar from beginning to end. Each passing of our shared
plates and the breaking of fresh Levantine pita opens up a new
conversation.
</p>
</div>
</div>
</div>
<!----map--->
<div class="container-fluid">
<div id="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20038.229698330026!2d44.79784873930807!3d41.70539722365092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf42bc14f3c7d7a1a!2sFabrika%20Tbilisi!5e0!3m2!1sen!2sge!4v1590689900465!5m2!1sen!2sge"
width="100%" height="645px" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
</div>
</div>
<!---footer--->
<footer class="page-footer">
<div class="container">
<p class="footer-text text-center">Find us on.</p>
<div class="icons text-center">
<a class="fb-ic">
<i class="fab fa-facebook-square fa-2x fb-bg" aria-hidden="true"></i>
</a>
<a class="tw-ic">
<i class="fab fa-twitter-square fa-2x tw-bg" aria-hidden="true"></i>
</a>
<a class="pin-ic">
<i class="fab fa-pinterest fa-2x pin-bg"></i>
</a>
<a class="ins-ic">
<i class="fab fa-instagram fa-2x ins-bg" aria-hidden="true"></i>
</a>
</div>
<div class="footer-copyright text-center"> copyright © 2020 by Le-chatelier.all rights reserved.
</div>
</div>
</footer>
<!----script-->
<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>
</body>
</html>