diff --git a/css/style.css b/css/style.css
index f6c96c4d..0030fc8f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -33,6 +33,7 @@ a {
 .section-title {
     margin: 0;
     font-size: 22px;
+    font-weight: bold;
 }
 
 .card {
@@ -47,9 +48,14 @@ a {
 }
 
 .card-title {
+    font-weight: bold;
     font-size: 16px;
 }
 
+.card-subtitle {
+    font-size: 14px;
+}
+
 .euro {
     font-weight: 700;
 }
@@ -58,6 +64,186 @@ a {
     color: var(--main-bg-color)
 }
 
+.break-small-screen {
+    display: none;
+}
+
+/******* Header *********/
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    margin-top: 15px;
+    margin-bottom: 30px;
+}
+
+.navigation {
+    display: flex;
+    margin-top: -30px;
+}
+
+.navigation>div {
+    position: relative;
+}
+
+.navigation>div:hover::before {
+    content: '';
+    position: absolute;
+    top: -17px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--main-color);
+}
+
+.navigation>div:hover {
+    color: var(--main-color);
+}
+
+.navigation>div:first-child {
+    margin-right: 60px;
+}
+
+/******** Headline *****************/
+
+.headline-subtitle {
+    margin-top: -1%;
+    margin-bottom: 1%;
+    font-size: 18px;
+}
+
+/******** Search Bar ***************/
+
+.fa-location-dot {
+    color: black;
+}
+
+#search-bar {
+    display: flex;
+    border-color: var(--main-bg-color);
+    padding-top: 30px;
+}
+
+
+#search-logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 49px;
+    width: 50px;
+    background-color: var(--main-bg-color);
+    border-radius: 30% 0% 0% 30%;
+}
+
+#search-input {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: black;
+    height: 49px;
+    width: 195px;
+    border: var(--main-bg-color) solid 1px;
+}
+
+#search-input::placeholder {
+    color: black;
+}
+
+#search-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 132px;
+    height: 49px;
+    font-weight: bold;
+    font-size: 18px;
+    border: solid 2px;
+    border-radius: 0px 20px 20px 0px;
+    border-color: var(--main-color);
+    background-color: var(--main-color);
+    color: white;
+}
+
+.search-icon {
+    display: none;
+}
+
+/****** Filterbar  ******************/
+
+.filters {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding: 30px 0px 30px 0;
+    font-weight: bold;
+}
+
+.filter-buttons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+.filter {
+    display: flex;
+    margin: 0px 10px 0px 10px;
+    padding: 0px 15px 0px 15px;
+    height: 50px;
+    align-items: center;
+    justify-content: center;
+    font-size: 17px;
+    font-weight: bold;
+    border: solid 2px;
+    border-radius: 30px;
+    border-color: #D9D9D9;
+    background-color: white;
+}
+
+#fam-button {
+    width: 134px;
+}
+
+.filter:hover {
+    background-color: var(--filter-bg-color);
+}
+
+.filter-span {
+    width: 8px;
+}
+
+/****** Infobar *******/
+.infobar {
+    display: flex;
+    flex-direction: row;
+    padding-bottom: 30px;
+    align-items: center;
+    justify-content: start;
+}
+
+.infobar-text {
+    padding-left: 8px;
+    flex-wrap: nowrap;
+}
+
+.info-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid #D9D9D9;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+
+
 /****** Hebergements And Populaires ***********/
 .hebergements-and-populaires {
     display: flex;
@@ -73,12 +259,62 @@ a {
 
 /****** Hebergements ***********/
 .hebergements {
-    width: 65%;
+    width: 68%;
+}
+
+.hebergements-title {
+    display: flex;
+    align-items: center;
+    padding: 0px 0px 25px 0px;
+}
+
+.hebergements-cards {
+    display: grid;
+    grid-template-columns: 31% 31% 31%;
+    gap: 25px;
+}
+
+.hebergements-cards .card {
+    height: 207px;
+    padding: 5px;
+    margin: 0px;
+}
+
+.hebergements-cards .card-title {
+    margin-top: 0px;
 }
 
+.hebergements-cards .card-subtitle {
+    margin-top: -12px;
+}
+
+.hebergements-cards .card-rating {
+    margin-top: -12px;
+}
+
+.hebergements-cards .card-content {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    margin-top: 5px;
+}
+
+.hebergements-cards img {
+    width: 100%;
+    height: 136px;
+    border-radius: 20px 20px 0px 0px;
+}
+
+.show-more {
+    font-weight: bold;
+    font-size: 18px;
+    padding: 30px 0px 0px 0px;
+}
+
+
 /****** Populaires ***********/
 .populaires {
-    width: 32%;
+    width: 29%;
 }
 
 .populaires-title {
@@ -121,14 +357,104 @@ a {
     margin-bottom: 5px;
 }
 
+/******** Activités *********/
+
+.activities {
+    padding: 30px;
+}
+
+.activities-title {
+    display: flex;
+    align-items: center;
+    margin-left: -3%;
+    padding: 40px 0px 40px 25px;
+}
+
+.activities-card {
+    display: grid;
+    grid-template-columns: 23% 23% 23% 23%;
+    gap: 3%;
+}
+
+.activities-card .card {
+    position: relative;
+    padding: 0;
+}
+
+.activities-card img {
+    width: 100%;
+    height: 370px;
+    border-radius: 20px 20px 0px 0px;
+}
+
+.activities-card .card-txt {
+    display: flex;
+    align-self: center;
+    margin-left: 5%;
+    margin-top: 5%;
+
+}
+
+/******** Footer **********/
+
+.footer {
+    display: grid;
+    grid-template-columns: 30% 30% 30%;
+    align-content: center;
+    background-color: var(--main-bg-color);
+}
+
+.footer h3 {
+    margin-bottom: 10px;
+
+}
+
+.footer>div {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10%;
+}
 
+.about-content,
+.help-content,
+.our-host-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 10px;
+}
 
+.data-privacy {
+    padding-bottom: 15px;
+}
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
 
 /****** Media queries ***********/
+
 /* Medium devices (tablets, less/equal than 1024px) */
 @media (max-width: 1024px) {
+
+    /* FILTERBAR */
+    .filters {
+        display: flex;
+        flex-direction: column;
+        font-weight: bold;
+        margin-left: -1%;
+    }
+
+    #filter-label {
+        align-self: flex-start;
+        padding-bottom: 15px;
+        padding-left: 15px;
+    }
+
+    .filter-buttons {
+        display: flex;
+        align-self: flex-start;
+    }
+
+    /* HEBERGEMENTS & POP */
     .hebergements-and-populaires {
         flex-direction: column;
     }
@@ -159,9 +485,264 @@ a {
     .populaires-cards .card-subtitle {
         font-size: 13px;
     }
+
+    /* ACTIVITIES */
+
+    .activities {
+        padding-bottom: 170px;
+    }
+
+    .activities-card {
+        display: grid;
+        grid-template-columns: 23% 23% 23% 23%;
+        height: 270px;
+        gap: 3%;
+        padding-bottom: 5%;
+    }
+
+    .activities-card .card {
+        height: 100%;
+        width: 100%;
+    }
+
+    .activities-card img {
+        width: 100%;
+        height: 85%;
+    }
+
+    .activities-card .card-txt {
+        margin-top: 0;
+        margin-bottom: 100px;
+    }
+
 }
 
 /* Small devices (phones, less than 768px) */
 @media (max-width: 767.98px) {
-    /* ... */
+
+    .main-container {
+        padding: 0;
+    }
+
+    .main {
+        max-height: 3670px;
+    }
+
+    /* Header */
+
+    .header {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+    }
+
+    .logo {
+        display: flex;
+        grid-column: 1 / 3;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 20px;
+    }
+
+    .navigation {
+        grid-column: 1 / 3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .navigation>div {
+        flex: 1;
+        text-align: center;
+    }
+
+
+    .navigation>div::before {
+        content: '';
+        position: absolute;
+        top: 37px;
+        left: 0;
+        width: 100vw;
+        height: 2px;
+        background-color: var(--main-bg-color);
+    }
+
+    .navigation>div:first-child:hover::before {
+        top: auto;
+        bottom: -20px;
+        width: 50vw;
+        left: 0;
+    }
+
+    .navigation>div:last-child:hover::before {
+        top: auto;
+        bottom: -20px;
+        width: 50vw;
+        left: 0;
+    }
+
+    /* Headline */
+
+    .headline {
+        display: flex;
+        flex-direction: column;
+        padding-left: 1%;
+        padding-top: 20px;
+    }
+
+    .break-small-screen {
+        display: inline;
+    }
+
+    /* Searchbar */
+
+    #search-button {
+        width: 50px;
+        height: 49px;
+        border-radius: 15px;
+        color: white;
+    }
+
+    #search-input {
+        border-right: none;
+    }
+
+    .search-text {
+        display: none;
+    }
+
+    .search-icon {
+        display: inline;
+        color: white;
+    }
+
+    /* Filterbar */
+
+    .filters {
+        padding: 0px 5px 10px 0px;
+        width: 100%;
+        padding-left: 0;
+    }
+
+    #filter-label {
+        padding-bottom: 0;
+        padding-top: 0;
+    }
+
+    .filter-buttons {
+        flex-wrap: wrap;
+
+    }
+
+    .filter {
+        flex: 1 1 40%;
+        margin: 10px 5px;
+        width: calc(30% - 20px);
+    }
+
+    /* Infobar */
+
+    .infobar {
+        padding-bottom: 0;
+        padding-left: 5px;
+        justify-content: start;
+    }
+
+    /* Hebergements & Populaires */
+
+    .hebergements {
+        order: 2;
+    }
+
+    .populaires {
+        order: 1;
+    }
+
+    .hebergements-and-populaires {
+        padding: 0;
+    }
+
+    /* Populaires */
+
+    .hebergements-and-populaires .populaires {
+        border-radius: 0%;
+    }
+
+    .hebergements {
+        width: 100%;
+    }
+
+    .populaires {
+        width: 100%;
+    }
+
+    .populaires-title {
+        justify-content: space-between;
+    }
+
+    .populaires-cards {
+        flex-direction: column;
+        gap: 0;
+    }
+
+    .populaires-cards a {
+        width: 100%;
+    }
+
+    .populaires-cards .card {
+        width: 100%;
+    }
+
+    /* Hébergements */
+
+    .hebergements-and-populaires .hebergements {
+        background-color: white;
+    }
+
+    .hebergements-cards {
+        width: auto;
+        grid-template-columns: 90%;
+    }
+
+    .hebergements-cards .card {
+        width: 100%;
+    }
+
+    /* Activities */
+
+    .activities {
+        padding-top: 1%;
+        height: 1270px;
+    }
+
+    .activities-card {
+        width: auto;
+        grid-template-columns: auto;
+        gap: 12px;
+    }
+
+    .activities-card .card {
+        width: 90%;
+        height: 160px;
+        padding-bottom: 30px;
+    }
+
+    .activities-card .card .img {
+        width: 100%;
+    }
+
+    /* Footer */
+
+    .footer {
+        width: 100%;
+        grid-template-columns: 75%;
+        padding-bottom: 25px;
+    }
+
+    .about-content,
+    .help-content,
+    .our-host-content {
+        gap: 8px;
+    }
+
 }
