diff --git a/commentaire.html b/commentaire.html
index 40da54b..f0430dd 100644
--- a/commentaire.html
+++ b/commentaire.html
@@ -7,11 +7,16 @@
Merci beaucoup pour votre réponse ! Votre commentaire a été pris en compte !
diff --git a/css.css b/css.css
index 09c2fc8..d71bbd3 100644
--- a/css.css
+++ b/css.css
@@ -1,14 +1,14 @@
/*204, 25, 25*/
/*==========================================================================================*/
-/*BODY + NAV*/
+/*BODY + GENERAL*/
body{
background : linear-gradient(to left,#141414, #444444, #141414);
+ margin: 0;
}
-body#produit
-{
- background : linear-gradient( #1c0224, #08023a, #022425);
- z-index: 10;
- font-family: 'Bookman', sans-serif;
+
+#content{
+ margin-left: 8vw;
+ margin-right: 8vw;
}
h1{
@@ -16,38 +16,6 @@ h1{
color : white;
}
-nav {
- background-color: rgba(22, 22, 22, 0.61);
- width: 100%;
- z-index: 1;
- box-shadow: 0vw 0.5vw 0.4vw rgba(255, 0, 0, 0.534);
-}
-
-body>nav>a>img{
- width : 25%;
- margin : auto;
-}
-
-body>nav>a>img:hover{
- background-color: rgba(255,255,255,0.5);
- transition-duration: 0.5s;
-}
-
-#panier {
- float : right;
- width : 5%;
- margin-right : 1%;
- margin-left : 3%;
- padding : 0.9vw 0.9vw;
-}
-
-#loupe {
- float : right;
- width : 5%;
- margin-right : 1%;
- margin-left : 3%;
- padding : 0.9vw 0.9vw;
-}
body>#bienvenue>h1{
font-size : 3vw;
@@ -59,6 +27,170 @@ body>#bienvenue>h2{
color : lightgrey;
text-align: center;
}
+/*=====================================*/
+/*NAVBAR*/
+
+a#kyflo{
+ font-size: 5vw;
+ color: rgb(204, 25, 25);
+ padding: 0.5vw 1vw;
+ transform: none;
+ border : none;
+}
+
+a#nous{
+ border-right: 0.15vw solid rgb(204, 25, 25);
+ border-left: 0.15vw solid rgb(204, 25, 25);
+}
+
+#panier {
+ float : right;
+ width : 18.5%;
+ padding : 1.2vw 1vw;
+ border-left: 0.2vw solid rgb(204, 25, 25);
+ margin-right: -13%;
+}
+
+.topnav {
+ overflow: hidden;
+ background-color: rgba(22, 22, 22, 0.61);
+ box-shadow: 0vw 0.5vw 0.4vw rgba(255, 0, 0, 0.534);
+}
+
+.topnav a {
+ float: left;
+ display: block;
+ color: rgb(255, 255, 255);
+ text-align: center;
+ padding: 2.4vw 2vw;
+ text-decoration: none;
+ font-size: 2vw;
+ border-right: 0.15vw solid rgb(204, 25, 25);
+ font-weight: bold;
+ transform: skew(-0.2rad);
+}
+
+.topnav a:hover {
+ background-color: rgb(204, 25, 25);
+ color: rgb(0, 0, 0);
+}
+
+.topnav a#nous:hover, a#contactN:hover {
+ padding: 2.4vw 3vw;
+}
+
+.topnav a#kyflo:hover{
+ color: white;
+ background-color: rgb(22, 22, 22);
+}
+
+.topnav a#panier:hover{
+ background-color: black;
+}
+
+
+.topnav input[type=text] {
+ float: right;
+ padding: 1vw;
+ margin-right: 16px;
+ border: 0.1vw solid rgb(204, 25, 25);
+ font-size: 2vw;
+ margin-top: 1.2vw;
+ background-color: rgb(22, 22, 22);
+}
+
+
+@media screen and (max-width: 600px) {
+ .topnav a, .topnav input[type=text] {
+ float: none;
+ display: block;
+ text-align: left;
+ width: 87%;
+ margin: 0;
+ padding: 2vw;
+ border: none;
+ transform: none;
+ }
+ .topnav a#panier, a#nous{
+ border: none;
+ }
+
+ .topnav a#nous:hover, a#contactN:hover{
+ padding : 2.4vw 2vw;
+ }
+
+ .topnav input[type=text] {
+ border: 1px solid rgb(190, 73, 73);
+ }
+}
+
+/*======================================*/
+
+
+/*FOOTER*/
+footer>div>table{
+ width: 100%;
+ border-top : 0.1vw solid rgb(204,25,25);
+ background-color: rgb(27, 27, 27);
+ margin : auto;
+ padding: 2vw 8vw;
+
+}
+a{
+ text-decoration: none;
+ color : grey;
+}
+
+a:hover{
+ color:rgb(204, 25, 25);
+ transition-duration: 0.4s;
+}
+
+tr{
+ border-bottom: 0.2vw solid red;
+ color: white;
+ height: 5vw;
+}
+
+th{
+ font-size: 2vw;
+ text-align : left;
+ border-bottom: 0.1vw solid white;
+}
+
+th#line{
+ border: none;
+
+}
+button#contactB{
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ padding: 1.5vw 4vw;
+ font-size: 1.5vw;
+ 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: 1.5vw;
+}
+
+td#contact{
+ width: 100%;
+}
+/*======================================*/
+
/*==========================================*/
/* CSS Confirmation commentaire */
#Merci>h1{
@@ -126,7 +258,7 @@ body>#bienvenue>h2{
#Produit>img{
width: 20%;
float: left;
- border: 0.2vw solid white;
+ border: 0.2vw solid rgb(204, 25, 25);
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5);
@@ -140,15 +272,38 @@ body>#bienvenue>h2{
font-size : 2vw;
margin-right: 10%;
color: white;
- border : 0.1vw solid white;
+ border : 0.1vw solid rgb(204, 25, 25);
}
#Produit>button:hover{
- color: black;
- background-color: rgba(255,255,255,0.5);
+ color: white;
+ background-color: rgba(204,25,25,0.5);
transition-duration: 0.5s;
border-radius: 2vw;
}
+
+table#mosaique{
+ width: 100%;
+ margin: auto;
+}
+
+table#mosaique>tr>td>img{
+ width: 20%;
+}
+
+img{
+ width: 30%;
+ float: left;
+}
+
+h3,h4{
+ color: white;
+}
+
+h3:hover{
+ color: rgb(204, 25, 25);
+ transition-duration: 0.5s;
+}
/*================================================*/
/*CARACTERISTIQUES PRODUIT*/
#Carac{
@@ -235,7 +390,7 @@ input, select {
width: 20%;
padding: 1vw 1vw;
font-size: 1.5vw;
- background: linear-gradient(to left, rgba(128, 128, 128, 0.493), rgba(0, 0, 0, 0.548));
+ background-color: rgb(27, 27, 27);
color: white;
border : 0.1vw solid rgba(255, 255, 255, 0.5);
border-radius: 3vw;
@@ -288,9 +443,7 @@ div#slider {
width: 100%;
max-width: 1920px;
margin: auto;
- border-radius: 12px;
margin-top: 5%;
- border : 0.1vw solid red;
}
@@ -340,37 +493,6 @@ div#slider figure {
/*Panier*/
-table{
- width : 80%;
- margin : auto;
- margin-top: 5%;
-}
-
-tr {
- background-color: rgba(255, 255, 255, 0.233);
-}
-
-td {
- border-top : 0.2vw solid rgb(252, 252, 252);
- padding : 2vw 2vw;
- font-size: 2vw;
- text-align: center;
- font-weight: bold;
-}
-
-th{
- background-color: rgba(0, 0, 0, 0.5);
- font-size: 2vw;
- color : white;
-}
-
-td#total{
- text-align : right;
- color : red;
- background-color: rgba(0, 0, 0, 0.5);
- font-size : 3vw;
-}
-
form[action="commande.html"]>h1{
font-size: 1.5vw;
}
@@ -383,4 +505,6 @@ form[action="commande.html"]>input[type=text], select {
#livraison {
background-color: rgba(0, 0, 0, 0.2);
-}
\ No newline at end of file
+}
+
+/*=================================*/
diff --git a/index.html b/index.html
index 7b2d7dc..b77d220 100644
--- a/index.html
+++ b/index.html
@@ -9,12 +9,16 @@
-