🏗 filters

gtnsimon · Oct 20, 2021 · b1f4080 · b1f4080
1 parent 0d8631c
commit b1f4080
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 7 deletions.
diff --git 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
@@ -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;
   }
 
 }