\ No newline at end of file
diff --git a/images/logo/coeur.jpg b/images/logo/coeur.jpg
new file mode 100644
index 00000000..c7ec0d67
Binary files /dev/null and b/images/logo/coeur.jpg differ
diff --git a/images/logo/dollar.jpg b/images/logo/dollar.jpg
new file mode 100644
index 00000000..26ffbdd5
Binary files /dev/null and b/images/logo/dollar.jpg differ
diff --git a/images/logo/famille.jpg b/images/logo/famille.jpg
new file mode 100644
index 00000000..2f1a913e
Binary files /dev/null and b/images/logo/famille.jpg differ
diff --git a/images/logo/flammes.jpg b/images/logo/flammes.jpg
new file mode 100644
index 00000000..6564d1a2
Binary files /dev/null and b/images/logo/flammes.jpg differ
diff --git a/images/logo/map-localisation_logo.jpg b/images/logo/map-localisation_logo.jpg
new file mode 100644
index 00000000..d5a0501e
Binary files /dev/null and b/images/logo/map-localisation_logo.jpg differ
diff --git a/index.html b/index.html
index 53512c75..2eb6c59b 100644
--- a/index.html
+++ b/index.html
@@ -16,21 +16,216 @@
 
 <body>
     <div class="main-container">
