diff --git a/Assets/css.css b/Assets/css.css
deleted file mode 100644
index c9dffc2..0000000
--- a/Assets/css.css
+++ /dev/null
@@ -1,483 +0,0 @@
-html{
- scroll-behavior: smooth;
-}
-
-body{
- margin: 0;
- font-family: Arial, Helvetica, sans-serif;
- background: linear-gradient(to left, rgb(4, 64, 141), rgb(70, 1, 87));
-
-}
-
-/*NAVBAR*/
-
-a{
- color: black;
- text-decoration: none;
-}
-
-.header{
- background-color: white;
- width: 100%;
- z-index: 3;
- overflow: auto;
- position: fixed;
-
-}
-
-.header ul{
- margin: 0;
- padding : 0;
- list-style: none;
- overflow: hidden;
- background-color: white;
-}
-
-.header ul a{
- display: block;
- padding: 20px;
- border-right: 1px solid #aaa;
- text-decoration: none;
-}
-
-.header ul a:hover{
- 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;
- font-size: 2em;
- text-decoration : none;
- font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
- padding: 10px 20px;
-}
-
-.header .menu {
- clear: both;
- max-height: 0;
- transition: max-height 0.3s ease-out;
-}
-
-.header .menu-icon{
- padding: 28px 20px;
- position: relative;
- float: right;
- cursor: pointer;
-}
-
-.header .menu-icon .nav-icon{
- background: #333;
- display: block;
- height: 2px;
- width: 18px;
- position: relative;
- transition: background 0.2s ease-out;
-}
-
-.header .menu-icon .nav-icon:before{
- background: #333;
- content:"";
- display: block;
- height: 100%;
- position: absolute;
- width: 100%;
- top: 5px;
- transition: all 0.2s ease-out;
-}
-
-.header .menu-icon .nav-icon:after{
- background: #333;
- content:"";
- display: block;
- height: 100%;
- position: absolute;
- width: 100%;
- transition: all 0.2s ease-out;
- top: -5px;
-}
-
-.header .menu-btn{
- display: none;
-}
-
-.header .menu-btn:checked ~ .menu{
- max-height: 240px;
-}
-
-.header .menu-btn:checked ~ .menu-icon .nav-icon{
- background-color: transparent;
-}
-
-.header .menu-btn:checked ~ .menu-icon .nav-icon:before{
- transform: rotate(-45deg);
- top: 0;
-}
-
-.header .menu-btn:checked ~ .menu-icon .nav-icon:after{
- transform: rotate(45deg);
- top: 0;
-}
-
-/*======================================== 1990 652*/
-
-/*Slide des promotions*/
-
-div#slider {
- width: 100%;
- max-width: 1920px;
- margin: auto;
-}
-
-div#slider figure {
- position: relative;
- width: 500%;
- margin: 0;
- padding: 0;
- font-size: 0;
- text-align: left;
-}
-
-div#slider figure img {
- width: 20%;
- height: auto;
- float: left;
-}
-
-div#slider {
- width: 100%;
- max-width: 1920px;
- overflow: hidden
-}
-
-@keyframes slidy {
- 0% {left: 0%;}
- 20% {left: 0%;}
- 25% {left: -100%;}
- 45% {left: -100%;}
- 50% {left: -200%;}
- 70% {left: -200%;}
- 75% {left: -300%;}
- 95% {left: -300%;}
- 100% {left: -400%;}
-}
-
-div#slider figure {
- position: relative;
- width: 500%;
- margin: 0;
- padding: 0;
- font-size: 0;
- left: 0;
- text-align: left;
- animation: 16s slidy infinite;
-}
-/*============================================*/
-
-/* TOUT NOS PRODUITS*/
-.flex-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: stretch;
- background-color: rgb(234, 234, 234);
-}
-
-.flex-container>div {
- box-shadow: 0.3vw 0.3vw 2px grey;
- width: 40%;
- margin: 1vw;
- text-align: center;
- font-size: 30px;
-}
-
-.flex-container>div>a>img{
- width: 50%;
-}
-
-.flex-container>div>a>p{
- font-size: 40px;
-}
-
-.flex-container .ok:hover a>img{
- width: 100%;
- transition-duration: 0.5s;
-}
-
-.title{
- padding: 5vw 1vw;
- background-color: rgba(255, 255, 255, 0.377);
-}
-
-.title>h1{
- font-size: 60px;
- text-align: center;
- color: rgb(0, 0, 0);
-}
-
-.spec{
- text-align: left;
- font-size: 25px;
- background-color: rgba(255, 255, 255, 0.651);
- color: black;
- width: 100%;
-}
-.rupt{
- text-align: center;
- float: right;
- z-index: 3;
- background-color: rgba(0, 0, 0, 0.829);
- color: red;
- width : 100%;
- font-size: 25px;
-}
-
-.out{
- opacity: 0.4;
-}
-
-.top{
- padding: 3vw 1vw;
-}
-
-.top>h1{
- color: white;
- font-size: 60px;
- text-align: center;
-}
-
-
-.top>h2{
- font-size: 50px;
- color: rgb(204, 204, 204);
- text-align: center;
-}
-
-/*============================================*/
-
-/* QUI SOMMES NOUS ?*/
-.content {
- background-color: rgb(234, 234, 234);
- padding: 1vw;
-}
-
-
-#nous table{
- width: 100%;
- margin-top: 2%;
-}
-
-#nous img{
- display: block;
- margin: auto;
- border-radius: 1vw;
- width: 30%;
- margin-bottom: 3%;
-}
-
-#nous h2{
- font-size: 40px;
- padding-top: 2vw;
- margin: 0;
-}
-
-#nous h3{
- color: rgb(53, 53, 53);
-}
-
-#nous td{
- text-align: center;
-}
-
-#nous ul {
- list-style-type: none;
-}
-
-/* CONTACT */
-#contact input{
- width: 30%;
- display: block;
- margin: auto;
- font-size: 20px;
- background-color: transparent;
- border: none;
- border-bottom: 0.2vw solid grey;
- padding: 0.5vw;
-}
-
-#contact input:focus{
- background-color: rgba(0,0,0,0.1);
- border-bottom : 0.2vw solid rgb(16, 133, 172);
- transition-duration: 0.3s;
-}
-
-#contact input:valid{
- border-bottom : 0.2vw solid rgb(24, 216, 40);
- transition-duration: 0.3s;
-}
-
-#contact input[type=submit]{
- border: 0.2vw solid grey;
- width: 10%;
-}
-
-#contact input[type=submit]:hover{
- background-color: grey;
- color: white;
- transition-duration: 0.3s;
-}
-
-#contact h2{
- text-align: center;
-}
-
-/* FOOTER */
-footer {
- background-color: #ddd;
- width: 100%;
- padding: 1vw;
-}
-
-footer table{
- width: 100%;
-}
-
-footer tr{
- line-height: 10vh;
-}
-
-footer th{
- text-align: left;
- font-size: 40px;
- border-bottom: 0.2vw solid grey;
-}
-
-footer td{
- font-size: 30px;
- color: grey;
-}
-
-footer h1{
- text-align: center;
- font-size: 40px;
- margin-bottom: 5vh;
-}
-
-footer table#reseaux img{
- width: 20%;
- display: block;
- margin: auto;
-}
-
-table#basket{
- background-color: rgba(255, 255, 255, 0.5);
- text-align: center;
- width: 100%;
- border: 0.2vw solid rgb(0, 0, 0);
- border-collapse: collapse;
-
-}
-
-table#basket th{
- border: 0.1vw solid grey;
- font-size: 30px;
-}
-
-table#basket tr{
- line-height: 5vh;
- font-size: 20px;
-}
-
-table#basket td{
- border: 0.1vw solid grey;
-}
-
-table#basket td#total{
- text-align: right;
- font-size: 30px;
- color: black;
- padding-right: 2vw;
-}
-
-table#basket input{
- text-align: center;
- font-size: 20px;
- width: 10%;
- padding: 0.3vw;
-}
-
-/*LIVRAISON*/
-
-#livraison table{
- width: 100%;
-}
-
-#livraison input{
- width: 50%;
- display: block;
- margin: auto;
- font-size: 20px;
- background-color: transparent;
- border: none;
- border-bottom: 0.2vw solid grey;
- padding: 0.5vw;
- margin-top: 0.5vh;
- margin-bottom: 1.5vh;
-}
-
-#livraison h1{
- text-align: left;
- font-size: 30px;
-}
-
-#livraison td{
- font-size: 20px;
- color: rgb(0, 0, 0);
- text-align: center;
-}
-
-#livraison h2{
- font-size: 20px;
- text-align : center;
- margin-top: 3vh;
-}
-
-#livraison input:focus{
- background-color: rgba(0,0,0,0.1);
- border-bottom : 0.2vw solid rgb(16, 133, 172);
- transition-duration: 0.3s;
-}
-
-#livraison input:valid{
- border-bottom : 0.2vw solid rgb(24, 216, 40);
- transition-duration: 0.3s;
-}
-
-#livraison input[type=submit]{
- border: 0.2vw solid grey;
- width: 10%;
- display: block;
- margin: auto;
-}
-
-#livraison input[type=submit]:hover{
- background-color: grey;
- color: white;
- transition-duration: 0.3s;
-}
\ No newline at end of file
diff --git a/Assets/css/css.css b/Assets/css/css.css
new file mode 100644
index 0000000..ada064f
--- /dev/null
+++ b/Assets/css/css.css
@@ -0,0 +1,798 @@
+/*BODY + GENERAL*/
+
+html{
+ scroll-behavior: smooth;
+}
+
+body {
+ background: linear-gradient(to left, rgb(10, 1, 92), rgb(0, 82, 50));
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+ z-index: 2;
+}
+
+img {
+ width: 30%;
+ float: left;
+}
+
+.content {
+ background-color: #ddd;
+ padding: 2vw;
+}
+
+h1 {
+ font-size: 2vw;
+ color: white;
+}
+/*=====================================*/
+
+/*NAVBAR*/
+
+a#kyflo {
+ font-size: 3vw;
+ color: rgb(0, 0, 0);
+ padding: 0.5vw 1vw;
+ transform: none;
+ border: none;
+
+}
+
+a.raccourci {
+ border-right: 0.15vw solid rgb(0, 0, 0);
+ border-left: 0.15vw solid rgb(0, 0, 0);
+}
+
+#borL{
+ border-left: none;
+}
+
+
+#panier {
+ float: right;
+ width: 9%;
+ padding: 1.2vw 1vw;
+ border-left: 0.15vw solid rgb(0, 0, 0);
+ margin-right: -6%;
+}
+
+a#panier>h3{
+ margin-top :0.5vw;
+ margin-bottom: 0;
+ color: black;
+}
+
+#go {
+ float: right;
+ display: block;
+ color: rgb(0, 0, 0);
+ text-align: center;
+ margin-top: 1.2vw;
+ margin-right: 2vw;
+ padding: 0.5vw;
+ border: 0.1vw solid rgb(0, 0, 0);
+ text-decoration: none;
+ font-size: 1vw;
+ font-weight: bold;
+ transform: none;
+ border-left: none;
+ border-top: none;
+ background-color: rgb(255, 255, 255);
+}
+
+#go:hover {
+ color: rgb(255, 255, 255);
+ background-color: rgb(0, 0, 0);
+ transition-duration: 0.2s;
+}
+
+nav {
+ overflow: hidden;
+ background-color: rgb(255, 255, 255);
+ position: fixed;
+ z-index: 1;
+ width: 100%;
+ animation: 1s down;
+}
+
+@keyframes down {
+ 0%{margin-top: -10%}
+ 100%{margin-top: 0%}
+}
+
+nav a {
+ float: left;
+ display: block;
+ color: rgb(0, 0, 0);
+ text-align: center;
+ padding: 1.8vw 1.4vw;
+ text-decoration: none;
+ font-size: 1vw;
+ border-right: 0.15vw solid white;
+ font-weight: bold;
+ transform: skew(-0.2rad);
+}
+
+nav a:hover {
+ background-color: rgb(206, 206, 206);
+ color: black;
+}
+
+nav .raccourci:hover,
+.raccourci:hover {
+ padding: 1.8vw 2.5vw;
+}
+
+nav a#kyflo:hover {
+ background-color :transparent;
+}
+
+nav a#panier:hover {
+ background-color: rgb(206, 206, 206);
+ margin-right: -2%;
+}
+
+nav input[type=text] {
+ float: right;
+ padding: 0.5vw;
+ color: black;
+ width: 40%;
+ border: none;
+ border-bottom: 0.1vw solid rgb(0, 0, 0);
+ font-size: 1vw;
+ margin-top: 1.2vw;
+ background-color: rgb(255, 255, 255);
+}
+/*================================================*/
+
+/*TOP*/
+div#bienvenue{
+ padding: 4vw;
+ animation: 1s right;
+ animation-fill-mode: forwards;
+}
+
+body>#bienvenue>h1 {
+ font-size: 3vw;
+ color: white;
+ text-align: center;
+}
+
+@keyframes right{
+ 0% {margin-left: -150%}
+ 100% {margin-left: 0%}
+}
+
+body>#bienvenue>h2 {
+ font-size: 2vw;
+ color: lightgrey;
+ text-align: center;
+}
+
+/*=================*/
+
+/*Slide des promotions*/
+
+div#slider {
+ width: 100%;
+ max-width: 1920px;
+ margin: auto;
+}
+
+div#slider figure {
+ position: relative;
+ width: 500%;
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+ text-align: left;
+}
+
+div#slider figure img {
+ width: 20%;
+ height: auto;
+ float: left;
+}
+
+div#slider {
+ width: 100%;
+ max-width: 1920px;
+ overflow: hidden
+}
+
+@keyframes slidy {
+ 0% {left: 0%;}
+ 20% {left: 0%;}
+ 25% {left: -100%;}
+ 45% {left: -100%;}
+ 50% {left: -200%;}
+ 70% {left: -200%;}
+ 75% {left: -300%;}
+ 95% {left: -300%;}
+ 100% {left: -400%;}
+}
+
+div#slider figure {
+ position: relative;
+ width: 500%;
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+ left: 0;
+ text-align: left;
+ animation: 16s slidy infinite;
+}
+/*======================================*/
+
+/* TITRE */
+.title h1{
+ font-size: 4vw;
+ padding: 6vw;
+ margin: 0;
+ color: white;
+ text-align: center;
+}
+
+.title{
+ background-color: rgba(255, 255, 255, 0.4)
+}
+/*================================================*/
+
+/*FLEX CONTAINER*/
+
+.flex-container {
+ display: flex;
+ flex-wrap: wrap;
+ background-color: #ddd;
+ justify-content: center;
+}
+
+.flex-container>div {
+ width: 30%;
+ margin: 1vw;
+ text-align: center;
+ line-height: 3vw;
+ border-bottom: 0.2vw solid grey;
+ border-right: 0.2vw solid grey;
+ font-size: 30px;
+}
+
+.flex-container>div>a>h2 {
+ text-align: center;
+ font-size: 2vw;
+ color: rgb(0, 0, 0);
+}
+
+.flex-container>div>a>img {
+ float: none;
+ width: 50%;
+}
+
+.flex-container div:hover img{
+ width: 60%;
+ transition-duration: 0.5s;
+}
+
+.out img{
+ opacity: 0.4;
+}
+
+.out h1{
+ font-size: 2vw;
+ color: white;
+ background-color: black;
+ margin: 0;
+ padding: 0;
+}
+
+.flex-container div.out:hover img{
+ width: 50%;
+ cursor: not-allowed;
+ transition-duration: 0.5s;
+}
+
+.flex-container div.out:hover{
+ cursor: not-allowed;
+ border: none;
+ border-bottom: 0.2vw solid grey;
+ border-right: 0.2vw solid grey;
+}
+
+.flex-container div:hover{
+ border: 0.3vw solid grey;
+ transition-duration: 0.2s;
+}
+
+/*==========================================*/
+
+/* CONTACT*/
+
+#contact input{
+ width: 50%;
+ color: black;
+ display: block;
+ margin: auto;
+ font-size: 2vw;
+ background-color: transparent;
+ border: none;
+ border-bottom: 0.2vw solid rgb(90, 90, 90);
+ padding: 0.5vw;
+}
+
+#contact input:focus{
+ background-color: rgba(0,0,0,0.1);
+ border-bottom : 0.2vw solid rgb(16, 133, 172);
+ transition-duration: 0.3s;
+}
+
+#contact input:valid{
+ border-bottom : 0.2vw solid rgb(24, 216, 40);
+ transition-duration: 0.3s;
+}
+
+#contact input[type=submit]{
+ border: 0.2vw solid grey;
+ width: 30%;
+}
+
+#contact input[type=submit]:hover{
+ background-color: grey;
+ color: white;
+ transition-duration: 0.3s;
+}
+
+#contact h2{
+ margin: 0;
+ padding: 2vw;
+ font-size: 2vw;
+ text-align: center;
+}
+
+/*==========================================================*/
+/* QUI SOMMES NOUS ? */
+
+div#nous .flex-container {
+ justify-content: center;
+}
+
+div#nous div{
+ border: none;
+ text-align: left;
+}
+
+div#nous .flex-container img{
+ width: 40%;
+ margin-left: 35%;
+}
+
+div#nous .flex-container ul {
+ font-size: 2vw;
+ color: rgb(61, 61, 61);
+}
+
+div#nous h2 {
+ font-size: 3vw;
+ color: black;
+ text-align: center;
+}
+
+div#nous .flex-container div#engagements{
+ border-left: 0.2vw solid grey;
+}
+
+
+/*================================*/
+
+/*FOOTER*/
+
+footer {
+ margin-top: 8vw;
+ bottom: 0;
+}
+
+footer>div>table {
+ width: 100%;
+ background-color: rgb(255, 255, 255);
+ margin: auto;
+ padding: 2vw 8vw;
+}
+
+a {
+ text-decoration: none;
+ color: rgb(90, 90, 90);
+}
+
+a:hover {
+ color: rgb(0, 0, 0);
+ transition-duration: 0.4s;
+}
+
+tr {
+ height: 5vw;
+}
+
+th {
+ font-size: 2vw;
+ color: black;
+ text-align: left;
+ border-bottom: 0.1vw solid rgb(0, 0, 0);
+}
+
+th#line{
+ border-bottom: none;
+}
+
+button#contactB {
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ padding: 1.5vw 4vw;
+ font-size: 1.5vw;
+ color: rgb(90, 90, 90);
+ background-color: transparent;
+ border: 0.1vw solid rgb(90, 90, 90);
+ transform: skew(-.312rad);
+ margin-bottom: 2vw;
+}
+
+button#contactB:hover {
+ background-color: rgb(90, 90, 90);
+ color: white;
+ transition-duration: 0.5s;
+ border-radius: 1vw;
+}
+
+td {
+ width: 20%;
+ font-size: 1.5vw;
+}
+
+td#contact {
+ width: 100%;
+}
+
+
+/*======================================*/
+
+/*CONFIRMATION COMMENTAIRE*/
+
+#Merci>h1 {
+ font-size: 2.8vw;
+ color: white;
+ text-align: center;
+ margin-top: 7%;
+}
+
+#Merci>h2 {
+ font-size: 2vw;
+ text-align: center;
+ margin-top: 5%;
+}
+
+#Merci>h2>a {
+ color: lightgrey;
+ text-decoration: none;
+}
+
+#Merci>h2>a:hover {
+ color: white;
+}
+
+#Merci>img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 10%;
+ margin-top: 5%;
+ float: none;
+}
+
+/*==========================================*/
+
+/* CSS DESCRIPTION PRODUIT */
+/*EN TETE PRODUIT*/
+
+#Produit {
+ margin-top: 5%;
+}
+
+#Produit>h1 {
+ text-align: left;
+ font-size: 4vw;
+ margin-left: 25%;
+}
+
+#Produit>h2#barre {
+ text-decoration: line-through;
+}
+
+#Produit>h2 {
+ text-align: left;
+ font-size: 3vw;
+ margin-left: 25%;
+ color: red;
+}
+
+#Produit>h2#barre {
+ text-decoration: line-through;
+}
+
+#Produit>h3 {
+ text-align: left;
+ font-size: 1.5vw;
+ margin-left: 25%;
+ color: lightgrey;
+}
+
+#Produit>img {
+ width: 20%;
+ float: left;
+ border: 0.2vw solid white;
+ border-radius: 10px;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+#Produit>button {
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 1vw 1vw;
+ float: right;
+ text-align: center;
+ font-size: 2vw;
+ margin-right: 10%;
+ color: white;
+ border: 0.1vw solid white;
+}
+
+#Produit>button:hover {
+ color: white;
+ background-color: rgba(204, 25, 25, 0.5);
+ transition-duration: 0.5s;
+ border-radius: 2vw;
+}
+/*=====================*/
+
+/*CARACTERISTIQUES PRODUIT*/
+
+#Carac {
+ width: 100%;
+ border-top: 0.2vw solid white;
+ margin-top: 8%;
+}
+
+#Carac>h1 {
+ font-size: 3vw;
+ color: white;
+}
+
+#Carac>h2 {
+ font-size: 1.5vw;
+ color: lightgrey;
+}
+
+/*================================================*/
+
+/*COMMENTAIRES CLIENT*/
+
+#Client {
+ width: 100%;
+ margin-left: 5%;
+}
+
+#Client>div>h1 {
+ font-size: 2vw;
+ color: white;
+ margin-left: 8%;
+}
+
+#Client>div>h2 {
+ font-size: 1vw;
+ color: yellow;
+ margin-left: 8%;
+}
+
+#Client>div>h3 {
+ font-size: 1.5vw;
+ color: lightgrey;
+ margin-left: 8%;
+}
+
+#Client>div>img {
+ float: left;
+ width: 7%;
+ border-radius: 50%;
+}
+
+#Client>div {
+ margin-bottom: 3%;
+ border-bottom: 0.1vw solid rgb(134, 134, 134);
+ margin-right: 8%;
+}
+
+/*================================================*/
+
+/*ESPACE LAISSER COMMENTAIRE*/
+
+#Coms {
+ width: 100%;
+ border-top: 0.2vw solid white;
+ margin-top: 5%;
+ padding: 2vw 2vw;
+}
+
+#Coms>h1 {
+ font-size: 3vw;
+ color: white;
+}
+
+#Coms>h2 {
+ font-size: 3vw;
+ color: white;
+ border-top: 0.2vw dashed white;
+ text-align: center;
+}
+
+#Coms {
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 0.1vw solid white;
+}
+
+#Coms>form>h1 {
+ font-size: 1.5vw;
+ color: white;
+}
+
+input:valid {
+ border-radius: 0vw;
+ transition-duration: 0.5s;
+ border: 0.1vw solid rgb(8, 170, 8);
+}
+
+input[placeholder=Commentaire],
+select,
+input[placeholder="Question, suggestion, remarque"],
+select {
+ width: 60%;
+ padding: 1vw 1vw;
+ font-size: 1.5vw;
+}
+
+input[type=submit],
+select {
+ width: 20%;
+ padding: 1vw 1vw;
+ font-size: 1.5vw;
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 0.15vw solid white;
+ color: white;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+input[type=submit]:hover {
+ color: rgb(255, 255, 255);
+ background-color: rgba(204, 25, 25, 0.5);
+ transition-duration: 0.5s;
+ border: 0.15vw solid rgb(0, 0, 0);
+ border-radius: 2vw;
+}
+
+h1#valider {
+ text-align: center;
+}
+
+table>tr>td>input {
+ border: 0vw solid white;
+ background-color: rgba(255, 255, 255, 0);
+}
+
+
+/*================================================*/
+
+/*Panier*/
+
+table#basket{
+ background-color: rgba(255, 255, 255, 0.5);
+ text-align: center;
+ width: 100%;
+ border: 0.2vw solid rgb(0, 0, 0);
+ border-collapse: collapse;
+}
+
+table#basket th{
+ border: 0.1vw solid grey;
+ font-size: 2.5vw;
+ text-align: center;
+}
+
+table#basket tr{
+ line-height: 5vh;
+}
+
+table#basket td{
+ border: 0.1vw solid grey;
+ font-size: 1.5vw;
+}
+
+table#basket td#total{
+ text-align: right;
+ font-size: 2.5vw;
+ font-weight: bold;
+ color: black;
+ padding-right: 2vw;
+}
+
+table#basket input{
+ text-align: center;
+ font-size: 2vw;
+ width: 10%;
+ padding: 0.3vw;
+}
+
+table#basket input:valid{
+ border: 0.1vw solid grey;
+}
+
+/*LIVRAISON*/
+
+#livraison table{
+ width: 100%;
+}
+
+#livraison input{
+ width: 50%;
+ display: block;
+ margin: auto;
+ font-size: 2vw;
+ background-color: transparent;
+ border: none;
+ border-bottom: 0.2vw solid grey;
+ padding: 0.5vw;
+ margin-top: 0.5vh;
+ margin-bottom: 1.5vh;
+}
+
+#livraison h2{
+ text-align: left;
+ font-size: 2.5vw;
+}
+
+#livraison h2#valid{
+ text-align: center;
+}
+
+#livraison td{
+ font-size: 1.5vw;
+ color: rgb(0, 0, 0);
+ text-align: center;
+}
+
+
+#livraison input:focus{
+ background-color: rgba(0,0,0,0.1);
+ border-bottom : 0.2vw solid rgb(16, 133, 172);
+ transition-duration: 0.3s;
+}
+
+#livraison input:valid{
+ border-bottom : 0.2vw solid rgb(24, 216, 40);
+ transition-duration: 0.3s;
+ color: black;
+}
+
+#livraison input[type=submit]{
+ border: 0.2vw solid grey;
+ width: 10%;
+ display: block;
+ margin: auto;
+}
+
+#livraison input[type=submit]:hover{
+ background-color: grey;
+ color: white;
+ transition-duration: 0.3s;
+}
+
+
+/*===============================================*/
diff --git a/Assets/css/resp.css b/Assets/css/resp.css
new file mode 100644
index 0000000..6172286
--- /dev/null
+++ b/Assets/css/resp.css
@@ -0,0 +1,133 @@
+@media screen and (max-width: 600px) {
+
+ /*===========GENERAL===========*/
+ h1{
+ font-size: 3vw;
+ }
+ body>#bienvenue>h1 {
+ font-size: 3vw;
+ }
+
+ body>#bienvenue>h2 {
+ font-size: 2vw;
+ }
+ button#hautPage{
+ display:none;
+ }
+
+ /*===========NAVBAR===========*/
+ nav{
+ position: static;
+ }
+ nav input[type=text] {
+ float: none;
+ display: block;
+ text-align: left;
+ width: 76.5%;
+ border: 0.1vw solid black;
+ margin: 0;
+ padding: 2vw;
+ transform: none;
+ font-size: 3vw;
+ }
+ nav a {
+ float: none;
+ display: block;
+ text-align: left;
+ width: 100%;
+ margin: 0;
+ padding: 2vw;
+ border: none;
+ transform: none;
+ font-size: 3vw;
+
+ }
+ nav a#kyflo{
+ font-size: 8vw;
+ text-align: center;
+ }
+ nav a#panier,
+ a.raccourci {
+ border: none;
+ }
+ nav a#panier{
+ width: 20%;
+ margin-right: -14%;
+ }
+ nav a#panier:hover{
+ margin-right: -14%;
+ }
+ nav a.raccourci:hover,
+ a.raccourci:hover {
+ padding: 2vw 2vw;
+ }
+ nav a#go {
+ width: 5%;
+ padding: 1vw;
+ font-size: 3vw;
+ border: 0.1vw solid rgb(0, 0, 0)
+ }
+ nav a#panier>h3{
+ display:none;
+ }
+ /*===========FLEX CONTAINER===========*/
+ .flex-container>div {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .flex-container>div>a>img {
+ width: 20%;
+ }
+
+ .flex-container div:hover img{
+ width: 30%;
+ }
+
+ .flex-container div.out:hover img{
+ width: 20%;
+ cursor: not-allowed;;
+ }
+
+ #content {
+ margin-left: 2vw;
+ margin-right: 2vw;
+ }
+
+ /*=======QUI SOMMES NOUS======*/
+ div#nous .flex-container img{
+ width: 30%;
+ }
+
+ div#nous .flex-container div{
+ width: 40%;
+ }
+
+ div#nous .flex-container div#engagements{
+ width: 80%;
+ border: none;
+ }
+
+ /*========FOOTER=========*/
+
+ th {
+ font-size: 2.5vw;
+ }
+
+ td {
+ width: 20%;
+ font-size: 2vw;
+ }
+
+
+ /*=====Produits=======*/
+ #Produit>h3 {
+ font-size: 2.5vw;
+ }
+
+ #Carac>h2 {
+ font-size: 2.5vw;
+ color: lightgrey;
+ }
+
+}
\ No newline at end of file
diff --git a/Assets/resp.css b/Assets/resp.css
deleted file mode 100644
index e96b4b8..0000000
--- a/Assets/resp.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@media (min-width:750px){
- /*NAVBAR*/
- .header{
- position: fixed;
- }
-
- .header li{
- float: left;
- }
-
- .header li a{
- padding: 20px 30px;
- }
-
- .header .menu{
- clear: none;
- float: right;
- max-height: none;
- }
-
- .header .menu-icon{
- display: none;
- }
-
- .header ul input{
- border-bottom: 0.1vw solid grey;
- margin-top: 6%;
- }
-
-
- /*============================================*/
-
- /* TOUT NOS PRODUITS*/
- .flex-container>div {
- width: 20%;
- margin: 1vw;
- }
-
- .flex-container>div>a>img{
- width: 80%;
- }
- /*============================================*/
-}
diff --git a/index.html b/index.html
index 5a4495f..6240aaf 100644
--- a/index.html
+++ b/index.html
@@ -5,32 +5,28 @@
Kyflo
-
-
+
+
-
-
-
-
-
+
+
+
+
Bienvenue sur le site de KyFlo !
- Vendeur de robot depuis 2005
+ Vendeur de robot depuis 2010 !
-
+
-
Tous nos produits :
+ Tout nos produits :
-
-
-
-
-
Qui sommes nous ?
-
-
-
-
L'équipe :
-
-
-  |
- Nos engagements :Etre soucieux de la qualité de nos produitsVendre des robots à la pointe de la technologieRespecter l'environnement |
-  |
-
-
-
-
-
-
-
+
+<<<<<<< HEAD