-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (182 loc) · 10.5 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Lien vers Font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<!-- Lien vers la google font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Reservia</title>
</head>
<body>
<div id="conteneur_page">
<header id="principal">
<nav>
<img src="images/logo/Reservia.svg" alt="Logo Reservia" id="logo"/>
<div class="box_inscrire">
<p><a href="#"><strong>S'inscrire</strong></a></p>
</div>
<div id="ancres_page">
<div class="box_nav">
<p><a href="#conteneur_hebergements">Hébergements</a></p>
</div>
<div class="box_nav">
<p><a href="#conteneur_activites">Activités</a></p>
</div>
</div>
</nav>
</header>
<div id="conteneur_recherche">
<h1>Trouvez votre hébergement pour des vacances de rêve</h1>
<p>En plein centre ville ou en pleine nature</p>
<form method="post" action="traitement.php" id="formulaire_recherche"> <!-- Modifier l'attribut action -->
<p><label for="barre_recherche"><i class="fas fa-map-marker-alt"></i></label><input type="search" id="barre_recherche" placeholder="Marseille, France"/><input id="bouton_recherche_texte" type="submit" value="Rechercher"><button type="submit" id=loupe_icone><i class="fas fa-search"></i></button></p>
</form>
<div id="conteneur_filtres">
<h2 id="titre_filtres">Filtres</h2>
<div id="liste_filtres">
<p class="filtre"><i class="fas fa-money-bill-wave"></i><span class="nom_filtre">Économique</span></p>
<p class="filtre"><i class="fas fa-child"></i><span class="nom_filtre">Familial</span></p>
<p class="filtre"><i class="fas fa-heart"></i><span class="nom_filtre">Romantique</span></p>
<p class="filtre"><i class="fas fa-dog"></i><span class="nom_filtre">Animaux autorisés</span></p>
</div>
</div>
<div id="information"><i class="fas fa-info"></i><p id="plus">Plus de 500 logements sont disponibles dans cette ville</p></div>
</div>
<section id="conteneur_hebergements">
<h2 class="cache">Hébergements</h2>
<aside id="populaires">
<h2>Les plus populaires<i class="fas fa-chart-line"></i></h2>
<div id="liste_populaires">
<a href="#" class="Lien_populaire">
<div class="Carte_populaire">
<img src="images/hebergements/4_small/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg" alt="Photo de chambre" class="Photo_populaire_cover" />
<div class="Legende_populaire">
<h3>Hôtel Le soleil du matin</h3>
<p>Nuit à partir de 128€</p>
<p class="Note" id="étoiles_Soleil_matin"><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i></p>
</div>
</div>
</a>
<a href="#" class="Lien_populaire">
<div class="Carte_populaire">
<img src="images/hebergements/4_small/aw-creative-VGs8z60yT2c-unsplash.jpg" alt="Photo de chambre" class="Photo_populaire_cover" />
<div class="Legende_populaire">
<h3>Au cœur de l'eau Chambres d'hôtes</h3><!--Doit-il se répartir sur deux lignes ? -->
<p>Nuit à partir de 71€</p>
<p class="Note" id="étoiles_coeur_eau"><!--4 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star gris"></i></p>
</div>
</div>
</a>
<a href="#" class="Lien_populaire">
<div class="Carte_populaire">
<img src="images/hebergements/4_small/febrian-zakaria-sjvU0THccQA-unsplash.jpg" alt="Photo lit double avec deux lampes" class="Photo_populaire_cover" />
<div class="Legende_populaire">
<h3>Hôtel Tout bleu et Blanc</h3>
<p>Nuit à partir de 68€</p>
<p class="Note" id="étoiles_bleu_blanc"><!--4 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star gris"></i></p>
</div>
</div>
</a>
</div>
</aside>
<section id="hebergements_Marseille">
<h2>Hébergements à Marseille</h2>
<div id="liste_hebergements_Marseille">
<a href="#" class="Carte_Marseille">
<img src="images/hebergements/4_small/marcus-loke-WQJvWU_HZFo-unsplash.jpg" alt="Photo mezzanine avec fenêtre" class="Photo_hebergement_Marseille"/>
<h3>Auberge la Cannebière</h3>
<p>Nuit à partir de <strong>25 €</strong></p>
<p class="Note" id="etoiles_cannebière"><!-- 4 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star gris"></i></p>
</a>
<a href="#" class="Carte_Marseille">
<img src="images/hebergements/4_small/fred-kleber-gTbaxaVLvsg-unsplash.jpg" alt="Photo deux lits simples, fenêtre avec rideaux" class="Photo_hebergement_Marseille"/>
<h3>Hôtel du port</h3>
<p>Nuit à partir de 52€</p>
<p class="Note" id="etoiles_hôtel_port"><!-- 5 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i></p>
</a>
<a href="#" class="Carte_Marseille">
<img src="images/hebergements/4_small/reisetopia-B8WIgxA_PFU-unsplash.jpg" alt="Photo lit simple avec lampe et armoire-miroir" class="Photo_hebergement_Marseille"/>
<h3>Hôtel Les mouettes</h3>
<p>Nuit à partir de 76€</p>
<p class="Note" id="etoiles_mouettes"><!-- 4 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star gris"></i></p>
</a>
<a href="#" class="Carte_Marseille">
<img src="images/hebergements/4_small/annie-spratt-Eg1qcIitAuA-unsplash.jpg" alt="Photo lit double avec peinture du ciel" class="Photo_hebergement_Marseille"/>
<h3>Hôtel de la mer</h3>
<p>Nuit à partir de 45€</p>
<p class="Note" id="etoiles_hôtel_mer"><!-- 3 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star gris"></i><i class="fas fa-star gris"></i></p>
</a>
<a href="#" class="Carte_Marseille">
<img src="images/hebergements/4_small/nicate-lee-kT-ZyaiwBe0-unsplash.jpg" alt="Photo deux mezzanines en bois" class="Photo_hebergement_Marseille"/>
<h3>Auberge Le Panier</h3>
<p>Nuit à partir de <strong>23€</strong></p>
<p class="Note" id="etoiles_panier"><!-- 4 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star gris"></i></p>
</a>
<a href="#" class="Carte_Marseille">
<img src="images/hebergements/4_small/febrian-zakaria-M6S1WvfW68A-unsplash.jpg" alt="Photo lit simple avec bureau et fenêtre" class="Photo_hebergement_Marseille"/>
<h3>Hôtel chez Amina</h3>
<p>Nuit à partir de 96€</p>
<p class="Note" id="etoiles_Amina"><!-- 5 étoiles --><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i><i class="fas fa-star bleu"></i></p>
</a>
</div>
<p id="afficher_plus"><a href="#"><strong>Afficher Plus</strong></a></p>
</section>
</section>
<section id="conteneur_activites">
<h2>Activités à Marseille</h2>
<div id="liste_activites">
<a href="#" class="Carte_activite_longue">
<img src="images/activites/4_small/reno-laithienne-QUgJhdY5Fyk-unsplash.jpg" alt="Bâteaux amarrés" class="Photo_activite_longue" />
<h3>Vieux Port</h3>
</a>
<div class="Conteneur_deux_cartes col2">
<a href="#" class="Carte_activite_superieure_col2">
<img src="images/activites/4_small/paul-hermann-QFTrLdQIRhI-unsplash.jpg" alt="Fort lointain audessus de récifs" class="Photo_superieure_col2"/>
<h3>Fort de Pomègues</h3>
</a>
<a href="#" class="Carte_activite_inferieure_col2">
<img src="images/activites/4_small/kevin-hikari-rV_Qd1l-VXg-unsplash.jpg" alt="Longue vue vers une île au loin" class="Photo_inferieure_col2"/>
<h3>Îles du Frioul</h3>
</a>
</div>
<a href="#" class="Carte_activite_longue">
<img src="images/activites/4_small/kilyan-sockalingum-NR8-cBCN3aI-unsplash.jpg" alt="Récif au bord de mer" class="Photo_activite_longue"/>
<h3>Parc National des Calanques</h3>
</a>
<div class="Conteneur_deux_cartes col4">
<a href="#" class="Carte_activite_superieure_col4">
<img src="images/activites/4_small/florian-wehde-xW9e8gdotxI-unsplash.jpg" alt="Eglise sur une colline avec des arbres, en arrière plan de la ville" class="Photo_activite_superieure_col4"/>
<h3>Notre-Dame-de-la-Garde</h3>
</a>
<a href="#" class="Carte_activite_inferieure_col4">
<img src="images/activites/4_small/lena-paulin-wH2-EJoDcV0-unsplash.jpg" alt="Fontaine dans un parc" class="Photo_activite_inferieure_col4"/>
<h3>Parc Longchamp</h3>
</a>
</div>
</div>
</section>
</div>
<footer>
<section id="à_propos">
<h2>A propos</h2>
<p><a href="#">Fonctionnement du site</a></p>
<p><a href="#">Conditions générales de vente</a></p>
<p><a href="#">Données et confidentialité</a></p>
</section>
<section id="nos_hébergements">
<h2>Nos hébergements</h2>
<p><a href="#">Charte qualité</a></p>
<p><a href="#">Soumettre votre hôtel</a></p>
</section>
<section id="assistance">
<h2>Assistance</h2>
<p><a href="#">Centre d'aide</a></p>
<p><a href="#">Nous contacter</a></p>
</section>
</footer>
</body>
</html>