diff --git a/css/style.css b/css/style.css
index f6c96c4d..ef525992 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,167 +1,1037 @@
-/****** General ***********/
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap");
+
+/*-----------------------general-----------------------*/
+
 * {
-    font-family: 'Raleway', sans-serif;
+  font-family: "Raleway", sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 :root {
-    --main-color: #0065FC;
-    --main-bg-color: #F2F2F2;
-    --filter-bg-color: #DEEBFF;
+  --main-color: #0065fc;
+  --main-bg-color: #f2f2f2;
+  --filter-bg-color: #deebff;
+  --light-blue: #deebff;
+  --blue: #0065fc;
+  --light-grey: #f2f2f2;
+  --white: white;
 }
 
-.fa-solid {
-    color: var(--main-color);
+html {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
 }
 
 body {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
 }
 
-.main-container {
-    width: 100%;
-    max-width: 1440px;
-    padding: 0 50px;
-    box-sizing: border-box;
+.euro {
+  font-weight: 700;
+}
+
+.neutral-star {
+  color: var(--main-bg-color);
+}
+
+.line {
+  color: #0065fc;
+}
+
+h1 {
+  font-size: 15px;
+  margin-bottom: 10px;
+  padding-left: 30px;
+}
+h6 {
+  font-size: 15px;
+  margin-bottom: 10px;
+  padding-left: 5px;
+}
+
+h4 {
+  font-size: 20px;
+  padding-left: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 a {
-    color: inherit;
-    text-decoration: none;
+  color: inherit;
+  text-decoration: none;
+}
+
+p {
+  margin-bottom: 10px;
+}
+
+main,
+header,
+footer {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+/*---------------------header------------------------*/
+
+header {
+  display: flex;
+  justify-content: space-between;
+  height: 50px;
+}
+
+#logo {
+  display: flex;
+  margin-right: auto;
+  align-items: center;
+  padding-left: 20px;
+}
+
+header #logo img {
+  width: 50px;
+}
+
+header nav ul {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 30px;
+  gap: 30px;
+  list-style-type: none;
+}
+
+header nav ul li {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  border-top: 2px solid transparent;
+}
+
+header nav ul li:hover {
+  border-color: #0065fc;
+  color: #256dd7;
+}
+
+.titre-1 {
+  display: flex;
+  padding-left: 30px;
+}
+
+input#search {
+  width: 160px;
+  padding-left: 25px;
+  border: thin solid var(--light-grey);
+}
+
+form {
+  display: inline-block;
+  width: 100%;
+  padding-left: 20px;
+}
+
+form i {
+  background-color: rgb(247, 243, 243);
+  padding: 12px 12px;
+  border-radius: 12px 0 0 12px;
+  width: 50px;
+  padding-left: 20px;
+}
+
+form input {
+  border: 1px solid var(--filter-bg-color);
+  font-size: 15px;
+  font-weight: bold;
+  padding: 8px 0 7px 10px;
+  margin-left: -5px;
+  width: 146px;
+  height: 39px;
+}
+
+form input:hover {
+  background-color: var(--light-blue);
+}
+
+form input::placeholder {
+  color: black;
+}
+
+form button {
+  border-radius: 0 10px 10px 0;
+  background-color: #0065fc;
+  color: var(--white);
+  font-weight: bold;
+  font-size: 15px;
+  padding: 10px 10px 10px 10px;
+  cursor: pointer;
+  border: none;
+  margin-left: -5px;
+}
+
+form button:hover {
+  box-shadow: 0px 0px 10px grey;
+}
+
+.fa-solid.fa-magnifying-glass {
+  display: none;
+}
+
+.btn-search {
+  display: flex;
+  justify-content: flex-start;
+  width: 80%;
+}
+
+.filters {
+  padding-left: 20px;
+  display: flex;
+  width: 900px;
+  padding-top: 18px;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.filters h3 {
+  margin-right: 20px;
+  padding-right: 20px;
+}
+
+.btn-filter p {
+  margin: 0;
+  cursor: pointer;
+  width: 173px;
+}
+
+.btn-filter {
+  font-weight: bold;
+  border: 1px solid lightgrey;
+  border-radius: 30px;
+  border-left: none;
+}
+
+.btn-filter:hover {
+  background-color: #deebff;
+  box-shadow: 0 0 8px var(--blue);
+}
+
+.btn-filter .fa-solid {
+  background-color: var(--light-blue);
+  border-radius: 30px;
+  background-color: white;
+}
+.btn-filter .fa-solid:hover {
+  background-color: #deebff;
+  box-shadow: 0 0 8px var(--blue);
+}
+
+.btn-filter .fa-child-reaching {
+  padding: 14px 17px 14px 17px;
+  color: #0065fc;
+  background-color: white;
+}
+
+.btn-filter .fa-heart,
+.fa-fire,
+.fa-money-bill-wave {
+  padding: 14px 14px 14px 14px;
+  color: #0065fc;
+  background-color: white;
+}
+
+#icon-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  margin-top: 30px;
+  padding-left: 20px;
+}
+
+.fa-solid.fa-info {
+  border: 1.5px solid var(--light-grey);
+  border-radius: 50%;
+  color: #0065fc;
+  height: 25px;
+  width: 25px;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 5px;
+  background-color: var(--light-grey);
+}
+
+/*--------------------main-------------------*/
+
+.main {
+  margin-top: 30px;
+}
+
+.main-container {
+  width: 100%;
+  max-width: 1440px;
+  padding: 0 50px;
+  overflow-x: hidden;
+}
+
+.accessibility-label {
+  position: absolute;
+  left: -999px;
 }
 
 .section-title {
-    margin: 0;
-    font-size: 22px;
+  margin: 0;
+  font-size: 22px;
 }
 
+/*----------------------hebergements et populaire-----------------------*/
+
+.hebergements-and-populaires {
+  display: flex;
+  justify-content: space-between;
+}
+
+.hebergements-and-populaires section {
+  background-color: var(--main-bg-color);
+  border-radius: 20px;
+  padding: 30px;
+  box-sizing: border-box;
+}
+
+/*----------Hebergement-------------------------*/
+
 .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 rgb(226, 219, 219));
 }
 
 .card img {
-    object-fit: cover;
+  object-fit: cover;
 }
 
 .card-title {
-    font-size: 16px;
+  font-size: 15px;
+  padding-left: 10px;
 }
 
