Ajout SVG icon, Parti NAV filtre et recherche

OpenClassrooms-Student-Center · QuentinDM · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
commit 7efee80cec66a7d140fef6cc3ff3bda3d3a1ada3
diff --git a/css/style.css b/css/style.css
@@ -31,9 +31,11 @@ a {
     text-decoration: none;
 }
 
-.section-title {
+.section-title { 
     margin: 0;
     font-size: 22px;
+    font-weight: 700;
+    line-height: 25.83px;
 }
 
 .card {
@@ -59,12 +61,16 @@ a {
     color: var(--main-bg-color)
 }
 
-/****** CSS HEADER ***************/
+.side-padding{
+    padding: 30px 50px 30px 50px; /* add this to add padding on the side of the page*/
+}
+/****** CSS HEADER *************************************************************************/
 .header-logo-link{
     display: flex;
     justify-content: space-between;
 }
 
+
 .link-hebergement-activities a{
     margin: 0 50px 0 50px; /*make the gap btw links*/
 }
@@ -73,14 +79,110 @@ a {
     color: #0065FC;
     border-top: #0065FC solid 2px;
 }
+
 .booki-image{
-    padding: 30px 50px 30px 50px;
-}
-.booki-image img{
     width: 61.09px;
     height: 19px;
 }
-/****** Hebergements And Populaires ***********/
+/****** Nav filter css ****************************************************/
+.search-bar{
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    width: 377px;
+    height: 49px;
+}
+
+.text-nav{
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 21.13px;
+}
+/* Headline CSS*/
+.headline h2{
+    margin-bottom: 10px; /*make space btw H2 and P from the nav*/
+}
+.icon-location{ /* this part is for the icon side */
+    width: 14px;
+    height: 18px;
+}
+.container-icon-location{ /*this part is for background of the icon location and centered it*/
+    width: 50px;
+    height: 49px;
+    border-radius: 15px 0 0 15px;
+    background-color: #F2F2F2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Div input css*/
+.input{
+    text-align: center;
+    height: 46px;
+    border: solid 1px #F2F2F2 ;
+}
+
+/* Div search button CSS*/
+.search-button{
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    height: 49px;
+    border-radius: 0 15px 15px 0;
+    padding: 15px 16px 15px 16px;
+    background-color: #0065FC;
+    color: white;
+    border: 1px solid #0065FC;
+}
+
+/****** Filtres  CSS ************/
+.filter-bar{
+    display: flex;
+    gap: 15px;
+    height: 50px;
+    margin-top: 20px;
+}
+
+.filter-button{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: 25px;
+    border: solid 2px #D9D9D9;
+    padding: 4px 19px 4px 19px;
+}
+
+.text-button{
+    font-size: 17px;
+    font-weight: 700;
+    line-height: 19.96px;
+}
+
+.filter-image {
+    width: 22px;
+    height: 22px;
+}
+
+.filter-button:hover{ /* when pass over change background and cursor, on the filter button*/
+    background-color: #DEEBFF;
+    cursor: pointer;
+}
+/* Div info-bar CSS */
+.info-bar{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+.information{
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 19px;
+    margin: 0px;
+}
+
+/****** Hebergements And Populaires *******************************************/
 .hebergements-and-populaires {
     display: flex;
     justify-content: space-between;
@@ -93,7 +195,7 @@ a {
     box-sizing: border-box;
 }
 
-/****** Hebergements ***********/
+/****** Hebergements *****************************************************/
 .hebergements {
     width: 65%;
 }
@@ -105,7 +207,7 @@ a {
     border-radius: 20px 20px 0 0;
 }
 
-/****** Populaires ***********/
+/****** Populaires *********************************************************/
 .populaires {
     width: 32%;
 }
@@ -142,10 +244,15 @@ a {
     margin-bottom: 4px;
 }
 
-.populaires-cards .card-subtitle {
+.populaires-cards  {
     margin: 0;
 }
-
+.card-subtitle{
+    margin: 0;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18.78px;
+}
 .populaires-cards .card-rating {
     margin-bottom: 5px;
 }

diff --git a/images/icons-boostrap/cash.svg b/images/icons-boostrap/cash.svg
diff --git a/images/icons-boostrap/fire.svg b/images/icons-boostrap/fire.svg
diff --git a/images/icons-boostrap/geo-alt-fill.svg b/images/icons-boostrap/geo-alt-fill.svg
diff --git a/images/icons-boostrap/heart-fill.svg b/images/icons-boostrap/heart-fill.svg
diff --git a/images/icons-boostrap/info-circle.svg b/images/icons-boostrap/info-circle.svg
diff --git a/images/icons-boostrap/person-raised-hand.svg b/images/icons-boostrap/person-raised-hand.svg
diff --git a/index.html b/index.html
@@ -16,21 +16,58 @@
 
 <body>
     <header class="header-logo-link">
-            <div class="booki-image">
-                <img src="./images/logo/Booki.png" alt="logo Booki">
+            <div class="side-padding">
+                <img src="./images/logo/Booki.png" alt="logo Booki" class="booki-image">
             </div> 
             <div class="link-hebergement-activities">
                 <a href="#" target="_blank" rel="noopener noreferrer">Hébergements</a>
                 <a href="#" target="_blank" rel="noopener noreferrer">Activités</a>
             </div>
-        </header>
+    </header>
+    <nav class="info-group side-padding">
+        <div class="headline">
+            <h2 class="section-title marge">Trouvez votre hébergement pour des vacances de rêve</h2>
+            <p class="card-subtitle">En plein centre-ville ou en pleine nature</p>
+        </div>
+        <div class="search-bar">
+            <div class="container-icon-location">
+                <img src="./images/icons-boostrap/geo-alt-fill.svg" alt="location icons" class="icon-location">
+            </div>
+            <form action="" method="get">
+                <input type="text" name="city" id="city" placeholder="Marseille, France" class="input text-nav">
+            </form>
+            <button type="button" class="text-nav search-button">Rechercher</button>
+        </div>
+        <div class="filter-bar">
+            <h2 class="text-nav">Filtres</h2>
+            <div class="economies-filter filter-button">
+                <img src="./images/icons-boostrap/cash.svg" alt="icon billet de monnaie" class="filter-image">
+                <h2 class="text-button">Économique</h2>
+            </div>
+            <div class="familial-filter filter-button">
+                <img src="./images/icons-boostrap/person-raised-hand.svg" alt="une personne qui salut" class="filter-image">
+                <h2 class="text-button">Familial</h2>
+            </div>
+            <div class="romantic-filter filter-button">
+                <img src="./images/icons-boostrap/heart-fill.svg" alt="icon d'un coeur" class="filter-image">
+                <h2 class="text-button">Romantique</h2>
+            </div>
+            <div class="our-best-filter filter-button">
+                <img src="./images/icons-boostrap/fire.svg" alt="icon de feu " class="filter-image">
+                <h2 class="text-button">Nos pépites</h2>
+            </div>
+        </div>
+        <div class="info-bar">
+            <img src="./images/icons-boostrap/info-circle.svg" alt="icon d'information" class="image-information">
+            <p class="information">Plus de 500 logements sont disponibles dans cette ville</p>
+        </div>
+    </nav>
     <div class="main-container">
-
         <main>
             <div class="hebergements-and-populaires">
                 <section class="hebergements">
                     <div class="hebergements-title">
-                        <h2 class="section-title">Hébergements à Mareseille</h2>
+                        <h2 class="section-title">Hébergements à Marseille</h2>
                     </div>
                     <div class="hebergements-card">
                         <a href="#">