Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

nouvelle index booki #21

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

nouvelle index booki #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
352 changes: 352 additions & 0 deletions index
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booki</title>
<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=Raleway:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./css/style.css">
</head>

<body>
<main class="main-container">
<header class="header">
<div class="header-logo"></div>
<img src="Images/Logo/[email protected]" alt="Logo Booki" class="logo">
<div class="header-nav-left">
<a href="#" class="nav-link">Hébergements</a>
<a href="#" class="nav-link">Activités</a>
</div>
</header>





<h4 class="section-title">Trouvez votre hébergement pour des vacances de rêve</h4>
<p>En plein centre ville, ou en pleine nature.</p>

<div class="search-wrapper">
<div class="search-bar">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<input type="text" placeholder="Rechercher...">
<button class="search-btn">Rechercher</button>
</div>
</div>



<!-- Autres éléments du header ici -->
<div class="filter-section">
<h3 class="filter-title" style="margin-right: 20px;">Filtres:</h3>
<div class="filter-buttons">
<button class="filter-btn">
<i class="fas fa-money-bill-wave" style="color: blue;margin-right: 5px;"></i> Économique
</button>
<button class="filter-btn">
<i class="fas fa-users" style="color: blue;margin-right: 5px;"></i> Familial
</button>
<button class="filter-btn">
<i class="fas fa-heart" style="color: blue;margin-right: 5px;"></i> Romantique
</button>
<button class="filter-btn">
<i class="fas fa-fire" style="color: blue;margin-right: 5px;"></i> Nos pépites
</button>
</div>
</div>

</div>
<div class="more-info">
<p><i class="fas fa-info-circle" style="margin-top: 20px;margin-bottom: 20px;"></i> Plus de 500 logements
sont disponibles dans cette ville</p>
</div>





<div class="hebergements-and-populaires">
<section class="hebergements">
<div class="populaires-title">
<h2 class="section-title">Hébergements à Marseille</h2>

</div>
<div class="hebergements-cards">
<a href="#">
<article class="card">
<img src="Images/images/hebergements/fred-kleber.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title">Hôtel du port</h3>
<p class="card-subtitle">Nuit à partir de 52<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/images/hebergements/febrian-zakaria.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title">Hôtel Chez Amina</h3>
<p class="card-subtitle">Nuit à partir de 96<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/images/hebergements/febrian-zakaria2.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title" style="font-size: 97%;">Hôtel Les mouettes</h3>
<p class="card-subtitle">Nuit à partir de 76<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/images/hebergements/annie-spratt.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title">Hôtel de la mer</h3>
<p class="card-subtitle">Nuit à partir de 46<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/images/hebergements/marcus-loke.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title" style="font-size: 70%;">Auberge de La Canebière</h3>
<p class="card-subtitle" style="font: size 20px;">Nuit à partir de 25<span
class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/images/hebergements/nicate-lee.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title">Auberge Le Panier</h3>
<p class="card-subtitle">Nuit à partir de 25<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>

</div>
<h2 class="section-title">Afficher plus</h2>
</section>
<section class="populaires">
<div class="populaires-title">
<h2 class="section-title">Les plus populaires</h2>
<i class="fa-solid fa-chart-line" aria-hidden="true"></i>
</div>
<div class="populaires-cards">
<a href="#">
<article class="card">
<img src="Images/images/hebergements/emile-guillemot.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title">Hôtel Le soleil du matin</h3>
<p class="card-subtitle">Nuit à partir de 128<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/images/hebergements/aw-creative.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
<p class="card-subtitle">Nuit à partir de 71<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/images/hebergements/febrian-zakaria2.jpg"
alt="Image de la chambre d'hôtel montrant un lit">
<div class="card-content">
<div class="card-txt">
<h3 class="card-title">Hôtel Bleu et Blanc</h3>
<p class="card-subtitle">Nuit à partir de 68<span class="euro">€</span></p>
</div>
<div class="card-rating">
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
<span class="sr-only">Note de 4 sur 5</span>
</div>
</div>
</article>
</a>
</div>
</section>




</div>
<section class="activites">
<div class="activites-cards">
<h2 class="activites-title">Activités à Marseille</h2>
</div>
<div class="activites">
<a href="#">
<article class="card">
<img src="Images/images/activites/reno-laithienne.jpg"
alt="Image de la chambre d'hôtel montrant un lit"
style="width: 100%;height: 3000px; border: none;">
<div class="card-content">
<h3 class="card-title">Vieux-Port </h3>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/Activités/paul-hermann.jpg" alt="Image de la chambre d'hôtel montrant un lit"
style="width: 100%;height: 315px; border: none;">
<div class="card-content">
<h3 class="card-title">Port de Pomègue</h3>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/Activités/kilyan-sockalingum.jpg"
alt="Image de la chambre d'hôtel montrant un lit"
style="width: 100%;height: 3000px; border: none;">
<div class="card-content">
<h3 class="card-title">Parc national des Calanques</h3>
</div>
</article>
</a>
<a href="#">
<article class="card">
<img src="Images/Activités/florian-wehde.jpg" alt="Image de la chambre d'hôtel montrant un lit"
style="width: 100%;height: 2800px; border: none;">
<div class="card-content">
<h3 class="card-title">Notre-Dames-de-la-Garde</h3>
</div>
</article>
</a>
</div>
</section>

<footer>
<footer class="footer">
<div class="footer-section">
<h4 class="footer-title">À propos</h4>
<!-- Contenu pour la section À propos -->
<p>Fonctionnement du site</p>
<p>Conditions Générales </p>
<p>Données et Confidentialité</p>
</div>

<div class="footer-section">
<h4 class="footer-title">Nos hébergements</h4>
<!-- Contenu pour la section Nos hébergements -->
<p>Charte qualité</p>
<p>Proposer votre Hôtel</p>
</div>

<div class="footer-section">
<h4 class="footer-title">Assistances</h4>
<!-- Contenu pour la section Assistances -->
<p>Centre d'aide</p>
<p>nous contacter</p>
</div>
</footer>

</footer>
</main>
</body>

</html>