-.euro {
-    font-weight: 700;
+.hebergements {
+  width: 65%;
 }
 
-.neutral-star {
-    color: var(--main-bg-color)
+.container-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  justify-content: center;
 }
 
-/****** Hebergements And Populaires ***********/
-.hebergements-and-populaires {
-    display: flex;
-    justify-content: space-between;
+.box1 {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: white;
+  width: 90%;
+  border-radius: 20px 20px 20px 20px;
+  filter: drop-shadow(3px 3px 15px rgb(226, 219, 219));
 }
 
-.hebergements-and-populaires section {
-    background-color: var(--main-bg-color);
-    border-radius: 20px;
-    padding: 30px;
-    box-sizing: border-box;
+.box1 img {
+  width: 100%;
+  height: 100px;
+  border-radius: 20px 20px 0 0;
+  object-fit: cover;
+  padding: 5px;
 }
 
-/****** Hebergements ***********/
-.hebergements {
-    width: 65%;
+.box1 .card-content {
+  border-radius: 0 0 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box1:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 8px var(--blue);
+  cursor: pointer;
+  background-color: var(--light-grey);
+}
+.card .stars {
+  margin-top: auto;
+}
+
+.box2 {
+  margin-top: 30px;
+  background-color: white;
+  width: 90%;
+  border-radius: 20px 20px 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box2 img {
+  width: 100%;
+  height: 100px;
+  border-radius: 20px 20px 0 0;
+  object-fit: cover;
+  padding: 5px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box2 .card-content {
+  border-radius: 0 0 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+.box2:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 8px var(--blue);
+  cursor: pointer;
+  background-color: var(--light-grey);
+}
+
+.card .stars {
+  margin-top: auto;
+}
+
+.box3 {
+  margin-top: 30px;
+  background-color: white;
+  width: 90%;
+  border-radius: 20px 20px 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box3 img {
+  width: 100%;
+  height: 100px;
+  border-radius: 20px 20px 0 0;
+  object-fit: cover;
+  padding: 5px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box3.card-content {
+  border-radius: 0 0 20px 20px;
+
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box3:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 8px var(--blue);
+  cursor: pointer;
+  background-color: var(--light-grey);
+}
+
+.card .stars {
+  margin-top: auto;
+}
+
+.box4 {
+  background-color: white;
+  width: 90%;
+  border-radius: 20px 20px 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box4 img {
+  width: 100%;
+  height: 100px;
+  border-radius: 20px 20px 0 0;
+  object-fit: cover;
+  padding: 5px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box4.card-content {
+  border-radius: 0 0 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box4:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 8px var(--blue);
+  cursor: pointer;
+  background-color: var(--light-grey);
+}
+
+.card .stars {
+  margin-top: auto;
+}
+
+.box5 img {
+  width: 100%;
+  height: 100px;
+  border-radius: 20px 20px 0 0;
+  padding: 5px;
+  object-fit: cover;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box5.card-content {
+  border-radius: 0 0 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box5 {
+  background-color: white;
+  width: 90%;
+  border-radius: 20px 20px 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box5:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 8px var(--blue);
+  cursor: pointer;
+  background-color: var(--light-grey);
+}
+
+.card .stars {
+  margin-top: auto;
 }
 
-/****** Populaires ***********/
+.box6 {
+  background-color: white;
+  width: 90%;
+  border-radius: 20px 20px 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box6 img {
+  width: 100%;
+  height: 100px;
+  border-radius: 20px 20px 0 0;
+  padding: 5px;
+  object-fit: cover;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box6.card-content {
+  border-radius: 0 0 20px 20px;
+  filter: drop-shadow(0px 3px 15px rgb(226, 219, 219));
+}
+
+.box6:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 8px var(--blue);
+  cursor: pointer;
+  background-color: var(--light-grey);
+}
+
+.card .stars {
+  margin-top: auto;
+}
+
+.card-rating {
+  color: #0065fc;
+  margin-left: 10px;
+  padding-bottom: 10px;
+}
+
+h3.card-title {
+  margin: 0;
+}
+
+p.card-subtitle {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.card-rating {
+  color: #0065fc;
+  margin-left: 10px;
+  padding-bottom: 10px;
+}
+
+p.card-subtitle {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 10px;
+}
+
+/*--------------------populaire----------------------*/
+
 .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: 33px;
 }
 
 .populaires-cards img {
-    width: 33%;
-    height: 136px;
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
+  width: 33%;
+  height: 136px;
+  object-fit: cover;
+  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;
+  color: #0065fc;
 }
 
+.card:hover {
+  transform: scale(1.02);
+  box-shadow: 0 0 8px var(--blue);
+  cursor: pointer;
+  background-color: var(--light-grey);
+}
 
+.card .stars {
+  margin-top: auto;
+}
 
+/*-----------------------gallery---------------------*/
 
-/* Le code ci-dessous correspond à la version responsive uniquement */
+div.gallery:hover {
+  width: 100%;
+  height: 250px;
+  border-radius: 12px 12px 12px 12px;
+  box-shadow: 0px 0px 20px 20px;
+  background-color: var(--light-grey);
+  box-shadow: 0 0 8px var(--blue);
+}
+
+div.gallery img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 12px 12px 0px 0px;
+}
+
+div.desc {
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: 0 0 10px 10px;
+}
+
+.desc1 {
+  padding-left: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 0 0 10px 10px;
+}
+
+.desc2 {
+  padding-left: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 0 0 10px 10px;
+}
+
+.afficher {
+  margin-top: 80px;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.responsive {
+  padding: 0 6px;
+  float: left;
+  width: 24.99999%;
+}
+
+/*----------------footer-------------*/
+.footer {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 200px;
+  gap: 10%;
+  margin-top: 300px;
+  background-color: #f2f2f2;
+}
+
+.footer-left {
+  margin-top: 20px;
+  padding-left: 20px;
+  line-height: 20px;
+}
+
+.footer-midle {
+  margin-top: 20px;
+  line-height: 20px;
+}
+
+.footer-right {
+  margin-right: 400px;
+  padding-left: 20px;
+  margin-top: 20px;
+  line-height: 20px;
+}
+
+p {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+/*----------- Medium devices (tablets, less/equal than 1024px) ----------------*/
 
-/****** Media queries ***********/
-/* Medium devices (tablets, less/equal than 1024px) */
 @media (max-width: 1024px) {
-    .hebergements-and-populaires {
-        flex-direction: column;
-    }
+  h4 {
+    font-size: 15px;
+    padding-left: 25px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
 
-    .hebergements {
-        width: 100%;
-    }
+  h6 {
+    font-size: 11px;
+    font-weight: bold;
+    padding-left: 15px;
+  }
+
+  .afficher {
+    margin-top: 20px;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .filters {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin-top: 20px;
+  }
+
+  .fa-solid.fa-magnifying-glass {
+    display: none;
+  }
+
+  .main-container {
+    padding: 0px;
+    width: 100%;
+  }
+
+  .hebergements-and-populaires {
+    flex-direction: column;
+  }
 
-    .populaires {
-        width: 100%;
-        margin-top: 50px;
-    }
+  .hebergements {
+    width: 100%;
+  }
+
+  .populaires {
+    width: 100%;
+    margin-top: 50px;
+  }
 
-    .populaires-cards {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
+  .populaires-cards {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
-    .populaires-cards a {
-        width: 30%;
-    }
+  .populaires-cards a {
+    width: 30%;
+  }
+
+  .populaires-cards .card-title {
+    font-size: 14px;
+  }
+
+  .populaires-cards .card-subtitle {
+    font-size: 13px;
+  }
+
+  .populaires {
+    width: 100%;
+    margin-top: 50px;
+  }
 
-    .populaires-cards .card-title {
-        font-size: 14px;
-    }
+  .footer {
+    height: auto;
+    gap: 50px;
+  }
 
-    .populaires-cards .card-subtitle {
-        font-size: 13px;
-    }
+  .footer {
+    width: 100%;
+    height: 170px;
+    gap: 20px;
+    padding-bottom: 50px;
+    background-color: #f2f2f2;
+  }
+
+  .footer-left {
+    width: 288px;
+    height: 163px;
+    gap: 20px;
+  }
+
+  .footer-midle {
+    margin-top: 20px;
+  }
+
+  .footer-right {
+    margin-right: 20px;
+    padding-left: 20px;
+    margin-top: 20px;
+  }
+
+  p {
+    font-size: 15px;
+    margin-bottom: 10px;
+  }
+  .btn-filter p {
+    margin: 0;
+    cursor: pointer;
+    width: 150px;
+  }
+  .titre-Filtres {
+    padding-left: 10px;
+  }
+}
+
+/*-------------------- Medium devices (tablets, less/equal than 768px)--------------------*/
+
+@media (max-width: 768px) {
+  .titre-Filtres {
+    padding-right: 100%;
+  }
 }
 
-/* Small devices (phones, less than 768px) */
+/*------------------ Medium devices (tablets, less/equal than 767,98px)-------------------*/
+
 @media (max-width: 767.98px) {
-    /* ... */
-}
\ No newline at end of file
+  section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  h1 {
+    font-size: 24px;
+    margin-top: 40px;
+    padding-left: 24px;
+    padding-top: 20px;
+  }
+
+  h4 {
+    font-size: 15px;
+    padding-left: 26px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  h6 {
+    font-size: 15px;
+    font-weight: bold;
+    padding-left: 15px;
+  }
+
+  .responsive {
+    width: 100%;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 20px;
+  }
+
+  header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  header nav ul li {
+    border-top: none;
+    margin-left: 100%;
+    border-bottom: 2px solid transparent;
+    width: 282px;
+    padding-left: 10%;
+    width: 100%;
+    margin: 0px 20px 0px 20px;
+  }
+
+  header nav ul li:hover {
+    border-color: #256dd7;
+  }
+
+  form button {
+    display: none;
+    cursor: pointer;
+  }
+
+  #formulaire {
+    padding-left: 0px;
+  }
+
+  .filters {
+    display: flex;
+    width: 100%;
+  }
+
+  .btn-filter {
+    display: flex;
+    width: 46%;
+  }
+
+  a {
+    font-size: small;
+  }
+
+  input#search {
+    width: 100%;
+    border: thin solid var(--light-grey);
+  }
+
+  header #logo img {
+    width: 50px;
+  }
+  #logo {
+    display: flex;
+    padding-left: 45%;
+    margin-top: 20px;
+  }
+
+  .btn-search {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding-left: 100%;
+    margin-left: 20px;
+    padding-right: 20px;
+  }
+  .btn-search {
+    padding: 0px 0px 0px 0px;
+  }
+
+  .section-title {
+    font-size: 15px;
+    padding-bottom: 20px;
+  }
+
+  .afficher {
+    margin-top: 15px;
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .fa-solid.fa-magnifying-glass {
+    display: flex;
+    background-color: var(--main-color);
+    color: var(--main-bg-color);
+    border-radius: 0 10px 10px 0;
+    margin-right: 30px;
+  }
+  .fa-solid.fa-magnifying-glass:hover {
+    box-shadow: 1px 1px 10px grey;
+  }
+
+  .main-container {
+    padding: 0;
+  }
+
+  .container-grid {
+    display: flex;
+    flex-direction: column;
+    column-gap: normal;
+  }
+
+  .hebergements-and-populaires {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  section.hebergements {
+    width: 100%;
+    margin-left: 10px;
+    background-color: white;
+  }
+
+  .populaires-cards a {
+    width: 98%;
+  }
+
+  .populaires-cards {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .box1,
+  .box2,
+  .box3,
+  .box4,
+  .box5,
+  .box6 {
+    width: 100%;
+    margin-bottom: 20px;
+    margin-top: 0px;
+  }
+
+  article.card {
+    width: 100%;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: self-start;
+    height: 399px;
+    width: 100%;
+    margin-top: 20px;
+    gap: 30px;
+  }
+
+  .footer-left.p {
+    font-size: 30px;
+    margin-top: 20px;
+    line-height: 50px;
+  }
+
+  .footer-midle.p {
+    font-size: 30px;
+    margin-left: 20px;
+    margin-top: 20px;
+  }
+
+  .footer-right.p {
+    font-size: 30px;
+    margin-left: 20px;
+    margin-top: 20px;
+  }
+  .footer-right {
+    margin: 0px;
+  }
+
+  .footer-midle {
+    margin-left: 20px;
+  }
+
+  P {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+}
diff --git a/index.html b/index.html
index 53512c75..669fdd9e 100644
--- a/index.html
+++ b/index.html
@@ -1,96 +1,543 @@
 <!DOCTYPE html>
 <html lang="fr">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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" />
     <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>
+  </head>
 
-<body>
+  <body>
     <div class="main-container">
-        <header></header>
-        <main>
-            <div class="hebergements-and-populaires">
-                <section class="hebergements">
+      <header>
+        <div id="logo">
+          <img src="images/logo/Booki@3x.png" alt="image booki" />
+        </div>
+        <nav>
+          <ul>
+            <li><a href="#Hebergements">Hébergements</a></li>
+            <li><a href="#Activites">Activités</a></li>
+          </ul>
+        </nav>
+      </header>
+      <h1>Trouvez votre hébergement pour des vacances de rêve</h1>
+      <div class="titre-1">En plein centre-ville ou en pleine nature</div>
+      <br />
+
+      <div class="#">
+        <form method="post" action="#" id="formulaire">
+          <div class="btn-search">
+            <i class="fa-solid fa-location-dot"></i>
+            <label for="search" class="accessibility-label">
+              Entrez le nom de la ville</label
+            >
+            <input type="text" id="search" placeholder="Marseille, France" />
+            <button>Rechercher</button>
+            <i class="fa-solid fa-magnifying-glass"></i>
+            <br />
+          </div>
+        </form>
+
+        <!------filters-->
+
+        <div class="filters">
+          <div class="titre-Filtres">
+            <h3>Filtres</h3>
+          </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 class="btn-filter">
+            <p><i class="fa-solid fa-money-bill-wave"></i><a>Économique</a></p>
+          </div>
+          <div class="btn-filter">
+            <p><i class="fa-solid fa-child-reaching"></i><a>Familiale</a></p>
+          </div>
+          <div class="btn-filter">
+            <p><i class="fa-solid fa-heart"></i><a>Romantique</a></p>
+          </div>
+          <div class="btn-filter">
+            <p>
+              <i class="fa-solid fa-fire" style="color: #045bf1"></i
+              ><a>Nos pépites</a>
+            </p>
+          </div>
+        </div>
+
+        <div id="icon-info">
+          <i class="fa-solid fa-info fa-xs"></i><br />
+          <div class="titre-2">
+            Plus de 500 logements sont disponibles dans cette ville
+          </div>
+        </div>
+        <!--fin de la navigation-->
+        <main>
+          <div id="Hebergements" class="hebergements-and-populaires">
+            <section class="hebergements">
+              <div class="hebergements-title">
+                <h2 class="section-title">Hébergements à Marseille</h2>
+                <div class="hebergements-cards">
+                  <div class="container-grid">
+                    <a href="#">
+                      <article class="box1">
+                        <img
+                          src="./images/hebergements/marcus-loke.jpg"
+                          alt="Image Auberge La Canebière"
+                        />
+                        <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="box2">
+                        <img
+                          src="./images/hebergements/fred-kleber.jpg"
+                          alt="l'hotel du port"
+                        />
+                        <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="box3">
+                        <img
+                          src="./images/hebergements/reisetopia.jpg"
+                          alt="Image Hôtel Les mouettes"
+                        />
+                        <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>
+                    <a href="#">
+                      <article class="box4">
+                        <img
+                          src="./images/hebergements/annie-spratt.jpg"
+                          alt="Image Hôtel 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="box5">
+                        <img
+                          src="./images/hebergements/nicate-lee.jpg"
+                          alt="Image Auberge Le Panier"
+                        />
+                        <div class="card-content">
+                          <div class="card-txt">
+                            <h3 class="card-title">Hôtel Le Panier</h3>
+                            <p class="card-subtitle">
+                              Nuit à partir de 23<span class="euro">€</span>
+                            </p>
+                          </div>
+                          <div class="card-rating">
+                            <i
+                              class="fa-xs fa-solid fa-star"
+                              aria-hidden="true"
+                            ></i>
+                            <i
+                              class="fa-xs fa-solid fa-star"
+                              aria-hidden="true"
+                            ></i>
+                            <i
+                              class="fa-xs fa-solid fa-star"
+                              aria-hidden="true"
+                            ></i>
+                            <i
+                              class="fa-xs fa-solid fa-star"
+                              aria-hidden="true"
+                            ></i>
+                            <i
+                              class="fa-xs fa-solid fa-star neutral-star"
+                              aria-hidden="true"
+                            ></i>
+                            <span class="sr-only">Note de 4 sur 5</span>
+                          </div>
+                        </div>
+                      </article>
+                    </a>
+                    <a href="#">
+                      <article class="box6">
+                        <img
+                          src="./images/hebergements/febrian-zakaria.jpg"
+                          alt="Image Hôtel Chez Amina"
+                        />
+                        <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="#">
+                      <div class="afficher"><b>Afficher plus </b></div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </section>
+            <section class="populaires">
+              <div class="populaires-title">
+                <h2 class="section-title">Les plus populaires</h2>
+                <div class="line">
+                  <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
+                </div>
+              </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>
-                    <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>
+                  </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>
-                </section>
+                  </article>
+                </a>
+              </div>
+            </section>
+          </div>
+          <section>
+            <h4 id="Activites"><b>Activités à Marseille</b></h4>
+            <div class="responsive">
+              <div class="gallery">
+                <img
+                  src="./images/activites/reno-laithienne.jpg"
+                  alt="Image Vieux Port"
+                />
+                <div class="desc1">
+                  <h6>Vieux Port</h6>
+                </div>
+              </div>
             </div>
+            <div class="responsive">
+              <div class="gallery">
+                <img
+                  src="./images/activites/paul-hermann.jpg"
+                  alt="Image Fort de Pomègues"
+                />
+                <div class="desc2">
+                  <h6>Fort de Pomègues</h6>
+                </div>
+              </div>
+            </div>
+            <div class="responsive">
+              <div class="gallery">
+                <img
+                  src="./images/activites/kilyan-sockalingum.jpg"
+                  alt="Parc national des Calanques"
+                />
+
+                <div class="desc">
+                  <h6>Parc national des Calangues</h6>
+                </div>
+              </div>
+            </div>
+
+            <div class="responsive">
+              <div class="gallery">
+                <img
+                  src="./images/activites/florian-wehde.jpg"
+                  alt="Image Notre-Dame-de-la-Garde"
+                />
+                <div class="desc">
+                  <h6>Notre-Dame-de-la-Garde</h6>
+                </div>
+              </div>
+            </div>
+
+            <div class="clearfix"></div>
+          </section>
+
+          <footer class="footer">
+            <div class="footer-left">
+              <p><b>A propos</b></p>
+              <div class="left">
+                <p>Fonctionnement du site</p>
+                <p>Conditions générales</p>
+                <p>Données et confidentialité</p>
+              </div>
+            </div>
+            <div class="footer-midle">
+              <p><b> Nos hébergements</b></p>
+              <div class="midle">
+                <p>Charte qualité</p>
+                <p>Proposer votre hôtel</p>
+              </div>
+            </div>
+            <div class="footer-right">
+              <p><b>Assistance</b></p>
+              <div class="right">
+                <p>Centre d'aide</p>
+                <p>Nous contacter</p>
+              </div>
+            </div>
+          </footer>
         </main>
-        <footer></footer>
+      </div>
     </div>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>