diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..a45a0365
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/style.css b/css/style.css
index f6c96c4d..bfd8a598 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,7 @@
 /****** General ***********/
 * {
     font-family: 'Raleway', sans-serif;
+    margin-inline: 0;
 }
 
 :root {
@@ -13,15 +14,184 @@
     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 {
+    width: 50px;
+}
+
+.navigation a:hover {
+    color: #0065FC;
+    border-top: 2px solid #0065FC;
+}
+
+#navbar-hebergements {
+    margin-left: auto;
+    font-size: 13px;
+    padding-top: 20px;
+  }
+
+#navbar-activites {
+    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;
+    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;
-    justify-content: center;
+    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;
+}
+
+.filtre:hover {
+    background-color: #DEEBFF;
+}
+
+
+.fa-money-bill-wave, 
+.fa-person, .fa-heart, .fa-fire {
+    padding-right: 10px;
+}
+
+
+        /* Main  */
+
 .main-container {
     width: 100%;
     max-width: 1440px;
-    padding: 0 50px;
     box-sizing: border-box;
 }
 
@@ -30,15 +200,9 @@ a {
     text-decoration: none;
 }
 
-.section-title {
-    margin: 0;
-    font-size: 22px;
-}
-
 .card {
     background-color: white;
     border-radius: 20px;
-    padding: 5px;
     filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
 }
 
