Travail responsive + flexbox

Assets/css.css

@@ -21,18 +21,18 @@ body {
 }
 
 h1 {
-    font-size: 3vw;
+    font-size: 2vw;
     color: white;
 }
 
 body>#bienvenue>h1 {
-    font-size: 3vw;
+    font-size: 2vw;
     color: white;
     text-align: center;
 }
 
 body>#bienvenue>h2 {
-    font-size: 2vw;
+    font-size: 1.5vw;
     color: lightgrey;
     text-align: center;
 }
@@ -64,6 +64,7 @@ a#kyflo {
     padding: 0.5vw 1vw;
     transform: none;
     border: none;
+    
 }
 
 a#nous {
@@ -79,6 +80,11 @@ a#nous {
     margin-right: -6%;
 }
 
+a#panier>h3{
+    margin-top :0.5vw;
+    margin-bottom: 0;
+}
+
 #loupe {
     float: right;
     display: block;
@@ -104,7 +110,9 @@ a#nous {
 .topnav {
     overflow: hidden;
     background-color: rgba(22, 22, 22, 0.61);
-    box-shadow: 0vw 0.5vw 0.4vw rgba(255, 0, 0, 0.534);
+    border-bottom: 0.15vw solid rgb(204, 25, 25);
+    
+    
 }
 
 .topnav a {
@@ -158,6 +166,7 @@ a#contactN:hover {
 
 footer {
     margin-top: 8vw;
+    bottom: 0;
 }
 
 footer>div>table {
@@ -235,23 +244,23 @@ td#contact {
 
 .flex-container>div {
     background-color: rgba(59, 59, 59, 0.5);
-    width: 47%;
+    width: 30%;
     margin: 1vw;
     text-align: center;
-    line-height: 5vw;
+    line-height: 3vw;
     font-size: 30px;
 }
 
 .flex-container>div>a>h3 {
     text-align: left;
-    font-size: 3vw;
+    font-size: 2vw;
     margin-left: 35%;
     color: lightgrey;
 }
 
 .flex-container>div>a>h4 {
     text-align: left;
-    font-size: 2vw;
+    font-size: 1.5vw;
     margin-left: 35%;
     color: lightgrey;
 }
@@ -261,7 +270,8 @@ td#contact {
     margin-top: 10%;
 }
 
-#middle {}
+
+
 
 
 /*==========================================*/
@@ -379,7 +389,7 @@ td#contact {
 #produits {
     border: 0.1vw solid red;
     background-color: rgba(0, 0, 0, 0.5);
-    margin-top: 8vw;
+    margin-top: 3vw;
     padding: 2vw 2vw;
 }
 
@@ -570,7 +580,6 @@ div#slider {
     width: 100%;
     max-width: 1920px;
     margin: auto;
-    margin-top: 5%;
 }
 
 div#slider figure {
@@ -737,12 +746,15 @@ table#equipe {
     width: 100%;
 }
 
+
+
 tr#equ>td {
     text-align: center;
 }
 
 tr#equ>td>img {
     float: none;
+    width: 20%;
     border: 0.2vw solid rgb(204, 25, 25);
 }
 

Assets/resp.css

@@ -1,5 +1,24 @@
 @media screen and (max-width: 600px) {
-    .topnav a,
+    
+    /*===========GENERAL===========*/
+    h1{
+        font-size: 3vw;
+    }
+    body>#bienvenue>h1 {
+        font-size: 3vw;
+    }
+    
+    body>#bienvenue>h2 {
+        font-size: 2vw;
+    }
+    button#hautPage{
+        display:none;
+    }
+
+    /*===========NAVBAR===========*/
+    .topnav{
+        position: static;
+    }
     .topnav input[type=text] {
         float: none;
         display: block;
@@ -9,23 +28,52 @@
         padding: 2vw;
         border: none;
         transform: none;
+        font-size: 3vw;
+    }
+    .topnav a {
+        float: none;
+        display: block;
+        text-align: left;
+        width: 100%;
+        margin: 0;
+        padding: 2vw;
+        border: none;
+        transform: none;
+        font-size: 3vw;
+
+    }
+    .topnav a#kyflo{
+        font-size: 8vw;
+        text-align: center;
     }
     .topnav a#panier,
     a#nous {
         border: none;
     }
