diff --git a/Assets/Images/Promotions/promo1.png b/Assets/Images/Promotions/promo1.png
index 0245996..a5eae17 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 d9d3885..489d7eb 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 64b2492..b065f1a 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 68eb3be..b8760d3 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 8d00a7d..d024196 100644
--- a/Assets/css.css
+++ b/Assets/css.css
@@ -1,578 +1,117 @@
-/*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;
+body{
margin: 0;
- font-family: 'Roboto', sans-serif;
+ font-family: Arial, Helvetica, sans-serif;
+ background-color: #bbb;
}
-#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#kyflo {
- font-size: 3vw;
- color: rgb(204, 25, 25);
- padding: 0.5vw 1vw;
- transform: none;
- border: none;
-
+a{
+ color: black;
}
-a#nous {
- border-right: 0.15vw solid rgb(204, 25, 25);
- border-left: 0.15vw solid rgb(204, 25, 25);
+.header{
+ background-color: white;
+ width: 100%;
+ z-index: 3;
+ box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);
}
-#panier {
- float: right;
- width: 9%;
- padding: 1.2vw 1vw;
- border-left: 0.15vw solid rgb(204, 25, 25);
- margin-right: -6%;
-}
-
-a#panier>h3{
- margin-top :0.5vw;
- margin-bottom: 0;
- color: white;
-}
-
-#loupe {
- float: right;
- display: block;
- 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 {
+.header ul{
+ margin: 0;
+ padding : 0;
+ list-style: none;
overflow: hidden;
- background-color: rgba(22, 22, 22, 0.61);
- border-bottom: 0.15vw solid rgb(204, 25, 25);
+ background-color: white;
}
-.topnav a {
+.header ul a{
+ display: block;
+ padding: 20px;
+ border-right: 1px solid #aaa;
+ text-decoration: none;
+}
+
+.header ul a:hover{
+ background-color: #ddd;
+}
+
+.header .logo {
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);
+ font-size: 2em;
+ text-decoration : none;
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+ padding: 10px 20px;
}
-.topnav a:hover {
- background-color: rgb(204, 25, 25);
- color: rgb(0, 0, 0);
+.header .menu {
+ clear: both;
+ max-height: 0;
+ transition: max-height 0.3s ease-out;
}
-.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] {
+.header .menu-icon{
+ padding: 28px 20px;
+ position: relative;
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);
+ cursor: pointer;
}
-
-/*======================================*/
-
-
-/*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;
-}
-
-#Merci>h2>a:hover {
- color: rgb(204, 25, 25);
-}
-
-#Merci>img {
+.header .menu-icon .nav-icon{
+ background: #333;
display: block;
- margin-left: auto;
- margin-right: auto;
- width: 10%;
- margin-top: 5%;
- float: none;
+ height: 2px;
+ width: 18px;
+ position: relative;
+ transition: background 0.2s ease-out;
}
-
-/*==========================================*/
-
-
-/*==========================================*/
-
-
-/* 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 rgb(204, 25, 25);
- 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 rgb(204, 25, 25);
-}
-
-#Produit>button:hover {
- color: white;
- background-color: rgba(204, 25, 25, 0.5);
- transition-duration: 0.5s;
- border-radius: 2vw;
-}
-
-
-/*=====================*/
-
-
-/* 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%;
- border-top: 0.2vw solid rgb(204, 25, 25);
- 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: 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;
+.header .menu-icon .nav-icon:before{
+ background: #333;
+ content:"";
display: block;
- margin-left: auto;
- margin-right: auto;
+ height: 100%;
+ position: absolute;
+ width: 100%;
+ top: 5px;
+ transition: all 0.2s ease-out;
}
-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;
+.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;
}
-h1#valider {
- text-align: center;
+.header .menu-btn{
+ display: none;
}
-table>tr>td>input {
- border: 0vw solid white;
- background-color: rgba(255, 255, 255, 0);
+.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;
+}
-/*==========================================================================================*/
-
+/*========================================*/
/*Slide des promotions*/
@@ -604,33 +143,15 @@ 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 {
@@ -643,123 +164,4 @@ div#slider figure {
text-align: left;
animation: 16s slidy infinite;
}
-
-
-/*==========================================================================================*/
-
-
-/*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
+/*==========================================================================================*/
\ No newline at end of file
diff --git a/Assets/resp.css b/Assets/resp.css
index 25fffd1..f9dbb76 100644
--- a/Assets/resp.css
+++ b/Assets/resp.css
@@ -1,216 +1,22 @@
-@media screen and (max-width: 900px) {
-
- /*===========GENERAL===========*/
- h1{
- font-size: 3vw;
+@media (min-width:48em){
+ .header{
+ position: fixed;
}
- body>#bienvenue>h1 {
- font-size: 3vw;
- }
-
- body>#bienvenue>h2 {
- font-size: 2vw;
- }
- button#hautPage{
- display:none;
+ .header li{
+ float: left;
}
- /*===========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 li a{
+ padding: 20px 30px;
}
- /*========FOOTER=========*/
- tr {
- border-bottom: 0.2vw solid red;
- color: white;
- height: 5vw;
+ .header .menu{
+ clear: none;
+ float: right;
+ max-height: none;
}
- th {
- font-size: 2.5vw;
+ .header .menu-icon{
+ display: none;
}
-
- 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 ca3bb7f..4b0e47a 100644
--- a/index.html
+++ b/index.html
@@ -13,23 +13,16 @@
-
-
-
-
-
Bienvenue sur le site de KyFlo !
- Vendeur de robot depuis 2010 !
-
-
+
@@ -39,73 +32,6 @@
-
-
-
-
Tout nos produits :
-
-
-
- 
- 
- 
- 
- 
-