diff --git a/css/style.css b/css/style.css
index f6c96c4d..713b6c4f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -21,7 +21,7 @@ body {
 .main-container {
     width: 100%;
     max-width: 1440px;
-    padding: 0 50px;
+    padding: 50px 50px;
     box-sizing: border-box;
 }
 
@@ -30,7 +30,156 @@ a {
     text-decoration: none;
 }
 
-.section-title {
+/******Header******/
+
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: -60px;
+}
+
+.logo {
+    padding-top: 40px;
+    width: 60px; 
+}
+
+/******Navigation******/
+
+.button-header {
+    display: flex;
+    gap: 60px;
+    padding-top: 20px;
+    border-top: 2px solid transparent;
+
+}
+
+.button-header a:hover{
+    cursor: pointer;
+    color: var(--main-color);
+    border-top: 2px var(--main-color) solid;
+    padding-top: 18px;
+    margin-top: -20px;
+}
+
+/******hébergements******/
+
+.hebergements-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.hebergements-container h1{
+    margin-top: 60px;
+    margin-bottom: -5px;
+    font-size: x-large;
+}
+
+.hebergements-container p{
+    margin-bottom: 30px;
+}
+
+.hebergements-search{
+    display: flex;
+    flex-direction: row;    
+}
+
+.fa-location-dot{
+    color: black;
+    background-color: var(--main-bg-color);
+    padding : 15px 15px 15px 18px;
+    border-radius: 13px 0px 0px 13px;
+}
+
+#booki-search{
+    padding: 13px;
+    width: 150px;
+    border-top: 2px var(--main-bg-color) solid;
+    border-bottom: 2px var(--main-bg-color) solid;
+    border-left: var(--main-bg-color) solid;
+    border-right: white; 
+    text-align: center;
+}
+
+#booki-search::placeholder{
+    font-weight: bold;
+    font-size: 15px;
+    color: black;
+}
+
+.search-button{
+    color: white;
+    background-color: var(--main-color);
+    padding: 15px;
+    border-radius: 0px 13px 13px 0;
+}
+
+.fa-magnifying-glass{
+    display: none;
+}
+
+.hebergements-filters{
+    display: flex;
+    font-weight: bold;
+    margin-top: 50px;
+    margin-bottom: 20px;
+}
+
+.filters{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+.filter-title{
+    margin-top: 15px;
+}
+
+.filter-text{
+    display: flex;
+    margin-left: 10px;
+    border: 2px var(--main-bg-color) solid;
+    padding : 15px;
+    border-radius: 40px;
+}
+
+.filter-text:hover{
+    background-color: var(--filter-bg-color);
+    cursor: pointer;
+}
+
+.filter-text .fa-solid{
+    font-size: 20px;
+    margin-left: 5px;
+}
+
+.filter-text span{
+    margin-left: 10px;
+} 
+
+.filter-info{
+    display: flex;
+    align-items: first baseline;
+    gap: 10px;
+}
+
+.filter-info .fa-solid{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px var(--main-bg-color)solid;
+    margin-top: 10px;
+    border-radius: 50%;
+    height: 25px;
+    width: 25px;
+    font-size: 12px;
+    flex-shrink: 0;
+}
+
+
+/******Main******/
+
+#section-title {
     margin: 0;
     font-size: 22px;
 }
@@ -58,10 +207,12 @@ a {
     color: var(--main-bg-color)
 }
 