-        <header></header>
-        <main>
+        <!-- HEADER -->
+        <header class="header">
+            <div class="logo">
+                <img src="images/logo/Booki.png" alt="Logo Booki" style="width: 61px; height: 19px;">
+            </div>
+            <div class="navigation">
+                <div class="host-header">Hébergements</div>
+                <div class="activities-header">Activités</div>
+            </div>
+        </header>
+
+        <main class="main">
+            <!-- HEADLINE -->
+            <div class="headline">
+                <h2 class="headline-title">Trouvez votre hébergement<br class="break-small-screen"> pour des vacances de rêve</h2>
+                <div class="headline-subtitle">En plein centre-ville ou en pleine nature</div>
+            </div>
+
+            <!-- SEARCHBAR -->
+            <div id="search-bar">
+                <label for="search-input" id="search-logo"><i class="fa-solid fa-location-dot"></i></label>
+                <input type="search" name="search" id="search-input" placeholder="   Marseille, France">
+                <button id="search-button">
+                    <span class="search-text">Rechercher</span>
+                    <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                </button>
+            </div>
+
+            <!-- FILTERBAR -->
+            <section class="filters">
+                <p id="filter-label">Filtres</p>
+                <div class="filter-buttons">
+                    <button class="filter" id="eco-button"><span><i class="fa-solid fa-money-bill-wave"></i></span> <span
+                            class="filter-span"></span>Économique</button>
+                    <button class="filter" id="fam-button"><span><i class="fa-solid fa-person"></i></span> <span
+                            class="filter-span"></span>Familial</button>
+                    <button class="filter" id="rom-button"><span><i class="fa-solid fa-heart"></i></span> <span
+                            class="filter-span"></span>Romantique</button>
+                    <button class="filter" id="pep-button"><span><i class="fa-solid fa-fire"></i></span> <span
+                            class="filter-span"></span>Nos pépites</button>
+                </div>
+            </section>
+            
+            <!-- INFOBAR -->
+            <div class="infobar">
+                <div class="info-icon-container">
+                    <i class="fa-solid fa-info info-icon"></i>
+                </div>
+                <div class="infobar-text">Plus de 500 logements sont disponibles dans cette ville</div>
+            </div>
+
+            <!-- HEBERGEMENTS & POPULAIRES -->
             <div class="hebergements-and-populaires">
+
+                <!-- SECTION HEBERGEMENTS -->
                 <section class="hebergements">
+                    <div class="hebergements-title">
+                        <h2 class="section-title">Hébérgements à Marseille</h2>
+                    </div>
+
+                    <div class="hebergements-cards">
+                        <!-- IMAGE 1 -->
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/hebergements/fred-kleber.jpg"
+                                    alt="Photo montrant la chambre avec fenêtre">
+                                <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>
+
+                        <!-- IMAGE 2 -->
+                        <a href="#">
+
+                            <article class="card">
+                                <img src="images/hebergements/febrian-zakaria.jpg"
+                                    alt="Photo montrant la chambre avec deux lits et une fenêtre">
+                                <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>
+
+                        <!-- IMAGE 3 -->
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/hebergements/reisetopia.jpg"
+                                    alt="Photo montrant la chambre avec 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>
 
+                        <!-- IMAGE 4 -->
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/hebergements/annie-spratt.jpg"
+                                    alt="Photo montrant la chambre avec un lit et 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>
+
+                        <!-- IMAGE 5 -->
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/hebergements/marcus-loke.jpg"
+                                    alt="Photo montrant la chambre avec deux lits superposés et une fenêtre">
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Auberge la Cannebiè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>
+
+                        <!-- IMAGE 6 -->
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/hebergements/nicate-lee.jpg"
+                                    alt="Photo montrant la chambre avec quatre lits superposés">
+                                <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>
+                    <div class="show-more">Afficher plus</div>
                 </section>