+    .topnav a#panier{
+        width: 20%;
+        margin-right: -14%;
+    }
+    .topnav a#panier:hover{
+        margin-right: -14%;
+    }
     .topnav a#nous:hover,
     a#contactN:hover {
-        padding: 2.4vw 2vw;
+        padding: 2vw 2vw;
     }
-    a#loupe {
+    .topnav a#loupe {
         width: 5%;
+        padding: 1vw;
+        font-size: 3vw;
         border-left: 0.1vw solid rgb(204, 25, 25)
     }
     .topnav input[type=text] {
         border: 1px solid rgb(190, 73, 73);
     }
-    /* FLEX CONTAINER*/
+    .topnav a#panier>h3{
+        display:none;
+    }
+    /*===========FLEX CONTAINER===========*/
     .flex-container>div {
         width: 85%;
         margin-left: auto;
@@ -44,4 +92,83 @@
         margin-left: 2vw;
         margin-right: 2vw;
     }
+
+    /*========FOOTER=========*/
+    tr {
+        border-bottom: 0.2vw solid red;
+        color: white;
+        height: 4vw;
+    }
+
+    th {
+        font-size: 2.5vw;
+    }
+
+    th#line {
+        border: none;
+    }
+
+    button#contactB {
+        margin: auto;
+        display: flex;
+        justify-content: center;
+        padding: 1.5vw 4vw;
+        font-size: 2vw;
+        color: lightgrey;
+        background-color: rgb(27, 27, 27);
+        border: 0.1vw solid rgb(204, 25, 25);
+        transform: skew(-.312rad);
+        margin-bottom: 2vw;
+    }
+
+    button#contactB:hover {
+        background-color: rgb(204, 25, 25);
+        transition-duration: 0.5s;
+        border-radius: 1vw;
+    }
+
+    td {
+        width: 20%;
+        font-size: 2vw;
+    }
+
+    td#contact {
+        width: 100%;
+    }
+
+    /*=======FLEX CONTAINER========*/
+
+    .flex-container {
+        justify-content: center;
+    }
+
+    .flex-container>div {
+        width: 80%;
+        margin: 1vw;
+        line-height: 5vw;
+    }
+
+    .flex-container>div>a>h3 {
+        font-size: 3vw;
+    }
+
+    .flex-container>div>a>h4 {
+        font-size: 2.5vw;
+    }
+
+    .flex-container>div>a>img {
+        width: 20%;
+        margin-top: 5%;
+    }
+
+    /*=====Produits=======*/
+    #Produit>h3 {
+        font-size: 2.5vw;
+    }
+
+    #Carac>h2 {
+        font-size: 2.5vw;
+        color: lightgrey;
+    }
+    
 }

index.html

@@ -19,7 +19,7 @@
             <a id="kyflo" class="active" href="index.html">KyFlo</a>
             <a id="nous" href="Assets/Pages/Autres/nous.html">A propos</a>
             <a id="contactN" href="Assets/Pages/Autres/contact.html">Contact</a>
-            <a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt></a>
+            <a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
             <a id="loupe" href="Assets/Pages/Autres/search_result.html">GO</a>
             <input type="text" placeholder="Rechercher sur tout le site...">
         </div>
@@ -55,25 +55,13 @@
                         <h3>Robot Nao</h3>
                         <h4>5 000€</h4>
                     </a>
-                </div>
+                </div>>
-                <div>
-                    <a href="#produits"><img src="Assets/Images/Produits/cat.png" alt>
-                        <h3>Robot chat</h3>
-                        <h4>Rupture de stock</h4>
-                    </a>
-                </div>
                 <div>
                     <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
                         <h3>Robot r2d2</h3>
                         <h4>500€</h4>
                     </a>
                 </div>
-                <div>
-                    <a href="#produits"><img src="Assets/Images/Produits/jaune.png" alt>
-                        <h3>Robot champion</h3>
-                        <h4>Rupture de stock</h4>
-                    </a>
-                </div>
                 <div>
                     <a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
                         <h3>Robot valkyrie</h3>