@@ -60,6 +224,7 @@ a {
 
 /****** Hebergements And Populaires ***********/
 .hebergements-and-populaires {
+    padding: 0 50px;
     display: flex;
     justify-content: space-between;
 }
@@ -67,21 +232,74 @@ a {
 .hebergements-and-populaires section {
     background-color: var(--main-bg-color);
     border-radius: 20px;
-    padding: 30px;
+    padding: 0px 30px;
     box-sizing: border-box;
 }
 
+
 /****** Hebergements ***********/
 .hebergements {
     width: 65%;
 }
 
+.hebergements-title {
+    padding: 10px 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.hebergements-cards {
+    justify-content: space-between;
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.hebergements-cards .card {
+    display: flex; 
+    flex-direction: column;
+    background-color: white;
+    border-radius: 20px;
+    padding: 5px;
+    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
+}
+
+.hebergements-cards a {
+    width: 30%;
+}
+
+.hebergements-cards img {
+    height: 110px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+}
+
+.hebergements-cards .card-content {
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+
+.hebergements-cards .card-title {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.hebergements-cards .card-subtitle {
+    margin-bottom: 5px;
+}
+
+.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;
@@ -89,7 +307,11 @@ a {
 
 .populaires-cards .card {
     display: flex;
-    margin-top: 33px;
+    margin-bottom: 30px;
+    background-color: white;
+    border-radius: 20px;
+    padding: 5px;
+    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
 }
 
 .populaires-cards img {
@@ -121,7 +343,64 @@ a {
     margin-bottom: 5px;
 }
 
+        /****** Activites ***********/
+
+.activites-section {
+    padding: 40px 70px;
+}
 
+.activites-title {
+    margin-bottom: 30px;
+}
+
+.activites-cards {
+    display: flex;
+    justify-content: space-between;
+}
+
+.activites-cards .card {
+    display: flex; 
+    flex-direction: column;
+}
+
+.activites-cards a {
+   width: 24%;
+}
+
+.activites-cards img {
+    height: 300px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+}
+
+.activites-cards .card-content {
+    height: 70px;
+    display: flex;
+    padding-left: 10px;
+    box-sizing: border-box;
+}
+
+.activites-cards .card-title {
+    align-items: center;
+}
+
+/****** Footer ***********/
+
+
+.footer {
+    background-color: #F2F2F2;
+    margin: 50px;
+    margin-bottom: 0;
+    padding: 10px 15px;
+}
+
+.footer-text {
+    display: flex;
+}
+
+#a-propos, #nos-hebergements {
+    padding-right: 200px;
+}
 
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
@@ -131,6 +410,7 @@ a {
 @media (max-width: 1024px) {
     .hebergements-and-populaires {
         flex-direction: column;
+        gap: 30px;
     }
 
     .hebergements {
@@ -139,7 +419,6 @@ a {
 
     .populaires {
         width: 100%;
-        margin-top: 50px;
     }
 
     .populaires-cards {
@@ -149,7 +428,7 @@ a {
     }
 
     .populaires-cards a {
-        width: 30%;
+        width: 32%;
     }
 
     .populaires-cards .card-title {
@@ -162,6 +441,200 @@ a {
 }
 
 /* Small devices (phones, less than 768px) */
-@media (max-width: 767.98px) {
-    /* ... */
-}
\ No newline at end of file
+@media (max-width: 768px) {
+    /* Header */
+
+    /* Navbar */
+
+    .topnav {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .logo {
+        justify-content: center;
+        padding-bottom: 10px;
+    }
+
+    .navigation {
+        display: flex;
+        justify-content: center;
+    }
+
+    #navbar-hebergements {
+        font-size: 16px;
+        border-bottom: 2px solid #F2F2F2;
+        padding-inline: 80px;
+    } 
+
+
+    #navbar-activites {
+        font-size: 16px;
+        border-bottom: 2px solid #F2F2F2;
+        padding-inline: 80px;
+        margin-left: 0;
+        }   
+
+    #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 */
+
+
+        .hebergements-and-populaires {
+            flex-direction: column-reverse;
+            padding-inline: 0;
+        }
+
+        .hebergements-and-populaires .hebergements {
+            background-color: white;
+        }
+
+        .hebergements-and-populaires section {
+            border-radius: 0px;
+        }
+
+        .populaires-cards {
+            flex-direction: column;
+        }
+
+        .populaires-cards a {
+            width: 100%;
+        }
+
+        .populaires-cards img {
+            width: 33%;
+            height: 136px;
+            border-top-left-radius: 20px;
+            border-bottom-left-radius: 20px;
+        }
+
+        .populaires-cards .card-content {
+            width: 67%;
+        }
+
+              .hebergements-cards {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 20px;
+            }
+
+            .hebergements-cards .card {
+                display: flex; 
+            }
+            
+            .hebergements-cards a {
+                width: 100%;
+            }
+
+            .activites-section {
+                margin-top: 30px;
+                padding: 0px 30px;
+            }
+
+            .activites-cards {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .activites-cards a {
+                width: 100%;
+             }
+
+             .activites-cards img {
+                height: 140px;
+                border-top-left-radius: 20px;
+                border-top-right-radius: 20px;
+            }
+
+            .activites-cards .card-content {
+                height: 50px;
+                display: flex;
+                padding-left: 10px;
+                box-sizing: border-box;
+            }
+            
+
+        /* Footer */
+
+              .footer section {
+                background-color: #F2F2F2;
+            }
+
+            .footer {
+                margin: 0px;
+                margin-top: 50px;
+                margin-bottom: 0;
+                padding: 30px 30px;
+            }
+
+            .footer-text {
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+            }
+
+            #a-propos, #nos-hebergements {
+                padding-right: 0px;
+            }
+
+}
+
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..72987f02
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/index.html b/index.html
index 53512c75..66f59d39 100644
--- a/index.html
+++ b/index.html
@@ -11,20 +11,217 @@
     <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/fred-kleber.jpg" alt="Image de la chambre d'hôtel grise montrant 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 montrant deux lits, un bureau et une lampe">
+                                <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 et un placard">
+                                <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 montrant un lit et une peinture de la mer">
+                                <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 superposé et une fenêtre donnant sur la rue">
+                                <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 des lits superposés dans un dortoir">
+                                <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>
+                    <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">
@@ -88,9 +285,84 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
+
+                <!-- Activites a Marseille -->
+
+                <section class="activites-section">
+                    <div class="activites-title">
+                     <h1>Activités à Marseille</h1>
+                    </div>
+                     <div class="activites-cards">
+                     <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/reno-laithienne.jpg" alt="Image du vieux port">
+                            <div class="card-content">
+                                <div class="card-txt">
+                                    <h3 class="card-title">Hôtel Bleu et Blanc</h3>
+                                </div>
+                            </div>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/paul-hermann.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                            <div class="card-content">
+                                <div class="card-txt">
+                                    <h3 class="card-title">Fort de Pomègues</h3>
+                                </div>
+                            </div>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/kilyan-sockalingum.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                            <div class="card-content">
+                                <div class="card-txt">
+                                    <h3 class="card-title">Parc national des Calanques</h3>
+                                </div>
+                            </div>
+                        </article>
+                    </a>
+                    <a href="#">
+                        <article class="card">
+                            <img src="./images/activites/florian-wehde.jpg" alt="Image d'une ville en contrebas">
+                            <div class="card-content">
+                                <div class="card-txt">
+                                    <h3 class="card-title">Notre-dame-de-la-garde</h3>
+                                </div>
+                            </div>
+                        </article>
+                    </a>
+                    </div>
+                </section>
         </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>
+    
+   
 
 </html>
\ No newline at end of file