+
 /****** Hebergements And Populaires ***********/
 .hebergements-and-populaires {
     display: flex;
     justify-content: space-between;
+    margin-top: 10px;
 }
 
 .hebergements-and-populaires section {
@@ -76,6 +227,69 @@ a {
     width: 65%;
 }
 
+.hebergements h2{
+    margin-top: -1px;
+}
+
+.hebergement-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 25px;
+    margin-right: -30px;
+}
+
+.hebergement-cards .card{
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    height: 215px;
+}
+
+.hebergement-cards a{
+    width: 30%;
+}
+
+.hebergement-cards img{
+    width: 100%;
+    height: 120px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    object-fit: cover;
+}
+
+.hebergement-cards .card-content{
+    max-width: 100%;
+    padding-left: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.hebergement-cards .card-title{
+    margin-top: 8px;
+    margin-bottom: 0px;
+    padding-bottom: 9px;
+    display: flex;
+}
+
+.hebergement-cards .card-subtitle{
+    margin-top: 0px;
+    margin-bottom: 5px;
+}
+
+.hebergement-cards .card-rating{
+    margin-bottom: 0px;
+}
+
+
+#afficher-plus{
+    margin-top: 30px;
+    padding-top: 10px;
+}
+
+
 /****** Populaires ***********/
 .populaires {
     width: 32%;
@@ -85,6 +299,7 @@ a {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-top: -20px;
 }
 
 .populaires-cards .card {
@@ -121,7 +336,78 @@ a {
     margin-bottom: 5px;
 }
 
+/****** Activités à Marseille ********/
+
+#activites {
+    margin-top: 50px;
+    margin-left: 30px;
+    margin-bottom: 30px;
+}
+
+.activites-cards{
+    display: flex;
+}
+
+.activites-cards a{
+    width: 25%;
+    margin-left: 30px;
+    margin-right: -40px;
+}
+
+.activites-cards .card{
+    width: 86%;
+    margin: 0px;
+    padding: 0px;
+}
+
+.activites-cards img{
+    width: 100%;
+    height: 380px;
+    border-radius: 20px 20px 0px 0px;
+    display: flex;
+    object-fit: cover;
+}
+
+.activites-cards .card-title{
+    margin-left: 15px;
+    padding-bottom: 20px;
+    height: 20px;
+}
+
+
+/****** Footer ***********/
+
+.footer-container {
+    display: flex;
+    background-color: var(--main-bg-color);
+    margin-top: 30px;
+    margin-bottom: -60px;
+}
+
+.informations-column{
+    display: flex;
+    flex-direction: row;
+    gap: 80%;
+    padding-left: 25px;
+    width: 30%;
+}
+
+.informations {
+    gap: 30px;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+}
+
+.informations h3{
+    margin-bottom: 0px;
+    width: 180%;
+}
 
+.informations span{
+    margin-top: -15px;
+    width: 180%;
+}
 
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
@@ -129,14 +415,57 @@ a {
 /****** Media queries ***********/
 /* Medium devices (tablets, less/equal than 1024px) */
 @media (max-width: 1024px) {
+
+    /*navigation*/
+    .button-header{
+        font-size: 15px;
+        gap : 50px;
+    }
+
+    /*filters*/ 
+    .hebergements-container h1{
+        font-size: 20px;
+    }
+
+    .hebergements-container p{
+        font-size: 14px;
+    }
+
+    #booki-search{
+        width: 140px;
+    }
+
+    .hebergements-filters{
+        display: flex;
+        flex-direction: column; 
+        gap: 12px;
+        margin-top: 25px;
+    }
+
+    .filters{
+        margin-top: 20px;
+        margin-left: -10px;
+    }
+
+    /*main*/
+
     .hebergements-and-populaires {
         flex-direction: column;
     }
 
+    /*hébergements*/
+
     .hebergements {
         width: 100%;
     }
 
+    .hebergement-cards {
+       display: flex;
+       gap: 17px;
+    }
+
+    /*populaires*/
+
     .populaires {
         width: 100%;
         margin-top: 50px;
@@ -159,9 +488,230 @@ a {
     .populaires-cards .card-subtitle {
         font-size: 13px;
     }
+
+    /*Activités*/
+
+    .activites-cards .card{
+        width: 80%;
+    }
+
+    .activites-cards img{
+        width: 100%;
+        height: 180px;
+    }
+  
+    .activites-cards .card-title{
+        font-size: 15px;
+        margin-top: 25px;
+        height: 20px;
+        display: flex;
+        align-items: center; 
+    }
+
+    /*footer*/
+
+    .informations-column{
+        width: 25%;
+        font-size: 15px;
+    }
+
 }
 
 /* Small devices (phones, less than 768px) */
 @media (max-width: 767.98px) {
-    /* ... */
+    .main-container{
+        padding: 40px 15px;
+    }
+
+    .hebergements-and-populaires{
+        margin-left: -25px;
+        margin-right: -20px;
+        flex-direction: column-reverse;
+    }
+
+    .hebergements-and-populaires section{
+        border-radius: 0px;
+    }
+
+    /* header */
+    .header{
+        display: flex; /* Active Flexbox */
+        flex-direction: column; /* Aligne les éléments verticalement */
+        align-items: center; /* Centre les éléments horizontalement */
+        justify-content: center; /* Centre les éléments verticalement */
+        margin-left: -25px;
+        margin-right: -20px;
+    }
+
+    .logo{
+        margin-bottom: 20px;
+    }
+
+    /*Navigation*/
+
+    .button-header{
+        font-size: 18px;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+
+    .button-header a{
+        width: 50%;
+        text-align: center;
+        margin-right: -25px;
+        margin-left: -25px;
+        border-bottom: 2px #F2F2F2 solid;
+        padding-bottom: 14px;
+    }
+
+    .button-header a:hover{
+        border-top: white;
+        padding-top: 20px;
+        border-bottom: 2px var(--main-color) solid;
+        margin-bottom: 0px;
+    }
+
+    /*filters*/
+
+    .hebergements-container h1{
+        font-size: 24px;
+        margin-top: 25px;
+        margin-bottom: -10px;
+    }
+
+    .hebergements-container p{
+        font-size: 18px;
+    }
+
+    .search-button {
+        display: none;
+    }
+    
+    .hebergements-search{
+        width: 100%;
+    }
+
+    #booki-search{
+        width: 100%;
+        text-align: start;
+        margin-right: -10px;
+        padding-left: 25px;
+        
+    }
+
+    #booki-search::placeholder{
+        font-size: 17px;
+    }
+
+
+    .fa-magnifying-glass {
+        display: flex;
+        color: white;
+        background-color: var(--main-color);
+        border: 2px #0065FC solid;
+        padding: 15px;
+        border-radius: 15px;
+        filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.3));
+    }
+
+    .hebergements-filters{
+        margin-right: -20px;
+        box-sizing: border-box;
+    }
+
+    .filter-title{
+        margin-bottom: -20px;
+        font-size: 18px;
+    }
+
+    .filters{
+        flex-wrap: wrap;
+        width: 100%; 
+    }
+    
+    .filter-text{
+        margin: 5px;
+        width: calc(50% - 10px);
+        box-sizing: border-box;
+        white-space: nowrap;
+        overflow: hidden;
+        padding: 12px 15px;
+    }
+    
+    .filter-text .fa-solid{
+        font-size: 19px;
+        margin-left: 0;
+    }
+
+    .filter-text span{
+        font-size: 15px;
+    }
+
+
+    .filter-info .fa-solid{
+        margin-top: 20px;
+    }
+
+    /*hébergement*/
+
+    .hebergements{
+        background-color: white !important;
+    }
+
+    .hebergement-cards{
+        flex-direction: column;
+    }
+
+    .hebergement-cards .card{
+        width: 91%;
+    }
+
+    .hebergement-cards a{
+        width: 100%;
+    }
+
+
+    /*Populaires*/
+   
+    
+    .populaires-cards {
+        width: 100%;
+        flex-direction: column;
+        
+    }
+
+    .populaires-cards a{
+        width: 100%;
+    }
+
+    /*activités*/
+
+
+    .activites-cards {
+        flex-direction: column;
+        margin-left: -15px;
+    }
+
+    .activites-cards .card{
+        width: 100%;
+    }
+
+    .activites-cards a{
+        width: 90%;
+    }
+    
+
+    /*footer*/
+    .footer-container{
+        margin-left: -25px;
+        margin-right: -20px;
+    }
+
+
+    .informations-column{
+        flex-direction: column;
+        font-size: 15px;
+        width: 40%;
+    }
 }
