Avancé de la mise en page:

- Correction police pour les caractères en gras - Correction barre de navigation version mobile - Mise en page du titre, sous-titre et barre de recherche
Will33ELS · Dec 1, 2020 · e1e6083 · e1e6083
1 parent 6924b9c
commit e1e6083
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 11 deletions.
diff --git a/css/style.css b/css/style.css
@@ -9,10 +9,7 @@
 */
 
 /* PARAMETRES GENERAUX */
-@font-face {
-    font-family: "Raleway";
-    src: url("../font/Raleway_wght.ttf") format("truetype");
-}
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700;900&display=swap');
 html{
     font-family: "Raleway", serif;
 }
@@ -21,8 +18,7 @@ body{
 }
 h1{
     font-size: 20px;
-    font-weight: bold;
-    margin-top: 20px;
+    font-weight: 800;
 }
 
 /* CLASS UTILES*/
@@ -73,6 +69,45 @@ ul{
     order:3;
 }
 
+/* SEARCH */
+.search-form{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    margin-top: 15px;
+}
+.search-icon {
+    padding: 12px;
+    background-color: #F2F2F2;
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+.search-form input{
+    padding: 10px;
+    border: #F2F2F2 2px solid;
+    font-weight: 800;
+}
+.search-form input:focus{
+    border: black 2px solid;
+    outline:none;
+}
+
+.search-button{
+    background-color: #0065FC;
+    padding: 0 15px;
+    color: white;
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border: none;
+    transition: background-color 0.2s;
+}
+.search-button:focus,
+.search-button:hover{
+    background-color: #DEEBFF;
+    border: none;
+    outline:none;
+}
+
 /* FOOTER */
 footer{
     background-color: #F2F2F2;
@@ -116,7 +151,7 @@ footer a:hover{ /* PAS DEMANDE DANS LE CDC, A DEMANDER SI GENANT*/
         margin: 0;
         text-align: center;
         border-bottom: #F2F2F2 3px solid;
-        padding-top: 10px;
+        padding: 10px 0 10px 0;
     }
     .navigation-item.active, .navigation-item:hover{
         border-bottom: #0065FC 3px solid;
@@ -125,6 +160,23 @@ footer a:hover{ /* PAS DEMANDE DANS LE CDC, A DEMANDER SI GENANT*/
         width: 100%;
     }
 
+    /* SEARCH */
+    .search{
+        margin: 0 15px;
+    }
+    .search-title{
+        margin-top: 25px;
+    }
+    .search-subtitle{
+        margin: 5px 0;
+    }
+    .search-form{
+        margin-top: 35px;
+    }
+    .search-button{
+        border-radius: 10px;
+    }
+
     /* FOOTER */
     .a-propos, .nos-hebergements, .assistance{
         width: 100%;

diff --git a/index.html b/index.html
@@ -28,10 +28,13 @@
 </header>
 <div class="content">
     <div class="search">
-        <h1>Trouvez votre hébergement pour des vacances de rêve</h1>
-        <p>En plein centre ville ou en pleine nature</p>
-        <form>
-            <div class="prefix-search"><i class="fas fa-map-marker-alt"></i></div><input type="text" placeholder="Marseille, France" required/><button type="submit" class="btn-search">Rechercher</button>
+        <h1 class="search-title">Trouvez votre hébergement pour des vacances de rêve</h1>
+        <p class="search-subtitle">En plein centre ville ou en pleine nature</p>
+        <form class="search-form">
+            <i class="fas fa-map-marker-alt search-icon"></i>
+            <input type="text" value="Marseille, France" required/>
+            <button type="submit" class="search-button display-none display-lg-block">Rechercher</button>
+            <button type="submit" class="search-button display-block display-lg-none"><i class="fas fa-search"></i></button>
         </form>
         <div class="filtres">
             Filtres: