diff --git a/css/style.css b/css/style.css
index f6c96c4d..4d7bd354 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,12 +1,13 @@
-/****** General ***********/
+/****** General ******/
 * {
-    font-family: 'Raleway', sans-serif;
+    font-family: "Raleway", sans-serif;
 }
 
 :root {
-    --main-color: #0065FC;
-    --main-bg-color: #F2F2F2;
-    --filter-bg-color: #DEEBFF;
+    --main-color: #0065fc;
+    --main-bg-color: #f2f2f2;
+    --filter-bg-color: #deebff;
+    --border-color: #d9d9d9;
 }
 
 .fa-solid {
@@ -18,6 +19,11 @@ body {
     justify-content: center;
 }
 
+html {
+    height: 100%;
+    scroll-behavior: smooth;
+}
+
 .main-container {
     width: 100%;
     max-width: 1440px;
@@ -55,10 +61,168 @@ a {
 }
 
 .neutral-star {
-    color: var(--main-bg-color)
+    color: var(--main-bg-color);
+}
+
+/****** Header and Line mobile ******/
+.line-mobile {
+    display: none;
+}
+
+header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+header img {
+    height: 19px;
+    padding-top: 30px;
+}
+
+nav ul {
+    display: flex;
+    gap: 60px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav ul a:hover {
+    color: var(--main-color);
+    border-top: 2px solid var(--main-color);
+    padding-top: 7px;
+}
+
+/****** Main ******/
+/* H1 */
+h1 {
+    display: none;
+}
+
+/****** Search bar and Filters categories ******/
+/* Search bar */
+.search-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin: 50px 0 50px 0;
+}
+
+.search-container h3 {
+    font-weight: 400;
+}
+
+.search-bar {
+    display: flex;
+}
+
+.bg-icon-location {
+    background-color: var(--main-bg-color);
+    border-bottom-left-radius: 15px;
+    border-top-left-radius: 15px;
+    padding: 15px 20px;
+    cursor: pointer;
+}
+
+.fa-location-dot {
+    color: black;
+    font-size: 18px;
+}
+
+.search-input {
+    font-weight: 700;
+    text-align: center;
+    border: 1px solid var(--main-bg-color);
+    border-left: none;
+    border-right: none;
+    font-size: 18px;
+}
+
+.search-input::placeholder {
+    color: black;
+}
+
+.search-input:focus::placeholder {
+    color: rgba(128, 128, 128, 0.473);
+}
+
+.submit {
+    background-color: var(--main-color);
+    color: white;
+    font-weight: 700;
+    border: none;
+    border-bottom-right-radius: 15px;
+    border-top-right-radius: 15px;
+    padding: 15px 20px;
+    cursor: pointer;
+}
+
+.btn-icon {
+    display: none;
+}
+
+.btn-text {
+    font-size: 18px;
+}
+
+/* Filter categories */
+.filter-categories {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 15px;
+    padding: 0;
 }
 
-/****** Hebergements And Populaires ***********/
+.filters {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.filter-categories i {
+    padding-right: 10px;
+}
+
+.filters h3,
+.filter-categories button {
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.filter-categories button {
+    background-color: initial;
+    border-radius: 25px;
+    border: 2px solid var(--border-color);
+    padding: 10px 20px;
+}
+
+.filter-categories button:hover {
+    background-color: var(--filter-bg-color);
+    cursor: pointer;
+}
+
+.filter-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0;
+}
+
+.fa-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    font-size: 0.8rem;
+    border: 1px solid var(--border-color);
+}
+
+/****** Hebergements And Populaires ******/
 .hebergements-and-populaires {
     display: flex;
     justify-content: space-between;
@@ -71,12 +235,64 @@ a {
     box-sizing: border-box;
 }
 
-/****** Hebergements ***********/
+/* Hebergements */
 .hebergements {
     width: 65%;
 }
 
-/****** Populaires ***********/
+.hebergements-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.hebergements-cards .card {
+    display: flex;
+    flex-direction: column;
+    margin-top: 33px;
+}
+
+.hebergements-cards img {
+    width: 100%;
+    height: 124px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+}
+
+.hebergements-cards > * {
+    flex: 0 0 calc(33.333% - 20px);
+}
+
+.hebergements-cards .card-content {
+    padding-left: 15px;
+    min-height: 7rem;
+}
+
+.hebergements-cards .card-title {
+    margin-top: 10px;
+    margin-bottom: 4px;
+}
+
+.hebergements-cards .card-subtitle {
+    margin: 0;
+}
+
+.hebergements-cards .card-rating {
+    margin-bottom: 5px;
+}
+
+/* Button show more */
+.btn-show-more {
+    font-weight: 700;
+    font-size: 18px;
+    border: none;
+    padding : 30px 0 0 0;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+/* Populaires */
 .populaires {
     width: 32%;
 }
@@ -121,47 +337,281 @@ a {
     margin-bottom: 5px;
 }
 
+/* Activities */
+.activities {
+    padding: 60px 30px;
+}
+
+.activities-cards {
+    display: flex;
+    justify-content: space-between;
+    gap: 30px;
+    margin-top: 33px;
+}
+
+.card-article-activity {
+    display: flex;
+    flex-direction: column;
+}
+
+.activities-cards a {
+    width: 100%;
+}
+
+.card-article-activity img {
+    height: 380px;
+    object-fit: cover;
+    width: 100%;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
+}
+
+.card-article-activity .card-content {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: white;
+    padding-inline: 20px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    box-sizing: border-box;
+    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
+    min-height: 5rem;
+}
 
+/****** Footer ******/
+.footer-container {
+    display: flex;
+    background-color: var(--main-bg-color);
+    padding: 30px;
+}
 
+.footer-column {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    flex: 0 0 33.333%;
+}
+.footer-column ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.footer-column h3 {
+    padding: 0;
+    margin: 0;
+}
 
 /* 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 {
-        flex-direction: column;
-    }
+  /****** Hebergements And Populaires ******/
+.hebergements-and-populaires {
+    flex-direction: column;
+  }
+
+.hebergements {
+    width: 100%;
+  }
+
+.populaires {
+    width: 100%;
+    margin-top: 50px;
+  }
+
+  /* Populaires */
+.populaires-cards {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+.populaires-cards a {
+    width: 30%;
+  }
+
+.populaires-cards .card-title {
+    font-size: 14px;
+  }
+
+.populaires-cards .card-subtitle {
+    font-size: 13px;
+  }
+
+  /* Hebergement */
+.hebergements-cards .card-title {
+    font-size: 14px;
+  }
 
-    .hebergements {
-        width: 100%;
-    }
+.hebergements-cards .card-subtitle {
+    font-size: 13px;
+  }
 
-    .populaires {
-        width: 100%;
-        margin-top: 50px;
-    }
+.hebergements-cards .card-content {
+    min-height: initial;
+  }
 
-    .populaires-cards {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
+  /* Activities */
+.card-article-activity img {
+    height: 200px;
+  }
 
-    .populaires-cards a {
-        width: 30%;
-    }
+.activities-cards .card-content {
+    min-height: 7rem;
+  }
 
-    .populaires-cards .card-title {
-        font-size: 14px;
-    }
+  /* Filters categories */
+.filters {
+    display: block;
+  }
 
-    .populaires-cards .card-subtitle {
-        font-size: 13px;
-    }
+.filters .filter-categories {
+    display: flex;
+    flex-direction: row;
+  }
 }
 
 /* Small devices (phones, less than 768px) */
 @media (max-width: 767.98px) {
-    /* ... */
-}
\ No newline at end of file
+  /* Main */
+.main-container, html, body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+header, main h1, .search-container,
+.hebergements-and-populaires .hebergements,
+.activities, .padding-populaires {
+    padding: 0 25px;
+  }
+
+  /* Header and Line mobile */
+header {
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+  }
+
+nav ul a:hover {
+    color: var(--main-color);
+    border-top: none;
+    border-bottom: 2px solid var(--main-color);
+    padding: 0 0 15px 0;
+  }
+
+.line-mobile {
+    display: block;
+    width: 100vw;
+    margin-left: -25px;
+    border-bottom: 2px solid var(--main-bg-color);
+    padding-bottom: 15px;
+  }
+
+  /* Search bar and Filters categories */
+.search-container {
+    align-items: center;
+  }
+
+.submit {
+    border-radius: 15px;
+    filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
+    margin-left: -10px;
+  }
+
+.btn-text {
+    display: none;
+  }
+
+.btn-icon {
+    display: block;
+  }
+
+.fa-magnifying-glass {
+    color: white;
+    font-size: 18px;
+  }
+
+.search-input {
+    width: 70vw;
+  }
+
+.filters .filter-categories {
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+
+.filters button {
+    min-width: 200px;
+  }
+
+  /****** Hebergements And Populaires ******/
+.hebergements-and-populaires section {
+    padding-inline: 0;
+  }
+
+  /* Hebergement */
+.hebergements {
+    order: 1;
+    margin-top: 60px;
+  }
+
+.hebergements-cards {
+    flex-direction: column;
+  }
+
+.hebergements-and-populaires .hebergements {
+    background-color: white;
+  }
+
+  /* Populaires */
+.populaires {
+    background-color: var(--main-bg-color);
+    margin-top: 0;
+  }
+
+.hebergements-and-populaires section {
+    border-radius: 0;
+  }
+
+.populaires-cards {
+    flex-direction: column;
+  }
+
+.populaires-cards a {
+    width: 100%;
+  }
+
+.populaires-cards .card-title {
+    line-height: 1.3;
+  }
+
+  /* Activities */
+
+.activities {
+    margin: 60px 0 60px 0;
+  }
+
+.activities-cards {
+    flex-direction: column;
+    margin-top: 33px;
+  }
+
+.activities-cards .card-content {
+    min-height: initial;
+  }
+
+  /* Footer */
+.footer-container {
+    flex-direction: column;
+    gap: 60px;
+  }
+}
diff --git a/index.html b/index.html
index 53512c75..38785e6a 100644
--- a/index.html
+++ b/index.html
@@ -16,13 +16,169 @@
 
 <body>
     <div class="main-container">
-        <header></header>
+        <header>
+            <a href="./index.html"><img src="./images/logo/Booki.png" alt="Logo Booki"></a>
+            <nav>
+                <ul>
+                    <li><a href="#hebergements">Hébergements</a></li>   
+                    <li><a href="#activities">Activités</a></li>  
+                </ul>
+            </nav>
+        </header>
+        <div class="line-mobile"></div>
         <main>
-            <div class="hebergements-and-populaires">
-                <section class="hebergements">
-
+            <h1>Accueil</h1> 
+            <section class="search-container">
+                <div>
+                    <h2>Trouvez votre hébergement pour des vacances de rêve</h2>
+                    <h3>En plein centre-ville ou en pleine nature</h3>
+                </div>
+                <div>
+                    <form action="" method="get" class="search-bar">
+                        <label for="search-input" class="bg-icon-location"><i class="fa-solid fa-location-dot " aria-hidden="true"></i></label>
+                        <input type="search" id="search-input" class="search-input" name="q" placeholder="Marseille, France">
+                        <button type="submit" class="submit">
+                            <span class="btn-text">Rechercher</span>
+                            <span class="btn-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
+                        </button>
+                    </form>
+                </div>
+                <div>
+                    <div class="filters">
+                        <h3>Filtres</h3>
+                        <ul class="filter-categories"> 
+                            <li><button type="button" ><i class="fa-solid fa-money-bill-wave"></i>Économique</button></li>
+                            <li><button type="button"><i class="fa-solid fa-person" aria-hidden="true"></i>Familial</button></li>
+                            <li><button type="button"><i class="fa-solid fa-heart" aria-hidden="true"></i>Romantique</button></li>
+                            <li><button type="button"><i class="fa-solid fa-fire" aria-hidden="true"></i>Nos pépites</button></li>
+                        </ul>
+                    </div>
+                </div>
+                <p class="filter-info"><i class="fa-solid fa-info" aria-hidden="true"></i>Plus de 500 logements sont disponibles dans cette ville</p>
+            </section>
+            <div class="hebergements-and-populaires">            
+                <section class="hebergements" id="hebergements">
+                    <h2 class="section-title">Hébergements à Marseille</h2>
+                    <div class="hebergements-cards">
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/fred-kleber.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel du port</h3>
+                                        <p class="card-subtitle">Nuit à partir de 52<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/febrian-zakaria.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel Chez Amina</h3>
+                                        <p class="card-subtitle">Nuit à partir de 96<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/reisetopia.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel 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/annie-spratt.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel de la mer</h3>
+                                        <p class="card-subtitle">Nuit à partir de 46<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/marcus-loke.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Auberge La Canebière</h3>
+                                        <p class="card-subtitle">Nuit à partir de 25<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/nicate-lee.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Auberge Le Panier</h3>
+                                        <p class="card-subtitle">Nuit à partir de 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>
+                        </a>
+                </div>
+                <button id="btnShowMore" class="btn-show-more">Afficher plus</button>
                 </section>
                 <section class="populaires">
+                    <div class="padding-populaires">
                     <div class="populaires-title">
                         <h2 class="section-title">Les plus populaires</h2>
                         <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
@@ -86,11 +242,73 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                             </article>
                         </a>
                     </div>
+                    </div>
                 </section>
             </div>
+            <section class="activities" id="activities">
+                <h2 class="section-title">Activités à Marseille</h2>
+                    <div class="activities-cards">
+                        <a href="#">
+                            <article class="card-article-activity">
+                                <img src="./images/activites/reno-laithienne.jpg" alt="Image du Vieux-Port de Marseille">
+                                <div class="card-content">
+                                    <h3 class="card-title">Vieux-Port</h3>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card-article-activity">
+                                <img src="./images/activites/paul-hermann.jpg" alt="Image du Fort de Pomègues">
+                                <div class="card-content">
+                                    <h3 class="card-title">Fort de Pomègues</h3>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card-article-activity">
+                                <img src="./images/activites/kilyan-sockalingum.jpg" alt="Image du Parc national des Calanques">
+                                <div class="card-content">
+                                    <h3 class="card-title">Parc national des Calanques</h3>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card-article-activity">
+                                <img src="./images/activites/florian-wehde.jpg" alt="Image de Notre-Dame-de-la-Garde">
+                                <div class="card-content">
+                                    <h3 class="card-title">Notre-Dame-de-la-Garde</h3>
+                                </div>
+                            </article>
+                        </a>
+                    </div>
+            </section>
         </main>
-        <footer></footer>
+        <footer>
+            <div class="footer-container">
+                <div class="footer-column">
+                    <h3>À propos</h3>
+                    <ul>
+                        <li><a href="#">Fonctionnement du site</a></li>
+                        <li><a href="#">Conditions générales</a></li>
+                        <li><a href="#">Données et confidentialités</a></li>
+                    </ul>
+                </div>
+                <div class="footer-column">
+                    <h3>Nos hébergements</h3>
+                    <ul>
+                        <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>
+                        <li><a href="#">Centre d'aide</a></li>
+                        <li><a href="#">Nous contacter</a></li>                        
+                    </ul>
+                 </div>
+            </div>
+        </footer>
     </div>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>