\ No newline at end of file
diff --git a/images/activites/paul-hermann.jpg b/images/activites/fort-de-pomegues.jpg
similarity index 100%
rename from images/activites/paul-hermann.jpg
rename to images/activites/fort-de-pomegues.jpg
diff --git a/images/activites/florian-wehde.jpg b/images/activites/notre-dame-de-la-garde.jpg
similarity index 100%
rename from images/activites/florian-wehde.jpg
rename to images/activites/notre-dame-de-la-garde.jpg
diff --git a/images/activites/kilyan-sockalingum.jpg b/images/activites/parc-national-des-calanques.jpg
similarity index 100%
rename from images/activites/kilyan-sockalingum.jpg
rename to images/activites/parc-national-des-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/marcus-loke.jpg b/images/hebergements/auberge-la-canebiere.jpg
similarity index 100%
rename from images/hebergements/marcus-loke.jpg
rename to images/hebergements/auberge-la-canebiere.jpg
diff --git a/images/hebergements/nicate-lee.jpg b/images/hebergements/auberge-le-panier.jpg
similarity index 100%
rename from images/hebergements/nicate-lee.jpg
rename to images/hebergements/auberge-le-panier.jpg
diff --git a/images/hebergements/aw-creative.jpg b/images/hebergements/chambres-d-hotes-au-coeur-de-l-eau.jpg
similarity index 100%
rename from images/hebergements/aw-creative.jpg
rename to images/hebergements/chambres-d-hotes-au-coeur-de-l-eau.jpg
diff --git a/images/hebergements/febrian-zakaria2.jpg b/images/hebergements/hotel-bleu-et-blanc.jpg
similarity index 100%
rename from images/hebergements/febrian-zakaria2.jpg
rename to images/hebergements/hotel-bleu-et-blanc.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-de-la-mer.jpg
similarity index 100%
rename from images/hebergements/annie-spratt.jpg
rename to images/hebergements/hotel-de-la-mer.jpg
diff --git a/images/hebergements/fred-kleber.jpg b/images/hebergements/hotel-du-port.jpg
similarity index 100%
rename from images/hebergements/fred-kleber.jpg
rename to images/hebergements/hotel-du-port.jpg
diff --git a/images/hebergements/emile-guillemot.jpg b/images/hebergements/hotel-le-soleil-du-matin.jpg
similarity index 100%
rename from images/hebergements/emile-guillemot.jpg
rename to images/hebergements/hotel-le-soleil-du-matin.jpg
diff --git a/images/hebergements/reisetopia.jpg b/images/hebergements/hotel-les-mouettes.jpg
similarity index 100%
rename from images/hebergements/reisetopia.jpg
rename to images/hebergements/hotel-les-mouettes.jpg
diff --git a/index.html b/index.html
index 53512c75..ebbeb597 100644
--- a/index.html
+++ b/index.html
@@ -10,27 +10,187 @@
     <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>
