commit de l'année

Assets/css.css

@@ -1,7 +1,10 @@
 body{
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
-    background-color: #bbb;
+    background-image: url("Images/bg.jpg");
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+
 }
 
 /*NAVBAR*/
@@ -38,6 +41,22 @@ a{
     background-color: #ddd;
 }
 
+.header ul input{
+    display: block;
+    font-size: 20px;
+    padding: 0.1vw;
+    margin-left: 3%;
+    border: none;
+    border-bottom: 0.2vw solid grey;
+    margin-top: 0;
+}
+
+.header ul input:focus{
+    border-bottom: 0.2vw solid rgb(20, 178, 231);
+    background-color: rgba(0,0,0,0.1);
+    transition-duration: 0.2s;
+}
+
 .header .logo {
     float: left;
     display: block;
@@ -113,7 +132,7 @@ a{
     top: 0;
 }
 
-/*========================================*/
+/*======================================== 1990 652*/
 
 /*Slide des promotions*/
 
@@ -174,7 +193,7 @@ div#slider figure {
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    background-color: rgb(187, 187, 187);
+    background-color: rgb(234, 234, 234);
 }
 
 .flex-container>div {
@@ -193,30 +212,58 @@ div#slider figure {
     font-size: 0px;
 }
 
-.flex-container>div:hover a>p{
+.flex-container .ok:hover a>p{
     font-size: 40px;
     transition-duration: 0.2s;
 }
 
+.content{
+    padding: 5vw 1vw;
+    background-color: rgba(255, 255, 255, 0.548);
+}
+
 .content>h1{
     font-size: 60px;
     text-align: center;
+    color: rgb(0, 0, 0);
 }
 
 .spec{
     text-align: left;
-    font-size: 20px;
+    font-size: 25px;
     background-color: rgba(255, 255, 255, 0.651);
     color: black;
-    width: 50%;
+    width: 100%;
 }
 .rupt{
-    text-align: right;
+    text-align: center;
     float: right;
-    background-color: black;
+    z-index: 3;
+    background-color: rgba(0, 0, 0, 0.829);
+    color: red;
+    width : 100%;
+    font-size: 25px;
+}
+
+.out{
+    opacity: 0.4;
+}
+
+.top{
+    padding: 5vw 1vw;
+}
+
+.top>h1{
     color: white;
-    width : 58%;
+    font-size: 60px;
-    font-size: 20px;
+    text-align: center;
+}
+
+
+.top>h2{
+    font-size: 50px;
+    color: rgb(204, 204, 204);
+    text-align: center;
 }
 
 /*============================================*/

Assets/resp.css

@@ -18,6 +18,12 @@
         display: none;
     }
 
+    .header ul input{
+        border-bottom: 0.1vw solid grey;
+        margin-top: 6%;
+    }
+    
+
     /*============================================*/
 
     /* TOUT NOS PRODUITS*/

index.html

@@ -18,11 +18,18 @@
         <input class="menu-btn" type="checkbox" id="menu-btn"/>
         <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
         <ul class="menu">
+            <li><input type="text" placeholder="Rechercher..."></li>
             <li><a href="#">A propos</a></li>
             <li><a href="#">Contact</a></li>
             <li><a href="#">Panier</a></li>
         </ul>
     </header>
+    
+    <div class="top">
+        <h1>Bienvenue sur le site de KyFlo !</h1>
+        <h2>Vendeur de robot depuis 2005</h2>
+    </div>
+
 	<div id="slider">
         <figure>
             <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
@@ -34,17 +41,19 @@
 	</div>
     
     <div class="content">
-        <h1>Nos produits :</h1>
+        <h1>Tous nos produits :</h1>
+    </div>
+    
     <div class="flex-container">
-            <div><a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt><p>Nao</p></a></div>
+        <div class="ok"><a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt><p>Nao</p></a></div>
-            <div><div class="rupt">Rutpure de stock</div><a href="#"><img src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></a></div>
+        <div ><div class="rupt">Rutpure de stock</div><a href="#"><img class="out" src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></a></div>
-            <div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/pepper.png" alt><p>Pepper</p></a></div>
+        <div class="ok"><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/pepper.png" alt><p>Pepper</p></a></div>
-            <div><a href="#"><img src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></a></div>
+        <div><div class="rupt">Rupture de stock</div><a href="#"><img class="out" src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></a></div>
-            <div><div class="spec">N°1 des ventes</div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></a></div>
+        <div class="ok"><div class="spec">N°1 des ventes</div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></a></div>
-            <div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></a></div>
+        <div class="ok"><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></a></div>
-        </div>
     </div>
     
+
 </body>
 
 </html>