Before Width: | Height: | Size: 322 KiB After Width: | Height: | Size: 220 KiB |
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 146 KiB |
Before Width: | Height: | Size: 487 KiB After Width: | Height: | Size: 293 KiB |
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 217 KiB |
762
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;
|
margin: 0;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: 'Roboto', 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*/
|
/*NAVBAR*/
|
||||||
|
|
||||||
a{
|
a#kyflo {
|
||||||
color: black;
|
font-size: 3vw;
|
||||||
|
color: rgb(204, 25, 25);
|
||||||
|
padding: 0.5vw 1vw;
|
||||||
|
transform: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header{
|
a#nous {
|
||||||
background-color: white;
|
border-right: 0.15vw solid rgb(204, 25, 25);
|
||||||
width: 100%;
|
border-left: 0.15vw solid rgb(204, 25, 25);
|
||||||
z-index: 3;
|
|
||||||
box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header ul{
|
#panier {
|
||||||
margin: 0;
|
float: right;
|
||||||
padding : 0;
|
width: 9%;
|
||||||
list-style: none;
|
padding: 1.2vw 1vw;
|
||||||
overflow: hidden;
|
border-left: 0.15vw solid rgb(204, 25, 25);
|
||||||
background-color: white;
|
margin-right: -6%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header ul a{
|
a#panier>h3{
|
||||||
|
margin-top :0.5vw;
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loupe {
|
||||||
|
float: right;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 20px;
|
color: rgb(255, 255, 255);
|
||||||
border-right: 1px solid #aaa;
|
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;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header ul a:hover{
|
#Merci>h2>a:hover {
|
||||||
background-color: #ddd;
|
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;
|
float: left;
|
||||||
display: block;
|
border: 0.2vw solid rgb(204, 25, 25);
|
||||||
font-size: 2em;
|
border-radius: 10px;
|
||||||
text-decoration : none;
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu {
|
#Produit>button {
|
||||||
clear: both;
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
max-height: 0;
|
padding: 1vw 1vw;
|
||||||
transition: max-height 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon{
|
|
||||||
padding: 28px 20px;
|
|
||||||
position: relative;
|
|
||||||
float: right;
|
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{
|
#Produit>button:hover {
|
||||||
background: #333;
|
color: white;
|
||||||
display: block;
|
background-color: rgba(204, 25, 25, 0.5);
|
||||||
height: 2px;
|
transition-duration: 0.5s;
|
||||||
width: 18px;
|
border-radius: 2vw;
|
||||||
position: relative;
|
|
||||||
transition: background 0.2s ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-icon .nav-icon:before{
|
|
||||||
background: #333;
|
/*=====================*/
|
||||||
content:"";
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
/* MOSAIQUE PRODUITS*/
|
||||||
position: absolute;
|
|
||||||
|
#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%;
|
width: 100%;
|
||||||
top: 5px;
|
border-top: 0.2vw solid rgb(204, 25, 25);
|
||||||
transition: all 0.2s ease-out;
|
margin-top: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-icon .nav-icon:after{
|
#Carac>h1 {
|
||||||
background: #333;
|
font-size: 3vw;
|
||||||
content:"";
|
color: white;
|
||||||
display: block;
|
}
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
#Carac>h2 {
|
||||||
|
font-size: 1.5vw;
|
||||||
|
color: lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*================================================*/
|
||||||
|
|
||||||
|
|
||||||
|
/*COMMENTAIRES CLIENT*/
|
||||||
|
|
||||||
|
#Client {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: all 0.2s ease-out;
|
margin-left: 5%;
|
||||||
top: -5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-btn{
|
#Client>div>h1 {
|
||||||
display: none;
|
font-size: 2vw;
|
||||||
|
color: white;
|
||||||
|
margin-left: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-btn:checked ~ .menu{
|
#Client>div>h2 {
|
||||||
max-height: 240px;
|
font-size: 1vw;
|
||||||
|
color: yellow;
|
||||||
|
margin-left: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-btn:checked ~ .menu-icon .nav-icon{
|
#Client>div>h3 {
|
||||||
background-color: transparent;
|
font-size: 1.5vw;
|
||||||
|
color: lightgrey;
|
||||||
|
margin-left: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-btn:checked ~ .menu-icon .nav-icon:before{
|
#Client>div>img {
|
||||||
transform: rotate(-45deg);
|
float: left;
|
||||||
top: 0;
|
width: 7%;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu-btn:checked ~ .menu-icon .nav-icon:after{
|
#Client>div {
|
||||||
transform: rotate(45deg);
|
margin-bottom: 3%;
|
||||||
top: 0;
|
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*/
|
/*Slide des promotions*/
|
||||||
|
|
||||||
|
@ -143,15 +604,33 @@ div#slider {
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slidy {
|
@keyframes slidy {
|
||||||
0% {left: 0%;}
|
0% {
|
||||||
20% {left: 0%;}
|
left: 0%;
|
||||||
25% {left: -100%;}
|
}
|
||||||
45% {left: -100%;}
|
20% {
|
||||||
50% {left: -200%;}
|
left: 0%;
|
||||||
70% {left: -200%;}
|
}
|
||||||
75% {left: -300%;}
|
25% {
|
||||||
95% {left: -300%;}
|
left: -100%;
|
||||||
100% {left: -400%;}
|
}
|
||||||
|
45% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left: -200%;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
left: -200%;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
left: -300%;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
left: -300%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: -400%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div#slider figure {
|
div#slider figure {
|
||||||
|
@ -164,4 +643,123 @@ div#slider figure {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
animation: 16s slidy infinite;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*=========================*/
|
||||||
|
|
||||||
|
|
||||||
|
/*====================================*/
|
220
Assets/resp.css
|
@ -1,22 +1,216 @@
|
||||||
@media (min-width:48em){
|
@media screen and (max-width: 900px) {
|
||||||
.header{
|
|
||||||
position: fixed;
|
/*===========GENERAL===========*/
|
||||||
|
h1{
|
||||||
|
font-size: 3vw;
|
||||||
}
|
}
|
||||||
.header li{
|
body>#bienvenue>h1 {
|
||||||
float: left;
|
font-size: 3vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header li a{
|
body>#bienvenue>h2 {
|
||||||
padding: 20px 30px;
|
font-size: 2vw;
|
||||||
|
}
|
||||||
|
button#hautPage{
|
||||||
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .menu{
|
/*===========NAVBAR===========*/
|
||||||
clear: none;
|
.topnav{
|
||||||
float: right;
|
position: static;
|
||||||
max-height: none;
|
}
|
||||||
|
.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-icon{
|
/*========FOOTER=========*/
|
||||||
display: none;
|
tr {
|
||||||
|
border-bottom: 0.2vw solid red;
|
||||||
|
color: white;
|
||||||
|
height: 5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
94
index.html
|
@ -13,16 +13,23 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
|
||||||
<a href="/" class="logo">KYFLO</a>
|
<nav>
|
||||||
<input class="menu-btn" type="checkbox" id="menu-btn"/>
|
<div class="topnav">
|
||||||
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
|
<a id="kyflo" class="active" href="index.html">KyFlo</a>
|
||||||
<ul class="menu">
|
<a id="nous" href="Assets/Pages/Autres/nous.html">A propos</a>
|
||||||
<li><a href="#">A propos</a></li>
|
<a id="contactN" href="Assets/Pages/Autres/contact.html">Contact</a>
|
||||||
<li><a href="#">Contact</a></li>
|
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||||
<li><a href="#">Panier</a></li>
|
<a id="loupe" href="Assets/Pages/Autres/search_result.html">GO</a>
|
||||||
</ul>
|
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||||
</header>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div id="bienvenue">
|
||||||
|
<h1>Bienvenue sur le site de KyFlo !</h1>
|
||||||
|
<h2>Vendeur de robot depuis 2010 !</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="slider">
|
<div id="slider">
|
||||||
<figure>
|
<figure>
|
||||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||||
|
@ -32,6 +39,73 @@
|
||||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="hautPage" onclick="window.location.href='#kyflo'"><img src="Assets/Images/Icones/arrow.png" alt></button>
|
||||||
|
<div id="content">
|
||||||
|
<div id="produits">
|
||||||
|
<h1>Tout nos produits :</h1>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div>
|
||||||
|
<a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
|
||||||
|
<h3>Robot soldat</h3>
|
||||||
|
<h4>Rupture de stock</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
|
||||||
|
<h3>Robot Nao</h3>
|
||||||
|
<h4>5 000€</h4>
|
||||||
|
</a>
|
||||||
|
</div>>
|
||||||
|
<div>
|
||||||
|
<a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
|
||||||
|
<h3>Robot r2d2</h3>
|
||||||
|
<h4>500€</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
|
||||||
|
<h3>Robot valkyrie</h3>
|
||||||
|
<h4>Rupture de stock</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
|
||||||
|
<h3>Robot Pepper</h3>
|
||||||
|
<h4>15 000€</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
|
||||||
|
<h3>Terminator</h3>
|
||||||
|
<h4>50 000€</h4>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<div id="acces">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Accès rapide</th>
|
||||||
|
<th id="line"></th>
|
||||||
|
<th>Une question ?</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="index.html">Accueil</a></td>
|
||||||
|
<td><a href="index.html#slider">Nos Promotions</a></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="index.html#produits">Nos Produits</a></td>
|
||||||
|
<td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
|
||||||
|
<td id="contact"><button onclick="window.location.href='Assets/Pages/Autres/contact.html'" id="contactB">Nous contacter</button></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|