+        <header class="header">
+            <img src="./images/logo/Booki.png" alt="Logo Booki" class="logo">
+        <nav class="button-header">
+                <a href="#hebergement">Hébergements</a>
+                <a href="#activites">Activités</a>
+        </nav>
+        </header>
+        <div class="hebergements-container">
+            <h1>Trouver votre hébergement pour des vacances de rêve</h1>
+                <p>En plein centre ville ou en pleine nature</p>
+                <form method="get" action="get">
+                    <div class="hebergements-search">
+                        <i class="fa-sharp-duotone fa-solid fa-location-dot" aria-hidden="true"></i>
+                        <input type="text" id="booki-search" name="booki-search" placeholder="Marseille, France">
+                        <span class="search-button"><strong>Rechercher</strong></span>
+                        <i class="fa-solid fa-magnifying-glass"></i>
+                    </div>
+                </form>
+                <div class="hebergements-filters">
+                    <div class="filter-title"> Filtres </div>
+                        <div class="filters">
+                            <div class="filter-text">
+                                <i class="fa-solid fa-money-bill-wave"></i>
+                                <span>Économique</span>
+                            </div>
+                            <div class="filter-text">
+                                <i class="fa-solid fa-person"></i>
+                                <span>Familial</span>
+                            </div>
+                            <div class="filter-text">
+                                <i class="fa-solid fa-heart"></i>
+                                <span>Romantique</span>
+                            </div>
+                            <div class="filter-text">
+                                <i class="fa-solid fa-fire"></i>
+                                <span>Nos pépites</span>
+                            </div>
+                        </div>
+                </div>
+                <div class="filter-info">
+                    <i class="fa-solid fa-info"></i>
+                    <p>Plus de 500 logements sont disponibles dans cette ville</p>
+                </div>
+        </div>
         <main>
             <div class="hebergements-and-populaires">
                 <section class="hebergements">
