diff --git a/css/style.css b/css/style.css
index f6c96c4d..732e24e9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -11,11 +11,13 @@
 
 .fa-solid {
     color: var(--main-color);
+    font-size: 1.2em;
 }
 
 body {
-    display: flex;
-    justify-content: center;
+    margin: 0;
+    padding: 0;
+    min-width: 320px;
 }
 
 .main-container {
@@ -23,6 +25,7 @@ body {
     max-width: 1440px;
     padding: 0 50px;
     box-sizing: border-box;
+    margin: auto;
 }
 
 a {
@@ -58,6 +61,184 @@ a {
     color: var(--main-bg-color)
 }
 
+/*Header*/
+
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+header img {
+    width: 60px;
+    height: 20px;
+    padding: 30px 50px 30px 0px;
+}
+
+nav {
+    display: flex;
+    flex-direction: row;
+    column-gap: 68px;
+}
+
+nav a {
+    font-size: 16px;
+    display: flex;
+    align-items: flex-end;
+    margin: 0;
+    height: 35px;
+    border-top: solid 2px transparent;
+}
+
+nav a:hover {
+    border-top: solid 2px #0065FC;
+    color:#0065FC;
+    box-shadow:
+        inset 0 0px 4px 4px rgb(255,255,255),
+        inset 0 2px 3px 0px rgba(50, 50, 50, 1);
+
+}
+
+
+
+/*Bloc recherche*/
+
+.recherche {
+    height: auto;
+    max-width: max-content;
+}
+
+.bloc-recherche {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 49px;
+    margin-top: 35px;
+}
+
+.recherhe h1 {
+    font-size: 22px;
+}
+
+.fa-location-dot {
+    color: black;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: #F2F2F2 solid 1px;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    background-color: #F2F2F2;
+}
+
+form {
+    display: flex;
+    flex-direction: row;
+}
+
+.recherche input {
+    height: 52px;
+    border: #F2F2F2 solid 1px;
+    outline: none;
+    font-size: 1em;
+    box-sizing: border-box;
+    padding-left: 15px;
+}
+
+::placeholder {
+    font-size: 1em;
+    font-weight: bold;
+    color: black;
+    text-align: center;
+}
+
+.bloc-recherche button {
+    display: flex;
+    align-items: center;
+    color: white;
+    background-color: #0065FC;
+    padding: 0 15px 0 15px;
+    border: #0065FC 1px solid;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    font-weight: bold;
+    font-size: 16px;
+    height: 52px;
+}
+
+.bouton-mobile {
+    display: none;
+}
+
+
+/* Bloc filtres */
+
+.filtres {
+    margin: 30px 0 30px 0;
+    max-width: 1440px;
+}
+
+.filtres h3 {
+    font-size: 18px;
+    margin: 20px 0 20px 0;
+}
+
+.bloc-filtres {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 15px;
+}
+
+.boutons {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    height: 50px;   
+}
+
+.boutons button {
+    border: 2px solid #D9D9D9;
+    border-radius: 25px;
+    padding : 4px 19px 4px 19px;
+    font-weight: bold; 
+    font-size: 1em;
+    background-color: white;
+}
+
+.boutons button:hover {
+    background-color: #DEEBFF;
+}
+
+.boutons button i {
+    width: 15px;
+    padding-right: 10px;
+}
+
+.nb-logements {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.cercle {
+    font-size: 0.7em;
+    border: 1px solid #D9D9D9;
+    min-width: 24px;
+    min-height: 24px;
+    display: flex;
+    align-items:center;
+    justify-content:center;
+    border-radius: 100%;
+
+}
+
+
+
 /****** Hebergements And Populaires ***********/
 .hebergements-and-populaires {
     display: flex;
@@ -71,9 +252,66 @@ a {
     box-sizing: border-box;
 }
 
+.fa-star {
+    font-size: 0.8em;
+}
+
 /****** Hebergements ***********/
 .hebergements {
+    max-width: 1440px;
     width: 65%;
+    display: flex;
+    flex-direction: column;
+}
+
+.hebergements a {
+    width: 30%;
+}
+
+.hebergements-cards {
+    max-width: 936px;
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    box-sizing: border-box;
+    justify-content: space-between;
+    gap: 5px;
+}
+
+.hebergements-cards .card {
+    display: flex;
+    flex-direction: column;
+    margin-top: 33px;
+    max-width: 600px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.hebergements-cards img {
+    width: 100%;
+    height: 124px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    object-fit: cover;
+}
+
+.hebergements-cards .card-content {
+    width: 100%;
+    padding-left: 10px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: max-content;
+}
+
+.hebergements-cards .card-title {
+    margin-top: 8px;
+    font-size: 1em;
+}
+
+.hebergements-cards .card-subtitle {
+    font-size: 0.9em;
+    margin-bottom: 5px;
 }
 
 /****** Populaires ***********/
@@ -122,13 +360,83 @@ a {
 }
 
 
+/*Activités*/
+.activites {
+    max-width: 100%;
+    padding: 30px;
+}
+
+.bloc-activites {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+}
+
+.activites-card {
+    flex-direction: column;
+    align-items: center;
+    width: 25%;
+    height: auto;
+    border-radius: 20px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
+}
+
+.activites-card img {
+    width:100%;
+    height: 380px;
+    object-fit: cover;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+}
+
+.activites-card h3 {
+    font-size: 16px;
+    padding: 0 0 0 20px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+/*Footer*/
+footer {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-top: 30px;
+    background-color: #F2F2F2;
+    padding: 20px 0 20px 15px;
+}
+
+footer ul {
+    list-style: none;
+    width: 33%;
+    padding-left: 10px;
+}
+
+.titre-liste {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 15px;;
+}
 
+li {
+    font-size: 16px;
+    margin-bottom: 15px;
+}
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
 
 /****** Media queries ***********/
 /* Medium devices (tablets, less/equal than 1024px) */
 @media (max-width: 1024px) {
+    .bloc-filtres {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+        height: auto;
+        }
+
     .hebergements-and-populaires {
         flex-direction: column;
     }
@@ -159,9 +467,191 @@ a {
     .populaires-cards .card-subtitle {
         font-size: 13px;
     }
+
+    .activites-card img {
+        max-height: 200px;
+    }
 }
 
+
 /* Small devices (phones, less than 768px) */
 @media (max-width: 767.98px) {
-    /* ... */
+    .main-container {
+        padding: 0;
+    }
+    
+    header {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+    }
+
+    header img {
+        padding: 20px 0 20px 0;
+        display: flex;
+    }
+
+    nav {
+        max-width: 768px;
+        width: 100%;
+        column-gap: 0;
+    }
+
+    nav a {
+        min-width: 50%;
+        display: flex;
+        justify-content: center;
+        border-bottom: 2px solid transparent;
+        align-items: flex-start;
+
+    }
+    nav a:hover {
+        border-bottom: 2px solid #0065FC;
+        border-top: 2px solid transparent;
+        box-shadow: none;
+    }
+
+    .recherche, .filtres{
+    padding: 0 20px;
+}
+
+    .bloc-recherche .bouton-desktop {
+        display: none;
+    }
+
+    .bloc-recherche .bouton-mobile {
+        display: flex;
+    }
+
+    .bloc-recherche .fa-magnifying-glass {
+        color: white;
+    }
+
+    .bloc-recherche button {
+        border-radius: 10px;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
+    }
+
+    .recherche input {
+        border: #F2F2F2 solid 1px;
+        border-right: none;
+        outline: none;
+        font-size: 1em;
+        width: 100%;
+        white-space: nowrap;
+    }
+
+   
+    .bloc-filtres {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+    
+    .boutons {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 5px;
+        height: 75px;
+        padding: 15px 0;
+        width: 100%;
+    }
+    
+    .boutons button {
+        padding : 4px 0px 4px 0px;
+        font-size: 0.8em;
+        width: 48%;
+        white-space: nowrap;
+    }
+
+    .hebergements-and-populaires {
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: space-between;
+    }
+
+    .hebergements-and-populaires section {
+        background-color: var(--main-bg-color);
+        border-radius: 0;
+        padding: 30px;
+        margin-top: 0;
+        box-sizing: border-box;
+    }
+
+
+
+    .populaires {
+        width: 100%;
+        padding: 0;
+    }
+
+    .populaires-cards {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .populaires-cards a {
+        width: 100%;
+    }
+
+    .populaires-cards .card {
+        display: flex;
+        margin-top: 15px;
+    }
+
+    .hebergements-and-populaires .hebergements {
+        background-color: white;
+    }
+    
+    .hebergements a {
+        width: 100%;
+    }
+
+    .hebergements-cards {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .hebergements-cards .card {
+        margin-top: 15px;
+    }
+
+    .hebergements-cards .card-txt {
+        font-size: 0.8em;
+    }
+
+    .hebergements-cards .card-title {
+        font-size: 1.2em;
+    }
+    
+    .bloc-activites {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .bloc-activites .activites-card {
+        width: 100%;
+    }
+
+    .activites-card img {
+        height: 141px;
+    }
+
+    footer {
+        display: flex;
+        flex-direction: column;
+        padding: 30px;
+    }
+
+    footer ul {
+        width: 100%;
+    }
+
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 53512c75..441e3ef0 100644
--- a/index.html
+++ b/index.html
@@ -16,12 +16,182 @@
 
 <body>
     <div class="main-container">
-        <header></header>
+        <header>
+            <img src="images/logo/Booki.png" alt="Logo Booki">
+            <nav>                
+                <a href="#a-hebergements">Hébergements</a>
+                <a href="#a-activites">Activités</a>
+            </nav>
+        </header>
+
+
         <main>
+            <section class="recherche">
+                <h1>Trouvez votre hébergement pour des vacances de rêve</h1>
+                <p>En plein centre-ville ou en pleine nature</p>
+                    
+                <div class="bloc-recherche">
+                    <div class="box-fa-location"><i class="fa-solid fa-location-dot"></i></div>
+
+                    <form action="" method="post">
+                        <input type="text" name="lieu" placeholder="Marseille, France">
+                        <div class="bouton-desktop"><button>Rechercher</button></div>
+                        <div class="bouton-mobile"><button><i class="fa-solid fa-magnifying-glass"></i></button></div>
+                    </form>
+                </div>
+            </section>
+
+            <section class="filtres">
+                <div class="bloc-filtres">
+                    <h3>Filtres</h3>
+                    <div class="boutons">
+                        <button><i class="fa-solid fa-money-bill-wave"></i>Économique</button>
+                        <button><i class="fa-solid fa-person"></i>Familial</button>
+                        <button><i class="fa-solid fa-heart"></i>Romantique</button>
+                        <button><i class="fa-solid fa-fire"></i>Nos pépites</button>
+                    </div>
+                </div>
+                <div class="nb-logements">
+                    <i class="fa-solid fa-info cercle"></i>
+                    <p>Plus de 500 logements sont disponibles dans cette ville</p>
+                </div>
+            </section>
+
+
+
             <div class="hebergements-and-populaires">
+                
                 <section class="hebergements">
+                    <h2 class="section-title" id="a-hebergements">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 avec deux lits">
+                                <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 avec deux lits">
+                                <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 un lit et une armoire">
+                                <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>
+                    </div>
+
+
+                        <div class="hebergements-cards">
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/annie-spratt.jpg" alt="Image de la chambre d'hôtel avec un lit et un tableau">
+                                <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 avec deux lits superposés">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel 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 avec plusieurs lits superposés">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel 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>
+                    <h3>Afficher plus</h3>
                 </section>
+
+
                 <section class="populaires">
                     <div class="populaires-title">
                         <h2 class="section-title">Les plus populaires</h2>
@@ -88,8 +258,51 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
+
+                <!--Bloc Activités-->
+            <section class="activites">
+                <h2 id="a-activites">Activités à Marseille</h2>
+                <div class="bloc-activites">
+                    <div class="activites-card">
+                        <img src="./images/activites/reno-laithienne.jpg" alt="Le Vieux-Port">
+                        <h3>Vieux-Port</h3>
+                    </div>
+                    <div class="activites-card">
+                        <img src="./images/activites/paul-hermann.jpg" alt="Le fort de Pomègues">
+                        <h3>Fort de Pomègues</h3>
+                    </div>
+                    <div class="activites-card">
+                        <img src="./images/activites/kilyan-sockalingum.jpg" alt="Le Parc national des Calanques">
+                        <h3>Parc national des Calanques</h3>
+                    </div>
+                    <div class="activites-card">
+                        <img src="./images/activites/florian-wehde.jpg" alt="La cathédrale Notre-Dame-de-la-Garde">
+                        <h3>Notre-Dame-de-la-Garde</h3>
+                    </div>
+                </div>
+            </section>
         </main>
-        <footer></footer>
+
+        <footer>
+                <ul>
+                    <li class="titre-liste">À propos</li>
+                    <li><a href="#">Fonctionnement du site</a></li>
+                    <li><a href="#">Conditions générales</a></li>
+                    <li><a href="#">Données et confidentialité</a></li>
+                </ul>
+
+                <ul>
+                    <li class="titre-liste">Nos hébergements</li>
+                    <li><a href="#">Charte qualité</a></li>
+                    <li><a href="#">Proposer votre hôtel</a></li>
+                </ul>
+
+                <ul>
+                    <li class="titre-liste">Assistance</li>
+                    <li><a href="#">Centre d'aide</a></li>
+                    <li><a href="#">Nous contacter</a></li>
+                </ul>
+        </footer>
     </div>
 </body>