-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
489 lines (464 loc) · 19.7 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
485
486
487
488
489
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Voyagez au cœur de l'histoire et de la nature béninoises.">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<link rel="preload" as="image" href="./assets/header.webp">
<script src="https://unpkg.com/scrollreveal"></script>
<title>Découvrir le Bénin</title>
</head>
<body>
<header class="header">
<nav id="nav">
<div class="nav__logo"><a href="#">Bénin</a></div>
<ul class="nav__links">
<li class="link"><a href="#home">Accueil</a></li>
<li class="link"><a href="#history">Histoire</a></li>
<li class="link"><a href="#destination">Destinations</a></li>
<li class="link"><a href="#meal">Gastronomie</a></li>
<li class="link"><a href="#monument">Monuments</a></li>
<li class="link"><a href="#hotel">Séjouner</a></li>
</ul>
<button class="button__menu" id="button-menu" name="button" role="button">
<span><i class="ri-menu-2-line"></i></span>
</button>
</nav>
<div class="section__container header__container" id="home">
<p class="font-1">Bienvenue au Bénin</p>
<h1>Voyagez au cœur de l'histoire et de la nature béninoises.</h1>
<div class="header__button">
<button class="btn">Découvrir & Explorer</button>
</div>
</div>
</header>
<section class="section__container history__container" id="history">
<img width="auto" height="auto" src="assets/destinations/benin-cotonou-2.webp" alt="history">
<div class="history__description">
<h1 class="section__title font-1">Histoire & Géolocalisation</h1>
<p>Ancien royaume du Dahomey, le Bénin a une histoire riche marquée par de grands royaumes, des figures de
résistance et un
héritage culturel profond, notamment avec la culture vaudou et les palais royaux d'Abomey.</p>
<p>Le Bénin, situé en Afrique de l’Ouest, est bordé par le Togo, le Nigeria, le Burkina Faso et le Niger, avec une
côte sur
l'océan Atlantique. Sa diversité de paysages, allant des plages aux savanes, en fait une destination variée et
fascinante.</p>
</div>
</section>
<section class="section__container history__container history__container-reverse">
<img width="auto" height="auto" src="assets/history/history-2.webp" alt="history">
<div class="history__description">
<h1 class="section__title font-1">Langue & Tradition</h1>
<p>Le français est la langue officielle du Bénin, mais le pays est riche de langues locales comme le fon, le
yoruba et le
goun, reflétant la diversité culturelle de ses régions.</p>
<p>Le Bénin est le berceau du vaudou, une pratique spirituelle encore vivante aujourd'hui. Ses traditions incluent
également des danses, des rites ancestraux et un artisanat riche, ancrés dans la vie quotidienne des Béninois.
</p>
</div>
</section>
<section class="section__container destination__container" id="destination">
<div class="section__header section__header-col">
<h2 class="section__title font-1">Destinations Incontournables</h2>
<p class="section__description text-center">
Partez à la découverte des paysages magnifiques, des traditions ancestrales et des monuments historiques qui
font du Bénin une destination unique en Afrique de l’Ouest.
</p>
</div>
<div class="destination__grid">
<div class="destination__card">
<img width="auto" height="auto" src="assets/destinations/benin-porto-novo-3.webp" alt="benin-porto-novo" />
<div class="badge">Art & culture</div>
<div class="destination__details">
<h1>Porto-Novo</h1>
<p>Capitale administrative</p>
</div>
</div>
<div class="destination__card">
<img width="auto" height="auto" src="assets/destinations/benin-cotonou-2.webp" alt="cotonou" />
<div class="badge">Marché</div>
<div class="destination__details">
<h1>Cotonou</h1>
<p>Capitale économique</p>
</div>
</div>
<div class="destination__card">
<img width="auto" height="auto" src="assets/destinations/benin-ganvie-lac-nokoue-2.webp" alt="ganvie" />
<div class="badge">Nature</div>
<div class="destination__details">
<h1>Ganvie</h1>
<p>Lac nokoué</p>
</div>
</div>
<div class="destination__card">
<img width="auto" height="auto" src="assets/destinations/benin-plages-gran-popo.webp" alt="grand popo" />
<div class="badge">Plage</div>
<div class="destination__details">
<h1>Grand Popo</h1>
<p>Les plages</p>
</div>
</div>
<div class="destination__card">
<img width="auto" height="auto" src="assets/destinations/benin-parcs-pendjari-w-3.webp" alt="Pendjari" />
<div class="badge">Safari</div>
<div class="destination__details">
<h1>Pendjari</h1>
<p>Parcs</p>
</div>
</div>
<div class="destination__card">
<img width="auto" height="auto" src="assets/destinations/benin-ouidah.webp" alt="ouidah" />
<div class="badge">Musées</div>
<div class="destination__details">
<h1>Ouidah</h1>
<p>Monuments</p>
</div>
</div>
</div>
</section>
<section class="section__container meal__container" id="meal">
<div class="section__header section__header-col">
<h2 class="section__title font-1">Saveurs traditionnelles du Bénin</h2>
<p class="section__description text-center">
Explorez la richesse culinaire du Bénin, des recettes transmises de génération en génération aux nouvelles
créations gastronomiques.
</p>
</div>
<div class="meal__grid">
<div class="meal__card grayscale__effect">
<img width="auto" height="auto" src="assets/meals/meal-2.webp" alt="Man Tindjan" />
<h1>Man Tindjan</h1>
<p>
Le Man Tindjan est essentiellement composée de légumes, de poisson fumé, de peau de bovin fumé, de fromage… Il
s’accompagne traditionnellement avec la pâte de maïs. </p>
<p>
<span><i class="ri-map-pin-line"></i></span> Face à la mer Cancellation
</p>
</div>
<div class="meal__card grayscale__effect">
<img width="auto" height="auto" src="assets/meals/meal-1.webp" alt="Pâte Noire et Crincrin" />
<h1>Pâte Noire et Crincrin</h1>
<p>La pâte noire est faite à base de maïs fermenté. Accompagnée du crincrin, une sauce aux feuilles locales,
c’est un
incontournable de la cuisine du Bénin.</p>
<p>
<span><i class="ri-map-pin-line"></i></span> La gallery
</p>
</div>
<div class="meal__card grayscale__effect">
<img width="auto" height="auto" src="assets/meals/meal-3.webp" alt="Atchièkè" />
<h1>Atchièkè</h1>
<p>L'atchièkè, semoule de manioc fermenté, est souvent accompagné de poisson grillé ou de viande. Ce plat
populaire, léger
et savoureux, fait le bonheur des gourmets au Bénin.</p>
<p>
<span><i class="ri-map-pin-line"></i></span> Cali Cali
</p>
</div>
<div class="meal__card grayscale__effect">
<img width="auto" height="auto" src="assets/meals/meal-7.webp" alt="meal" />
<h1>Wassa wassa</h1>
<p>Fait à base de farine d'igname, le Wassa Wassa est un plat du nord du Bénin, souvent accompagné de sauce
tomate ou de
légumes. Sa texture unique et son goût authentique en font une spécialité à découvrir.</p>
<p>
<span><i class="ri-map-pin-line"></i></span> D'jota map-pin
</p>
</div>
<div class="meal__card grayscale__effect">
<img width="auto" height="auto" src="assets/meals/meal-5.webp" alt="Come" />
<h1>Come</h1>
<p>Le Come, une pâte de maïs légèrement fermentée, est un plat traditionnel béninois souvent servi avec des
sauces épicées
ou des légumes. Son goût délicatement acidulé en fait un incontournable de la gastronomie locale..</p>
<p>
<span><i class="ri-map-pin-line"></i></span> Maquis du port
</p>
</div>
<div class="meal__card grayscale__effect">
<img width="auto" height="auto" src="assets/meals/meal-6.webp" alt="Igname Frite et Aloco" />
<h1>Igname Frite et Aloco</h1>
<p>L'igname frite, croustillante et dorée, est un classique du Bénin. Associée à l’aloco, des bananes plantains
frites, ce
duo sucré-salé ravit les papilles des amateurs de cuisine africaine</p>
<p>
<span><i class="ri-map-pin-line"></i></span> Le Berlin
</p>
</div>
</div>
<div class="explore__more">
<button class="btn">Voir plus</button>
</div>
</section>
<section class="section__container seller__container" id="seller">
<div class="section__header section__header-row">
<div class="">
<h2 class="section__title font-1">Activités à Découvrir</h2>
<p class="section__description">
Explorez la richesse culturelle et naturelle du Bénin à travers une variété d'activités captivantes. Que vous
soyez
amateur de nature, passionné d'histoire ou en quête d'aventures, le Bénin a de quoi satisfaire toutes vos
envies.
</p>
</div>
<div class="section__btn">
<button class="btn">Voir plus</button>
</div>
</div>
<div class="seller__grid">
<div class="seller__card">
<div class="seller__image">
<img width="auto" height="auto" src="assets/destinations/kota.webp" alt="kota" />
<div class="seller__image__content">
<div class="badge">Nature</div>
<div class="seller__image__footer">
<div class="seller__price">
<p>Collectif| Solo</p>
<h1>Gratuit</h1>
</div>
<button class="btn">Explorer</button>
</div>
</div>
</div>
<div class="seller__details">
<h1>Chute de Kota</h1>
<p>Nichées dans la région de la Donga, les Chutes de Kota offrent un spectacle naturel époustouflant.
Entourées par une
végétation luxuriante, ces chutes d'eau impressionnantes sont un lieu idéal pour une excursion d'une
journée.
</p>
</div>
</div>
<div class="seller__card">
<div class="seller__image">
<img width="auto" height="auto" src="assets/destinations/benin-parcs-pendjari-w.webp" alt="pendjari" />
<div class="seller__image__content">
<div class="badge">Safari</div>
<div class="seller__image__footer">
<div class="seller__price">
<p>Collectif| Solo</p>
<h1>5000 FCFA</h1>
</div>
<button class="btn">Explorer</button>
</div>
</div>
</div>
<div class="seller__details">
<h1>Parc de Pendjari</h1>
<p>Plongez au cœur de la nature sauvage en explorant le Parc National de la Pendjari. Réputé pour sa faune
abondante,
notamment les lions, les éléphants, les léopards et les buffles, ce parc offre des safaris inoubliables.</p>
</div>
</div>
<div class="seller__card">
<div class="seller__image">
<img width="auto" height="auto" src="assets/destinations/benin-abomey-2.webp" alt="Abomey" />
<div class="seller__image__content">
<div class="badge">Nature</div>
<div class="seller__image__footer">
<div class="seller__price">
<p>Collectif| Solo</p>
<h1>Gratuit</h1>
</div>
<button class="btn">Explorer</button>
</div>
</div>
</div>
<div class="seller__details">
<h1>Musée Historique d’Abomey</h1>
<p>Le Musée d’Abomey, situé dans les anciens palais royaux, raconte l’histoire du puissant royaume du Dahomey.
Ce site
classé à l’UNESCO abrite des trésors royaux, des objets sacrés et des témoignages de la grandeur de cette
civilisation.</p>
</div>
</div>
</div>
</section>
<section class="tour">
<div class="section__container tour__container">
<h1 class="font-1">Visionnez les beaux paysages du Bénin</h1>
<div class="video__container">
<video src="assets/video.webm" autoplay loop muted></video>
</div>
</div>
</section>
<section class="section__container monument__container" id="monument">
<div class="section__header section__header-row">
<div class="">
<h2 class="section__title font-1">Monuments Historiques du Bénin</h2>
<p class="section__description">
Le Bénin est un pays riche en histoire et en culture, illustrées par des statues et monuments qui rendent
hommage aux
héros et événements marquants du passé.
</p>
</div>
</div>
<div class="monument__grid">
<div class="monument__card">
<div class="monument__image">
<img width="auto" height="auto" src="assets/monuments/amazone.webp" alt="amazone" />
<div class="monument__hover">
<div class="badge">Cotonou</div>
</div>
</div>
<div class="monument__content">
<div class="monument__details">
<h1>L'Amazone</h1>
</div>
<p>
L'Amazone honore les Amazones du Dahomey, un corps d'élite exclusivement féminin ayant
combattu avec
bravoure aux côtés des rois du Bénin.
</p>
</div>
</div>
<div class="monument__card">
<div class="monument__image">
<img width="auto" height="auto" src="assets/monuments/behanzin.webp" alt="Béhanzin" />
<div class="monument__hover">
<div class="badge">Abomey</div>
</div>
</div>
<div class="monument__content">
<div class="monument__details">
<h1>Béhanzin</h1>
</div>
<p>
Située à Abomey, elle rend hommage au dernier roi du Dahomey qui a courageusement résisté à la colonisation
française.
</p>
</div>
</div>
<div class="monument__card">
<div class="monument__image">
<img width="auto" height="auto" src="assets/monuments/bio-guera.webp" alt="bio-guera" />
<div class="monument__hover">
<div class="monument__hover">
<div class="badge">Cotonou</div>
</div>
</div>
</div>
<div class="monument__content">
<div class="monument__details">
<h1>Bio-Guéra</h1>
</div>
<p>
Héros national, Bio Guerra a lutté contre l'invasion coloniale française dans le nord du Bénin. Sa statue
symbolise la
résistance et le courage.
</p>
</div>
</div>
</div>
</section>
<section class="section__container meal__container" id="hotel">
<div class="section__header section__header-col">
<h2 class="section__title font-1">Séjournez dans les Meilleurs Hôtels du Bénin</h2>
<p class="section__description text-center">
Que vous recherchiez un hébergement luxueux en bord de mer ou une expérience plus traditionnelle au cœur des
villes
historiques, le Bénin a l'hôtel parfait pour vous.
</p>
</div>
<div class="meal__grid">
<div class="meal__card">
<img width="auto" height="auto" src="assets/hotels/hotel-1.webp" alt="Sofitel" />
<h1>Hôtel Sofitel</h1>
<p>Sofitel Cotonou Marina Hotel & Spa</p>
<div class="meal__details">
<div class="price">
<h1>80.000 XOF</h1>
<p>*Prix variable</p>
</div>
<div class="meal__ratings">
<div>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-half-fill"></i></span>
<span><i class="ri-star-line"></i></span>
</div>
<p>4.8 (10)</p>
</div>
</div>
<h1>
<span><i class="ri-map-pin-line"></i></span> Cotonou
</h1>
</div>
<div class="meal__card">
<img width="auto" height="auto" src="assets/hotels/hotel-3.webp" alt="Nobila" />
<h1>Hotel Awale</h1>
<p>Hotel Village Vacances Awale Plage</p>
<div class="meal__details">
<div class="price">
<h1>30.000 XOF</h1>
<p>*Prix variable</p>
</div>
<div class="meal__ratings">
<div>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-line"></i></span>
</div>
<p>4.9 (13)</p>
</div>
</div>
<h1>
<span><i class="ri-map-pin-line"></i></span> Grand popo
</h1>
</div>
<div class="meal__card">
<img width="auto" height="auto" src="assets/hotels/hotel-2.webp" alt="azalai" />
<h1>Azalaï Hôtel</h1>
<p>Azalaï Hôtel Cotonou</p>
<div class="meal__details">
<div class="price">
<h1>70.000 XOF</h1>
<p>*Prix variable</p>
</div>
<div class="meal__ratings">
<div>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-fill"></i></span>
<span><i class="ri-star-half-fill"></i></span>
<span><i class="ri-star-line"></i></span>
</div>
<p>4.1 (23)</p>
</div>
</div>
<h1>
<span><i class="ri-map-pin-line"></i></span> Hotel de la plage
</h1>
</div>
</div>
<div class="explore__more">
<button class="btn">Voir plus</button>
</div>
</section>
<section class="subscribe">
<div class="section__container subscribe__container">
<h1 class="font-1">Recevez les dernières nouvelles</h1>
<form action="/#" name="subscriber" id="subscribe">
<input type="text" placeholder="Adresse email" name="email" id="email" autocomplete="off" />
<button class="btn">S'abonner</button>
</form>
</div>
</section>
<footer>
<div class="footer__bar">
Copyright © Bénin 2024 by @loicfarel. All rights reserved.
</div>
</footer>
<a href="#" name="button" class="button__top active" id="button-top">
<span><i class="ri-arrow-up-line"></i></span>
<b>i</b>
</a>
<script src="main.js"></script>
</body>
</html>