-
+                    <h2 id="hebergement">Hébergements à Marseille</h2>
+                    <div class="hebergement-cards">
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/hotel-du-port.jpg" alt="hotel du port">
+                                <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/hebergements/hotel-chez-amina.jpg" alt="hotel chez amina">
+                                <div class="card-content">
+                                    <div class="room-cards">
+                                        <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/hebergements/hotel-les-mouettes.jpg" alt="hotel les mouettes">
+                                <div class="card-content">
+                                    <div class="room-cards">
+                                        <h3 class="card-title">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>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/hotel-de-la-mer.jpg" alt="hotel de la mer">
+                                <div class="card-content">
+                                    <div class="room-cards">
+                                        <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/hebergements/auberge-la-canebiere.jpg" alt="auberge la canebiere">
+                                <div class="card-content">
+                                    <div class="room-cards">
+                                        <h3 class="card-title">Auberge La Canebière</h3>
+                                        <p class="card-subtitle">Nuit à partir de 25 <span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-subtitle">
+                                        <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-le-panier.jpg" alt="auberge le panier">
+                                <div class="card-content">
+                                    <div class="room-cards">
+                                        <h3 class="card-title">Auberge Le Panier</h3>
+                                        <p class="card-subtitle">Nuit à partir de 23 <span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-subtitle">
+                                        <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 id="afficher-plus">Afficher Plus</h3>
                 </section>
                 <section class="populaires">
                     <div class="populaires-title">
-                        <h2 class="section-title">Les plus populaires</h2>
+                        <h2>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/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <img src="./images/hebergements/hotel-le-soleil-du-matin.jpg" alt="hotel le matin du soleil">
                                 <div class="card-content">
                                     <div class="card-txt">
                                         <h3 class="card-title">Hôtel Le soleil du matin</h3>
@@ -49,7 +209,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/chambres-d-hotes-au-coeur-de-l-eau.jpg" alt="Chambres d’hôtes Au cœur de l’eau">
                                 <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 +228,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/hotel-bleu-et-blanc.jpg" alt="hotel bleu et blanc">
                                 <div class="card-content">
                                     <div class="card-txt">
                                         <h3 class="card-title">Hôtel Bleu et Blanc</h3>
@@ -88,9 +248,58 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
+            <div>
+                <h2 id="activites">Activités à Marseille</h2>
+                <div class="activites-cards">
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/vieux-port.jpg" alt="Vieux-port">
+                            <h3 class="card-title">Vieux-Port</h3>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/fort-de-pomegues.jpg" alt="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-national-des-calanques.jpg" alt="Parc national des Calanques">
+                            <h3 class="card-title">Parc national des Calanques</h3>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/notre-dame-de-la-garde.jpg" alt="Notre-Dame-De-la-Garde">
+                            <h3 class="card-title">Notre-Dame-De-la-Garde</h3>
+                        </article>
+                    </a>
+                </div>
+            </div>
         </main>
-        <footer></footer>
+        <footer>
+            <div class="footer-container">
+                <div class="informations-column">
+                    <div class="informations">
+                        <h3>À propos</h3>
+                        <span>Fonctionnement du site</span>
+                        <span>Conditions générales</span>
+                        <span>Données et confidentialité</span>
+                    </div>
+                    <div class="informations">
+                        <h3>Nos hébergements</h3> 
+                        <span>Charte qualité</span>
+                        <span>Proposer votre hôtel</span>
+                    </div>
+                    <div class="informations">
+                        <h3>Assistance</h3> 
+                        <span>Centre d'aide</span>
+                        <span>Nous contacter</span>
+                    </div>
+                </div>
+            </div>
+        </footer>
     </div>
 </body>
-
 </html>
\ No newline at end of file