813 lines
13 KiB
CSS
813 lines
13 KiB
CSS
/*BODY + GENERAL*/
|
|
|
|
html{
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Roboto', sans-serif;
|
|
z-index: 2;
|
|
background: linear-gradient(to left, rgb(10, 1, 92), rgb(0, 82, 50));
|
|
|
|
}
|
|
|
|
|
|
img {
|
|
width: 30%;
|
|
float: left;
|
|
}
|
|
|
|
.content {
|
|
background-color: #ddd;
|
|
padding: 2vw;
|
|
animation: 1s slider;
|
|
}
|
|
|
|
@keyframes content{
|
|
0%{height: 0%}
|
|
100%{height: 100%}
|
|
}
|
|
|
|
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;
|
|
animation: 1s slider;
|
|
}
|
|
|
|
@keyframes slider{
|
|
0%{margin-top: 150%}
|
|
100%{margin-top: 0%}
|
|
}
|
|
|
|
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);
|
|
animation: 1s right;
|
|
}
|
|
/*================================================*/
|
|
|
|
/*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;
|
|
}
|
|
|
|
|
|
/*===============================================*/
|