diff --git a/README.md b/README.md
index cf39555f..59c5f956 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,49 @@
-# booki-starter-pack
+![Booki](/images/logo/Booki@3x.png)
+# Project for openClassRoom #3
+
+## Presentation
+
+Booki is a french start-up. As a Junior dveloper, i have in charge to develop a website who allows user to find accomodations or discover activities in the city of their choice !
+I was responsible for integrating the interface of the website using HTML & CSS. To achieve this i worked in collaboration with Sarah the CTO and Loïc, the UI Designer.
+
+Vous êtes chargé d'intégrer l'interface du site avec du code HTML et CSS. Pour cela, vous travaillez en étroite collaboration avec Sarah, la CTO, et Loïc, l’UI designer. 
+
+## Process.
+
+I first started by studying all the mock-up Loîc provided me.
+
+![Capture d'écran 2023-06-30 213126](https://github.com/Kalow26/booki/assets/21316407/96389a8b-0e27-4ed8-9035-390ff90dbe07)
+
+I had to develop the *Mobile*, *Tablet* and *Desktop* version of the site 👍
+
+### The Website is Divided in 3 sections
+
+1. the Navbar
+2. Hero Section
+3. The accomodations and Popular Section
+4. The activities available in the city section
+5. The footer
+
+The main objective of the project was to improve my HTML semantic, and work with basic CSS.
+
+<mark>I first started with the desktop version</mark>
+![Capture d'écran 2023-06-30 214614](https://github.com/Kalow26/booki/assets/21316407/6504eecd-daec-49f6-81b2-b39de9ca1148)
+
+<mark>the tablet version</mark>
+![Capture d'écran 2023-06-30 215401](https://github.com/Kalow26/booki/assets/21316407/eccd6248-ed2d-4b3d-8308-8ce60c5ee8a7)
+
+<mark>the mobile version</mark>.
+![Capture d'écran 2023-06-30 215510](https://github.com/Kalow26/booki/assets/21316407/f097bafb-89d3-45e0-81c4-0646027dca6c)
+
+### Code
+
+I tried my best to use the best HTML tags and comment the most my code. My goal was to have the cleanest code and start working with good practicies.
+
+I use the BEM methodology for the CSS
+![Capture d'écran 2023-06-30 215840](https://github.com/Kalow26/booki/assets/21316407/eeb680eb-a1fb-4371-ba1f-59203a8ad8a6)
+
+This is a great way to organise your CSS properly, but i think this method is better in use with SCSS.
+By the way it was a good project to develop, i'm pretty happy with the result.
+And the final version is completely responsive and match perfectly all the mockups !
+
+Hope your enjoy, and see you for my next Project 👌
diff --git a/css/style.css b/css/style.css
index 4399d5fa..42eaeb61 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,162 +1,539 @@
 /****** General ***********/
-* {
-    font-family: 'Raleway', sans-serif;
-}
-
 :root {
     --main-color: #0065FC;
     --main-bg-color: #F2F2F2;
     --filter-bg-color: #DEEBFF;
 }
 
-.fa-solid {
-    color: var(--main-color);
+* {
+    font-family: 'Raleway', sans-serif;
+    margin: 0;
+    padding: 0;
 }
 
+
 body {
     display: flex;
     justify-content: center;
 }
 
-.main-container {
+.main {
     width: 100%;
     max-width: 1440px;
     padding: 0 50px;
     box-sizing: border-box;
 }
 
-.section-title {
-    margin: 0;
-    font-size: 22px;
-}
-
 .card {
     background-color: white;
     border-radius: 20px;
     padding: 5px;
     filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
+    display: flex;
+    width: 100%;
 }
 
-.card img {
+.cards__img {
+    width: 33%;
+    height: 136px;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
     object-fit: cover;
 }
 
-.card-title {
-    font-size: 16px;
+.card--col {
+    flex-direction: column;
+    gap: 8px;
 }
 
-.euro {
+.cards__img--col {
+    width: 100%;
+    height: 136px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    object-fit: cover;
+}
+
+.card__title {
+    margin : 20px 19px;
     font-weight: 700;
 }
 
-.neutralStar {
-    color: var(--main-bg-color)
+.card__subtitle {
+    padding: 4px 0;
+    font-size: 14px;
 }
 
-/****** Hebergements And Populaires ***********/
-.hebergements-and-populaires {
+.card__content {
+    padding-left: 15px;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
 }
+.card__rating {
+    margin-bottom: 5px;
+}
 
-.hebergements-and-populaires section {
-    background-color: var(--main-bg-color);
-    border-radius: 20px;
-    padding: 30px;
-    box-sizing: border-box;
+.euro {
+    font-weight: 700;
 }
 
-/****** Hebergements ***********/
-.hebergements {
-    width: 65%;
+.neutral-star {
+    color: var(--main-bg-color) !important;
 }
 
-/****** Populaires ***********/
-.populaires {
-    width: 32%;
+h1, h2 {
+    font-weight: 700;
+    font-size: 22px;
+    margin-bottom: 33px;
+}
+
+.lead__text {
+    font-size: 16px;
+}
+
+.lead__text--bold {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
 }
 
-.populaires-title {
+ul {
+    list-style: none;
+}
+
+/****** General Media queries ***********/
+
+/* Medium devices (tablets, less/equal than 1024px) */
+@media (max-width: 1024px) {
+    .card__title {
+        font-size: 14px;
+    }
+
+    .card__subtitle {
+        font-size: 13px;
+    }
+}
+
+/* Small devices (phones, less than 768px) */
+@media (max-width: 767.98px) {
+    .main {
+        padding: 0;
+        width: 100vw;
+    }
+}
+
+/****** Header ***********/
+
+.header {
     display: flex;
+    width: 100%;
     justify-content: space-between;
-    align-items: center;
 }
 
-.populaires-cards .card {
+    .header__logo {
+        width: 61.09px;
+        height: 19px;
+        padding: 30px 0;
+    }
+
+
+.header__nav {
     display: flex;
-    margin-top: 33px;
+    gap: 68px;
+    align-items: flex-start;
 }
 
-.populaires-cards img {
-    width: 33%;
-    height: 136px;
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
+    .header__nav__button {
+        display: flex;
+        flex-direction: column-reverse;
+    }
+
+    .header__nav__link {
+        padding-top: 15px;
+    }
+
+    .header__nav__line {
+        height: 2px;
+        background-color: var(--main-bg-color);
+    }
+
+    .header__nav__link:hover + .header__nav__line  {
+        color: var(--main-color);
+        background-color: var(--main-color);
+    }
+
+    .header__nav__link:hover, .header__nav__link:hover::before {
+        transform-origin: left;
+        color: var(--main-color);
+        transform: scaleX(1);
+        
+    }
+
+/* ********** Header section Media queries ********** */
+/* Small devices (phones, less than 768px) */
+
+@media (max-width: 767.98px) {
+
+    .header {
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .header__nav {
+        width: 100%;
+        display:grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .header__nav__link {
+        padding-top: 15px;
+    }
+
+    .header__nav__button {
+        text-align: center;
+        flex-direction: column;
+    }
+
+    .header__nav__link:hover + .header__nav__line  {
+        color: var(--main-color);
+        background-color: var(--main-color);
+    }
+    
+    .header__nav__line {
+        margin-top: 15px;
+        width: 100%;
+    }
+
 }
 
-.populaires-cards .card-content {
-    width: 67%;
-    padding-left: 15px;
+/****** Hero Section ***********/
+
+.hero {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
+    gap: 35px;
+    margin-block: 30px 35px;
+}
+
+    .hero__headline__title {
+        margin-bottom: 8px;
+    }
+
+    .hero__searchbar__form {
+        display: flex;
+    }
+
+    .hero__searchbar__icon {
+        background-color: var(--main-bg-color);
+        color: #000;
+        display: flex;
+        width: 50px;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+    }
+
+    .hero__searchbar__input {
+        border: 2px solid var(--main-bg-color);
+        padding: 14px;
+        text-align: center;
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    .hero__searchbar__input:focus {
+        outline: none;
+    }
+
+    .hero__searchbar__btn {
+        padding: 14px 16px;
+        background-color: var(--main-color);
+        border : none;
+        color: var(--main-bg-color);
+        font-size: 18px;
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+        font-weight: 700;
+        cursor: pointer;
+    }
+
+    .hero__searchbar__icon--blue {
+        background-color: var(--main-color);
+        color: var(--main-bg-color);
+        display: none;
+        margin-left: -9px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 15px;
+        width: 50px;
+        font-size: 18px;
+        cursor: pointer;
+    }
+
+    .hero__filter {
+        display: flex;
+        gap: 15px;
+        flex-wrap: wrap ;
+        align-items: center;
+    }
+
+    .hero__filter__title {
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    .hero__filter__btn {
+        padding: 15px 19px;
+        font-size: 17px;
+        font-weight: 700;
+        background-color: #fff;
+        border: 2px solid var(--main-bg-color);
+        border-radius: 50px;
+        transition: all .4s;
+        cursor: pointer;
+    }
+
+    .hero__filter__btn:hover {
+        background-color: var(--filter-bg-color);
+    }
+
+    .hero__filter__icon {
+        padding-right : 14px;
+        font-size: 17px;
+        color: var(--main-color);
+    }
+
+    .hero__info {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+    }
+
+    .hero__info__icon {
+        padding:7px 12px;
+        border: solid 2px var(--main-bg-color);
+        border-radius: 50%;
+        color: var(--main-color);
+    }
+
+
+    /* ********** Hero section Media queries ********** */
+    /* Small devices (phones, less than 768px) */
+
+@media (max-width: 767.98px) {
+    .hero {
+        align-items: center;
+        padding : 30px 20px 35px;
+        margin: 0;
+    }
+
+    .hero__filter {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .hero__filter__btn {   
+        font-size: 14px;
+    }
+
+    .hero__filter__buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        row-gap: 20px;
+        column-gap: 10px;
+    }
+
+    .hero__searchbar__icon--blue {
+        display: flex;
+    }
+
+    .hero__searchbar__btn {
+       display: none;
+    }
+}
+
+/****** Hebergements And Populaires section ***********/
+
+
+.hebergements-and-populaires {
+    display: flex;
     justify-content: space-between;
-    box-sizing: border-box;
 }
 
-.populaires-cards .card-title {
-    margin-top: 10px;
-    margin-bottom: 4px;
+.hebergements, .populaires {
+    background-color: var(--main-bg-color);
+    border-radius: 20px;
+    padding: 30px;
+    box-sizing: border-box;
 }
 
-.populaires-cards .card-subtitle {
-    margin: 0;
+/****** Hebergements ***********/
+
+
+.hebergements {
+    width: 65%;
 }
 
-.populaires-cards .card-rating {
-    margin-bottom: 5px;
+    .hebergements__cards {
+        display: grid;
+        grid-template-columns: repeat(3,1fr);
+        gap: 30px;
+    }
+
+    .hebergements__see-more {
+        padding : 35px 0;
+    }
+
+/****** Populaires ***********/
+
+
+.populaires {
+    width: 32%;  
 }
 
+.populaires__cards {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
 
+    .populaires__title {
+        display: flex;
+        justify-content: space-between;
+    }
 
+        .fa-star {
+            color: var(--main-color);
+        }
 
-/* Le code ci-dessous correspond à la version responsive uniquement */
+        .card-rating__icon {
+            color: var(--main-color);
+        }
 
-/****** Media queries ***********/
+/****** Hébergements et populaires Media queries ***********/
 /* Medium devices (tablets, less/equal than 1024px) */
+
 @media (max-width: 1024px) {
-    .hebergements-and-populaires {
-        flex-direction: column;
+        .hebergements-and-populaires {
+            flex-direction: column;
+        }
+        
+        .hebergements {
+            width: 100%;
+        }
+        
+        .populaires {
+            width: 100%;
+            margin-top: 50px;
+        }
+        
+        .populaires__cards {
+            flex-direction: row;
+            gap: 20px;
+        }
+        
+        .populaires__cards .card {
+            width: 30%;
+        }
     }
 
-    .hebergements {
-        width: 100%;
-    }
+/* Small devices (phones, less than 768px) */
 
-    .populaires {
-        width: 100%;
-        margin-top: 50px;
+@media (max-width: 767.98px) {
+        .hebergements-and-populaires {
+            flex-direction: column-reverse;
+        }
+    
+        .hebergements {
+            background-color: #fff  !important;
+        }
+
+        .hebergements__see-more {
+            padding: 15px;
+        }
+    
+        .hebergements-and-populaires section  {
+            border-radius: 0;
+        }
+    
+        .populaires {
+            margin-top: 0;
+        }
+    
+        .populaires__cards .card {
+            width: 100%;
+        }
+    
+        .hebergements__cards {
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
     }
 
-    .populaires-cards {
+/****** Activités ***********/
+
+
+.city-activities {
+  padding: 30px;
+  margin-bottom: 35px;
+}
+    .city-activities__cards {
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+        gap: 30px;
     }
 
-    .populaires-cards .card {
-        width: 30%;
+        .city-activities__card {
+            padding: 0;
+        }
+
+/****** Activités Media queries ***********/
+/* Small devices (phones, less than 768px) */
+
+@media (max-width: 767.98px) {
+        .city-activities__cards, .populaires__cards {
+            flex-direction: column;
+            gap: 15px;
+        }
     }
 
-    .populaires-cards .card-title {
-        font-size: 14px;
+/****** Footer ***********/
+
+.footer {
+    background-color: var(--main-bg-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 20px 15px;
+}
+
+    .footer__section {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
     }
 
-    .populaires-cards .card-subtitle {
-        font-size: 13px;
+    .footer__section ul li {
+        margin-top: 15px;
     }
-}
 
+/****** Footer Media queries ***********/
 /* Small devices (phones, less than 768px) */
+
 @media (max-width: 767.98px) {
-    /* ... */
+        .footer {
+            flex-direction: column;
+            padding: 30px 30px;
+        }
+
+        .footer__section:not(:first-child) {
+            margin-top: 50px
+        }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 2f90d086..453fe629 100644
--- a/index.html
+++ b/index.html
@@ -15,27 +15,74 @@
 </head>
 
 <body>
-    <div class="main-container">
-        <header></header>
+    <div class="main">
+        <header class="header">
+            
+                <img src="./images/logo/Booki.png" alt="Logo du site Booki" class="header__logo">
+           
+            <nav class="header__nav">
+                <div class="header__nav__button">
+                    <a href="#" class="header__nav__link">Hébergements</a>
+                    <div class="header__nav__line"></div>
+                </div>
+                <div class="header__nav__button">
+
+                    <a href="#" class="header__nav__link">Activités</a>
+                    <div class="header__nav__line"></div>
+                </div>
+            </nav>
+
+
+        </header>
         <main>
-            <div class="hebergements-and-populaires">
-                <section class="hebergements">
 
+<!-- HERO SECTION -->
+
+            <div class="hero">
+                <section class="hero__headline">
+                    <h1 class="hero__headline__title">Trouvez votre hébergement pour des vacances de rêve</h1>
+                    <p class="lead__text">En plein centre-ville ou en pleine nature</p>
                 </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>
+                
+                    <form class="hero__searchbar__form">
+                            <i class="fa-solid fa-location-dot hero__searchbar__icon" aria-hidden="true"></i>
+                            <input type="text" id="city" name="city_name" value="Marseille, France"
+                            class="hero__searchbar__input">
+                            <button class="hero__searchbar__btn">Rechercher</button><i class="fa-solid fa-magnifying-glass hero__searchbar__icon--blue" aria-hidden="true"></i>
+                    </form>
+           
+                <section class="hero__filter">
+                    <h3 class="hero__filter__title">
+                        Filtres
+                    </h3>
+                    <div class="hero__filter__buttons">
+                        <button class="hero__filter__btn"><i class="fa-solid fa-money-bill-wave hero__filter__icon" aria-hidden="true"></i>&Eacute;conomique</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-person hero__filter__icon" aria-hidden="true"></i>Familial</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-heart hero__filter__icon" aria-hidden="true"></i>Romantique</button>
+                        <button class="hero__filter__btn"><i class="fa-solid fa-fire hero__filter__icon" aria-hidden="true"></i>Nos pépites</button>
                     </div>
-                    <div class="populaires-cards">
-                        <article class="card">
-                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit">
-                            <div class="card-content">
+                </section>
+                <div class="hero__info">
+                    <i class="fa-solid fa-info hero__info__icon" aria-hidden="true"></i>
+                    <p class="lead__text">Plus de 500 logements sont disponibles dans cette ville</p>
+                </div>
+
+            </div>
+
+<!-- HEBERGEMENTS ET POPULAIRES -->
+
+            <div class="hebergements-and-populaires">
+                <section class="hebergements">
+                        <h2>Hébergements à Marseille</h2>
+                    <div class="hebergements__cards">
+                        <article class="card card--col">
+                            <img src="./images/hebergements/fred-kleber.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
+                            <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>
+                                    <h3 class="lead__text ">Hôtel du port</h3>
+                                    <p class="card__subtitle">Nuit à partir de 52<span class="euro">€</span></p>
                                 </div>
-                                <div class="card-rating">
+                                <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>
@@ -45,14 +92,14 @@ <h3 class="card-title">Hôtel Le soleil du matin</h3>
                                 </div>
                             </div>
                         </article>
-                        <article class="card">
-                            <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit">
-                            <div class="card-content">
+                        <article class="card card--col">
+                            <img src="./images/hebergements/marcus-loke.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
+                            <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>
+                                    <h3 class="lead__text ">Auberge La Canebière</h3>
+                                    <p class="card__subtitle">Nuit à partir de 25<span class="euro">€</span></p>
                                 </div>
-                                <div class="card-rating">
+                                <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>
@@ -62,14 +109,65 @@ <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
                                 </div>
                             </div>
                         </article>
-                        <article class="card">
-                            <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit">
-                            <div class="card-content">
+                        <article class="card card--col">
+                            <img src="./images/hebergements/reisetopia.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
+                            <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>
+                                    <h3 class="lead__text ">Hôtel Les mouettes</h3>
+                                    <p class="card__subtitle">Nuit à partir de 76<span class="euro">€</span></p>
                                 </div>
-                                <div class="card-rating">
+                                <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>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/annie-spratt.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text">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>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/nicate-lee.jpg" alt="Image de chambre d'hôtel" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">Auberge Le Panier</h3>
+                                    <p class="card__subtitle">Nuit à partir de 23<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>
+                        <article class="card card--col">
+                            <img src="./images/hebergements/febrian-zakaria.jpg" alt="IImage de chambre d'hôtel" class="cards__img--col">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">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>
@@ -78,12 +176,140 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                                     <span class="sr-only">Note de 4 sur 5</span>
                                 </div>
                             </div>
+                        </article>                       
+                    </div>
+                    <div class="hebergements__see-more">
+                        <p class="lead__text--bold">
+                            Afficher Plus
+                        </p>
+                    </div>
+                </section>
+                <section class="populaires">
+                    <div class="populaires__title">
+                        <h2>Les plus populaires</h2>
+                        <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
+                    </div>
+                    <div class="populaires__cards">
+                        <article class="card">
+                            <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de chambre d'hôtel" class="cards__img">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">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-starn" aria-hidden="true"></i>
+                                    <span class="sr-only">Note de 4 sur 5</span>
+                                </div>
+                            </div>
+                        </article>
+                        <article class="card">
+                            <img src="./images/hebergements/aw-creative.jpg" alt="Image de chambre d'hôtel"
+                            class="cards__img">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text ">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-starn" 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>
+                        <article class="card">
+                            <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de chambre d'hôtel"
+                            class="cards__img">
+                            <div class="card__content">
+                                <div class="card-txt">
+                                    <h3 class="lead__text">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>
                     </div>
                 </section>
             </div>
+
+            <section class="city-activities">
+                <h2 class="title">Activités à Marseille</h2>
+                <div class="city-activities__cards">
+                    <div class="card city-activities__card card--col">
+                        <img src="./images/activites/reno-laithienne.jpg" alt="photo du vieux port" class="cards__img--col">
+                        <div class="card__content">
+                            <p class="lead__text card__title">Vieux-Port</p>
+                        </div>
+
+                    </div>
+                    <div class="card city-activities__card card--col">
+                        <img src="./images/activites/paul-hermann.jpg" alt="photo du port de promègues" class="cards__img--col">
+                        <p class="lead__text card__title">Fort de Pomègues</p>
+                    </div>
+                    <div class="card city-activities__card card--col">
+                        <img src="./images/activites/kilyan-sockalingum.jpg" alt="Parc national des calanques" class="cards__img--col">
+                        <p class="lead__text card__title">Parc national des Calanques</p>
+                    </div>
+                    <div class="card city-activities__card card--col">
+                        <img src="./images/activites/florian-wehde.jpg" alt="Notre dame de la garde" class="cards__img--col">
+                        <p class="lead__text card__title">Notre-Dame-de-la-Garde</p>
+                    </div>
+                </div>
+            </section>
         </main>
-        <footer></footer>
+        <footer class="footer">
+            <section class="footer__section">
+                <h3 class="lead__text--bold">&Agrave; propos</h3>
+                <ul>
+                    <li>
+                        <a href="#" class="nav__link">Fonctionnement du site</a>    
+                    </li>
+                    <li>
+                        <a href="#" class="nav__link">Consitions générales</a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav__link">Données et confidentialité</a>
+                    </li>
+                </ul>            
+            </section>
+            <section class="footer__section">
+                <h3>Nos hébergements</h3>
+                <ul>
+                    <li>
+                        <a href="#" class="nav__link">Charte qualité</a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav__link">Proposer votre hôtel</a>
+                    </li>
+                </ul>          
+            </section>
+            <section class="footer__section">
+                <h3>Assistance</h3>
+                <ul>
+                    <li>
+                        <a href="#" class="nav__link">Centre d'aide</a>
+                    </li>
+                    <li>
+                          <a href="#" class="nav__link">Nous contacter</a>
+                    </li>
+                </ul>       
+            </section>
+        </footer>
     </div>
 </body>