diff --git a/css/style.css b/css/style.css
index f6c96c4d..bf35e7c9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,8 @@
 /****** General ***********/
+html{ /* when widht of screen more than 1440 px, the body is in center of html */
+    display: flex;
+    justify-content: center;
+}
 * {
     font-family: 'Raleway', sans-serif;
 }
@@ -9,6 +13,7 @@
     --filter-bg-color: #DEEBFF;
 }
 
+
 .fa-solid {
     color: var(--main-color);
 }
@@ -16,11 +21,13 @@
 body {
     display: flex;
     justify-content: center;
+    flex-direction: column;
+    max-width: 1440px;/* maximum width at 1440 px to correctly handle screens with high resolution */
+    margin: inherit;
 }
 
 .main-container {
     width: 100%;
-    max-width: 1440px;
     padding: 0 50px;
     box-sizing: border-box;
 }
@@ -30,9 +37,11 @@ a {
     text-decoration: none;
 }
 
-.section-title {
+.section-title { 
     margin: 0;
     font-size: 22px;
+    font-weight: 700;
+    line-height: 25.83px;
 }
 
 .card {
@@ -40,15 +49,14 @@ a {
     border-radius: 20px;
     padding: 5px;
     filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
+    
 }
 
-.card img {
+.card img {/* Images cannot distort*/
     object-fit: cover;
 }
 
-.card-title {
-    font-size: 16px;
-}
+
 
 .euro {
     font-weight: 700;
@@ -58,78 +66,351 @@ a {
     color: var(--main-bg-color)
 }
 
-/****** Hebergements And Populaires ***********/
-.hebergements-and-populaires {
+.side-padding{
+    padding: 30px 50px 30px 50px; /* add this to add padding on the side of the page*/
+}
+h2{
+    margin: 0px;
+}
+h3{/* Inherit all H3 margin*/ 
+    margin: 0px;
+}
+
+/****** CSS HEADER *************************************************************************/
+.header-logo-link{
     display: flex;
     justify-content: space-between;
 }
 
-.hebergements-and-populaires section {
+.link-hebergement-activities{
+    display: flex;
+}
+
+.link-hebergement-activities a{
+    margin: 0 50px 0 50px; /*make the gap btw links*/
+    padding: 15px 0 0 0;
+}
+
+.link-hebergement-activities a:hover{
+    color: #0065FC;
+    border-top: #0065FC solid 2px;
+}
+
+.booki-image{
+    width: 61.09px;
+    height: 19px;
+}
+/****** Nav filter css ****************************************************/
+.search-bar{
+    display: flex;
+    align-items: center;
+    margin-top: 35px;
+    width: 377px;
+    height: 49px;
+}
+
+.text-nav{
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 21.13px;
+}
+
+/****************** Headline CSS ******************************************************/
+
+.headline h2{
+    margin-bottom: 10px; /*make space btw H2 and P from the nav*/
+}
+.healine-txt{
+   font-weight: 400;
+   font-size: 16px;
+   line-height: 18.78px;
+}
+.container-icon-localisation{ /*this part is for background of the icon location and centered it*/
+    border-radius: 15px 0 0 15px;
+    background-color: #F2F2F2;
+    border: 1px #F2F2F2 solid;
+}
+
+.container-icon-localisation i{ /* center icon with flexbox and fixed widht widht*/
+    width: 50px;
+    height: 49px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: black; /* color black for icon localisation*/
+}
+/* Div input css*/
+
+.input{
+    text-align: center;
+    height: 46px;
+    border: solid 1px #F2F2F2 ;
+}
+
+::placeholder{
+    color: black;
+}
+/* Div search button CSS*/
+.search-button{
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    height: 49px;
+    border-radius: 0 15px 15px 0;
+    padding: 15px 16px 15px 16px;
+    background-color: #0065FC;
+    color: white;
+    border: 1px solid #0065FC;
+}
+
+/************************ Filtres  CSS *******************************************************/
+
+.filter-bar{
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-top: 35px;
+}
+
+.filter-button{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: 25px;
+    border: solid 2px #D9D9D9;
+    padding: 10px 19px; 
+    white-space: nowrap;
+}
+
+.text-button{
+    font-size: 17px;
+    font-weight: 700;
+    line-height: 19.96px;
+}
+
+.filter-image { /* make all icon align to the center zith fixed height and width*/
+    display: flex;
+    align-items: center;
+    width: 22px;
+    height: 22px;
+}
+
+.filter-button:hover{ /* when pass over change background and cursor, on the filter button*/
+    background-color: #DEEBFF;
+    cursor: pointer;
+}
+/* Div info-bar CSS */
+
+.icon-information{
+    width: 24px;
+    height: 24px;
+    border: solid 1px #D9D9D9;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.info-bar{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 35px;
+}
+
+.information{
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 19px;
+    margin: 0px;
+}
+
+/****** Hebergements And Populaires *******************************************/
+.hebergements-and-populares {
+    display: flex;
+    justify-content: space-between;
+}
+
+.hebergements-and-populares section {
     background-color: var(--main-bg-color);
     border-radius: 20px;
     padding: 30px;
     box-sizing: border-box;
 }
 
-/****** Hebergements ***********/
-.hebergements {
+/****** Hebergements *****************************************************/
+.hebergements { /* Take 65% of page widht*/ 
     width: 65%;
 }
 
-/****** Populaires ***********/
-.populaires {
+section .hebergements-card-section-one, .hebergements-card-section-two  {/* Make the first section of card flex */
+    display: flex;
+    gap: 25px;
+    margin-top: 33px;
+    padding: inherit;
+}
+
+.hebergements .show-more{
+    margin-top: 30px;
+}
+section .hebergements-card-section-two{
+    padding: inherit;
+}
+
+.hebergements-card-section-one a{/* make the card block take all the width of is parent*/
+    width: 100%;
+}
+
+.hebergements-card-section-two a{/* make the card block take all the width of is parent*/
+    width: 100%;
+}
+.hebergements-card img{/* make the image take all widht of is parent and have fixed height*/
+    width: 100%;
+    height: 124px;
+    border-radius: 20px 20px 0 0;
+}
+
+.card-txt, .card-rating{
+    padding: 0px 0px 0px 15px;
+    margin: 4px 0; /* Make gap btw rating and txt card */
+}
+
+.card-title{
+    margin-bottom: 8px; /* Make gap btw hotel title and price room*/ 
+    white-space: inherit;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 18.78px;
+} 
+
+.height-adujst{
+    height: 100%;
+}
+/********************* populares CSS  **********************************************************************************/
+.populares {
     width: 32%;
 }
 
-.populaires-title {
+.populares-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.populaires-cards .card {
+.populares-cards .card {
     display: flex;
-    margin-top: 33px;
+    margin-top: 30px;
+    height: 146px;/* fixed height*/
 }
 
-.populaires-cards img {
+.populares-cards img {
     width: 33%;
-    height: 136px;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
 }
 
-.populaires-cards .card-content {
+.populares-cards .card-content {
     width: 67%;
-    padding-left: 15px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-sizing: border-box;
 }
 
-.populaires-cards .card-title {
+.populares-cards .card-title {
     margin-top: 10px;
     margin-bottom: 4px;
 }
 
-.populaires-cards .card-subtitle {
+.populares-cards  {
     margin: 0;
 }
 
-.populaires-cards .card-rating {
+.card-subtitle{
+    margin: 0;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16.44px;
+}
+.populares-cards .card-rating {
     margin-bottom: 5px;
 }
 
+/***********Activities section ***************************************************/
+.activities{
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
+    gap: 30px;
+    padding: 30px;
+}
+
+.activities-cards{/*Position Cards activities block*/
+    display: flex;
+    gap: 30px;
+}
+
+.activities-cards a {/* Ajust widht max*/
+   width: 100%;
+}
+.card-img{ /* Inherit the pading from class .card*/
+    padding: inherit;
+    height: 100%;
+}
+
+.card-img img{ /*Images from activities card css*/
+    width: 100%;
+    height: 380px;
+    border-radius: 20px 20px 0 0;
 
+}
 
+.title-card-activities{
+    padding: 20px 19px 20px 19px;
+}
+
+/****** Footer CSS *******************************************/
+.footer-content{/* Flex container of footer*/
+    display: flex;
+    background-color: #F2F2F2;
+    margin-top: 50px;
+    padding: 20px;
+}
+
+.footer-content section{
+    width: 100%;
+}
+
+ul{/* Sup liste style and padding */
+    list-style: none;
+    padding-left: 0px;
+}
+
+li{/* Put Gap btw each listes*/
+    margin-top: 15px;
+}
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
 
 /****** Media queries ***********/
 /* Medium devices (tablets, less/equal than 1024px) */
 @media (max-width: 1024px) {
-    .hebergements-and-populaires {
+    /* filter CSS */
+    .filter-bar{/* display flex replace by grid */
+        display: grid;
+        width: 668px; /* fixed the width */
+        grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 column with egal widht */
+        grid-template-rows: repeat(2, auto); /* 3 automatic height lines */
+        gap: 20px; /* Spacing between elements */
+        margin-top: 20px;
+    }
+    
+    .grid-adjust{
+        grid-column: 1 / span 4; /* Title  hold the 4 column */
+    }
+
+    /* *************** Hebergement and Popular CSS ***********************/
+    .hebergements-and-populares {
         flex-direction: column;
     }
 
@@ -137,31 +418,211 @@ a {
         width: 100%;
     }
 
-    .populaires {
+    .populares {
         width: 100%;
         margin-top: 50px;
     }
 
-    .populaires-cards {
+    .populares-cards {
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+        gap: 20px;
     }
-
-    .populaires-cards a {
-        width: 30%;
+    
+    .populares-cards a {
+        width: 100%;
     }
 
-    .populaires-cards .card-title {
+    .populares-cards .card-title {
         font-size: 14px;
     }
 
-    .populaires-cards .card-subtitle {
+    .populares-cards .card-subtitle {
         font-size: 13px;
     }
+
+    .card-img img{ /*Images from activities card css*/
+        width: 100%;
+        height: 200px;
+    
+    }
+    
 }
 
 /* Small devices (phones, less than 768px) */
-@media (max-width: 767.98px) {
+@media (max-width: 768px){
     /* ... */
+    .main-container{  /* Inherit padding make the main no padding */ 
+        padding: 0%;
+    }
+
+    /****** CSS HEADER *************************************************************************/
+.header-logo-link{
+    align-items: center;
+    flex-direction: column;
+}
+
+.link-hebergement-activities {
+    width: 100%;
+}
+
+.link-hebergement-activities a {
+    margin: inherit;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 15px;
+}
+.link-hebergement-activities a:hover{/* show the border bottom phone screen*/
+    color: #0065FC;
+    border-bottom: #0065FC solid 2px;
+    border-top: none;
+}
+
+/****** Nav filter css ****************************************************/
+.info-group{
+    padding: 0 20px 0 20px;
+    margin-top: 35px;
+}
+
+.search-bar{
+    width: 335px;/*Ajust the widht*/
+    border: solid 2px #F2F2F2;
+    border-radius: 25px;
+    display: flex;
+    justify-content: space-between;/* Add display flex, like that, all tag take all width */
+}
+
+.search-button {
+    /* Use an icon image as a background*/
+    background-image: url(/images/icons-maquette-figma/Vector.png);
+    /* Center the icon horizontally and vertically in the button */
+    background-position: center;
+    background-repeat: no-repeat;
+    /* Hide text */
+    text-indent: -9999px; /* Cette valeur doit être suffisamment grande pour cacher le texte */
+    cursor: pointer;
+}
+
+/* Headline CSS*/
+.headline h2{
+    margin-bottom: 10px; /*make space btw H2 and P from the nav*/
+}
+
+/* Div input css*/
+.input{
+    border: none;
+}
+
+/* Div search button CSS*/
+.search-button{
+    border-radius: 15px;
+    width: 49px;
+    box-shadow: 0px 4px 4px 0px #00000040;
+
+}
+
+/****** Filtres  CSS ************/
+.filter-bar{/* Add one more ROWS and delete one column*/
+    width: 100%; /* replace widht= 668px of tab version, from width=100%, like that, the width auto adjust*/
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Two columns of equal width */
+    grid-template-rows: repeat(3, auto); /* Three automatic height lines */
+    gap: 20px; /* Spacing between elements */
+    margin-top: 35px;
+}
+
+.grid-adjust{
+    grid-column: 1 / span 2; /* Title  hold the 2 column */
+}
+
+.text-button{/* change for more space into button*/
+    font-size: 14px;
+    line-height: 16.44px;
+}
+
+.filter-button:hover{ /* when pass over change background and cursor, on the filter button*/
+    background-color: #DEEBFF;
+    cursor: pointer;
+}
+/* Div info-bar CSS */
+.info-bar{
+    display: flex;
+    align-items: center;
+    gap: 10px
+}
+.information{
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 19px;
+    margin: 0px;
+}
+
+/****** Hebergements And Populaires *******************************************/
+.hebergements-and-populares { /* direction changement*/
+    flex-direction: column-reverse; 
+}
+
+.hebergements-and-populares section{/* Delete section content radius + background-color */
+    border-radius: 0px;
+    background-color: inherit;
+}
+
+/****** Hebergements *****************************************************/
+.hebergements { /* Take 100% of page widht phone display*/ 
+    width: 100%;
+}
+
+section .hebergements-card-section-one, .hebergements-card-section-two  {/* Make the first section of card flex */
+    display: flex;
+    flex-direction: column;
+}
+/****** Populaires **********************************************************************************/
+
+/*Delete widht 32% from class populaire  for phone display*/
+
+.hebergements-and-populares .populares {/* give back the color to populaires section */
+    background-color: var(--main-bg-color);
+}
+
+.populares-cards{/* card of populaires column direction with display flex */
+    flex-direction: column;
+}
+
+.populares-cards a{/*all card take 100% of his parent*/
+    width: 100%;
+}
+
+.populares-cards img {/* image same height */
+    height: 146px;
+}
+
+.populares-cards .card-content {
+    padding: 0%;
+}
+
+/***********Activities section ***************************************************/
+
+.activities-cards{/*Position Cards activities in column */
+    flex-direction: column;
+    gap: 15px;
+}
+
+.card-img{ /* Inherit the pading from class .card*/
+    padding: inherit;
+    height: 100%;
+}
+
+.card-img img{ /* Ajust height Images from activities card css*/
+    height: 141px;
+}
+
+/****** Footer CSS *******************************************/
+.footer-content{/* changement Flex direction container of footer + add 10px of padding each section*/
+    flex-direction: column;
+    padding: 30px;
+}
+
+.footer-content section{/* Add a margin top to separate each section */ 
+    margin-top: 30px;
+}
+
 }
\ No newline at end of file
diff --git a/images/icons-maquette-figma/Vector.png b/images/icons-maquette-figma/Vector.png
new file mode 100644
index 00000000..8503715b
Binary files /dev/null and b/images/icons-maquette-figma/Vector.png differ
diff --git a/index.html b/index.html
index 53512c75..2aec841d 100644
--- a/index.html
+++ b/index.html
@@ -2,32 +2,204 @@
 <html lang="fr">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8"><!-- specific caracter-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Booki</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com"><!-- error link -->
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><!--error link -->
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+    <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">
+        crossorigin="anonymous" referrerpolicy="no-referrer" /><!-- icon link-->
+    <link rel="stylesheet" href="./css/style.css"><!-- link to css-->
 </head>
 
 <body>
-    <div class="main-container">
-        <header></header>
-        <main>
-            <div class="hebergements-and-populaires">
-                <section class="hebergements">
+    <header class="header-logo-link"><!-- Header part with LOGO and hebergement, activities link-->
+            <div class="side-padding">
+                <img src="./images/logo/Booki.png" alt="logo Booki" class="booki-image">
+            </div> 
+            <div class="link-hebergement-activities">
+                <a href="#hebergements" rel="noopener noreferrer"><p class="card-subtitle">Hébergements</p></a><!-- link going to Hebergement section-->
+                <a href="#activities" rel="noopener noreferrer"><p class="card-subtitle">Activités</p></a><!-- link going to Activities section-->
+            </div>
+    </header>
+    <nav class="info-group side-padding"><!-- Navigation part with presentation, search-bar, filter-bar and info-bar-->
+        <div class="headline"> <!-- presentation of the website -->
+            <h2 class="section-title marge">Trouvez votre hébergement pour des vacances de rêve</h2>
+            <p class="healine-txt">En plein centre-ville ou en pleine nature</p>
+        </div>
+        <div class="search-bar"> <!-- search bar, for each city you looking for-->
+            <div class="container-icon-localisation">
+                <i class="fa-solid fa-location-dot"></i>
+            </div>
+            <form action="" method="get">
+                <input type="text" name="city" id="city" placeholder="Marseille, France" class="input text-nav">
+            </form>
+            <button type="button" class="text-nav search-button" aria-label="Rechercher">Rechercher</button><!-- aria-labe This ensures that alt text is available to users who rely on assistive technologies, i add this when the text 'Rechercher' i'll be replaced by search icon -->
+        </div>
+        <div class="filter-bar"><!-- Part for filter with specific demand-->
+            <h2 class="text-nav grid-adjust">Filtres</h2>
+            <div class="economies-filter filter-button">
+                <i class="fa-lg color-main fa-solid fa-money-bill-wave filter-image"></i>
+                <h2 class="text-button">Économique</h2>
+            </div>
+            <div class="familial-filter filter-button">
+                <i class="fa-lg color-main fa-solid fa-person filter-image"></i>
+                <h2 class="text-button">Familial</h2>
+            </div>
+            <div class="romantic-filter filter-button">
+                <i class="fa-lg color-main fa-solid fa-heart filter-image"></i>
+                <h2 class="text-button">Romantique</h2>
+            </div>
+            <div class="our-best-filter filter-button">
+                <i class="fa-lg color-main fa-solid fa-fire filter-image"></i>
+                <h2 class="text-button">Nos pépites</h2>
+            </div>
+        </div>
+        <div class="info-bar"><!-- information for many lodgement in this localisation-->
+            <i class=" fa-xs fa-solid color-main fa-info icon-information"></i>
+            <p class="information">Plus de 500 logements sont disponibles dans cette ville</p>
+        </div>
+    </nav>
+    <div class="main-container"><!-- Main part and footer part-->
+        <main><!-- Main part with hebergement, activities and Populare section-->
+            <div class="hebergements-and-populares"><!-- First part of main with populare and hebergement section-->
+                <section class="hebergements" id="hebergements"><!-- hebergement section with id who do the link with anchor-->
+                    <div class="hebergements-title"><!-- Hebergement title-->
+                        <h2 class="section-title">Hébergements à Marseille</h2>
+                    </div>
+                    <div class="hebergements-card"><!-- All card to show the hebergement-->
+                        <section class="hebergements-card-section-one">
+                            <a href="#" target="_blank" rel="noopener noreferrer">
+                                <article class="card height-adujst">
+                                    <img src="./images/hebergements/fred-kleber.jpg" alt="Image de la chambre d'hôtel montrant un lit" class="test">
+                                    <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="#" target="_blank" rel="noopener noreferrer">
+                                <article class="card height-adujst">
+                                    <img src="./images/hebergements/febrian-zakaria.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                    <div class="card-content">
+                                        <div class="card-txt">
+                                            <h3 class="card-title">Hôtel Chez Amina</h3>
+                                            <p class="card-subtitle">Nuit à partir de 96<span class="euro">€</span></p>
+                                        </div>
+                                        <div class="card-rating">
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                            <span class="sr-only">Note de 4 sur 5</span>
+                                        </div>
+                                    </div>
+                                </article>
+                            </a>
+                            <a href="#" target="_blank" rel="noopener noreferrer">
+                                <article class="card height-adujst">
+                                    <img src="./images/hebergements/reisetopia.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                    <div class="card-content">
+                                        <div class="card-txt">
+                                            <h3 class="card-title">Hôtel Les mouettes</h3>
+                                            <p class="card-subtitle">Nuit à partir de 76<span class="euro">€</span></p>
+                                        </div>
+                                        <div class="card-rating">
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                            <span class="sr-only">Note de 4 sur 5</span>
+                                        </div>
+                                    </div>
+                                </article>
+                            </a>
+                        </section>
 
+                        <section class="hebergements-card-section-two">
+                            <a href="#" target="_blank" rel="noopener noreferrer">
+                                <article class="card height-adujst">
+                                    <img src="./images/hebergements/annie-spratt.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                    <div class="card-content">
+                                        <div class="card-txt">
+                                            <h3 class="card-title">Hôtel de la mer</h3>
+                                            <p class="card-subtitle">Nuit à partir de 46<span class="euro">€</span></p>
+                                        </div>
+                                        <div class="card-rating">
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                            <span class="sr-only">Note de 4 sur 5</span>
+                                        </div>
+                                    </div>
+                                </article>
+                            </a>
+                            <a href="#" target="_blank" rel="noopener noreferrer">
+                                <article class="card height-adujst">
+                                    <img src="./images/hebergements/marcus-loke.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                    <div class="card-content">
+                                        <div class="card-txt">
+                                            <h3 class="card-title">Auberge La Canebière</h3>
+                                            <p class="card-subtitle">Nuit à partir de 25<span class="euro">€</span></p>
+                                        </div>
+                                        <div class="card-rating">
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                            <span class="sr-only">Note de 4 sur 5</span>
+                                        </div>
+                                    </div>
+                                </article>
+                            </a>
+                            <a href="#" target="_blank" rel="noopener noreferrer">
+                                <article class="card height-adujst">
+                                    <img src="./images/hebergements/nicate-lee.jpg" alt="Image de la chambre d'hôtel montrant un lit">
+                                    <div class="card-content">
+                                        <div class="card-txt">
+                                            <h3 class="card-title">Auberge Le Panier</h3>
+                                            <p class="card-subtitle">Nuit à partir de 23<span class="euro">€</span></p>
+                                        </div>
+                                        <div class="card-rating">
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                            <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                            <span class="sr-only">Note de 4 sur 5</span>
+                                        </div>
+                                    </div>
+                                </article>
+                            </a>
+                         </section>
+                        
+                         <a href="#" target="_blank" rel="noopener noreferrer"><h3 class="text-nav show-more">Afficher plus</h3></a>
+                        
+                    </div>
                 </section>
-                <section class="populaires">
-                    <div class="populaires-title">
+                <section class="populares"><!--Populare section-->
+                    <div class="populares-title"><!-- Populare 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">
+                    <div class="populares-cards"><!-- All card to show the Populare hebergement-->
                         <a href="#">
                             <article class="card">
                                 <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre d'hôtel montrant un lit">
@@ -88,8 +260,67 @@ <h3 class="card-title">Hôtel Bleu et Blanc</h3>
                     </div>
                 </section>
             </div>
+
+            <div class="activities-to-city" id="activities"><!-- Second part of main with Activities section-->
+                <section class="activities"><!--Activities section-->
+                    <div class="activities-title"><!-- Title of activities with the City-->
+                        <h2 class="section-title">Activités à Marseille</h2>
+                    </div>
+                    <div class="activities-cards"><!-- All card to show the activities-->
+                        <a href="#" target="_blank" rel="noopener noreferrer">
+                            <article class="card card-img card-title">
+                                <img src="./images/activites/reno-laithienne.jpg" alt="vieux-port de Marseille">
+                                <h3 class="title-card-activities">Vieux-port</h3>
+                            </article>
+                        </a>
+                        <a href="#" target="_blank" rel="noopener noreferrer">
+                            <article class="card card-img card-title">
+                                <img src="./images/activites/paul-hermann.jpg" alt="Fort de Pomègues">
+                                <h3 class="title-card-activities ">Fort de Pomègues</h3>
+                            </article>
+                        </a>
+                        <a href="#" target="_blank" rel="noopener noreferrer">
+                            <article class="card card-img card-title">
+                                <img src="./images/activites/kilyan-sockalingum.jpg" alt="Parc national des Calanques">
+                                <h3 class="title-card-activities">Parc national des Calanques</h3>
+                            </article>
+                        </a>
+                        <a href="#" target="_blank" rel="noopener noreferrer">
+                            <article class="card card-img card-title">
+                                <img src="./images/activites/florian-wehde.jpg" alt="Notre Dame de la Garde">
+                                <h3 class="title-card-activities">Notre-Dame-de-la-Garde</h3>
+                            </article>
+                        </a>
+                    </div>
+                </section>
+            </div>
         </main>
-        <footer></footer>
+        <footer> <!--Footer Part with about us, our hebergement and helping list-->
+            <div class="footer-content"><!-- all link to know more about, our hebergment and help. With each one list-->
+                <section class="about">
+                    <h3>À propos</h3>
+                    <ul>
+                        <a href="#" target="_blank" rel="noopener noreferrer"><li>Fonctionnement du site</li></a>
+                        <a href="#" target="_blank" rel="noopener noreferrer"><li>Conditions générales </li></a>
+                        <a href="#" target="_blank" rel="noopener noreferrer"><li>Données et confidentialité</li></a>
+                    </ul>
+                </section>
+                <section class="our-hebergement">
+                    <h3>Nos hébergements</h3>
+                    <ul>
+                        <a href="#" target="_blank" rel="noopener noreferrer"><li>Charte qualité</li></a>
+                        <a href="#" target="_blank" rel="noopener noreferrer"><li>Proposer votre hôtel</li></a>
+                    </ul>
+                </section>
+                <section class="help">
+                    <h3>Assistance</h3>
+                    <ul>    
+                        <a href="#" target="_blank" rel="noopener noreferrer"><li>Centre d'aide</li></a>
+                        <a href="#" target="_blank" rel="noopener noreferrer"><li>Nous contacter</li></a>
+                    </ul>
+                </section>
+            </div>
+        </footer>
     </div>
 </body>