Hebergement

css/style.css

@@ -1,10 +1,10 @@
-/****** General ***********/
-* {
+/*********** General ***********/
+* { 
     font-family: 'Raleway', sans-serif;
 }
 
 :root {
-    --main-color: #0065FC;
+    --main-color: #005de8;
     --main-bg-color: #F2F2F2;
     --filter-bg-color: #DEEBFF;
 }
@@ -13,6 +13,10 @@
     color: var(--main-color);
 }
 
+html, body, h1, p {
+    margin: 0;
+}
+
 body {
     display: flex;
     justify-content: center;
@@ -23,6 +27,9 @@ body {
     max-width: 1440px;
     padding: 0 50px;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
 }
 
 a {
@@ -58,7 +65,136 @@ a {
     color: var(--main-bg-color)
 }
 
-/****** Hebergements And Populaires ***********/
+/*********** HEADER ***********/
+
+/** Nav **/
+.nav-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+#menu {
+    display: flex;
+    list-style: none;
+    gap: 68px;
+}
+
+#menu a {
+    color: #090021;
+    padding-top: 14px;
+    font-size: 16px;
+}
+
+#menu a:hover {
+    color: var(--main-color);
+    border-top: 3px solid var(--main-color);
+}
+
+.logo-Booki {
+    height: 19px;
+    padding: 40px 0px 42px 0px;
+}
+
+/** Recherche **/
+
+.container-recherche {
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+}
+
+.form-recherche {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.icone-pin i {
+    background-color: #F2F2F2;
+    padding: 15px 18px;
+    font-size: 18px;
+    color: black;
+}
+
+.input-recherche {
+    border: none;
+    padding: 14px;
+    font-size: 16px;
+    outline: none;
+    width: 220px;
+    border-top: 1px solid #F2F2F2;
+    border-bottom: 1px solid #F2F2F2; 
+}
+
+.bouton-recherche {
+    background-color: var(--main-color);
+    color: white;
+    border: none;
+    padding: 15px 25px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 700;
+    transition: background-color 0.2s;
+}
+
+.bouton-recherche:hover {
+    background-color: #0050d4;
+}
+
+/** Filtre **/
+
+.container-filtre {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+h3 {
+    font-size: 18px;
+}
+
+.button-filtre {
+    padding: 4px 19px;
+    height: 50px;
+    border-radius: 25px;
+    border: 2px solid #D9D9D9;
+    background-color: white;
+    font-size: 17px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.button-filtre i {
+    margin-right: 7px;
+}
+
+.button-filtre:hover {
+    background-color: #DEEBFF;
+}
+
+/** Infos **/
+
+.container-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.fa-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50px;
+    border: 1px solid #D9D9D9;
+    padding: 2px;
+}
+
+/*********** Hebergements And Populaires ***********/
 .hebergements-and-populaires {
     display: flex;
     justify-content: space-between;
@@ -71,12 +207,56 @@ a {
     box-sizing: border-box;
 }
 
-/****** Hebergements ***********/
+/*********** Hebergements ***********/
 .hebergements {
     width: 65%;
 }
 
-/****** Populaires ***********/
+.hebergement-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    margin-top: 30px;
+}
+
+.hebergement-cards a {
+    width: calc(33.333% - 20px);
+    box-sizing: border-box;
+}
+
+.hebergement-cards .card {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 15px;
+    gap: 4px;
+}
+
+.hebergement-cards img {
+    width: auto;
+    height: 136px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    margin-bottom: 5px;
+}
+
+.card-content h3 {
+    margin: 0px;
+}
+
+.hebergement-cards .card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 0px 15px;
+    gap: 8px;
+}
+
+.hebergement-subtitle {
+    margin-top: 30px;
+    margin-bottom: 0px;
+}
+
+/*********** Populaires ***********/
 .populaires {
     width: 32%;
 }
@@ -126,7 +306,7 @@ a {
 
 /* Le code ci-dessous correspond à la version responsive uniquement */
 
-/****** Media queries ***********/
+/*********** Media queries ***********/
 /* Medium devices (tablets, less/equal than 1024px) */
 @media (max-width: 1024px) {
     .hebergements-and-populaires {