From b1f4080735edcc5a8a11b68e2ca103f0a68de7d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Simon?= <gaetan.simon@jack.agency>
Date: Wed, 20 Oct 2021 23:20:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=20filters?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 62 +++++++++++++++++++++++++++++++++++----
 styles.css | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 140 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 34ed206..bc097a9 100644
--- a/index.html
+++ b/index.html
@@ -48,23 +48,75 @@
     <main class="content">
       <!-- Titre + Section de recherche -->
       <section>
-        <h1 class="h1">Trouvez votre hébergement pour des vacances de rêve</h1>
+        <header>
+          <h1 class="h1">Trouvez votre hébergement pour des vacances de rêve</h1>
+        </header>
         <p>En plein centre ville ou en pleine nature</p>
 
-        <!-- recherche -->
-        <form action="index.html" method="GET">
+        <!-- formulaire de recherche -->
+        <form action="index.html" method="GET" role="search">
           <div class="search-input">
+            <!-- label -->
             <label for="search" class="search-input__icon">
               <i class="fas fa-map-marker-alt"></i>
             </label>
+            <!-- zone de texte -->
             <div class="search-input__text">
-              <input type="text" id="search" name="search" placeholder="Ex : Paris">
+              <input type="search" id="search" name="search" placeholder="Ex : Paris">
             </div>
+            <!-- bouton d'envoi -->
             <button type="submit" class="search-input__button">
-              Rechercher
+              <span class="search-input__button__text">Rechercher</span>
+              <i class="fas fa-search search-input__button__icon"></i>
             </button>
           </div>
         </form>
+
+        <!-- Filtres -->
+        <article class="filters">
+          <header>
+            <h2 class="filters__title">Filtres</h2>
+          </header>
+
+          <ul class="filters__list">
+            <!-- Économique -->
+            <li>
+              <a href="#" class="filters__list__item" title="Économique">
+                <span class="filters__list__item__icon">
+                  <i class="fas fa-search"></i>
+                </span>
+                <span>Économique</span>
+              </a>
+            </li>
+            <!-- Familial -->
+            <li>
+              <a href="#" class="filters__list__item" title="Familial">
+                <span class="filters__list__item__icon">
+                  <i class="fas fa-child"></i>
+                </span>
+                <span>Familial</span>
+              </a>
+            </li>
+            <!-- Romantique -->
+            <li>
+              <a href="#" class="filters__list__item" title="Romantique">
+                <span class="filters__list__item__icon">
+                  <i class="fas fa-heart"></i>
+                </span>
+                <span>Romantique</span>
+              </a>
+            </li>
+            <!-- Animaux autorisés -->
+            <li>
+              <a href="#" class="filters__list__item" title="Animaux autorisés">
+                <span class="filters__list__item__icon">
+                  <i class="fas fa-dog"></i>
+                </span>
+                <span>Animaux autorisés</span>
+              </a>
+            </li>
+          </ul>
+        </article>
       </section>
     </main>
   </body>
diff --git a/styles.css b/styles.css
index 7c47690..03cf0f4 100644
--- a/styles.css
+++ b/styles.css
@@ -1,6 +1,6 @@
 /* STYLES COMMUNS */
 body {
-  max-width: 1438px; /* taille max pour centrer le contenu sur les grands écrans */
+  max-width: 1380px; /* taille max pour centrer le contenu sur les grands écrans */
   margin: 0 auto;
 
   font-family: 'Raleway', sans-serif;
@@ -81,6 +81,7 @@ a {
   align-items: stretch;
 
   margin-top: 16px;
+  max-width: 420px;
 }
 
 .search-input__icon {
@@ -94,11 +95,13 @@ a {
   font-size: 20px;
   border-radius: 15px 0 0 15px;
   background-color: #F2F2F2;
+
+  cursor: pointer;
 }
 
 .search-input__text {
+  flex: 1 1 100%;
   position: relative;
-  width: 250px;
   height: 50px;
 
   border: 1px solid #F2F2F2;
@@ -131,6 +134,7 @@ a {
 .search-input__button {
   display: block;
   padding: 0 16px;
+  flex: 1 0 50px;
 
   font-size: 18px;
   font-weight: 600;
@@ -141,8 +145,65 @@ a {
   background-color: #0065FC;
   cursor: pointer;
 }
+
+.search-input__button__icon {
+  display: none;
+}
 /* RECHERCHE */
 
+/* FILTRES */
+.filters {
+  display: flex;
+  align-items: center;
+
+  margin-top: 30px;
+}
+
+.filters__title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.filters__list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -5px -10px -5px 35px;
+}
+
+.filters__list__item {
+  display: block;
+  position: relative;
+  margin: 5px 10px;
+  padding: 0 20px 0 70px;
+
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 46px;
+  white-space: nowrap;
+
+  color: #000 !important;
+  border: 2px solid #F2F2F2;
+  border-radius: 25px;
+}
+
+.filters__list__item__icon {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: 50px;
+  height: 50px;
+  font-size: 18px;
+  text-align: center;
+  background-color: #DEEBFF;
+  border-radius: 50%;
+}
+
+.filters__list__item__icon > i {
+  color: #0065FC;
+  line-height: 50px;
+}
+/* FILTRES */
+
 @media (max-width: 767.98px) {
   body {
     padding-top: 20px;
@@ -191,6 +252,26 @@ a {
 
   .search-input {
     margin-top: 32px;
+    max-width: 100%;
+  }
+
+  .search-input__button__text {
+    display: none;
+  }
+
+  .search-input__button__icon {
+    display: inline-block;
+  }
+
+  .filters {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .filters__list {
+    margin-left: 0;
+
+    margin-top: 12px;
   }
 
 }