diff --git a/css/style.css b/css/style.css
index f6c96c4d..89e2ae87 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,7 @@
-/****** General ***********/
-* {
+/*********** General ***********/
+* { 
     font-family: 'Raleway', sans-serif;
+    margin: 0;
 }
 
 :root {
@@ -13,16 +14,36 @@
     color: var(--main-color);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
     display: flex;
     justify-content: center;
 }
 
+html, body {
+    width: 100%;
+    overflow-x: auto;
+}
+
 .main-container {
     width: 100%;
     max-width: 1440px;
+    min-width: 320px;
+    margin: 0 auto; 
     padding: 0 50px;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
 }
 
 a {
@@ -58,48 +79,251 @@ a {
     color: var(--main-bg-color)
 }
 
-/****** Hebergements And Populaires ***********/
-.hebergements-and-populaires {
+/*********** HEADER ***********/
+
+/** Nav **/
+.nav-header {
     display: flex;
     justify-content: space-between;
+    align-items: flex-start;
+}
+
+#menu {
+    display: flex;
+    list-style: none;
+    padding-top: 15px;
+    gap: 68px;
+}
+
+#menu a {
+    color: #090021;
+    padding-top: 13px;
+    font-size: 16px;
+}
+
+#menu a:hover {
+    color: var(--main-color);
+    border-top: 3px solid var(--main-color);
+}
+
+.logo-Booki {
+    height: 19px;
+    padding: 30px 0px 32px 0px;
+}
+
+/** Recherche **/
+
+.container-search {
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+}
+
+.form-search {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.icon-pin i {
+    background-color: #F2F2F2;
+    padding: 15px 18px;
+    font-size: 18px;
+    color: black;
+}
+
+.input-search {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    border: none;
+    padding: 14px;
+    font-size: 16px;
+    outline: none;
+    border-top: 1px solid #F2F2F2;
+    border-bottom: 1px solid #F2F2F2; 
+    font-weight: 700;
+}
+
+.button-search {
+    background-color: var(--main-color);
+    color: white;
+    border: none;
+    padding: 15px 25px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 700;
+    transition: background-color 0.2s;
+    display: inline-block;
+}
+
+.button-search:hover {
+    background-color: #0050d4;
+}
+
+.button-search-mobile {
+    display: none;
+}
+
+/** Filtre **/
+
+.container-filter {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+h3 {
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.button-filter {
+    padding: 4px 19px;
+    height: 50px;
+    border-radius: 25px;
+    border: 2px solid #D9D9D9;
+    background-color: white;
+    font-size: 17px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.button-filter i {
+    margin-right: 7px;
+}
+
+.button-filter:hover {
+    background-color: #DEEBFF;
+}
+
+/** Infos **/
+
+.container-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.fa-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    border-radius: 50px;
+    border: 1px solid #D9D9D9;
+    font-size: 11px;
+    box-sizing: border-box;
+    min-width: 24px;
+    min-height: 24px;
+}
+
+/*********** Hebergements et Populaires ***********/
+.accommodation-and-popular {
+    display: flex;
+    gap: 30px;
 }
 
-.hebergements-and-populaires section {
+.accommodation-and-popular section {
     background-color: var(--main-bg-color);
     border-radius: 20px;
     padding: 30px;
     box-sizing: border-box;
 }
 
-/****** Hebergements ***********/
-.hebergements {
+/** Hebergements **/
+#accommodation {
     width: 65%;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.accommodation-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+}
+
+.accommodation-cards a {
+    width: calc(33.333% - 20px);
+    box-sizing: border-box;
+}
+
+.accommodation-cards .card {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 15px;
+    gap: 4px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.accommodation-cards .card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.accommodation-cards img {
+    width: auto;
+    height: 136px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    margin-bottom: 5px;
+}
+
+.card-content h3 {
+    margin: 0px;
+}
+
+.accommodation-cards .card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 0px 15px;
+    gap: 8px;
 }
 
-/****** Populaires ***********/
-.populaires {
-    width: 32%;
+/** Populaires **/
+#popular {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
 }
 
-.populaires-title {
+.popular-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.populaires-cards .card {
+.popular-cards {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.popular-cards .card {
     display: flex;
-    margin-top: 33px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.popular-cards .card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
-.populaires-cards img {
+.popular-cards img {
     width: 33%;
     height: 136px;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
 }
 
-.populaires-cards .card-content {
+.popular-cards .card-content {
     width: 67%;
     padding-left: 15px;
     display: flex;
@@ -108,60 +332,357 @@ a {
     box-sizing: border-box;
 }
 
-.populaires-cards .card-title {
+.popular-cards .card-title {
     margin-top: 10px;
     margin-bottom: 4px;
 }
 
-.populaires-cards .card-subtitle {
+.popular-cards .card-subtitle {
     margin: 0;
 }
 
-.populaires-cards .card-rating {
+.popular-cards .card-rating {
     margin-bottom: 5px;
 }
 
 
+/*********** Activités ***********/
+
+#activity{
+    display: flex;
+    flex-direction: column;
+    padding: 30px;
+    gap: 30px;
+}
+
+.activity-cards{
+    display: flex;
+    gap: 30px;
+    align-items: stretch;
+}
+
+.activity-cards a{
+    width: calc(25% - 20px);
+    box-sizing: border-box;
+}
+
+.activity-cards .card{
+    display: flex;
+    flex-direction: column;
+    padding: 0px;
+    outline: none;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    height: 100%;
+}
+
+.activity-cards .card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.activity-cards img {
+    width: auto;
+    height: 380px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+}
+
+.activity-cards .card-title{
+    padding: 20px 19px;
+    display: flex;
+    align-items: center;
+    height: 20px;
+}
+
+
+/*********** Footer ***********/
+
+footer {
+    background-color: var(--main-bg-color);
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.footer-column{
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    gap: 15px;
+}
+
+.footer-list{
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    list-style: none;
+    font-size: 16px;
+    padding-left: 0;
+}
+
+.footer-list a:hover {
+    text-decoration: underline;
+}
+
 
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
 
-/****** Media queries ***********/
+/*********** Media queries ***********/
+
+
 /* Medium devices (tablets, less/equal than 1024px) */
 @media (max-width: 1024px) {
-    .hebergements-and-populaires {
+
+    /******   MQ M HÉBERGEMENTS & POPULAIRES  ********/
+    .accommodation-and-popular {
         flex-direction: column;
     }
 
-    .hebergements {
+    /*   MQ M HÉBERGEMENTS   */
+
+    #accommodation {
         width: 100%;
     }
 
-    .populaires {
+
+    /*   MQ M POPULAIRES   */
+    .popular {
         width: 100%;
         margin-top: 50px;
     }
 
-    .populaires-cards {
+    .popular-cards {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
 
-    .populaires-cards a {
+    .popular-cards a {
         width: 30%;
     }
 
-    .populaires-cards .card-title {
+    .popular-cards .card-title {
         font-size: 14px;
     }
 
-    .populaires-cards .card-subtitle {
+    .popular-cards .card-subtitle {
         font-size: 13px;
     }
+
+
+    /******   MQ M ACTIVITÉS   ********/
+    .activity-cards img {
+        width: auto;
+        height: 200px;
+    }
+
 }
 
 /* Small devices (phones, less than 768px) */
 @media (max-width: 767.98px) {
-    /* ... */
+
+    .main-container {
+        padding: 0 20px;
+    }
+
+
+    /*********** MQ S HEADER ***********/
+
+    /** MQ S Nav **/
+    .nav-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #menu {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        gap: 0;
+        width: 100%;
+    }
+
+    #menu li {
+        flex: 1;
+        text-align: center;
+    }
+
+    #menu a {
+        display: block;
+        padding: 10px 0;
+        color: #090021;
+        font-size: 16px;
+        border: none;
+        border-bottom: 3px solid var(--main-bg-color);
+    }
+
+    #menu a:hover {
+        color: var(--main-color);
+        border-top: none;
+        border-bottom: 3px solid var(--main-color);
+    }
+
+
+    /** MQ S Recherche **/
+
+    .container-search {
+        display: flex;
+        flex-direction: column;
+        gap: 35px;
+        padding: 0px 10px;
+        margin-top: 30px;
+        position: relative;
+        min-width: auto;
+    }
+
+    .form-search {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+        border-radius: 15px;
+        background: white;
+        overflow: hidden;
+        gap: 0;
+    }
+
+    .icon-pin {
+        flex: 0 0 auto;
+    }
+
+    .input-search {
+        flex: 1 1 auto;
+        border: none;
+        padding: 14px;
+        font-size: 16px;
+        outline: none;
+        border-top: 1px solid #F2F2F2;
+        border-bottom: 1px solid #F2F2F2; 
+        font-weight: 700;
+        min-width: 0;
+    }
+
+    .button-search {
+        display: none;
+    }
+
+    .button-search-mobile {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--main-color);
+        border: none;
+        padding: 15px 17px;
+        cursor: pointer;
+        font-size: 17px;
+        font-weight: 700;
+        border-radius: 15px;
+    }
+
+    .button-search-mobile:hover {
+        background-color: #0050d4;
+    }
+
+    .button-search-mobile i {
+        color: white;
+    }
+
+    /** MQ S Filtre **/
+
+    .container-filter {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    .container-filter h3 {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    .container-filter .button-filter {
+        flex: 1 1 45%;
+        text-align: center;
+        padding: 10px 0;
+        box-sizing: border-box;
+    }
+
+
+    /** MQ S Hébergement & Populaires **/
+
+    .accommodation-and-popular section {
+        border-radius: 0px;
+    }
+
+        /** MQ S Populaires **/
+    #popular { order: 1; }
+
+    .popular-cards {
+        flex-direction: column;
+        gap: 30px;
+    }
+
+    .popular-cards a {
+        width: 100%;
+    }
+
+        /** MQ S Hébergement **/
+    #accommodation { 
+        order: 2;
+        background-color: white;
+    }
+
+    .accommodation-cards a{
+        width: 100%;
+        flex-direction: column;
+    }
+
+    /** MQ S Activités **/
+
+    .activity-cards{
+        flex-direction: column;
+    }
+
+    .activity-cards a{
+        width: 100%;
+    }
+
+
+    /** MQ S Footer **/
+
+    footer {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+
+/* Very Small devices (phones, less than 375px) */
+@media (max-width: 375px) {
+
+    .main-container {
+        padding: 0 10px;
+    }
+
+    /** MQ S Filtre **/
+
+    .container-filter {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+    }
+
+    .container-filter .button-filter {
+        width: 100%;
+        text-align: center;
+        padding: 10px 0;
+        box-sizing: border-box;
+    }
+
 }
\ No newline at end of file
diff --git a/images/activites/Thumbs.db b/images/activites/Thumbs.db
new file mode 100644
index 00000000..b55018d7
Binary files /dev/null and b/images/activites/Thumbs.db differ
diff --git a/images/activites/paul-hermann.jpg b/images/activites/fort_pomegues.jpg
similarity index 100%
rename from images/activites/paul-hermann.jpg
rename to images/activites/fort_pomegues.jpg
diff --git a/images/activites/florian-wehde.jpg b/images/activites/notre_dame_garde.jpg
similarity index 100%
rename from images/activites/florian-wehde.jpg
rename to images/activites/notre_dame_garde.jpg
diff --git a/images/activites/kilyan-sockalingum.jpg b/images/activites/parc_calanques.jpg
similarity index 100%
rename from images/activites/kilyan-sockalingum.jpg
rename to images/activites/parc_calanques.jpg
diff --git a/images/activites/reno-laithienne.jpg b/images/activites/vieux-port.jpg
similarity index 100%
rename from images/activites/reno-laithienne.jpg
rename to images/activites/vieux-port.jpg
diff --git a/images/hebergements/Thumbs.db b/images/hebergements/Thumbs.db
new file mode 100644
index 00000000..70b11cc3
Binary files /dev/null and b/images/hebergements/Thumbs.db differ
diff --git a/images/hebergements/marcus-loke.jpg b/images/hebergements/auberge_canebiere.jpg
similarity index 100%
rename from images/hebergements/marcus-loke.jpg
rename to images/hebergements/auberge_canebiere.jpg
diff --git a/images/hebergements/nicate-lee.jpg b/images/hebergements/auberge_panier.jpg
similarity index 100%
rename from images/hebergements/nicate-lee.jpg
rename to images/hebergements/auberge_panier.jpg
diff --git a/images/hebergements/febrian-zakaria.jpg b/images/hebergements/hotel_chez_amina.jpg
similarity index 100%
rename from images/hebergements/febrian-zakaria.jpg
rename to images/hebergements/hotel_chez_amina.jpg
diff --git a/images/hebergements/annie-spratt.jpg b/images/hebergements/hotel_mer.jpg
similarity index 100%
rename from images/hebergements/annie-spratt.jpg
rename to images/hebergements/hotel_mer.jpg
diff --git a/images/hebergements/reisetopia.jpg b/images/hebergements/hotel_mouettes.jpg
similarity index 100%
rename from images/hebergements/reisetopia.jpg
rename to images/hebergements/hotel_mouettes.jpg
diff --git a/images/hebergements/fred-kleber.jpg b/images/hebergements/hotel_port.jpg
similarity index 100%
rename from images/hebergements/fred-kleber.jpg
rename to images/hebergements/hotel_port.jpg
diff --git a/images/logo/Thumbs.db b/images/logo/Thumbs.db
new file mode 100644
index 00000000..60f5f9e9
Binary files /dev/null and b/images/logo/Thumbs.db differ
diff --git a/index.html b/index.html
index 53512c75..37e454f0 100644
--- a/index.html
+++ b/index.html
@@ -1,36 +1,194 @@
 <!DOCTYPE html>
 <html lang="fr">
-
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <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" />
+        crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="stylesheet" href="./css/style.css">
 </head>
 
 <body>
     <div class="main-container">
-        <header></header>
-        <main>
-            <div class="hebergements-and-populaires">
-                <section class="hebergements">
+        <header>
+            <nav class="nav-header">
+                <a href="#">
+                    <img class="logo-Booki" src="images/logo/Booki.png" alt="logo-Booki">
+                </a>
+                <ul id="menu">
+                    <li><a href="#accommodation">Hébergements</a></li>
+                    <li><a href="#activity">Activités</a></li>
+                </ul>
+            </nav>
+            <div class="container-search">
+                <h1>Trouvez votre hébergement pour des vacances de rêve</h1>
+                <p>En plein centre-ville ou en pleine nature</p>
+
+                <form class="form-search" action="#" method="get">
+                    <div class="icon-pin">
+                        <i class="fa-solid fa-location-dot"></i>
+                    </div>
+                    <input class="input-search" type="text" placeholder="Votre prochaine destination" name="destination" value="Marseille, Provence">
+                    <button class="button-search" type="submit">Rechercher</button>
+                    <button class="button-search-mobile" type="submit">
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </button>
+                </form>
+                
+                <div class="container-filter">
+                    <h3>Filtres</h3>
+                    <button class="button-filter" type="button">
+                        <i class="fa-solid fa-money-bill-wave fa-lg"></i>
+                        Économique
+                    </button>
+                    <button class="button-filter" type="button">
+                        <i class="fa-solid fa-person fa-lg"></i>
+                        Familial
+                    </button>
+                    <button class="button-filter" type="button">
+                        <i class="fa-solid fa-heart fa-lg"></i>
+                        Romantique
+                    </button>
+                    <button class="button-filter" type="button">
+                        <i class="fa-solid fa-fire fa-lg"></i>
+                        Nos Pépites
+                    </button>
+                </div>
 
+                <div class="container-info">
+                    <i class="fa-solid fa-info fa-xs"></i>
+                    <p>Plus de 500 logements sont disponibles dans cette ville</p>
+                </div>
+            </div>
+        </header>
+        <main>
+            <!--*************************   HÉBERGEMENTS   *************************-->
+            <div class="accommodation-and-popular">
+                <section id="accommodation">
+                    <h2 class="section-title">Hébergements à Marseille</h2>
+                    <div class="accommodation-cards">
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/hotel_port.jpg" alt="Photo d'une chambre blanche et grise avec deux lits simples de l'hôtel du port">
+                                <div class="card-content">
+                                    <h3 class="card-title">Hôtel du port</h3>
+                                    <p class="card-subtitle">Nuit à partir de 52<span class="euro">€</span></p>
+                                    <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/hebergements/hotel_chez_amina.jpg" alt="Photo d'une chambre de l'hôtel Chez Amina avec deux lits simples, un bureau et une télévision">
+                                <div class="card-content">
+                                    <h3 class="card-title">Hôtel Chez Amina</h3>
+                                    <p class="card-subtitle">Nuit à partir de 96<span class="euro">€</span></p>
+                                    <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/hebergements/hotel_mouettes.jpg" alt="Photo d'une chambre de l'hôtel Les mouettes avec un lit double et un placard de rangement">
+                                <div class="card-content">
+                                    <h3 class="card-title">Hôtel Les mouettes</h3>
+                                    <p class="card-subtitle">Nuit à partir de 76<span class="euro">€</span></p>
+                                    <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/hebergements/hotel_mer.jpg" alt="Photo d'une chambre de l'hôtel de la mer avec un lit double">
+                                <div class="card-content">
+                                    <h3 class="card-title">Hôtel de la mer</h3>
+                                    <p class="card-subtitle">Nuit à partir de 46<span class="euro">€</span></p>
+                                    <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/hebergements/auberge_canebiere.jpg" alt="Photo d'une chambre de l'auberge la canebière avec deux lits superposés">
+                                <div class="card-content">
+                                    <h3 class="card-title">Auberge La Canebière</h3>
+                                    <p class="card-subtitle">Nuit à partir de 25<span class="euro">€</span></p>
+                                    <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/hebergements/auberge_panier.jpg" alt="Photo d'une chambre de l'auberge le panier avec quatre lits superposés">
+                                <div class="card-content">
+                                    <h3 class="card-title">Auberge Le Panier</h3>
+                                    <p class="card-subtitle">Nuit à partir de 23<span class="euro">€</span></p>
+                                    <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>
+                    <h3 class="accomodation-subtitle"><a href="#">Afficher plus</a></h3>
                 </section>
-                <section class="populaires">
-                    <div class="populaires-title">
+
+                <!--*************************   POPULAIRES   *************************-->
+
+                <section id="popular">
+                    <div class="popular-title">
                         <h2 class="section-title">Les plus populaires</h2>
-                        <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
+                        <i class="fa-solid fa-chart-line icone-chart" aria-hidden="true"></i>
                     </div>
-                    <div class="populaires-cards">
+                    <div class="popular-cards">
                         <a href="#">
                             <article class="card">
-                                <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <img src="./images/hebergements/emile-guillemot.jpg" alt="Photo 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>
@@ -49,7 +207,7 @@ <h3 class="card-title">Hôtel Le soleil du matin</h3>
                         </a>
                         <a href="#">
                             <article class="card">
-                                <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <img src="./images/hebergements/aw-creative.jpg" alt="Photo de la chambre d'hôte au coeur de l'eau montrant un lit double dans une chambre spacieuse">
                                 <div class="card-content">
                                     <div class="card-txt">
                                         <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
@@ -68,7 +226,7 @@ <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
                         </a>
                         <a href="#">
                             <article class="card">
-                                <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Photo d'une chambre de l'hôtel bleu et blanc montrant un lit double dans une pièce très épuré">
                                 <div class="card-content">
                                     <div class="card-txt">
                                         <h3 class="card-title">Hôtel Bleu et Blanc</h3>
@@ -88,8 +246,66 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
+
+            <!--*************************   ACTIVITÉS À MARSEILLE   *************************-->
+
+            <section id="activity">
+                <h2 class="section-title">Activités à Marseille</h2>
+                <div class="activity-cards">
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/vieux-port.jpg" alt="Photo du vieux-port">
+                            <h3 class="card-title">Vieux-Port</h3>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/fort_pomegues.jpg" alt="Photo du fort de pomègues">
+                            <h3 class="card-title">Fort de Pomègues</h3>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/parc_calanques.jpg" alt="Photo du parc national des calanques">
+                            <h3 class="card-title">Parce national des Calanques</h3>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/notre_dame_garde.jpg" alt="Photo de notre dame de la garde">
+                            <h3 class="card-title">Notre-Dame-de-la-Garde</h3>
+                        </article>
+                    </a>
+                </div>
+            </section>
         </main>
-        <footer></footer>
+
+        <!--*************************   FOOTER   *************************-->
+
+        <footer>
+            <div class="footer-column">
+                <h3>À propos</h3>
+                <ul class="footer-list">
+                    <li><a href="#">Fonctionnement du site</a></li>
+                    <li><a href="#">Conditions générales</a></li>
+                    <li><a href="#">Données et confidentialité</a></li>
+                </ul>
+            </div>
+            <div class="footer-column">
+                <h3>Nos Hébergements</h3>
+                <ul class="footer-list">
+                    <li><a href="#">Charte qualité</a></li>
+                    <li><a href="#">Proposer votre hôtel</a></li>
+                </ul>
+            </div>
+            <div class="footer-column">
+                <h3>Assistance</h3>
+                <ul class="footer-list">
+                    <li><a href="#">Centre d'aide</a></li>
+                    <li><a href="#">Nous contacter</a></li>
+                </ul>
+            </div>
+        </footer>
     </div>
 </body>