big rework design
This commit is contained in:
Kybo
parent
fc36b99bf8
commit
3d14a328c8
11 changed files with 326 additions and 399 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB After Width: | Height: | Size: 322 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 293 KiB After Width: | Height: | Size: 487 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 217 KiB After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
|
|
@ -16,8 +16,8 @@
|
|||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a id="nous" href="nous.html">A propos</a>
|
||||
<a id="contactN" href="contact.html">Contact</a>
|
||||
<a class="raccourci" href="#nous">A propos</a>
|
||||
<a class="raccourci" href="contact.html">Contact</a>
|
||||
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
|
||||
<a id="loupe" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site">
|
||||
|
|
|
|||
587
Assets/css.css
587
Assets/css.css
|
|
@ -1,166 +1,333 @@
|
|||
/*204, 25, 25*/
|
||||
/*BODY + GENERAL*/
|
||||
|
||||
|
||||
/*==========================================================================================*/
|
||||
|
||||
|
||||
/*BODY + GENERAL*/
|
||||
html{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
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;
|
||||
background: linear-gradient(to left, rgb(99, 1, 99), rgb(0, 0, 145));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-left: 8vw;
|
||||
margin-right: 8vw;
|
||||
|
||||
img {
|
||||
width: 30%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #ddd;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
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);
|
||||
color: rgb(0, 0, 0);
|
||||
padding: 0.5vw 1vw;
|
||||
transform: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
a#nous {
|
||||
border-right: 0.15vw solid rgb(204, 25, 25);
|
||||
border-left: 0.15vw solid rgb(204, 25, 25);
|
||||
a.raccourci {
|
||||
border-right: 0.15vw solid rgb(0, 0, 0);
|
||||
border-left: 0.15vw solid rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
#panier {
|
||||
float: right;
|
||||
width: 9%;
|
||||
padding: 1.2vw 1vw;
|
||||
border-left: 0.15vw solid rgb(204, 25, 25);
|
||||
border-left: 0.15vw solid rgb(0, 0, 0);
|
||||
margin-right: -6%;
|
||||
}
|
||||
|
||||
a#panier>h3{
|
||||
margin-top :0.5vw;
|
||||
margin-bottom: 0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#loupe {
|
||||
#go {
|
||||
float: right;
|
||||
display: block;
|
||||
color: rgb(255, 255, 255);
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
margin-top: 1.2vw;
|
||||
margin-right: 2vw;
|
||||
padding: 0.5vw;
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
border: 0.1vw solid rgb(0, 0, 0);
|
||||
text-decoration: none;
|
||||
font-size: 1vw;
|
||||
font-weight: bold;
|
||||
transform: none;
|
||||
border-left: none;
|
||||
background-color: rgb(204, 25, 25);
|
||||
border-top: none;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
#loupe:hover {
|
||||
color: rgb(0, 0, 0);
|
||||
#go:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
background-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);
|
||||
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: rgb(255, 255, 255);
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
padding: 1.8vw 1.4vw;
|
||||
text-decoration: none;
|
||||
font-size: 1vw;
|
||||
border-right: 0.15vw solid rgb(204, 25, 25);
|
||||
border-right: 0.15vw solid white;
|
||||
font-weight: bold;
|
||||
transform: skew(-0.2rad);
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: rgb(204, 25, 25);
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: rgb(206, 206, 206);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.topnav a#nous:hover,
|
||||
a#contactN:hover {
|
||||
.topnav .raccourci:hover,
|
||||
.raccourci:hover {
|
||||
padding: 1.8vw 2.5vw;
|
||||
}
|
||||
|
||||
.topnav a#kyflo:hover {
|
||||
color: white;
|
||||
background-color: rgb(22, 22, 22);
|
||||
background-color :transparent;
|
||||
}
|
||||
|
||||
.topnav a#panier:hover {
|
||||
background-color: black;
|
||||
background-color: rgb(206, 206, 206);
|
||||
margin-right: -2%;
|
||||
}
|
||||
|
||||
.topnav input[type=text] {
|
||||
float: right;
|
||||
padding: 0.5vw;
|
||||
color: black;
|
||||
width: 40%;
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
border: none;
|
||||
border-bottom: 0.1vw solid rgb(0, 0, 0);
|
||||
font-size: 1vw;
|
||||
margin-top: 1.2vw;
|
||||
background-color: rgb(22, 22, 22);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
/*================================================*/
|
||||
|
||||
/*TOP*/
|
||||
div#bienvenue{
|
||||
padding: 3vw;
|
||||
}
|
||||
|
||||
body>#bienvenue>h1 {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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: 3vw;
|
||||
padding: 6vw;
|
||||
margin: 0;
|
||||
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%;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.flex-container div.out:hover{
|
||||
cursor: none;
|
||||
border: none;
|
||||
border-bottom: 0.2vw solid grey;
|
||||
border-right: 0.2vw solid grey;
|
||||
}
|
||||
|
||||
.flex-container div:hover{
|
||||
border: 0.3vw solid lightseagreen;
|
||||
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(0, 0, 0);
|
||||
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;
|
||||
}
|
||||
|
||||
/*==========================================================*/
|
||||
|
||||
|
||||
/*FOOTER*/
|
||||
|
||||
|
|
@ -171,7 +338,7 @@ footer {
|
|||
|
||||
footer>div>table {
|
||||
width: 100%;
|
||||
border-top: 0.1vw solid rgb(204, 25, 25);
|
||||
border-top: 0.1vw solid white;
|
||||
background-color: rgb(27, 27, 27);
|
||||
margin: auto;
|
||||
padding: 2vw 8vw;
|
||||
|
|
@ -183,7 +350,7 @@ a {
|
|||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(204, 25, 25);
|
||||
color: white;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
|
|
@ -211,13 +378,13 @@ button#contactB {
|
|||
font-size: 1.5vw;
|
||||
color: lightgrey;
|
||||
background-color: rgb(27, 27, 27);
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
border: 0.1vw solid white;
|
||||
transform: skew(-.312rad);
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
button#contactB:hover {
|
||||
background-color: rgb(204, 25, 25);
|
||||
background-color: white;
|
||||
transition-duration: 0.5s;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
|
@ -234,49 +401,6 @@ td#contact {
|
|||
|
||||
/*======================================*/
|
||||
|
||||
|
||||
/*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 {
|
||||
|
|
@ -298,7 +422,7 @@ td#contact {
|
|||
}
|
||||
|
||||
#Merci>h2>a:hover {
|
||||
color: rgb(204, 25, 25);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#Merci>img {
|
||||
|
|
@ -310,16 +434,9 @@ td#contact {
|
|||
float: none;
|
||||
}
|
||||
|
||||
|
||||
/*==========================================*/
|
||||
|
||||
|
||||
/*==========================================*/
|
||||
|
||||
|
||||
/* CSS DESCRIPTION PRODUIT */
|
||||
|
||||
|
||||
/*EN TETE PRODUIT*/
|
||||
|
||||
#Produit {
|
||||
|
|
@ -357,7 +474,7 @@ td#contact {
|
|||
#Produit>img {
|
||||
width: 20%;
|
||||
float: left;
|
||||
border: 0.2vw solid rgb(204, 25, 25);
|
||||
border: 0.2vw solid white;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
@ -370,7 +487,7 @@ td#contact {
|
|||
font-size: 2vw;
|
||||
margin-right: 10%;
|
||||
color: white;
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
border: 0.1vw solid white;
|
||||
}
|
||||
|
||||
#Produit>button:hover {
|
||||
|
|
@ -379,44 +496,13 @@ td#contact {
|
|||
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);
|
||||
border-top: 0.2vw solid white;
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
|
|
@ -430,10 +516,8 @@ h3:hover {
|
|||
color: lightgrey;
|
||||
}
|
||||
|
||||
|
||||
/*================================================*/
|
||||
|
||||
|
||||
/*COMMENTAIRES CLIENT*/
|
||||
|
||||
#Client {
|
||||
|
|
@ -471,15 +555,13 @@ h3:hover {
|
|||
margin-right: 8%;
|
||||
}
|
||||
|
||||
|
||||
/*================================================*/
|
||||
|
||||
|
||||
/*ESPACE LAISSER COMMENTAIRE*/
|
||||
|
||||
#Coms {
|
||||
width: 100%;
|
||||
border-top: 0.2vw solid rgb(204, 25, 25);
|
||||
border-top: 0.2vw solid white;
|
||||
margin-top: 5%;
|
||||
padding: 2vw 2vw;
|
||||
}
|
||||
|
|
@ -492,13 +574,13 @@ h3:hover {
|
|||
#Coms>h2 {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
border-top: 0.2vw dashed rgb(204, 25, 25);
|
||||
border-top: 0.2vw dashed white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#Coms {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
border: 0.1vw solid white;
|
||||
}
|
||||
|
||||
#Coms>form>h1 {
|
||||
|
|
@ -506,22 +588,6 @@ h3:hover {
|
|||
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;
|
||||
|
|
@ -543,7 +609,7 @@ select {
|
|||
padding: 1vw 1vw;
|
||||
font-size: 1.5vw;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 0.15vw solid rgb(204, 25, 25);
|
||||
border: 0.15vw solid white;
|
||||
color: white;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
|
|
@ -570,84 +636,6 @@ table>tr>td>input {
|
|||
|
||||
/*================================================*/
|
||||
|
||||
|
||||
/*==========================================================================================*/
|
||||
|
||||
|
||||
/*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;
|
||||
}
|
||||
|
||||
|
||||
/*==========================================================================================*/
|
||||
|
||||
|
||||
/*Panier*/
|
||||
|
||||
form[action="commande.html"]>h1 {
|
||||
|
|
@ -663,7 +651,7 @@ select {
|
|||
|
||||
#livraison {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
border: 0.1vw solid white;
|
||||
margin-top: 5vw;
|
||||
}
|
||||
|
||||
|
|
@ -676,7 +664,7 @@ table#basket {
|
|||
margin-top: 5vw;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
border: 0.1vw solid white;
|
||||
}
|
||||
|
||||
tr#cent>th {
|
||||
|
|
@ -685,81 +673,10 @@ tr#cent>th {
|
|||
|
||||
td#total {
|
||||
text-align: right;
|
||||
color: rgb(204, 25, 25);
|
||||
color: white;
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
/*=========================*/
|
||||
|
||||
|
||||
/*====================================*/
|
||||
/*===============================================*/
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
display: block;
|
||||
text-align: left;
|
||||
width: 76.5%;
|
||||
border: 0.1vw solid black;
|
||||
margin: 0;
|
||||
padding: 2vw;
|
||||
border: none;
|
||||
transform: none;
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
text-align: center;
|
||||
}
|
||||
.topnav a#panier,
|
||||
a#nous {
|
||||
a.raccourci {
|
||||
border: none;
|
||||
}
|
||||
.topnav a#panier{
|
||||
|
|
@ -57,36 +57,27 @@
|
|||
.topnav a#panier:hover{
|
||||
margin-right: -14%;
|
||||
}
|
||||
.topnav a#nous:hover,
|
||||
a#contactN:hover {
|
||||
.topnav a.raccourci:hover,
|
||||
a.raccourci:hover {
|
||||
padding: 2vw 2vw;
|
||||
}
|
||||
.topnav a#loupe {
|
||||
.topnav a#go {
|
||||
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);
|
||||
border: 0.1vw solid rgb(0, 0, 0)
|
||||
}
|
||||
.topnav a#panier>h3{
|
||||
display:none;
|
||||
}
|
||||
/*===========FLEX CONTAINER===========*/
|
||||
.flex-container>div {
|
||||
width: 85%;
|
||||
width: 40%;
|
||||
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;
|
||||
|
|
|
|||
111
index.html
111
index.html
|
|
@ -17,10 +17,10 @@
|
|||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id="nous" href="Assets/Pages/Autres/nous.html">A propos</a>
|
||||
<a id="contactN" href="Assets/Pages/Autres/contact.html">Contact</a>
|
||||
<a class="raccourci" href="Assets/Pages/Autres/nous.html">A propos</a>
|
||||
<a class="raccourci" href="#contact">Contact</a>
|
||||
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="loupe" href="Assets/Pages/Autres/search_result.html">GO</a>
|
||||
<a id="go" href="Assets/Pages/Autres/search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -39,50 +39,69 @@
|
|||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
</figure>
|
||||
</div>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><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 class="title">
|
||||
<h1>Tout nos produits :</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex-container">
|
||||
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
|
||||
<h2>Robot Nao</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div class="out">
|
||||
<h1>Rupture de stock</h1>
|
||||
<a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
|
||||
<h2>Robot soldat</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
|
||||
<h2>Robot r2d2</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div class="out">
|
||||
<h1>Rupture de stock</h1>
|
||||
<a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
|
||||
<h2>Robot valkyrie</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
|
||||
<h2>Robot Pepper</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
|
||||
<h2>Terminator</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact">
|
||||
<div class="title">
|
||||
<h1>Nous contacter :</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<form action="commentaire.html">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
<h2>Email :</h2>
|
||||
<input type="email" required>
|
||||
|
||||
<h2>Question :</h2>
|
||||
<input type="text" placeholder="Question, suggestion, remarque" required>
|
||||
|
||||
<h2>Valider:</h2>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
|
|
@ -100,7 +119,7 @@
|
|||
<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>
|
||||
<td><button onclick="window.location.href='Assets/Pages/Autres/contact.html'" id="contactB">Nous contacter</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
Reference in a new issue