diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..5b436a03
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/style.css b/css/style.css
index f6c96c4d..5590de3f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -13,11 +13,178 @@
     color: var(--main-color);
 }
 
-body {
+  a:active {
+    color: #0065FC;
+}
+
+.general-text {
+    font-size: 13px;
+}
+
+.body {
+    max-width: 1440px ;
+    }
+
+h1 {
+font-size: 18px;
+}
+
+h2 {
+    font-size: 16px;
+    }
+
+/***** Header **********/
+
+.topnav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 50px 20px;
+}
+
+.logo {
+    order: 1;
+    width: 50px;
+}
+
+.navigation a:hover {
+    color: #0065FC;
+    border-top: 2px solid #0065FC;
+}
+
+#navbar-hebergements {
+    margin-left: auto;
+    order: 2;
+    font-size: 13px;
+    padding-top: 20px;
+  }
+
+#navbar-activites {
+    order: 3;
+    font-size: 13px;
+    padding: 0px 0px 20px;
+    padding-top: 20px;
+    margin-left: 40px;
+  }
+
+    /* Search bar */
+
+.recherche {
+    padding: 0px 50px;
+}
+
+.barre-de-recherche {
+    display: flex;
+    padding: 15px 0px 0px;
+}
+
+.location-icon {
+    display: flex;
+    align-items: center;
+    background-color: #F2F2F2;
+    padding: 15px 18px;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+}
+
+.fa-location-dot { 
+    font-size: 16px;
+    color: black;
+}
+
+.research-text {
     display: flex;
-    justify-content: center;
+    font-size: 15px;
+    align-items: center; 
+    border-top: 1px solid #F2F2F2;
+    border-bottom: 1px solid #F2F2F2;
+}
+
+#inputtext-location { 
+    font-size: 15px;
+    align-items: center;
+    text-align: center; 
+    border: 0;
+    outline: none;
+}
+
+::placeholder {
+    color: black;
+    opacity: 1; /* Firefox */
+    font-weight: 600;
+  }
+
+
+        /* Hide the search icon from 768px */
+.research-button-sm {
+    display: none;
+}
+
+.research-button-md {
+    font-size: 15px;
+    color: white;
+    align-items: center;
+    padding-left: 20px;
+    padding-right: 20px;
+    background-color: #0065FC;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+}
+
+        /* Filtres  */
+
+.filtres {
+    padding: 10px 50px 15px;
+}
+
+.info-nb-logements {
+    display: flex;
+    align-items: center;
+}
+
+.border-info {
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center content horizontally */
+    margin-right: 10px;
+    border: 1px solid #F2F2F2;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    color: black;
+}
+
+.fa-info {
+    font-size: 9px;
+}
+
+.filtres-title-buttons, 
+.filtres-buttons, .filtre {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.filtres-buttons {
+    margin: 0px 10px;
+}
+
+.filtre {
+    font-size: 18px;
+    border: 2px solid #F2F2F2;
+    border-radius: 50px;
+    padding: 0px 15px;
+    margin: 15px 6px;
+}
+
+.fa-money-bill-wave, 
+.fa-person, .fa-heart, .fa-fire {
+    padding-right: 10px;
 }
 
+
+        /* Main  */
+
 .main-container {
     width: 100%;
     max-width: 1440px;
@@ -30,11 +197,6 @@ a {
     text-decoration: none;
 }
 
-.section-title {
-    margin: 0;
-    font-size: 22px;
-}
-
 .card {
     background-color: white;
     border-radius: 20px;
@@ -67,7 +229,7 @@ a {
 .hebergements-and-populaires section {
     background-color: var(--main-bg-color);
     border-radius: 20px;
-    padding: 30px;
+    padding: 0px 30px;
     box-sizing: border-box;
 }
 
@@ -76,12 +238,59 @@ a {
     width: 65%;
 }
 
+.hebergements-title {
+    padding: 10px 0px;
+}
+
+.hebergements-cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 10px;
+    margin-top: 33px;
+}
+
+.hebergements-cards .card {
+    display: flex;
+    margin: 33px;
+}
+
+.hebergements-cards img {
+    width: 33%;
+    height: 136px;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+}
+
+.hebergements-cards .card-content {
+    width: 67%;
+    padding-left: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.hebergements-cards .card-title {
+    margin-top: 10px;
+    margin-bottom: 4px;
+}
+
+.hebergements-cards .card-subtitle {
+    margin: 0;
+}
+
+.hebergements-cards .card-rating {
+    margin-bottom: 5px;
+}
+
 /****** Populaires ***********/
 .populaires {
     width: 32%;
 }
 
 .populaires-title {
+    padding: 10px 0px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -92,6 +301,8 @@ a {
     margin-top: 33px;
 }
 
+
+
 .populaires-cards img {
     width: 33%;
     height: 136px;
@@ -121,7 +332,23 @@ a {
     margin-bottom: 5px;
 }
 
+        /****** Footer ***********/
 
+.footer {
+    background-color: #F2F2F2;
+    margin: 50px;
+    margin-bottom: 0;
+    padding: 10px 15px;
+}
+
+.footer-text {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#a-propos, #nos-hebergements {
+    padding-right: 200px;
+}
 
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
@@ -162,6 +389,109 @@ a {
 }
 
 /* Small devices (phones, less than 768px) */
-@media (max-width: 767.98px) {
-    /* ... */
+@media (max-width: 768px) {
+    /* Header */
+
+    /* Navbar */
+
+    .topnav {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .logo {
+        justify-content: center;
+        padding-bottom: 10px;
+    }
+
+    .navigation {
+        display: flex;
+    }
+
+    #navbar-hebergements {
+        font-size: 13px;
+        border-bottom: 2px solid #F2F2F2;
+    } 
+
+
+    #navbar-activites {
+        font-size: 13px;
+        border-bottom: 2px solid #F2F2F2;
+        }   
+
+    #navbar-hebergements:hover,
+    #navbar-activites:hover {
+    color: #0065FC;
+    border-top: none;
+    border-bottom: 2px solid #0065FC;   
+    }
+
+    /* Search bar */
+
+        .recherche {
+        padding: 15px;
+        }
+        
+        /* Hide the search button up to 768px */
+
+        .research-button-md {
+            display: none;
+        }  
+        
+        .research-button-sm {
+            display: flex;
+            align-items: center;
+            padding-left: 15px;
+            padding-right: 15px;
+            background-color: #0065FC;
+            border-radius: 15px;
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); /* Add shadow */
+        } 
+
+        .fa-magnifying-glass {
+            color: white;
+            font-size: 18px;
+        }
+
+        .research-text {
+            display: flex;
+            width: 100%;
+            font-size: 15px;
+            align-items: center;
+            padding-left: 10px;
+            padding-right: 20px;
+            border-top: 1px solid #F2F2F2;
+            border-bottom: 1px solid #F2F2F2;
+        }
+        
+        #inputtext-location { 
+            align-items: center;  
+            border: 0;
+            outline: none;
+        }
+
+        /* Filtres */
+
+    .filtres {
+        padding: 15px;
+        }
+    
+        .filtre {
+            font-size: 15px;
+        }
+
+        /* Main */
+
+        .main-container {
+            padding: 0 15px;
+              }
+
+        /* Footer */
+
+              .footer {
+                background-color: #F2F2F2;
+                margin-top: 50px;
+                padding: 10px 15px;
+            }
 }
\ No newline at end of file
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..092bae27
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/index.html b/index.html
index 53512c75..3899e94b 100644
--- a/index.html
+++ b/index.html
@@ -11,20 +11,213 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
         integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="./css/style.css">
+        <link rel="stylesheet" href="./css/style.css">
+        <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:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+        <script src="https://kit.fontawesome.com/e547d28caf.js" crossorigin="anonymous"></script>
 </head>
 
 <body>
-    <div class="main-container">
-        <header></header>
-        <main>
-            <div class="hebergements-and-populaires">
-                <section class="hebergements">
 
+    <!-- Navigation bar -->
+        <header>
+            <div class="topnav">
+            <a href="index.html"><img class="logo" src="images/logo/Booki@3x.png" alt="logo booki bleu"></a>   
+                <div class="navigation">
+                    <a href="#hebergements" id="navbar-hebergements">Hébergements</a>
+                    <a href="#activites" id="navbar-activites">Activités</a>
+                </div>
+            </div>
+        </header>
+
+    <!-- Research bar -->
+        <section class="recherche">
+            <h1><strong>Trouvez votre hébergement pour des vacances de rêve</strong></h1>
+            <p class="general-text">En plein centre-ville ou en pleine nature</p>
+            <div class="barre-de-recherche">
+                <div class="location-icon">
+                    <i class="fa-solid fa-location-dot"></i>
+                </div>
+                <div class="research-text">
+                    <form method="get" action="">
+                        <input type="text" placeholder="Marseille, France" id="inputtext-location">
+                    </form>
+                </div> 
+            <!-- Element to show only on md-lg devices -->
+                <div class="research-button-md">
+                    <p><strong>Rechercher</strong></p>
+                </div>
+            <!-- Element to show only on small devices -->
+                <div class="research-button-sm">
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                </div>
+            </div>
+        </section>
+
+    <!-- Filtres -->
+    <section class="filtres">
+        <div class="filtres-title-buttons">
+                <h2><strong>Filtres</strong></h2>
+            <div class="filtres-buttons">
+            <div class="filtre">
+                <i class="fa-solid fa-money-bill-wave"></i>
+                <p class="general-text"><strong>Economique</strong></p>
+            </div>
+            <div class="filtre">
+                <i class="fa-solid fa-person"></i>
+                <p class="general-text"><strong>Familial</strong></p>
+            </div>
+            <div class="filtre">
+                <i class="fa-solid fa-heart"></i>
+                <p class="general-text"><strong>Romantique</strong></p>
+            </div>
+            <div class="filtre">
+                <i class="fa-solid fa-fire"></i>
+                <p class="general-text"><strong>Nos pépites</strong></p>
+            </div>
+            </div>
+        </div>
+        <div class="info-nb-logements">
+            <div class="border-info">
+                <i class="fa-solid fa-info"></i>
+            </div>
+            <p class="general-text">Plus de 500 logements sont disponibles dans cette ville</p>
+        </div>
+        
+    </section>
+        
+        <!-- Main -->
+
+            <div class="main-container">
+            <main>
+                <div class="hebergements-and-populaires">
+                    <section class="hebergements">
+                        <div class="hebergements-title">
+                         <h1>Hébergements à Marseille</h1>
+                        </div>
+                         <div class="hebergements-cards">
+                        <a href="#">
+                            <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">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel Le soleil du matin</h3>
+                                        <p class="card-subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
+                                        <p class="card-subtitle">Nuit à partir de 71<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel Bleu et Blanc</h3>
+                                        <p class="card-subtitle">Nuit à partir de 68<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <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">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel Le soleil du matin</h3>
+                                        <p class="card-subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
+                                        <p class="card-subtitle">Nuit à partir de 71<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel Bleu et Blanc</h3>
+                                        <p class="card-subtitle">Nuit à partir de 68<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                    </div>
+                    <h2>Afficher plus</h2>
                 </section>
+                
                 <section class="populaires">
                     <div class="populaires-title">
-                        <h2 class="section-title">Les plus populaires</h2>
+                        <h1>Les plus populaires</h1>
                         <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
                     </div>
                     <div class="populaires-cards">
@@ -89,8 +282,33 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                 </section>
             </div>
         </main>
-        <footer></footer>
     </div>
-</body>
+
+        <!-- Footer -->
+
+        <footer>
+            <section class="footer">
+                <div class="footer-text">
+                    <div id="a-propos">
+                        <h2>À propos</h2>
+                        <p>Fonctionnement du site</p>
+                        <p>Conditions générales</p>
+                        <p>Données et confidentialité</p>
+                    </div>
+                    <div id="nos-hebergements">
+                        <h2>Nos hébergements</h2>
+                        <p>Charte qualité</p>
+                        <p>Proposer votre hôtel</p>
+                    </div>
+                    <div id="assistance">
+                        <h2>Assistance</h2>
+                        <p>Centre d'aide</p>
+                        <p>Nous contacter</p>
+                    </div>
+                    </div>
+                </section>
+        </footer>
+    
+    </body>
 
 </html>
\ No newline at end of file