etape 1 à 5

css/style.css

@@ -58,7 +58,7 @@ a {
     color: var(--main-bg-color)
 }
 
-/*** Header ***/
+/********* Header *********/
 
 nav {
     display: flex;
@@ -96,7 +96,7 @@ nav {
     height: 19px;
     border-top: 2px solid transparent;
 }
-/*** Attention border top bleu en dessous sur la vers. mobile ****/
+/*************** Attention border top bleu en dessous sur la vers. mobile ****************/
 .linka:hover { 
     color: #0065FC;
     border-top:2px solid #0065FC;
@@ -107,7 +107,14 @@ nav {
     border-top:2px solid #0065FC;
 }
 
-/******* barre de recherche Marseille, Paris  ******/
+/********** Search Main ***********/
+
+.search-main {
+    display: flex;
+    flex-direction: column;
+}
+
+/******************** barre de recherche Marseille, Paris  ***********************/
 .recherche-container {
     display: flex 
     ;
@@ -147,10 +154,11 @@ nav {
     padding: 0;
 }
 
-/****** Filtres ******/
+/******************* Filtres **********************/
 
 .filtre-container {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: 15px;
     height: 50px;
@@ -173,7 +181,26 @@ nav {
     background-color: #DEEBFF;
 }
 
+/************* Info *****************/
+
+.infogrames {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.fa-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #D9D9D9;
+    border-radius: 100%;
+    width: 24px;
+    height: 24px;
+}
+
 /****** Hebergements And Populaires ***********/
+
 .hebergements-and-populaires {
     display: flex;
     justify-content: space-between;

index.html

@@ -29,15 +29,15 @@
         </header>
         <main>
             <div>
-                <section>
+                <section class="search-main">
                     <div>
                         <h1>Trouvez votre hébergement pour des vacances de rêve</h1>
                         <p>En plein centre-ville ou en pleine nature</p>
                     </div>
-                    <div class="recherche-container">
+                   <div class="recherche-container">
                         <button class="rechercheA"><i class="fa-solid fa-location-dot"></i></button>
                         <input type="text" name="marseille" id="rechercheB" placeholder="Marseille, Paris">
-                        <button  class="rechercheC">Rechercher</button>
+                        <button  class="rechercheC">Rechercher</button> 
                             <!-- <div style="display: flex;">
                                 <div style="background-color: red; margin: 0; padding: 0">AAA</div>
                                 <div style="background-color: blue; margin: 0; padding: 0">BBB</div>
@@ -53,6 +53,10 @@ <h2>Filtre</h2>
                             <button><i class="fa-solid fa-fire"></i>Nos pépites</button>
                         </div>
                     </div>
+                    <div class="infogrames">
+                        <i class="fa-solid fa-info"></i>
+                        <p>Plus de 500 logements sont disponibles dans cette ville</p>
+                    </div>
                 </section>
             </div>
             <div class="hebergements-and-populaires">