+
+                <!-- SECTION POPULAIRES -->
                 <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>
                     </div>
                     <div class="populaires-cards">
+                    <!-- Card 1 -->
                         <a href="#">
                             <article class="card">
-                                <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <img src="./images/hebergements/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>
@@ -47,9 +242,11 @@ <h3 class="card-title">Hôtel Le soleil du matin</h3>
                                 </div>
                             </article>
                         </a>
+                        <!-- Card 2 -->
                         <a href="#">
                             <article class="card">
-                                <img src="./images/hebergements/aw-creative.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <img src="./images/hebergements/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>
@@ -66,9 +263,11 @@ <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
                                 </div>
                             </article>
                         </a>
+                        <!-- Card 3 -->
                         <a href="#">
                             <article class="card">
-                                <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                <img src="./images/hebergements/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>
@@ -88,8 +287,84 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
+
+            <!-- ACTIVITES -->
+            <section class="activities">
+                <div class="activities-title">
+                    <h2 class="section-title">Activités à Marseille</h2>
+                </div>
+
+                <div class="activities-card">
+                    <!-- ACTIVITES 1 -->      
+                    <a href="#">              
+                        <article class="card">
+                            <img src="images/activites/reno-laithienne.jpg" alt="Photo du Vieux-Port de Marseille">
+                            <div class="card-txt">
+                                <h3 class="card-title">Vieux-Port</h3>
+                            </div>
+                        </article>                    
+                    </a>
+
+                    <!-- ACTIVITES 2 -->
+                    <a href="#">
+                        <article class="card" id="card-2">
+                            <img src="images/activites/paul-hermann.jpg" alt="Photo du fort de Pomègues">
+                            <div class="card-txt">
+                                <h3 class="card-title">Fort de Pomègues</h3>
+                            </div>
+                        </article>
+                    </a>
+
+                    <!-- ACTIVITES 3 -->
+                    <a href="#">
+                        <article class="card">
+                            <img src="images/activites/kilyan-sockalingum.jpg" alt="Photo d'une calanque de Marseille">
+                            <div class="card-txt">
+                                <h3 class="card-title">Parc national des Calanques</h3>
+                            </div>
+                        </article>
+                    </a>
+
+                    <!-- ACTIVITES 4 -->
+                    <a href="#">
+                        <article class="card">
+                            <img src="images/activites/florian-wehde.jpg" alt="Photo de Notre-Dame-de-la-Garde">
+                            <div class="card-txt">
+                                <h3 class="card-title">Notre-Dame-de-la-Garde</h3>
+                            </div>
+                        </article>
+                    </a>
+                </div>
+            </section>
         </main>
-        <footer></footer>
+
+        <!-- FOOTER -->
+        <footer class="footer">
+            <div class="column">
+                <h3 class="about">À propos</h3>
+                <div class="about-content">
+                    <div class="site-operation">Fonctionnement du site</div>
+                    <div class="generals-conditions">Conditions générales</div>
+                    <div class="data-privacy">Données et confidentialité</div>
+                </div>
+            </div>
+            <div class="column">
+                <h3 class="our-host">Nos hébergements</h3>
+                <div class="our-host-content">
+                    <div class="quality-chart">Charte qualité</div>
+                    <div class="hotel-suggestion">Proposer votre hôtel</div>
+                </div>
+            </div>
+            <div class="column">
+                <h3 class="help">Assistance</h3>
+                <div class="help-content">
+                    <div class="help-center">Centre d'aide</div>
+                    <div class="contact">Nous contacter</div>
+                </div>
+            </div>
+        </footer>
+
+
     </div>
 </body>