-
Notifications
You must be signed in to change notification settings - Fork 0
/
hotel_feu.html
388 lines (385 loc) · 22.4 KB
/
hotel_feu.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- titre max 55/65 caracteres -->
<title>Hôtel Feu. Luxe et excéption au coeur des volcans en Finlande</title>
<!-- meta description max 160 caracteres -->
<meta name="description" content="L'hôtel Feu se situe en Finlande. Feu de la terre volcanique, feu des volcans à l'horizon et, … des aurores boréales que vous pourrez admirer tous les soirs par le toit vitré de votre chambre">
<!-- link css -->
<link rel="stylesheet" href="./assets/css/style.css">
<!---fontawesome.com integration icons -->
<script src="https://kit.fontawesome.com/98908597c5.js" crossorigin="anonymous"></script>
<!-- link font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<header class="flex justify_between">
<!-- nav left -->
<div class="flex headerleft">
<a href="index.html" title="Len ver la page d'accueil"><img src="./assets/images/logo/logo-noir.png" alt="Logo socéié 4 Elements"></a>
<nav class="nav_hotel">
<ul class="flex justify_around">
<li><a href="hotel_feu.html" title="Lien vers la page Hôte Terre">Feu</a></li>
<li><a href="" title="Lien vers la page Hôte Eau">Air</a></li>
<li><a href="" title="Lien vers la page Hôte Feu">Terre</a></li>
<li><a href="" title="Lien vers la page Hôte Air">Eau</a></li>
</ul>
</nav>
</div>
<!-- nav right -->
<div class="flex headerright">
<!-- nav contact -->
<nav class="nav_contact">
<ul class="flex">
<li class="resp_whith">Contact</li>
<li><a href="https://www.instagram.com/" title="Lien vers la page Instagram"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com" title="Lien vers la page Facebook"><i class="fa-brands fa-square-facebook"></i></a></li>
</ul>
</nav>
<!-- nav reserver -->
<nav class="nav_reserver">
<ul class="flex">
<li><a class="btn_link" href="formReservation.html" title="Lien vers la page Reserver">Reserver</a></li>
<li><a href="" title="Lien vers la page Se connecter"><i class="fa-solid fa-user"></i></a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- PRESENTATION HOTEL FEU-->
<section class="presentation paddingleft padding_presentation">
<article class="flex justify_between">
<div class="width35">
<h2>Hôtel Feu</h2>
<div class="flex">
<img src="./assets/images/icon/map-pin.svg" alt="Icon positionnement sur une carte">
<p>Finlande</p>
</div>
<div class="flex post-titre">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-empty.svg" alt="Etoile pleine">
<p>(326 avis)</p>
</div>
<p><strong>l'hôtel Feu</strong> ne se situe bien sûr pas sur un volcan, mais <strong>en Finlande</strong>.<br>
Feu de la terre volcanique crachant non loin de là ses geysers, feu des volcans à l'horizon et, …u des aurores boréales que vous pourrez admirer tous les soirs par le toit vitré de votre chambre.</p>
<a class="btn_link" href="formReservation.html" title="Lien vers la page reserver de l'Hotel Feu">Reserver</a>
</div>
<div class="flex justify_between width53">
<div class="width63 img_animation">
<img src="./assets/images/hotel_feu_domes.jpg" alt="Plusieurs chambres domes dans la foret avec de la neige ">
</div>
<div class="width28 img_animation">
<img src="./assets/images/hotel_feu_chalet.jpg" alt="Chalet avec chambre dome sous la neige ">
</div>
</div>
</article>
</section>
<!-- LES OFFRES -->
<section class="flex offres padding_lateral justify_around">
<h3>Les offres de l'hôtel feu</h3>
<!-- article decouvrer la Laponie -->
<article class="width35 aligne_vertical_column img_animation">
<img src="./assets/images/hotel_feu_foret.jpg" alt="L'hotel au milieu de la foret et de la neige">
<h4>Découvrez nos igloos et voyagez le temps d’une nuit</h4>
<p>Plongez-vous dans une nuit magique où le temps semble suspendu. Nos <strong>igloos offrent une atmosphère chaleureuse et dépaysante</strong>, vous invitant à vivre une aventure hors du commun. Chaque détail a été soigneusement pensé pour créer une escapade mémorable. Profitez de l'intimité et du <strong>confort de nos hébergements</strong> glacés tout en vous laissant imprégner par la beauté éphémère de cet environnement. Offrez-vous une nuit inoubliable dans nos igloos, une expérience qui restera gravée dans vos souvenirs.</p>
<!-- icones -->
<div class="flex icones">
<div class="flex">
<img src="./assets/images/icon/sparkle.svg" alt="Icon de Spa">
<p>Spa</p>
</div>
<div class="flex">
<img src="./assets/images/icon/car.svg" alt="Icon de parking'">
<p>Parking</p>
</div>
<div class="flex">
<img src="./assets/images/icon/snowflake.svg" alt="Icon de climatisation">
<p>Climatisation</p>
</div>
<div class="flex">
<img src="./assets/images/icon/swimming-pool.svg" alt="Icon de picine">
<p>Picine</p>
</div>
<div class="flex">
<img src="./assets/images/icon/barbell.svg" alt="Icon de salle de sport">
<p>Salle de sport</p>
</div>
<div class="flex">
<img src="./assets/images/icon/bus.svg" alt="Icon de transpport aéroport">
<p>Transport aéroport</p>
</div>
</div>
<a href="" title="Lien vers plus de detail">+ de détails</a>
<p class="prix">à partir de <span>850€ / nuit</span></p>
<a class="btn_link" href="formReservation.html" title="Lien vers la page reserver de l'Hotel Feu">Reserver</a>
</article>
<!-- article decouvrer nos igloos -->
<article class="width35 aligne_vertical_column img_animation">
<img src="./assets/images/hotel_feu_salon.jpg" alt="L'hotel au milieu de la foret et de la neige">
<h4>Découvrez la suite Laponie et voyagez le temps d’une nuit</h4>
<p>Voyagez le temps d'une nuit à travers un hébergement exceptionnel qui évoque <strong>la magie et l'authenticité de la Laponie</strong>. La suite offre un mélange enchanteur de confort luxueux et d'éléments inspirés de la nature environnante. Imprégnez-vous de l'atmosphère enchanteresse de la Laponie tout en profitant du luxe et de l'intimité de notre suite. Offrez-vous <strong>une nuit extraordinaire</strong> dans la suite Laponie de l'hôtel Feu, où chaque moment promet d'être magique et mémorable.</p>
<!-- icones -->
<div class="flex icones">
<div class="flex">
<img src="./assets/images/icon/sparkle.svg" alt="Icon de Spa">
<p>Spa</p>
</div>
<div class="flex">
<img src="./assets/images/icon/car.svg" alt="Icon de parking'">
<p>Parking</p>
</div>
<div class="flex">
<img src="./assets/images/icon/snowflake.svg" alt="Icon de climatisation">
<p>Climatisation</p>
</div>
<div class="flex">
<img src="./assets/images/icon/swimming-pool.svg" alt="Icon de picine">
<p>Picine</p>
</div>
<div class="flex">
<img src="./assets/images/icon/barbell.svg" alt="Icon de salle de sport">
<p>Salle de sport</p>
</div>
<div class="flex">
<img src="./assets/images/icon/bus.svg" alt="Icon de transpport aéroport">
<p>Transport aéroport</p>
</div>
</div>
<a href="" title="Lien vers plus de detail">+ de détails</a>
<p class="prix">à partir de <span>500€ / nuit</span></p>
<a class="btn_link" href="formReservation.html" title="Lien vers la page reserver de l'Hotel Feu">Reserver</a>
</article>
</section>
<!-- LES SERVICES SUPPLEMENTAIRES -->
<section class="carousel paddingleft ">
<h4>Service supplementaires</h4>
<p>Les services supplémentaires ne sont pas comprises dans le tarif de base de la chambre.</p>
<!-- caroussel sur la base de travail proposé par Nicolas -->
<div class="carousel-container">
<div class="carousel-slides">
<!-- article chauffeur -->
<article class="carousel-item">
<img src="./assets/images/hotel_feu_chauffeur.jpg" alt="Un chauffeur qui conduit">
<div>
<h4>Chauffeur</h4>
<p>Explorez la ville en toute sérénité avec notre service de chauffeur exclusif, offert par l'hôtel.</p>
<p class="activite_prix">11€ / jour</p>
</div>
</article>
<!-- article Déjeuner -->
<article class="carousel-item">
<img src="./assets/images/hotel_feu_dejeuner.jpg" alt="petit dejeuner">
<div>
<h4>Déjeuner</h4>
<p>Commencez votre journée en beauté avec notre service de petit déjeuner raffiné.</p>
<p class="activite_prix">15€ / jour</p>
</div>
</article>
<!-- article Repas -->
<article class="carousel-item">
<img src="./assets/images/hotel_feu_repas.jpg" alt="plat cuisiné">
<div>
<h4>Repas</h4>
<p>Savourez l'art culinaire de notre service de repas, où chaque plat est préparé pour émerveiller vos papilles.</p>
<p class="activite_prix">15€ / jour</p>
</div>
</article>
<!-- article Visite guidée -->
<article class="carousel-item">
<img src="./assets/images/guide.jpg" alt="bousolle">
<div>
<h4>Visite guidée</h4>
<p>Explorez les trésors locaux avec notre service de visite guidée, conçu pour vous faire découvrir la région.</p>
<p class="activite_prix">15€ / jour</p>
</div>
</article>
</div>
</div>
</section>
<!-- LES ACTIVITES -->
<section class="carousel paddingleft ">
<h4>Activités proches de l’hôtel</h4>
<p>Les activités ne sont pas comprises dans le tarif de base de la chambre.</p>
<!-- caroussel sur la base de travail proposé par Nicolas -->
<div class="carousel-container">
<div class="carousel-slides">
<!-- article Chien de traineaux -->
<article class="carousel-item">
<img src="./assets/images/hotel_feu_chien_traineaux.jpg" alt="des chien qui tire un traineau">
<div>
<h4>Chien de traineaux</h4>
<p>Plongez dans une aventure hivernale palpitante en explorant la beauté des paysages enneigés lors d'une excursion magique.</p>
<a class="btn_link" href="formReservation.html" title="Lien vers la page reserver de l'Hotel Feu">Reserver</a>
</div>
</article>
<!-- article Rando en raquette -->
<article class="carousel-item">
<img src="./assets/images/hotel_feu_rando_raquette.jpg" alt="une personne qui fait de la randonnée en raquette">
<div>
<h4>Rando en raquette</h4>
<p>Parcourez des sentiers immaculés et découvrez la tranquillité hivernale tout en profitant d'une randonnée en raquettes.</p>
<a class="btn_link" href="formReservation.html" title="Lien vers la page reserver de l'Hotel Feu">Reserver</a>
</div>
</article>
<!-- article Découvrir les volcans -->
<article class="carousel-item">
<img src="./assets/images/hotel_feu_volcan.jpg" alt="un volcan">
<div>
<h4>Découvrir les volcans</h4>
<p>Explorez le monde fascinant des volcans, plongez au cœur de paysages spectaculaires et laissez-vous émerveiller.</p>
<a class="btn_link" href="formReservation.html" title="Lien vers la page reserver de l'Hotel Feu">Reserver</a>
</div>
</article>
<!-- article Spéléologiee -->
<article class="carousel-item">
<img src="./assets/images/hotel_feu_speleologie.jpg" alt="un lac dans une grotte">
<div>
<h4>Spéléologie</h4>
<p>Aventurez-vous dans les profondeurs mystérieuses de la terre lors d'une passionnante et extraordinaires séance de spéléologie.</p>
<a class="btn_link" href="formReservation.html" title="Lien vers la page reserver de l'Hotel Feu">Reserver</a>
</div>
</article>
</div>
</div>
</section>
<!-- VIDEO -->
<section class="animation ">
<video autoplay loop muted >
<source src="./assets/videos/hotel_feu_nuit_etoiles.mp4" type="video/mp4">
Aurore boréale
</video>
</section>
<!-- LES AVIS -->
<section class="flex avis padding_lateral justify_around">
<h4>Avis clients</h4>
<!-- avis avy-->
<article class="width35">
<div class="flex">
<div class="avis_img">
<img src="./assets/images/hotel_feu_avy.png" alt="photo de Avy">
</div>
<div class=" flex avis_profil">
<h5>Avy Johnson</h5>
<div class="flex">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-empty.svg" alt="Etoile vide">
<p>(4,5/5)</p>
</div>
</div>
</div>
<p>Tout simplement exceptionnel. Le personnel était incroyablement attentionné et chaleureux, toujours prêt à répondre à mes besoins. La suite Laponie était décorée avec élégance, offrant un mélange parfait de confort moderne et d'ambiance nordique. Une expérience mémorable que je recommande vivement.</p>
</article>
<!-- avis thomas-->
<article class="width35">
<div class="flex">
<div class="avis_img">
<img src="./assets/images/hotel_feu_thomas.png" alt="photo de Thomas">
</div>
<div>
<h5>Thoams Capello</h5>
<div>
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-full.svg" alt="Etoile pleine">
<img src="./assets/images/icon/star-empty.svg" alt="Etoile vide">
<p>(4,5/5)</p>
</div>
</div>
</div>
<p>Mon séjour dans les igloos de l'hôtel Feu a été tout simplement magique. L'expérience de passer une nuit dans ces hébergements uniques était à couper le souffle. Les igloos offrent une ambiance cosy et chaleureuse, malgré le froid extérieur, grâce à leur conception bien pensée. Les vues sur le ciel étoilé depuis le dôme de glace étaient à couper le souffle.</p>
</article>
</section>
<!-- INFOS GENERALES -->
<section class="infos flex padding_lateral justify_around">
<h3>Informations générales</h3>
<!-- article horaire -->
<article class="width35 flex horaire">
<img src="./assets/images/icon/key.svg" alt="icone d'une clé">
<p class="arrive"><span>Arrivée</span><br>De 15h00 à 0h00</p>
<p class="depart"><span>Depart</span><br>Jusqu'à 12h</p>
</article>
<!-- article accessibilité -->
<article class="width35 flex">
<img src="./assets/images/icon/wheelchair.svg" alt="icone d'un fauteil roulant clé">
<p><span> Accessibilité : </span><br>L’établissement est accessible aux personnes à mobilité réduite (PMR).</p>
</article>
<!-- article anulation / praipement -->
<article class="width35 flex">
<img src="./assets/images/icon/info.svg" alt="icone information">
<p><span>Annulation/prépaiement : </span><br>Les conditions d'annulation et de prépaiement varient en fonction du type d'hébergement.Veuillez saisir les dates de votre séjour et consulter les conditions de la chambre choisie.</p>
</article>
<!-- article annimeaux de compagnie -->
<article class="width35 flex">
<img src="./assets/images/icon/paw-print.svg" alt="icone d'une emprunte d'une patte d'un animal">
<p><span>Animaux de compagnie : </span><br>Les animaux de compagnie ne sont pas admis au sein de l'établissement.</p>
</article>
<!-- article restirction age -->
<article class="width35 flex">
<img src="./assets/images/icon/user.svg" alt="icon d'un utilisateur">
<p><span>Restriction relative à l'âge : </span><br>Les clients doivent avoir au moins 18 ans pour pouvoir s'enregistrer.</p>
</article>
<!-- article moyen de paiement -->
<article class="width35 flex">
<img src="./assets/images/icon/credit-card.svg" alt="icone d'une carte de credit">
<p><span>Moyens de paiement acceptés : </span><br>Paiement par carte bancaire (VISA, MasterCard, American Express..). Les espèces ne sont pas acceptées.</p>
</article>
</section>
<!-- CONTACT -->
<section class="contact">
<h4>Contact</h4>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9087.04652338762!2d2.322393456449155!3d48.8642029455423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis!5e0!3m2!1sfr!2sfr!4v1707853957852!5m2!1sfr!2sfr" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<address>
<p><span>Adresse :</span> 8 avenue exemple</p>
<p><span>Ouverture :</span>Tous les jours de 9h à 20h30</p>
<a href="tel:330828028002" title="Lien vers le numero de telephone"><span>Tél :</span>33 08 280 28002</a>
</address>
</section>
</main>
<!-- FOOTER -->
<footer class="flex justify_between">
<!-- element left -->
<div class="width28 column_left">
<a href="index.html"><img src="./assets/images/logo/logo-noir.png" alt=""></a>
<p> “N’attendez plus pour vivre l’expérience 4 éléments le temps d’une nuit.”</p>
<nav>
<ul class="flex">
<li><a href="https://www.instagram.com/" title="Lien vers la page Instagram"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com" title="Lien vers la page Facebook"><i class="fa-brands fa-square-facebook"></i></a></li>
</ul>
</nav>
</div>
<!-- element center -->
<div class="width28 column_center">
<h4>Contact</h4>
<address>
<p><span>Adresse :</span> 8 avenue exemple</p>
<p><span>Ouverture :</span> tous les jours de 9h à 20h30</p>
<a href="tel:330828028002" title="Lien vers le numero de telephone">Tél : 33 08 280 28002</a>
</address>
<a class="btn_link" href="formReservation.html" title="Lien vers la page de reservervation">Reserver en ligne</a>
</div>
<!-- element right -->
<nav class="width28 column_right">
<ul>
<li><a href="" title="Lien vers la page Call to action reservation ">Call to action reservation</a></li>
<li><a href="" title="Lien vers la page Mentions légales">Mentions légales</a></li>
<li><a href="" title="Lien vers la page Crédits">Crédits</a></li>
<li><a href="" title="Lien vers la page CGV">CGV</a></li>
<li><a href="" title="Lien vers la page Confidentialité">Confidentialité</a></li>
</ul>
</nav>
</footer>
</body>
</html>