diff --git a/Assets/Images/Promotions/promo1.png b/Assets/Images/Promotions/promo1.png
index a5eae17..0245996 100644
Binary files a/Assets/Images/Promotions/promo1.png and b/Assets/Images/Promotions/promo1.png differ
diff --git a/Assets/Images/Promotions/promo2.png b/Assets/Images/Promotions/promo2.png
index 489d7eb..d9d3885 100644
Binary files a/Assets/Images/Promotions/promo2.png and b/Assets/Images/Promotions/promo2.png differ
diff --git a/Assets/Images/Promotions/promo3.png b/Assets/Images/Promotions/promo3.png
index b065f1a..64b2492 100644
Binary files a/Assets/Images/Promotions/promo3.png and b/Assets/Images/Promotions/promo3.png differ
diff --git a/Assets/Images/Promotions/promo4.png b/Assets/Images/Promotions/promo4.png
index b8760d3..68eb3be 100644
Binary files a/Assets/Images/Promotions/promo4.png and b/Assets/Images/Promotions/promo4.png differ
diff --git a/Assets/css.css b/Assets/css.css
index d024196..8d00a7d 100644
--- a/Assets/css.css
+++ b/Assets/css.css
@@ -1,117 +1,578 @@
-body{
+/*204, 25, 25*/
+
+
+/*==========================================================================================*/
+
+
+/*BODY + GENERAL*/
+
+body {
+ background-color: rgb(0, 0, 0);
+ background-image: linear-gradient(rgba(107, 6, 6, 0.5) 2px, transparent 2px), linear-gradient(90deg, rgba(80, 7, 7, 0.5) 2px, transparent 2px), linear-gradient(rgba(61, 61, 61, 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(63, 63, 63, 0.28) 1px, transparent 1px);
+ background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+ background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
margin: 0;
- font-family: Arial, Helvetica, sans-serif;
- background-color: #bbb;
+ font-family: 'Roboto', sans-serif;
}
+#content {
+ margin-left: 8vw;
+ margin-right: 8vw;
+}
+
+h1 {
+ font-size: 2vw;
+ color: white;
+}
+
+body>#bienvenue>h1 {
+ font-size: 2vw;
+ color: white;
+ text-align: center;
+}
+
+body>#bienvenue>h2 {
+ font-size: 1.5vw;
+ color: lightgrey;
+ text-align: center;
+}
+
+button#hautPage {
+ position: fixed;
+ z-index: 1;
+ left: 95%;
+ top: 90%;
+ padding: 1vw 1vw;
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 0.1vw solid rgb(204, 25, 25);
+ color: white;
+}
+
+button#hautPage>img {
+ width: 2vw;
+}
+
+
+/*=====================================*/
+
+
/*NAVBAR*/
-a{
- color: black;
+a#kyflo {
+ font-size: 3vw;
+ color: rgb(204, 25, 25);
+ padding: 0.5vw 1vw;
+ transform: none;
+ border: none;
+
}
-.header{
- background-color: white;
- width: 100%;
- z-index: 3;
- box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);
+a#nous {
+ border-right: 0.15vw solid rgb(204, 25, 25);
+ border-left: 0.15vw solid rgb(204, 25, 25);
}
-.header ul{
- margin: 0;
- padding : 0;
- list-style: none;
- overflow: hidden;
- background-color: white;
+#panier {
+ float: right;
+ width: 9%;
+ padding: 1.2vw 1vw;
+ border-left: 0.15vw solid rgb(204, 25, 25);
+ margin-right: -6%;
}
-.header ul a{
+a#panier>h3{
+ margin-top :0.5vw;
+ margin-bottom: 0;
+ color: white;
+}
+
+#loupe {
+ float: right;
display: block;
- padding: 20px;
- border-right: 1px solid #aaa;
+ color: rgb(255, 255, 255);
+ text-align: center;
+ margin-top: 1.2vw;
+ margin-right: 2vw;
+ padding: 0.5vw;
+ border: 0.1vw solid rgb(204, 25, 25);
+ text-decoration: none;
+ font-size: 1vw;
+ 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);
+ border-bottom: 0.15vw solid rgb(204, 25, 25);
+}
+
+.topnav a {
+ float: left;
+ display: block;
+ color: rgb(255, 255, 255);
+ text-align: center;
+ padding: 1.8vw 1.4vw;
+ text-decoration: none;
+ font-size: 1vw;
+ 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: 1.8vw 2.5vw;
+}
+
+.topnav a#kyflo:hover {
+ color: white;
+ background-color: rgb(22, 22, 22);
+}
+
+.topnav a#panier:hover {
+ background-color: black;
+ margin-right: -2%;
+}
+
+
+.topnav input[type=text] {
+ float: right;
+ padding: 0.5vw;
+ width: 40%;
+ border: 0.1vw solid rgb(204, 25, 25);
+ font-size: 1vw;
+ margin-top: 1.2vw;
+ background-color: rgb(22, 22, 22);
+}
+
+
+/*======================================*/
+
+
+/*FOOTER*/
+
+footer {
+ margin-top: 8vw;
+ bottom: 0;
+}
+
+footer>div>table {
+ width: 100%;
+ border-top: 0.1vw solid rgb(204, 25, 25);
+ background-color: rgb(27, 27, 27);
+ margin: auto;
+ padding: 0vw 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%;
+}
+
+
+/*======================================*/
+
+
+/*FLEX CONTAINER*/
+
+.flex-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.flex-container>div {
+ background-color: rgba(59, 59, 59, 0.5);
+ width: 30%;
+ margin: 1vw;
+ text-align: center;
+ line-height: 3vw;
+ font-size: 30px;
+}
+
+.flex-container>div>a>h3 {
+ text-align: left;
+ font-size: 2vw;
+ margin-left: 35%;
+ color: lightgrey;
+}
+
+.flex-container>div>a>h4 {
+ text-align: left;
+ font-size: 1.5vw;
+ margin-left: 35%;
+ color: lightgrey;
+}
+
+.flex-container>div>a>img {
+ width: 30%;
+ margin-top: 10%;
+}
+
+
+
+
+
+/*==========================================*/
+
+
+/*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;
}
-.header ul a:hover{
- background-color: #ddd;
+#Merci>h2>a:hover {
+ color: rgb(204, 25, 25);
}
-.header .logo {
+#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;
- 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;
+ border: 0.2vw solid rgb(204, 25, 25);
+ border-radius: 10px;
+ background-color: rgba(0, 0, 0, 0.5);
}
-.header .menu {
- clear: both;
- max-height: 0;
- transition: max-height 0.3s ease-out;
-}
-
-.header .menu-icon{
- padding: 28px 20px;
- position: relative;
+#Produit>button {
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 1vw 1vw;
float: right;
- cursor: pointer;
+ text-align: center;
+ font-size: 2vw;
+ margin-right: 10%;
+ color: white;
+ border: 0.1vw solid rgb(204, 25, 25);
}
-.header .menu-icon .nav-icon{
- background: #333;
- display: block;
- height: 2px;
- width: 18px;
- position: relative;
- transition: background 0.2s ease-out;
+#Produit>button:hover {
+ color: white;
+ background-color: rgba(204, 25, 25, 0.5);
+ transition-duration: 0.5s;
+ border-radius: 2vw;
}
-.header .menu-icon .nav-icon:before{
- background: #333;
- content:"";
- display: block;
- height: 100%;
- position: absolute;
+
+/*=====================*/
+
+
+/* MOSAIQUE PRODUITS*/
+
+#produits {
+ border: 0.1vw solid red;
+ background-color: rgba(0, 0, 0, 0.5);
+ margin-top: 3vw;
+ padding: 2vw 2vw;
+}
+
+img {
+ width: 30%;
+ float: left;
+}
+
+h3,
+h4 {
+ color: white;
+}
+
+h3:hover {
+ color: rgb(204, 25, 25);
+ transition-duration: 0.2s;
+}
+
+
+/*================================================*/
+
+
+/*CARACTERISTIQUES PRODUIT*/
+
+#Carac {
width: 100%;
- top: 5px;
- transition: all 0.2s ease-out;
+ border-top: 0.2vw solid rgb(204, 25, 25);
+ margin-top: 8%;
}
-.header .menu-icon .nav-icon:after{
- background: #333;
- content:"";
- display: block;
- height: 100%;
- position: absolute;
+#Carac>h1 {
+ font-size: 3vw;
+ color: white;
+}
+
+#Carac>h2 {
+ font-size: 1.5vw;
+ color: lightgrey;
+}
+
+
+/*================================================*/
+
+
+/*COMMENTAIRES CLIENT*/
+
+#Client {
width: 100%;
- transition: all 0.2s ease-out;
- top: -5px;
+ margin-left: 5%;
}
-.header .menu-btn{
- display: none;
+#Client>div>h1 {
+ font-size: 2vw;
+ color: white;
+ margin-left: 8%;
}
-.header .menu-btn:checked ~ .menu{
- max-height: 240px;
+#Client>div>h2 {
+ font-size: 1vw;
+ color: yellow;
+ margin-left: 8%;
}
-.header .menu-btn:checked ~ .menu-icon .nav-icon{
- background-color: transparent;
+#Client>div>h3 {
+ font-size: 1.5vw;
+ color: lightgrey;
+ margin-left: 8%;
}
-.header .menu-btn:checked ~ .menu-icon .nav-icon:before{
- transform: rotate(-45deg);
- top: 0;
+#Client>div>img {
+ float: left;
+ width: 7%;
+ border-radius: 50%;
}
-.header .menu-btn:checked ~ .menu-icon .nav-icon:after{
- transform: rotate(45deg);
- top: 0;
+#Client>div {
+ margin-bottom: 3%;
+ border-bottom: 0.1vw solid rgb(134, 134, 134);
+ margin-right: 8%;
}
-/*========================================*/
+
+/*================================================*/
+
+
+/*ESPACE LAISSER COMMENTAIRE*/
+
+#Coms {
+ width: 95%;
+ border-top: 0.2vw solid rgb(204, 25, 25);
+ 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 rgb(204, 25, 25);
+ text-align: center;
+}
+
+#Coms {
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 0.1vw solid rgb(204, 25, 25);
+}
+
+#Coms>form>h1 {
+ font-size: 1.5vw;
+ color: white;
+}
+
+input,
+select {
+ width: 20%;
+ padding: 1vw 1vw;
+ font-size: 1.5vw;
+ background-color: rgb(27, 27, 27);
+ color: white;
+ border: 0.1vw solid rgba(255, 255, 255, 0.5);
+ border-radius: 3vw;
+}
+
+input:hover {
+ border-radius: 0vw;
+ transition-duration: 0.5s;
+}
+
+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 rgb(204, 25, 25);
+ 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);
+}
+
+
+/*================================================*/
+
+
+/*==========================================================================================*/
+
/*Slide des promotions*/
@@ -143,15 +604,33 @@ div#slider {
}
@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%;}
+ 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 {
@@ -164,4 +643,123 @@ div#slider figure {
text-align: left;
animation: 16s slidy infinite;
}
-/*==========================================================================================*/
\ No newline at end of file
+
+
+/*==========================================================================================*/
+
+
+/*Panier*/
+
+form[action="commande.html"]>h1 {
+ font-size: 1.5vw;
+}
+
+form[action="commande.html"]>input[type=text],
+select {
+ width: 50%;
+ padding: 1vw 1vw;
+ font-size: 1.5vw;
+}
+
+#livraison {
+ background-color: rgba(0, 0, 0, 0.5);
+ border: 0.1vw solid rgb(204, 25, 25);
+ margin-top: 5vw;
+}
+
+input[type=number],
+select {
+ border: 0.1vw solid white;
+}
+
+table#basket {
+ margin-top: 5vw;
+ 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 {
+ text-align: right;
+ color: rgb(204, 25, 25);
+ font-size: 2vw;
+ font-weight: bold;
+ padding: 0vw 2vw;
+}
+
+
+/*=================================*/
+
+
+/*CONTACT*/
+
+#content>h1 {
+ text-align: center;
+ font-size: 3vw;
+}
+
+#content>form>h2 {
+ font-size: 1.5vw;
+ color: lightgrey;
+}
+
+table#reseaux {
+ width: 70%;
+ margin: auto;
+}
+
+tr#res>td {
+ text-align: center;
+}
+
+tr#res>td>a>img {
+ float: none;
+}
+
+
+/*===========================*/
+
+
+/*QUI SOMMES NOUS*/
+
+#content>h1 {
+ margin-top: 3vw;
+}
+
+#content>h2 {
+ font-size: 2vw;
+ color: white;
+ text-align: left;
+ margin-top: 5vw;
+}
+
+#content>ul>li>h3 {
+ font-size: 1.5vw;
+ color: lightgrey;
+}
+
+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);
+}
+
+
+/*=========================*/
+
+
+/*====================================*/
\ No newline at end of file
diff --git a/Assets/resp.css b/Assets/resp.css
index f9dbb76..25fffd1 100644
--- a/Assets/resp.css
+++ b/Assets/resp.css
@@ -1,22 +1,216 @@
-@media (min-width:48em){
- .header{
- position: fixed;
+@media screen and (max-width: 900px) {
+
+ /*===========GENERAL===========*/
+ h1{
+ font-size: 3vw;
}
- .header li{
- float: left;
+ body>#bienvenue>h1 {
+ font-size: 3vw;
+ }
+
+ body>#bienvenue>h2 {
+ font-size: 2vw;
+ }
+ button#hautPage{
+ display:none;
}
- .header li a{
- padding: 20px 30px;
+ /*===========NAVBAR===========*/
+ .topnav{
+ position: static;
+ }
+ .topnav input[type=text] {
+ float: none;
+ display: block;
+ text-align: left;
+ width: 76.5%;
+ margin: 0;
+ 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: 2vw 2vw;
+ }
+ .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);
+ }
+ .topnav a#panier>h3{
+ display:none;
+ }
+ /*===========FLEX CONTAINER===========*/
+ .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;
}
- .header .menu{
- clear: none;
- float: right;
- max-height: none;
+ /*========FOOTER=========*/
+ tr {
+ border-bottom: 0.2vw solid red;
+ color: white;
+ height: 5vw;
}
- .header .menu-icon{
- display: none;
+ 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: 2vw;
+ }
+
+ #Carac>h2 {
+ font-size: 2vw;
+ color: lightgrey;
+ }
+
+ #Client>div>h1 {
+ font-size: 2.8vw;
+ }
+
+ #Client>div>h3 {
+ font-size: 1.5vw;
+ }
+
+ input, select {
+ font-size: 2.5vw;
+ }
+ input[placeholder=Commentaire],
+ select,
+ input[placeholder="Question, suggestion, remarque"],
+ select {
+ width: 60%;
+ padding: 1vw 1vw;
+ font-size: 2.5vw;
+ }
+
+ input[type=submit],
+ select {
+ font-size: 2.5vw;
+ }
+
+ #Coms>form>h1 {
+ font-size: 2.5vw;
+ }
+
+ #content>h1 {
+ margin-top: 3vw;
+ font-size: 3vw;
+ }
+
+ #content>h2 {
+ font-size: 2.5vw;
+ }
+
+ #content>ul>li>h3 {
+ font-size: 2vw;
+ }
+
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4b0e47a..ca3bb7f 100644
--- a/index.html
+++ b/index.html
@@ -13,16 +13,23 @@
-
+
+
+
+
+
Bienvenue sur le site de KyFlo !
+ Vendeur de robot depuis 2010 !
+
+
@@ -32,6 +39,73 @@
+
+
+
+
Tout nos produits :
+
+
+
+ 
+ 
+ 
+ 
+ 
+