diff --git a/css.css b/css.css
index fb4aa43..4d4c953 100644
--- a/css.css
+++ b/css.css
@@ -66,10 +66,32 @@ a#nous{
float : right;
width : 18.5%;
padding : 1.2vw 1vw;
- border-left: 0.2vw solid rgb(204, 25, 25);
+ border-left: 0.15vw solid rgb(204, 25, 25);
margin-right: -13%;
}
+#loupe{
+ float: right;
+ display: block;
+ color: rgb(255, 255, 255);
+ text-align: center;
+ margin-top: 1.2vw;
+ margin-right: 2vw;
+ padding: 0.95vw;
+ border: 0.1vw solid rgb(204,25,25);
+ text-decoration: none;
+ font-size: 2vw;
+ font-weight: bold;
+ transform: none;
+ border-left: none;
+ background-color: rgb(204, 25, 25);
+}
+
+#loupe:hover{
+ color: rgb(0, 0, 0);
+ transition-duration: 0.2s;
+}
+
.topnav {
overflow: hidden;
background-color: rgba(22, 22, 22, 0.61);
@@ -111,7 +133,7 @@ a#nous{
.topnav input[type=text] {
float: right;
padding: 1vw;
- margin-right: 16px;
+ width: 40%;
border: 0.1vw solid rgb(204, 25, 25);
font-size: 2vw;
margin-top: 1.2vw;
@@ -119,32 +141,7 @@ a#nous{
}
-@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{
@@ -213,9 +210,42 @@ td#contact{
width: 100%;
}
/*======================================*/
+/*FLEX CONTAINER*/
+.flex-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.flex-container > div {
+ background-color: rgba(59, 59, 59, 0.5);
+ width: 47%;
+ margin: 1vw;
+ text-align: center;
+ line-height: 5vw;
+ font-size: 30px;
+}
+
+.flex-container>div>a>h3{
+ text-align: left;
+ font-size : 3vw;
+ margin-left: 35%;
+ color : lightgrey;
+}
+
+.flex-container>div>a>h4{
+ text-align: left;
+ font-size : 2vw;
+ margin-left: 35%;
+ color : lightgrey;
+}
+
+.flex-container>div>a>img{
+ width: 30%;
+ margin-top: 10%;
+}
/*==========================================*/
-/* CSS Confirmation commentaire */
+/*CONFIRMATION COMMENTAIRE*/
#Merci>h1{
font-size: 2.8vw;
color : white;
@@ -263,6 +293,11 @@ td#contact{
margin-left: 25%;
}
+
+#Produit>h2#barre{
+ text-decoration: line-through;
+}
+
#Produit>h2{
text-align: left;
font-size : 3vw;
@@ -314,21 +349,9 @@ td#contact{
border: 0.1vw solid red;
background-color: rgba(0,0,0,0.5);
margin-top: 8vw;
+ padding: 2vw 2vw;
}
-table#mosaique{
- width: 100%;
- margin: auto;
-}
-
-table#mosaique>tr{
- border :0.1vw solid rgb(204, 25, 25);
- height: 20%;
-}
-
-table#mosaique>tr>td>img{
- width: 20%;
-}
img{
width: 30%;
@@ -394,6 +417,7 @@ h3:hover{
#Client>div{
margin-bottom: 3%;
border-bottom: 0.1vw solid rgb(134, 134, 134);
+ margin-right: 8%;
}
/*================================================*/
@@ -402,6 +426,7 @@ h3:hover{
width : 100%;
border-top : 0.2vw solid rgb(204,25,25);
margin-top: 5%;
+ padding: 2vw 2vw;
}
#Coms>h1{
@@ -416,8 +441,9 @@ h3:hover{
text-align: center;
}
-#Coms>form{
- margin-left: 25%;
+#Coms{
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 0.1vw solid rgb(204, 25, 25);
}
#Coms>form>h1{
@@ -551,7 +577,9 @@ form[action="commande.html"]>input[type=text], select {
}
#livraison {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 0.1vw solid rgb(204, 25, 25);
+ margin-top: 5vw;
}
input[type=number], select{
@@ -560,7 +588,14 @@ input[type=number], select{
table#basket{
margin-top: 5vw;
- background-color: rgba(0, 0, 0, 0.5)
+ background-color: rgba(0, 0, 0, 0.5);
+ text-align: center;
+ border: 0.1vw solid rgb(204, 25, 25);
+}
+
+tr#cent>th{
+ text-align: center;
+
}
td#total{
@@ -626,4 +661,54 @@ tr#equ>td{
tr#equ>td>img{
float: none;
border: 0.2vw solid rgb(204, 25, 25);
+}
+
+/*=========================*/
+/*====================================*/
+/*PARTIE RESPONSIVE*/
+@media screen and (max-width: 600px) {
+ .topnav a, .topnav input[type=text] {
+ float: none;
+ display: block;
+ text-align: left;
+ width: 76.5%;
+ 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;
+ }
+
+ a#loupe{
+ width: 5%;
+ border-left: 0.1vw solid rgb(204,25,25)
+ }
+
+ .topnav input[type=text] {
+ border: 1px solid rgb(190, 73, 73);
+ }
+ .flex-container > div {
+ width: 85%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .flex-container>div>a>img{
+ width: 20%;
+ margin-top: 3%;
+ margin-left: 10%;
+ }
+ .flex-container>div>a>h3, .flex-container>div>a>h4{
+ margin-left: 50%;
+ }
+ #content{
+ margin-left: 2vw;
+ margin-right: 2vw;
+ }
+
}
\ No newline at end of file
diff --git a/index.html b/index.html
index d963276..1f32864 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,8 @@
+ 