diff --git a/css/style.css b/css/style.css
index f6c96c4d..196bdf24 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,167 +1,783 @@
 /****** General ***********/
 * {
-    font-family: 'Raleway', sans-serif;
+  font-family: "Raleway", sans-serif;
 }
 
 :root {
-    --main-color: #0065FC;
-    --main-bg-color: #F2F2F2;
-    --filter-bg-color: #DEEBFF;
+  --main-color: #0065fc;
+  --main-bg-color: #f2f2f2;
+  --filter-bg-color: #deebff;
 }
 
 .fa-solid {
-    color: var(--main-color);
+  color: var(--main-color);
 }
 
 body {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
+  margin: 0;
 }
 
 .main-container {
-    width: 100%;
-    max-width: 1440px;
-    padding: 0 50px;
-    box-sizing: border-box;
+  width: 100%;
+  max-width: 1440px;
+  padding: 0 50px;
+  box-sizing: border-box;
 }
 
 a {
-    color: inherit;
-    text-decoration: none;
+  color: inherit;
+  text-decoration: none;
 }
 
 .section-title {
-    margin: 0;
-    font-size: 22px;
+  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));
+  background-color: white;
+  border-radius: 20px;
+  padding: 5px;
+  filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
 }
 
 .card img {
-    object-fit: cover;
+  object-fit: cover;
 }
 
 .card-title {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 .euro {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .neutral-star {
-    color: var(--main-bg-color)
+  color: var(--main-bg-color);
+}
+
+/****** Header***********/
+header {
+  display: flex;
+  justify-content: space-between;
+  height: 79px;
+  margin-bottom: 30px;
+}
+
+header img {
+  width: 4.55%;
+  padding: 30px 50px 30px 0px;
+}
+
+nav ul {
+  display: flex;
+  width: 88%;
+  gap: 68px;
+  list-style: none;
+  align-items: center;
+  padding: 0px 0px 0px 50px;
+}
+
+header nav ul li a:hover {
+  width: 140px;
+  padding-top: 14px;
+  color: #0065fc;
+  border-top: 2px solid #0065fc;
+  text-decoration-color: #0065fc;
+}
+
+.am,
+.hm {
+  height: 35px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/****** Info-Group***********/
+.info-group {
+  height: 281px;
+  margin-bottom: 30px;
+}
+
+.formulaire p {
+  font-weight: 400;
+  font-size: 16px;
+  margin-bottom: 35px;
+  margin-top: 0px;
+}
+
+form input {
+  border: none;
+  padding: 0px;
+}
+
+i .fa-solid .fa-location-dot {
+  text-align: center;
+  width: 50px;
+  height: 49px;
+}
+
+.fa-location-dot {
+  display: inline;
+  height: 18px;
+  width: 14px;
+  padding: 16px 18px 15px 18px;
+  border-radius: 15px 0px 0px 15px;
+  color: black;
+  background-color: #f2f2f2;
+  opacity: 1;
+}
+
+.city {
+  width: 195px;
+  height: 47px;
+  border-top: 1px #f2f2f2 solid;
+  border-bottom: 1px #f2f2f2 solid;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  padding: 0px;
+}
+
+.city ::placeholder {
+  color: black;
+}
+
+.search {
+  width: 132px;
+  height: 49px;
+  border: none;
+  background-color: #0065fc;
+  border-radius: 0px 15px 15px 0px;
+  font-weight: 700;
+  font-size: 18px;
+  color: white;
+}
+
+.fa-magnifying-glass {
+  display: none;
+}
+
+.filter {
+  display: flex;
+  height: 50px;
+  padding-top: 35px;
+  align-items: center;
+  margin-bottom: 35px;
+}
+
+.filter-title {
+  width: 54px;
+  height: 21px;
+  font-weight: 700;
+  font-size: 18px;
+  padding-right: 15px;
+  margin: 0;
+}
+
+.fa-solid .fa-money-bill-wave,
+.fa-solid .fa-person,
+.fa-solid .fa-heart,
+.fa-solid .fa-fire {
+  height: 22px;
+  width: 22px;
+}
+
+.fa-money-bill-wave::before,
+.fa-person::before,
+.fa-heart::before,
+.fa-fire::before {
+  color: var(--main-color);
+  padding-right: 10px;
+  padding-left: 19px;
+}
+
+.filter-button {
+  display: flex;
+}
+
+.filter-button .button {
+  background-color: transparent;
+  color: #000000;
+  font-size: 17px;
+  font-weight: 700;
+  border-radius: 25px;
+  border: 2px #d9d9d9 solid;
+  margin-right: 15px;
+  text-decoration: none;
+  padding: 15px 17px 15px 0px;
+}
+
+.filter-button a:hover {
+  background-color: #deebff;
+}
+form ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+form ul li {
+  display: inline-block;
+}
+
+.fa-solid .fa-info {
+  padding: 0px 2.5px;
+  height: 24px;
+}
+
+.fa-info {
+  display: inline;
+  border-radius: 50%;
+  border: 1px #d9d9d9 solid;
+  padding: 7px 10px;
+  margin-right: 10px;
 }
 
 /****** Hebergements And Populaires ***********/
 .hebergements-and-populaires {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
 }
 
 .hebergements-and-populaires section {
-    background-color: var(--main-bg-color);
-    border-radius: 20px;
-    padding: 30px;
-    box-sizing: border-box;
+  background-color: var(--main-bg-color);
+  border-radius: 20px;
+  padding: 30px;
+  box-sizing: border-box;
 }
 
 /****** Hebergements ***********/
 .hebergements {
-    width: 65%;
+  width: 65%;
+}
+
+.hebergements .section-title {
+  padding-bottom: 30px;
+}
+
+.hebergements-cards {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  justify-content: space-between;
+}
+
+.hebergements-cards .card {
+  display: flex;
+  flex-direction: column;
+  height: 197.25px;
+}
+
+.hebergements-cards a {
+  width: 30.8%;
+  padding-bottom: 30px;
+}
+
+.hebergements img {
+  width: 100%;
+  height: 114px;
+  border-radius: 15px 15px 0px 0px;
+}
+
+.hebergements .card-title {
+  margin: 0;
+  padding-left: 10px;
+  padding-top: 10px;
+}
+
+.hebergements .card-subtitle {
+  padding-left: 10px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.hebergements .card-rating {
+  margin: 0;
+  padding-left: 10px;
+  margin-bottom: 5px;
+}
+
+.cta {
+  height: 21px;
+}
+
+.cta-link {
+  font-size: 18px;
+  font-weight: 700;
 }
 
 /****** Populaires ***********/
 .populaires {
-    width: 32%;
+  width: 32%;
 }
 
 .populaires-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .populaires-cards .card {
-    display: flex;
-    margin-top: 33px;
+  display: flex;
+  margin-top: 30px;
 }
 
 .populaires-cards img {
-    width: 33%;
-    height: 136px;
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
+  width: 33%;
+  height: 136px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
 }
 
 .populaires-cards .card-content {
-    width: 67%;
-    padding-left: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    box-sizing: border-box;
+  width: 67%;
+  padding-left: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
 }
 
 .populaires-cards .card-title {
-    margin-top: 10px;
-    margin-bottom: 4px;
+  margin-top: 10px;
+  margin-bottom: 4px;
 }
 
 .populaires-cards .card-subtitle {
-    margin: 0;
+  margin: 0;
 }
 
 .populaires-cards .card-rating {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
+/****** Activités ***********/
+.activites section {
+  padding: 30px;
+}
 
+.activites {
+  box-sizing: border-box;
+}
 
+.activites .section-title {
+  padding-bottom: 30px;
+}
+
+.activites-cards {
+  display: flex;
+  justify-content: space-between;
+}
+
+.activites-cards .card {
+  height: 439px;
+}
+
+.activites-cards a {
+  justify-content: space-evenly;
+  width: 23.24%;
+}
+
+.activites-cards img {
+  width: 100%;
+  height: 370px;
+  border-radius: 20px 20px 0px 0px;
+}
+
+.activites-cards .card-title {
+  margin: 0;
+  padding-left: 14px;
+  padding-top: 20px;
+}
+
+/****** Footer ***********/
+footer {
+  background-color: var(--main-bg-color);
+  margin-top: 30px;
+}
+
+.footer {
+  height: 163px;
+  display: flex;
+  margin: 0;
+}
+
+.a-propos,
+.nos-hebergements,
+.assistance {
+  width: 33.3%;
+  margin: 0;
+}
+
+footer .a-propos,
+footer .nos-hebergements,
+footer .assistance {
+  padding: 20px;
+}
+
+.footer ul {
+  list-style: none;
+  padding: 0px;
+  margin: 0;
+}
+
+.footer ul li {
+  padding-bottom: 15px;
+}
+
+.a-propos h3,
+.nos-hebergements h3,
+.assistance h3 {
+  margin: 0;
+  padding-bottom: 15px;
+  padding-top: 0px;
+}
 
 /* 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 {
-        flex-direction: column;
-    }
+  header nav ul li a:focus {
+    width: 140px;
+    padding-top: 14px;
+    color: #0065fc;
+    border-bottom: 2px solid #0065fc;
+    text-decoration-color: #0065fc;
+  }
+
+  header nav ul li a:active {
+    width: 140px;
+    padding-bottom: 14px;
+    color: #0065fc;
+    border-bottom: 2px solid #0065fc;
+    text-decoration-color: #0065fc;
+  }
+
+  .info-group {
+    height: 322px;
+  }
+
+  .filter {
+    display: block;
+    height: 91px;
+    margin-bottom: 35px;
+  }
+
+  .filter-button {
+    display: flex;
+  }
+
+  .filter-button .button {
+    align-items: center;
+    padding-bottom: 0px;
+    padding-top: 0px;
+    margin-right: 5px;
+  }
 
-    .hebergements {
-        width: 100%;
-    }
+  .filter-title {
+    margin-bottom: 20px;
+  }
 
-    .populaires {
-        width: 100%;
-        margin-top: 50px;
-    }
+  .filter-button a:active {
+    background-color: #deebff;
+  }
+
+  .filter-button a:focus {
+    background-color: #deebff;
+  }
+
+  .hebergements-and-populaires {
+    flex-direction: column;
+  }
+
+  .hebergements {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .populaires {
+    width: 100%;
+    margin-top: 50px;
+  }
+
+  .populaires-cards {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .populaires-cards a {
+    width: 30%;
+  }
+
+  .populaires-cards .card-title,
+  .hebergements-cards .card-title {
+    font-size: 14px;
+  }
+
+  .populaires-cards .card-subtitle,
+  .hebergements-cards .card-subtitle {
+    font-size: 13px;
+  }
+
+  .activites {
+    justify-content: space-between;
+    width: 100%;
+  }
 
-    .populaires-cards {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
+  .activites-cards .card {
+    height: 270px;
+  }
 
-    .populaires-cards a {
-        width: 30%;
-    }
+  .activites-cards img {
+    height: 200px;
+  }
 
-    .populaires-cards .card-title {
-        font-size: 14px;
-    }
+  .activites-cards a {
+    width: 23.24%;
+  }
 
-    .populaires-cards .card-subtitle {
-        font-size: 13px;
-    }
+  .activites-cards .card-title {
+    padding: 20px 0px 20px 15px;
+    margin: 0;
+  }
 }
 
 /* Small devices (phones, less than 768px) */
-@media (max-width: 767.98px) {
-    /* ... */
-}
\ No newline at end of file
+@media (max-width: 767.98px) and (min-width: 320px) {
+  .main-container {
+    padding: 0px;
+    max-width: 767.98px;
+  }
+
+  header {
+    flex-direction: column;
+    height: 115px;
+    width: 100%;
+  }
+
+  header img {
+    align-self: center;
+    width: 61.09px;
+    padding: 30px 50px 30px 30px;
+  }
+
+  nav ul {
+    display: flex;
+    width: 100%;
+    margin: 0;
+    gap: 0px;
+    padding: 0px;
+  }
+
+  nav ul li {
+    width: 50%;
+    text-align: center;
+  }
+
+  header nav ul li a:hover {
+    display: none;
+  }
+
+  header nav ul li a:active {
+    width: 140px;
+    padding-bottom: 14px;
+    color: #0065fc;
+    border-bottom: 2px solid #0065fc;
+    text-decoration-color: #0065fc;
+  }
+
+  header nav ul li a:focus {
+    width: 140px;
+    padding-bottom: 14px;
+    color: #0065fc;
+    border-bottom: 2px solid #0065fc;
+    text-decoration-color: #0065fc;
+  }
+
+  .info-group {
+    width: 100%;
+    height: 432px;
+    margin-bottom: 35px;
+    padding: 0px 20px;
+  }
+
+  .info-group h2 {
+    width: 335px;
+    height: 52px;
+    padding-bottom: 5px;
+  }
+
+  form {
+    height: 432px;
+  }
+
+  .search {
+    display: none;
+  }
+
+  i .fa-solid .fa-magnifying-glass {
+    text-align: center;
+    width: 48px;
+    height: 48px;
+  }
+
+  .fa-magnifying-glass {
+    display: inline;
+    color: #ffffff;
+    border-radius: 15px;
+    text-align: center;
+    background-color: #0065fc;
+    height: 17px;
+    width: 17px;
+    padding: 14px 15px;
+  }
+
+  .filter {
+    height: 161px;
+    margin-bottom: 35px;
+    width: 100%;
+  }
+
+  .filter-title {
+    align-self: flex-start;
+  }
+
+  .filter-button {
+    width: 100%;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    margin-left: 0px;
+    padding-left: 0px;
+  }
+
+  .button {
+    margin: 10px 0px;
+    font-size: 14px;
+    font-weight: 700;
+    align-content: center;
+  }
+
+  .filter-button .button {
+    width: 150.5px;
+    padding: 10px 0px;
+  }
+
+  .filter-button a:active {
+    background-color: #deebff;
+  }
+
+  .filter-button a:focus {
+    background-color: #deebff;
+  }
+
+  .fa-money-bill-wave,
+  .fa-person,
+  .fa-heart,
+  .fa-fire {
+    font-size: 14px;
+  }
+
+  .fa-money-bill-wave,
+  .fa-person,
+  .fa-heart,
+  .fa-fire {
+    padding-right: 0px;
+  }
+
+  .fa-solid .fa-info {
+    padding: 0px 2.5px;
+    height: 24px;
+  }
+
+  form ul {
+    padding-top: 20px;
+    display: inline;
+  }
+
+  form ul li {
+    display: inline;
+  }
+
+  .text-info {
+    align-content: center;
+  }
+
+  .icon .fa-info {
+    border-radius: 50%;
+    border: 1px #d9d9d9 solid;
+    padding: 7px 10px;
+    margin-right: 10px;
+    margin-top: 20px;
+  }
+
+  .hebergements-and-populaires,
+  .populaires {
+    flex-direction: column-reverse;
+  }
+
+  .hebergements-and-populaires {
+    background-color: white;
+  }
+
+  .hebergements-and-populaires .hebergements {
+    background-color: white;
+  }
+
+  .hebergements {
+    width: 100%;
+  }
+
+  .hebergements-cards a {
+    width: 100%;
+    padding-bottom: 15px;
+  }
+
+  .populaires {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+
+  .populaires-cards {
+    display: flex;
+    flex-direction: column;
+    margin-top: 15px;
+  }
+
+  .populaires-cards a {
+    width: 100%;
+  }
+
+  .activites {
+    width: 100%;
+  }
+
+  .activites-cards {
+    flex-direction: column;
+  }
+
+  .activites-cards a {
+    width: 100%;
+    padding-bottom: 15px;
+  }
+
+  .footer {
+    flex-direction: column;
+    height: 461px;
+  }
+
+  .a-propos,
+  .nos-hebergements,
+  .assistance {
+    width: 100%;
+    margin: 0;
+  }
+}
diff --git a/images/index.html b/images/index.html
new file mode 100644
index 00000000..ba4ecbb4
--- /dev/null
+++ b/images/index.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+<meta charset="UTF-8" />
+<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 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" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" href="./css/style.css" />
+</head>
+
+<body>
+    <div class="main-container">
+        <header>
+            <img class="logo" src="./images/logo/Booki.png" alt="logo" />
+            <nav>
+                <ul>
+                <li class="hm"><a href="#hm">Hébergements</a></li>
+                <li class="am"><a href="#am">Activités</a></li>
+                </ul>
+            </nav>
+        </header>
+        <main>
+            <div class="info-group">
+                <section class="formulaire">
+                    <form action="index.html" method="POST">
+                        <h2 class="section-title">Trouvez votre hebergement pour des vacances de rêve</h2>
+                        <p>En plein centre-ville ou en pleine nature</p>
+                        <i class="fa-solid fa-location-dot"></i><input class="city" type="text" name="city" id="city" placeholder="Marseille, France"/><i class="fa-solid fa-magnifying-glass"><input class="glass" type="submit" value=""/></i><input class="search" type="submit" value="Rechercher"/>
+                        <div class="filter-button">
+                            <h4 class="filter-title">Filtres</h4>                
+                            <a href="#"><i class="fa-solid fa-money-bill-wave"></i>Economique</a>             
+                            <a href="#"><i class="fa-solid fa-person"></i>Familial</a>              
+                            <a href="#"><i class="fa-solid fa-heart"></i>Romantique</a>  
+                            <a href="#"><i class="fa-solid fa-fire"></i>Nos pépites</a> 
+                        </div>
+                        <i class="fa-solid fa-info"></i>Plus de 500 logements sont disponibles dans cette ville</i>
+                    </form>
+                </section>
+            </div>
+            <div class="hebergements-and-populaires">
+                <section class="hebergements">            
+                    <h2 class="section-title" id="hm">Hébergements à Marseille</h2>           
+                    <div class="hebergements-cards">
+                        <a href="#">
+                            <article class="card">                  
+                                <img src="./images/hebergements/fred-kleber.jpg" alt="image de la chambre de l'hôtel du port avec lit"/>                
+                                <h3 class="card-title">Hôtel du port</h3>
+                                <p class="card-subtitle">Nuit à partir de 52<span class="euro">€</span></p>
+                                <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>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/febrian-zakaria2.jpg" alt="image de la chambre de l'hôtel Chez Amina avec lit"/>                  
+                                <h3 class="card-title">Hôtel Chez Amina</h3>
+                                <p class="card-subtitle">Nuit à partir de 96<span class="euro">€</span></p>
+                                <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>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/reisetopia.jpg" alt="image de la chambre de l'hôtel Les mouettes avec lit"/>
+                                <h3 class="card-title">Hôtel Les mouettes</h3>
+                                <p class="card-subtitle">Nuit à partir de 76<span class="euro">€</span></p>
+                                <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>
+                            </article>
+                        </a>      
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/annie-spratt.jpg" alt="image de la chambre de l'hôtel de la mer avec lit"/>
+                                <h3 class="card-title">Hôtel de la mer</h3>
+                                <p class="card-subtitle">Nuit à partir de 46<span class="euro">€</span></p>
+                                <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>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/marcus-loke.jpg" alt="image de la chambre de l'Auberge La Canebiere avec lit"/>
+                                <h3 class="card-title">Auberge La Canebière</h3>
+                                <p class="card-subtitle">Nuit à partir de 25<span class="euro">€</span></p>
+                                <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>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/nicate-lee.jpg" alt="image de la chambre de l'Auberge Le Panier avec lit"/>
+                                <h3 class="card-title">Auberge Le Panier</h3>
+                                <p class="card-subtitle">Nuit à partir de 23<span class="euro">€</span></p>
+                                <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>
+                            </article>
+                        </a>                   
+                    </div>
+                    <div class="cta">
+                        <a class="cta-link" href="#">Afficher plus</a>
+                    </div>
+                    
+                </section>
+                <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">
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre de l'hôtel Le soleil du matin montrant un lit"/>
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Hôtel Le soleil du matin</h3>
+                                        <p class="card-subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/aw-creative.jpg" alt="Image des chambres d'hôtes Au coeur de l'eau montrant un lit"/>
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                        <h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
+                                        <p class="card-subtitle">Nuit à partir de 71<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre de l'hôtel Bleu et Blanc montrant un lit"/>
+                                <div class="card-content">
+                                    <div class="card-txt">
+                                            <h3 class="card-title">Hôtel Bleu et Blanc</h3>
+                                            <p class="card-subtitle">Nuit à partir de 68<span class="euro">€</span></p>
+                                    </div>
+                                    <div class="card-rating">
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+                                        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+                                        <span class="sr-only">Note de 4 sur 5</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </a>
+                    </div>
+                </section>
+            </div>
+            <div class="activites">
+                <section class="activites">            
+                    <h2 class="section-title" id="am">Activités à Marseille</h2>           
+                    <div class="activites-cards">
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/activites/reno-laithienne.jpg" alt="image du Vieux-port de Marseille"/>              
+                                <h3 class="card-title">Vieux-port</h3>              
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/activites/paul-hermann.jpg" alt="image du Fort de Pomègues à Marseille"/>                 
+                                <h3 class="card-title">Fort de Pomègues</h3>                  
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/activites/kilyan-sockalingum.jpg" alt="image du Parc national des Calanques à Marseille"/>
+                                <h3 class="card-title">Parc national des Calanques</h3>                   
+                            </article>
+                        </a>
+                        <a href="#">
+                            <article class="card">
+                                <img src="images/activites/florian-wehde.jpg" alt="image de Notre-Dame-de-la-Garde à Marseille"/>
+                                <h3 class="card-title">Notre-Dame-de-la-Garde</h3>                    
+                            </article>
+                        </a>
+                    </div>
+                </section>
+            </div>
+        </main>
+        <footer>
+                <div class="footer">
+                    <div class="a-propos">
+                        <h3 class="title-footer">A propos</h3>
+                        <ul class="menu-footer">
+                            <li><a href="#">Fonctionnement du site</a></li>
+                            <li><a href="#">Conditions générales</a></li>
+                            <li><a href="#">Données et confidentialité</a></li>
+                        </ul>
+                    </div>
+                    <div class="nos-hebergements">
+                        <h3 class="title-footer">Nos hébergements</h3>           
+                        <ul class="menu-footer">
+                            <li><a href="#">Charte qualité</a></li>
+                            <li><a href="#">Proposer votre hôtel</a></li>
+                        </ul>
+                    </div>
+                    <div class="assistance">
+                        <h3 class="title-footer">Assistance</h3>
+                        <ul class="menu-footer">
+                            <li><a href="#">Centre d'aide</a></li>
+                            <li><a href="#">Nous contacter</a></li>
+                        </ul>
+                    </div>
+                </div>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/index.html b/index.html
index 4281032f..c8d2b2a3 100644
--- a/index.html
+++ b/index.html
@@ -1,125 +1,281 @@
 <!DOCTYPE html>
 <html lang="fr">
-  <head>
-    <meta charset="UTF-8" />
-    <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
-      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"
-      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link rel="stylesheet" href="./css/style.css" />
-  </head>
 
-  <body>
-    <div class="main-container">
-      <header></header>
-      <main>
-        <div class="hebergements-and-populaires">
-          <section class="hebergements"></section>
-          <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">
-              <a href="#">
-                <article class="card">
-                  <img
-                    src="./images/hebergements/emile-guillemot.jpg"
-                    alt="Image de la chambre d'hôtel montrant un lit"
-                  />
-                  <div class="card-content">
-                    <div class="card-txt">
-                      <h3 class="card-title">Hôtel Le soleil du matin</h3>
-                      <p class="card-subtitle">
-                        Nuit à partir de 128<span class="euro">€</span>
-                      </p>
-                    </div>
-                    <div class="card-rating">
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i
-                        class="fa-xs fa-solid fa-star neutral-star"
-                        aria-hidden="true"
-                      ></i>
-                      <span class="sr-only">Note de 4 sur 5</span>
-                    </div>
-                  </div>
-                </article>
-              </a>
-              <a href="#">
-                <article class="card">
-                  <img
-                    src="./images/hebergements/aw-creative.jpg"
-                    alt="Image de la chambre d'hôtel montrant un lit"
-                  />
-                  <div class="card-content">
-                    <div class="card-txt">
-                      <h3 class="card-title">
-                        Chambres d’hôtes Au cœur de l’eau
-                      </h3>
-                      <p class="card-subtitle">
-                        Nuit à partir de 71<span class="euro">€</span>
-                      </p>
-                    </div>
-                    <div class="card-rating">
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i
-                        class="fa-xs fa-solid fa-star neutral-star"
-                        aria-hidden="true"
-                      ></i>
-                      <span class="sr-only">Note de 4 sur 5</span>
-                    </div>
-                  </div>
-                </article>
-              </a>
-              <a href="#">
-                <article class="card">
-                  <img
-                    src="./images/hebergements/febrian-zakaria2.jpg"
-                    alt="Image de la chambre d'hôtel montrant un lit"
-                  />
-                  <div class="card-content">
-                    <div class="card-txt">
-                      <h3 class="card-title">Hôtel Bleu et Blanc</h3>
-                      <p class="card-subtitle">
-                        Nuit à partir de 68<span class="euro">€</span>
-                      </p>
-                    </div>
-                    <div class="card-rating">
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
-                      <i
-                        class="fa-xs fa-solid fa-star neutral-star"
-                        aria-hidden="true"
-                      ></i>
-                      <span class="sr-only">Note de 4 sur 5</span>
-                    </div>
-                  </div>
-                </article>
-              </a>
-            </div>
-          </section>
-        </div>
-      </main>
-      <footer></footer>
-    </div>
-  </body>
+	<head>
+		<meta charset="UTF-8"/>
+		<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 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" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+		<link rel="stylesheet" href="./css/style.css"/>
+	</head>
+
+	<body>
+		<div class="main-container">
+			<header>
+				<img class="logo" src="./images/logo/Booki.png" alt="logo"/>
+				<nav>
+					<ul>
+                        <li class="hm"><a href="#hm">Hébergements</a></li>
+						<li class="am"><a href="#am">Activités</a></li>
+					</ul>
+				</nav>
+			</header>
+			<main>
+				<div class="info-group">
+					<section class="formulaire">
+						<form action="index.html" method="POST">
+							<h2 class="section-title">Trouvez votre hebergement pour des vacances de rêve</h2>
+							<p>En plein centre-ville ou en pleine nature</p>
+							<i class="fa-solid fa-location-dot"></i>
+                            <input class="city" type="text" name="city" id="city" placeholder="Marseille, France"/>
+                            <i class="fa-solid fa-magnifying-glass"><input class="glass" type="submit" value=""/></i>
+                            <input class="search" type="submit" value="Rechercher"/>
+							<div class="filter">
+								<h4 class="filter-title">Filtres</h4>
+								<div class="filter-button">
+									<a href="#" class="button">
+										<i class="fa-solid fa-money-bill-wave"></i>Economique</a>
+									<a href="#" class="button">
+										<i class="fa-solid fa-person"></i>Familial</a>
+									<a href="#" class="button">
+										<i class="fa-solid fa-heart"></i>Romantique</a>
+									<a href="#" class="button">
+										<i class="fa-solid fa-fire"></i>Nos pépites</a>
+								</div>
+							</div>
+							<ul>
+								<li class="icon"><i class="fa-solid fa-info"></i>
+								</li><li class="text-info">Plus de 500 logements sont disponibles dans cette ville</li>
+							</ul>
+						</form>
+					</section>
+				</div>
+				<div class="hebergements-and-populaires">
+					<section class="hebergements">
+						<h2 class="section-title" id="hm">Hébergements à Marseille</h2>
+						<div class="hebergements-cards">
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/fred-kleber.jpg" alt="image de la chambre de l'hôtel du port avec lit"/>
+									<h3 class="card-title">Hôtel du port</h3>
+									<p class="card-subtitle">Nuit à partir de 52<span class="euro">€</span></p>
+									<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>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/febrian-zakaria2.jpg" alt="image de la chambre de l'hôtel Chez Amina avec lit"/>
+									<h3 class="card-title">Hôtel Chez Amina</h3>
+									<p class="card-subtitle">Nuit à partir de 96<span class="euro">€</span></p>
+									<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>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/reisetopia.jpg" alt="image de la chambre de l'hôtel Les mouettes avec lit"/>
+									<h3 class="card-title">Hôtel Les mouettes</h3>
+									<p class="card-subtitle">Nuit à partir de 76<span class="euro">€</span></p>
+									<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>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/annie-spratt.jpg" alt="image de la chambre de l'hôtel de la mer avec lit"/>
+									<h3 class="card-title">Hôtel de la mer</h3>
+									<p class="card-subtitle">Nuit à partir de 46<span class="euro">€</span></p>
+									<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>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/marcus-loke.jpg" alt="image de la chambre de l'Auberge La Canebiere avec lit"/>
+									<h3 class="card-title">Auberge La Canebière</h3>
+									<p class="card-subtitle">Nuit à partir de 25<span class="euro">€</span></p>
+									<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>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/nicate-lee.jpg" alt="image de la chambre de l'Auberge Le Panier avec lit"/>
+									<h3 class="card-title">Auberge Le Panier</h3>
+									<p class="card-subtitle">Nuit à partir de 23<span class="euro">€</span></p>
+									<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>
+								</article>
+							</a>
+						</div>
+						<div class="cta">
+							<a class="cta-link" href="#">Afficher plus</a>
+						</div>
+					</section>
+					<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">
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/emile-guillemot.jpg" alt="Image de la chambre de l'hôtel Le soleil du matin montrant un lit"/>
+									<div class="card-content">
+										<div class="card-txt">
+											<h3 class="card-title">Hôtel Le soleil du matin</h3>
+											<p class="card-subtitle">Nuit à partir de 128<span class="euro">€</span></p>
+										</div>
+										<div class="card-rating">
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+											<span class="sr-only">Note de 4 sur 5</span>
+										</div>
+									</div>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/aw-creative.jpg" alt="Image des chambres d'hôtes Au coeur de l'eau montrant un lit"/>
+									<div class="card-content">
+										<div class="card-txt">
+											<h3 class="card-title">Chambres d’hôtes Au cœur de l’eau</h3>
+											<p class="card-subtitle">Nuit à partir de 71<span class="euro">€</span></p>
+										</div>
+										<div class="card-rating">
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+											<span class="sr-only">Note de 4 sur 5</span>
+										</div>
+									</div>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="./images/hebergements/febrian-zakaria2.jpg" alt="Image de la chambre de l'hôtel Bleu et Blanc montrant un lit"/>
+									<div class="card-content">
+										<div class="card-txt">
+											<h3 class="card-title">Hôtel Bleu et Blanc</h3>
+											<p class="card-subtitle">Nuit à partir de 68<span class="euro">€</span></p>
+										</div>
+										<div class="card-rating">
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
+											<i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
+											<span class="sr-only">Note de 4 sur 5</span>
+										</div>
+									</div>
+								</article>
+							</a>
+						</div>
+					</section>
+				</div>
+				<div class="activites">
+					<section class="activites">
+						<h2 class="section-title" id="am">Activités à Marseille</h2>
+						<div class="activites-cards">
+							<a href="#">
+								<article class="card">
+									<img src="images/activites/reno-laithienne.jpg" alt="image du Vieux-port de Marseille"/>
+									<h3 class="card-title">Vieux-port</h3>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="images/activites/paul-hermann.jpg" alt="image du Fort de Pomègues à Marseille"/>
+									<h3 class="card-title">Fort de Pomègues</h3>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="images/activites/kilyan-sockalingum.jpg" alt="image du Parc national des Calanques à Marseille"/>
+									<h3 class="card-title">Parc national des Calanques</h3>
+								</article>
+							</a>
+							<a href="#">
+								<article class="card">
+									<img src="images/activites/florian-wehde.jpg" alt="image de Notre-Dame-de-la-Garde à Marseille"/>
+									<h3 class="card-title">Notre-Dame-de-la-Garde</h3>
+								</article>
+							</a>
+						</div>
+					</section>
+				</div>
+			</main>
+			<footer>
+				<div class="footer">
+					<div class="a-propos">
+						<h3 class="title-footer">A propos</h3>
+						<ul class="menu-footer">
+							<li><a href="#">Fonctionnement du site</a></li>
+							<li><a href="#">Conditions générales</a></li>
+							<li><a href="#">Données et confidentialité</a></li>
+						</ul>
+					</div>
+					<div class="nos-hebergements">
+						<h3 class="title-footer">Nos hébergements</h3>
+						<ul class="menu-footer">
+							<li><a href="#">Charte qualité</a></li>
+							<li><a href="#">Proposer votre hôtel</a></li>
+						</ul>
+					</div>
+					<div class="assistance">
+						<h3 class="title-footer">Assistance</h3>
+						<ul class="menu-footer">
+							<li><a href="#">Centre d'aide</a></li>
+							<li><a href="#">Nous contacter</a></li>
+						</ul>
+					</div>
+				</div>
+			</footer>
+		</div>
+	</body>
 </html>