-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
484 lines (444 loc) · 25.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
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saveurs Parfumées</title>
<link rel="shortcut icon" href="images/icon.jpeg">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Satisfy">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap">
<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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target="#menu" data-offset="50" class="position-relative">
<!--Background top paralax-->
<div class="bgTop d-none d-lg-block"></div>
<header>
<!--Menu haut de page-->
<nav id="menu" class="navbar navbar-expand-lg navbar-dark bg-black fixed-top">
<div class="w-25">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo"></a>
</div>
<!--Menu haut-->
<div class="collapse navbar-collapse justify-content-center order-3 order-lg-2" id="collapsibleNavbar">
<ul class="nav d-block d-lg-flex navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#qualite">Qualité et service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#semaine">Menu de la semaine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#historique">Historique</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#evenements">Évènements</a>
</li>
</ul>
</div>
<!--bouton pour menu haut-->
<div class="w-25 d-flex justify-content-end order-2 order-lg-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<!-- contenu de la page -->
<main>
<!-- bienvenue -->
<div class="d-flex justify-content-center pt-5 mt-5 mt-lg-0">
<div class="container row">
<div class="col-12 col-lg-6 row d-flex align-items-center">
<div class="col-12 col-md-6 pr-md-0">
<img class="img-fluid" src="images/plat.jpg" alt="plat">
</div>
<div class="col-12 col-md-6">
<div class="mt-3 mb-3 mt-lg-0">
<img class="img-fluid" src="images/plat2.jpg" alt="deuxième plat">
</div>
<div>
<img class="img-fluid" src="images/plat3.jpg" alt="troisième plat">
</div>
</div>
</div>
<div class="col-12 col-lg-6 test4 pt-5 pb-5">
<h1 class=" text-uppercase font-weight-bold">Bienvenue à Saveurs parfumées</h1>
<h2 class="font font-weight-bold text-red">~ Qualité & Zéro déchet ~</h2>
<br>
<p class="text">Fusce ultrices enim id mi tempus rutrum. Sed sit amet urna et neque elementum sollicitudin eu ac enim. Fusce varius ligula id elit efficitur interdum. Praesent varius venenatis nibh, et convallis est bibendum ac. Sed id auctor dui, vel pulvinar ex. Praesent felis magna, consectetur vel dui ac, congue semper libero. Donec sit amet rhoncus risus, eu rhoncus purus. Sed quam purus, pulvinar ut maximus in, blandit in elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae scelerisque mauris. Curabitur magna lorem, luctus non aliquam in, efficitur sit amet est. Aliquam aliquam feugiat lorem quis accumsan. Suspendisse viverra nisi tempus sem gravida, mollis egestas lacus elementum.</p>
<a href="#" class="savoirPlus text-muted">En savoir plus</a>
</div>
</div>
</div>
<!-- description -->
<div id="qualite" class="row m-0">
<div class="col-md-12 col-lg-5 col-xl-6 bgDescription"></div>
<div class="service col-md-12 col-lg-7 col-xl-6">
<div class="row bg-light py-5">
<div class="col-md-6 text-center px-5">
<em class="icon1 fas fa-utensils"></em>
<h5 class="text-uppercase font-weight-bold">Produits artisanaux</h5>
<span class="text">Cras est magna, commodo vitae vulputate at, convallis id velit. Vivamus congue purus id aliquet.</span>
</div>
<div class="col-md-6 text-center px-5">
<em class="icon1 fas fa-leaf"></em>
<h5 class="text-uppercase font-weight-bold">Authenticité et éco-responsabilité</h5>
<span class="text">Morbi euismod rutrum fringilla. Vivamus porttitor libero facilisis, tristique neque eu, placerat lorem. Suspendisse tristique.</span>
</div>
<div class="col-md-6 text-center px-5">
<em class="icon1 fas fa-coffee"></em>
<h5 class=" text-uppercase font-weight-bold">Café savoureux</h5>
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed elit bibendum, rutrum sapien a.</span>
</div>
<div class="col-md-6 text-center px-5">
<em class="icon1 fas fa-ice-cream"></em>
<h5 class="text-uppercase font-weight-bold">Dessert</h5>
<span class="text">Cras euismod, augue ac efficitur laoreet, est quam malesuada leo, sed ultrices nulla mi vel.</span>
</div>
</div>
</div>
</div>
<!-- spécialités -->
<div id="semaine">
<div class="container my-5">
<div class="justify-content-center mb-3 position-relative">
<h2 class="text-uppercase text-red text-center">menu de la semaine</h2>
<div id="ScriptDate"></div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<div class="d-flex justify-content-between pb-2">
<h3 class="font font-weight-bold">Mets sucrés-salés</h3>
<em class="icon2 fas fa-utensils"></em>
</div>
<div class="d-flex">
<span>Écrevisses aux framboises et piments doux</span>
<div class="points"></div><span>$10</span>
</div>
<p class="ingredient">Écrevisses / Piments verts / Framboises / Piment Habanero en poudre</p>
<div class="d-flex">
<span>Tarte aux tomates et abondance</span>
<div class="points"></div><span>$10</span>
</div>
<p class="ingredient">Miel / Gousse de vanille / Tomme d’Abondance / Crème fleurette</p>
<div class="d-flex">
<span>Émincé de volaille et ananas frais</span>
<div class="points"></div><span>$10</span>
</div>
<p class="ingredient">Ananas / Cébettes / Riz / Noix de coco râpé</p>
<div class="d-flex">
<span>Thon aux framboises</span>
<div class="points"></div><span>$10</span>
</div>
<p class="ingredient">Thon / Pastèque / Échalote / Olives noires</p>
</div>
<div class="col-12 col-lg-6">
<div>
<div class="d-flex justify-content-between pb-2">
<h3 class="font font-weight-bold">Cafés</h3>
<em class="icon2 fas fa-coffee"></em>
</div>
<div class="d-flex">
<span>Espresso</span>
<div class="points"></div><span>$10</span>
</div>
<p class="ingredient">Eau / Cafféine</p>
<div class="d-flex">
<span>Marocchino</span>
<div class="points"></div><span>$10</span>
</div>
<p class="ingredient"> Ristretto / Poudre de cacao / Mousse de lait</p>
</div>
<div>
<div class="d-flex justify-content-between pb-2">
<h3 class="font font-weight-bold">Dessert</h3>
<em class="icon2 fas fa-ice-cream"></em>
</div>
<div class="d-flex pb-3">
<span>Tarte tatin pommes et amandes</span>
<div class="points"></div><span>$10</span>
</div>
<div class="d-flex">
<span>Croissant au beurre</span>
<div class="points"></div><span>$10</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- notre histoire -->
<div id="historique">
<div class="row m-0 histoire bg-light">
<div class="col-12 col-lg-6 order-2 order-lg-1 my-5">
<div class="my-5">
<h1 class="text-center font font-weight-bold text-red m-0">Notre histoire</h1>
<div class="justify-content-center d-flex"><img src="images/border.png" alt="ligne rouge"></div>
<div class="justify-content-center d-flex m-lg-4 m-xl-5">
<p class="pt-5 pt-lg-0 w-75 text-center text">
Quisque tempor dictum auctor. Cras vitae mi nisi. Morbi viverra ipsum eu posuere ornare. Duis malesuada nibh in cursus imperdiet. Vestibulum luctus porta dui ac iaculis. Nullam maximus nunc ac tortor tempus pharetra. Nulla gravida vel metus quis auctor. Curabitur luctus sem vel odio placerat, elementum sagittis orci pellentesque. Fusce rhoncus a magna quis tempus. Maecenas a scelerisque odio, at tincidunt ipsum.
</p>
</div>
<p class="text-center m-0"><strong>Isabelle et Sam</strong></p>
<p class="text-center text">Propriétaires</p>
</div>
</div>
<div class="col-12 col-lg-6 order-1 order-lg-2 bgHistoire"></div>
</div>
</div>
<!-- évènements -->
<div id="evenements">
<div class="mb-5">
<h1 class="text-center">Nos prochains Évènements</h1>
<h2 class="font text-center text-red">~ Soyez des nôtres! ~</h2>
</div>
<div class="row m-auto container">
<div class="col-12 col-md-6 col-lg-4">
<div class="overFlow">
<img class="img-fluid zoomImg" src="images/micro.jpg" alt="micro ouvert">
<div class="dateBoite position-absolute">
<p class="text-center jours m-0">10</p>
<p class="text-center mois m-0">Février</p>
</div>
</div>
<div class="p-5 border boiteText">
<h5 class="text-uppercase font-weight-bold pb-2">Rirons ensemble</h5>
<p class="text">Bienvenue au micro ouvert dit "open mic" de votre humoriste préféré.</p>
<a href="#" class="savoirPlus text-muted">En savoir plus</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="overFlow">
<img class="img-fluid zoomImg" src="images/environnement.jpg" alt="débat environnement">
<div class="dateBoite dateLigne position-absolute">
<p class="text-center jours m-0">10</p>
<p class="text-center mois m-0">Mars</p>
</div>
</div>
<div class="p-5 border boiteText">
<h5 class="text-uppercase font-weight-bold pb-2">Débat: Solutions environnementales</h5>
<p class="text">Cet événement répond à toutes les problématiques environnementales des différents acteurs économiques.</p>
<a href="#" class="savoirPlus text-muted">En savoir plus</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="overFlow">
<img class="img-fluid zoomImg" src="images/papier.jpg" alt="atelier papier recyclé">
<div class="dateBoite dateLigne position-absolute">
<p class="text-center jours m-0">10</p>
<p class="text-center mois m-0">Avril</p>
</div>
</div>
<div class="p-5 border boiteText">
<h5 class="text-uppercase font-weight-bold pb-2">Atelier de fabrication de papier recyclé</h5>
<p class="text">Fabrication de feuille de papier recyclé à la main.</p>
<a href="#" class="savoirPlus text-muted">En savoir plus</a>
</div>
</div>
</div>
</div>
<h4 class="text-center text-uppercase font-weight-bold m-5">~ Suivez notre Instagram ~</h4>
<!-- carousel bas de page -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- indicateur carousel -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta1.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta2.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta3.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta4.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta5.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta6.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta7.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta8.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta9.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta10.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta11.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2 p-0 container">
<img src="images/insta/insta12.jpg" class="d-block w-100 img-fluid" alt="pâtisserie">
<div class="overlay">
<div class="icon">
<em class="p-1 far fa-heart f ScriptInsta"></em>
<em class="p-1 far fa-comment ScriptInsta"></em>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- bouton gauche carousel -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
<!-- bouton droite carousel -->
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>
</main>
<!-- bas de page -->
<footer class="bg-black container-fluid p-5">
<!-- logo bas de page -->
<div class="d-flex justify-content-center">
<img src="images/logo.png" alt="logo">
</div>
<div class="row mt-5">
<div class="col-12 col-md-4 text-center px-5">
<p class="text-uppercase text-white">À propos de nous </p>
<span class="text-secondary">Donec ac tortor magna. Donec mauris dolor, finibus vitae purus.</span>
</div>
<!-- courriel -->
<div class="col-12 col-md-4 text-center my-sm-5 m-md-0">
<p class="text-uppercase text-white">souscrivez à notre infolettre</p>
<div class="input-group">
<input placeholder="Entrez votre adresse courriel" class="form-control" id="email" name="email" />
<div class="Mail py-2 px-3">
<em class="fa fa-envelope-o"></em>
</div>
</div>
<div>
<a href="#" class="fab fa-twitter text-secondary iconMail"></a>
<a href="#" class="fab fa-facebook-f text-secondary iconMail"></a>
<a href="#" class="fab fa-instagram text-secondary iconMail"></a>
</div>
</div>
<!-- adresse -->
<div class="col-12 col-md-4 text-center">
<p class="text-uppercase text-white">Notre adresse</p>
<span class="text-secondary">5000 rue Wellington</span>
<p class="bs-linebreak"></p>
<span class="text-secondary bs-linebreak">Verdun, Montréal</span>
<p class="bs-linebreak"></p>
<span class="text-secondary bs-linebreak">QC, J6V 7X2</span>
<p class="bs-linebreak"></p>
<span class="text-secondary bs-linebreak">514-514-5144</span>
</div>
</div>
</footer>
<!--Scripts-->
<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="https://kit.fontawesome.com/a1f60f9878.js" crossorigin="anonymous"></script>
<!-- likes et commentaires instagram -->
<script>
for (x = 0; x < 24; x = x + 1) {
$('.ScriptInsta').eq(x).html(" " + Math.floor((Math.random() * 500) + 1))
}
</script>
<!-- date généré -->
<script>
const d = new Date();
const date = d.getDate();
let mois = d.getMonth();
const moisarr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
mois = moisarr[mois];
const annee = d.getFullYear();
document.getElementById('ScriptDate').innerHTML = (`<div class='pt-3 position-absolute dateScript'>${date}-${mois}-${annee}</div>`);
</script>
</body>
</html>