basket added
This commit is contained in:
Kybo
parent
7669c24573
commit
cb80b17e90
32 changed files with 286 additions and 363 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 322 KiB After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 487 KiB After Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 271 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
|
|
@ -6,25 +6,24 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Kyflo</title>
|
<title>Kyflo</title>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" type="text/css" href="../../resp.css">
|
<link rel="stylesheet" type="text/css" href="../../css/css.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../../css.css">
|
<link rel="stylesheet" type="text/css" href="../../css/resp.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="produit">
|
<body>
|
||||||
|
<nav>
|
||||||
|
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||||
<nav id="nav">
|
<a class="raccourci" href="#nous">A propos</a>
|
||||||
<div class="topnav">
|
<a class="raccourci" id="borL" href="#contact">Contact</a>
|
||||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||||
<a id="nous" href="nous.html">A propos</a>
|
<a id="go" href="Assets/Pages/Autres/search_result.html">GO</a>
|
||||||
<a id="contactN" href="contact.html">Contact</a>
|
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||||
<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">
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
|
||||||
<div id="content">
|
<div class="title">
|
||||||
|
<h1>Votre panier :</h1>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
<table id="basket">
|
<table id="basket">
|
||||||
<tr id="cent">
|
<tr id="cent">
|
||||||
<th>Nom Produit</th>
|
<th>Nom Produit</th>
|
||||||
|
|
@ -45,36 +44,32 @@
|
||||||
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
|
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<div id="livraison">
|
|
||||||
<h1>Coordonnées de livraison :</h1>
|
|
||||||
<form action="commande.html">
|
|
||||||
<h1>Nom et prénom :</h1>
|
|
||||||
<input type="text" required>
|
|
||||||
|
|
||||||
<h1>Adresse ligne 1 :</h1>
|
|
||||||
<input type="text" placeholder="Rue, voie, boite postale, nom de société" required>
|
|
||||||
|
|
||||||
<h1>Adresse ligne 2 :</h1>
|
|
||||||
<input type="text" placeholder="Batiment, Etage, Lieu-Dit">
|
|
||||||
|
|
||||||
<h1>Ville :</h1>
|
|
||||||
<input type="text" required>
|
|
||||||
|
|
||||||
<h1>État / Région / Canton :</h1>
|
|
||||||
<input type="text" required>
|
|
||||||
|
|
||||||
<h1>Code postal :</h1>
|
|
||||||
<input type="text" required>
|
|
||||||
|
|
||||||
<h1>Numéro de téléphone :</h1>
|
|
||||||
<input type="tel" required>
|
|
||||||
|
|
||||||
<h1 id="valider">Valider:</h1>
|
|
||||||
<input type="submit" value="Payer">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<h1>Livraison :</h1>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div id="livraison">
|
||||||
|
<h2>Coordonnées de livraison :</h2>
|
||||||
|
<form action="commande.html">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>Nom et prénom :<input type="text" required></td><td>Ville :<input type="text" required></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Adresse ligne 1 :<input type="text" placeholder="Rue, voie, boite postale, nom de société" required></td><td>Code postal :<input type="text" required></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Adresse ligne 2 :<input type="text" placeholder="Batiment, Etage, Lieu-Dit"></td><td>Numéro de téléphone :<input type="tel" required></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<h2 id="valid">Valider:</h2>
|
||||||
|
<input type="submit" value="Payer">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div id="acces">
|
<div id="acces">
|
||||||
<table>
|
<table>
|
||||||
|
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Kyflo</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="../../css.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../../resp.css">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<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 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">
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
|
||||||
<div id="content">
|
|
||||||
<h1>Nous contacter :</h1>
|
|
||||||
<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 id="valider">Valider:</h2>
|
|
||||||
<input type="submit" value="Envoyer">
|
|
||||||
</form>
|
|
||||||
<h1>Nos réseaux sociaux :</h1>
|
|
||||||
<table id="reseaux">
|
|
||||||
<tr id="res">
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/facebook.png" alt></a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/twitter.png" alt></a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/yt.png" alt></a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/insta.png" alt></a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</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="checkout.html">Votre panier</a></td>
|
|
||||||
<td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Kyflo</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="../../css.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../../resp.css">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav id="nav">
|
|
||||||
<div class="topnav">
|
|
||||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</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">
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
|
||||||
<div id="content">
|
|
||||||
<h1>Qui sommes-nous ?</h1>
|
|
||||||
<h2>L'équipe :</h2>
|
|
||||||
<table id="equipe">
|
|
||||||
<tr id="equ">
|
|
||||||
<td><img src="../../Images/Sprites/benoit.png" alt></td>
|
|
||||||
<td><img src="../../Images/Sprites/florian.png" alt></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<h2>Nos engagements :</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<h3>Etre soucieux de la qualité de nos produits</h3>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Vendre des robots à la pointe de la technologie</h3>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Respecter l'environnement</h3>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h1>Nos réseaux sociaux :</h1>
|
|
||||||
<table id="reseaux">
|
|
||||||
<tr id="res">
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/facebook.png" alt></a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/twitter.png" alt></a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/yt.png" alt></a>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#"><img src="../../Images/Icones/insta.png" alt></a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</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="checkout.html">Votre panier</a></td>
|
|
||||||
<td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -12,7 +12,6 @@ body {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -45,6 +44,10 @@ a.raccourci {
|
||||||
border-left: 0.15vw solid rgb(0, 0, 0);
|
border-left: 0.15vw solid rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#borL{
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#panier {
|
#panier {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
@ -84,14 +87,15 @@ a#panier>h3{
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav {
|
nav {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: rgb(255, 255, 255);
|
background-color: rgb(255, 255, 255);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav a {
|
nav a {
|
||||||
float: left;
|
float: left;
|
||||||
display: block;
|
display: block;
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
|
|
@ -104,26 +108,26 @@ a#panier>h3{
|
||||||
transform: skew(-0.2rad);
|
transform: skew(-0.2rad);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav a:hover {
|
nav a:hover {
|
||||||
background-color: rgb(206, 206, 206);
|
background-color: rgb(206, 206, 206);
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav .raccourci:hover,
|
nav .raccourci:hover,
|
||||||
.raccourci:hover {
|
.raccourci:hover {
|
||||||
padding: 1.8vw 2.5vw;
|
padding: 1.8vw 2.5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav a#kyflo:hover {
|
nav a#kyflo:hover {
|
||||||
background-color :transparent;
|
background-color :transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav a#panier:hover {
|
nav a#panier:hover {
|
||||||
background-color: rgb(206, 206, 206);
|
background-color: rgb(206, 206, 206);
|
||||||
margin-right: -2%;
|
margin-right: -2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav input[type=text] {
|
nav input[type=text] {
|
||||||
float: right;
|
float: right;
|
||||||
padding: 0.5vw;
|
padding: 0.5vw;
|
||||||
color: black;
|
color: black;
|
||||||
|
|
@ -209,9 +213,10 @@ div#slider figure {
|
||||||
|
|
||||||
/* TITRE */
|
/* TITRE */
|
||||||
.title h1{
|
.title h1{
|
||||||
font-size: 3vw;
|
font-size: 4vw;
|
||||||
padding: 6vw;
|
padding: 6vw;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -281,7 +286,7 @@ div#slider figure {
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-container div:hover{
|
.flex-container div:hover{
|
||||||
border: 0.3vw solid lightseagreen;
|
border: 0.3vw solid grey;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -331,7 +336,39 @@ div#slider figure {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*==========================================================*/
|
/*==========================================================*/
|
||||||
|
/* 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*/
|
||||||
|
|
||||||
|
|
@ -342,7 +379,7 @@ footer {
|
||||||
|
|
||||||
footer>div>table {
|
footer>div>table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #ddd;
|
background-color: rgb(255, 255, 255);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 2vw 8vw;
|
padding: 2vw 8vw;
|
||||||
}
|
}
|
||||||
|
|
@ -353,13 +390,11 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: white;
|
color: rgb(0, 0, 0);
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
border-bottom: 0.2vw solid red;
|
|
||||||
color: white;
|
|
||||||
height: 5vw;
|
height: 5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -370,8 +405,8 @@ th {
|
||||||
border-bottom: 0.1vw solid rgb(0, 0, 0);
|
border-bottom: 0.1vw solid rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
th#line {
|
th#line{
|
||||||
border: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button#contactB {
|
button#contactB {
|
||||||
|
|
@ -643,45 +678,107 @@ table>tr>td>input {
|
||||||
|
|
||||||
/*Panier*/
|
/*Panier*/
|
||||||
|
|
||||||
form[action="commande.html"]>h1 {
|
table#basket{
|
||||||
font-size: 1.5vw;
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
|
||||||
|
|
||||||
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 white;
|
|
||||||
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;
|
text-align: center;
|
||||||
border: 0.1vw solid white;
|
width: 100%;
|
||||||
|
border: 0.2vw solid rgb(0, 0, 0);
|
||||||
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr#cent>th {
|
table#basket th{
|
||||||
|
border: 0.1vw solid grey;
|
||||||
|
font-size: 2.5vw;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
td#total {
|
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;
|
text-align: right;
|
||||||
color: white;
|
font-size: 2.5vw;
|
||||||
font-size: 2vw;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 0vw 2vw;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*===============================================*/
|
/*===============================================*/
|
||||||
|
|
@ -16,10 +16,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/*===========NAVBAR===========*/
|
/*===========NAVBAR===========*/
|
||||||
.topnav{
|
nav{
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
.topnav input[type=text] {
|
nav input[type=text] {
|
||||||
float: none;
|
float: none;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
transform: none;
|
transform: none;
|
||||||
font-size: 3vw;
|
font-size: 3vw;
|
||||||
}
|
}
|
||||||
.topnav a {
|
nav a {
|
||||||
float: none;
|
float: none;
|
||||||
display: block;
|
display: block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
@ -42,37 +42,37 @@
|
||||||
font-size: 3vw;
|
font-size: 3vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
.topnav a#kyflo{
|
nav a#kyflo{
|
||||||
font-size: 8vw;
|
font-size: 8vw;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.topnav a#panier,
|
nav a#panier,
|
||||||
a.raccourci {
|
a.raccourci {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.topnav a#panier{
|
nav a#panier{
|
||||||
width: 20%;
|
width: 20%;
|
||||||
margin-right: -14%;
|
margin-right: -14%;
|
||||||
}
|
}
|
||||||
.topnav a#panier:hover{
|
nav a#panier:hover{
|
||||||
margin-right: -14%;
|
margin-right: -14%;
|
||||||
}
|
}
|
||||||
.topnav a.raccourci:hover,
|
nav a.raccourci:hover,
|
||||||
a.raccourci:hover {
|
a.raccourci:hover {
|
||||||
padding: 2vw 2vw;
|
padding: 2vw 2vw;
|
||||||
}
|
}
|
||||||
.topnav a#go {
|
nav a#go {
|
||||||
width: 5%;
|
width: 5%;
|
||||||
padding: 1vw;
|
padding: 1vw;
|
||||||
font-size: 3vw;
|
font-size: 3vw;
|
||||||
border: 0.1vw solid rgb(0, 0, 0)
|
border: 0.1vw solid rgb(0, 0, 0)
|
||||||
}
|
}
|
||||||
.topnav a#panier>h3{
|
nav a#panier>h3{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
/*===========FLEX CONTAINER===========*/
|
/*===========FLEX CONTAINER===========*/
|
||||||
.flex-container>div {
|
.flex-container>div {
|
||||||
width: 40%;
|
width: 80%;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -94,6 +94,20 @@
|
||||||
margin-right: 2vw;
|
margin-right: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*=======QUI SOMMES NOUS======*/
|
||||||
|
div#nous .flex-container img{
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#nous .flex-container div{
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#nous .flex-container div#engagements{
|
||||||
|
width: 80%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*========FOOTER=========*/
|
/*========FOOTER=========*/
|
||||||
|
|
||||||
th {
|
th {
|
||||||
|
|
@ -105,30 +119,6 @@
|
||||||
font-size: 2vw;
|
font-size: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*=======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=======*/
|
/*=====Produits=======*/
|
||||||
#Produit>h3 {
|
#Produit>h3 {
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB |
BIN
Images/arrow.png
BIN
Images/arrow.png
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
129
index.html
129
index.html
|
|
@ -5,24 +5,20 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Kyflo</title>
|
<title>Kyflo</title>
|
||||||
<link rel="stylesheet" type="text/css" href="Assets/css.css">
|
<link rel="stylesheet" type="text/css" href="Assets/css/css.css">
|
||||||
<link rel="stylesheet" type="text/css" href="Assets/resp.css">
|
<link rel="stylesheet" type="text/css" href="Assets/css/resp.css">
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav id="nav">
|
<nav>
|
||||||
<div class="topnav">
|
<a id="kyflo" class="active" href="index.html">KyFlo</a>
|
||||||
<a id="kyflo" class="active" href="index.html">KyFlo</a>
|
<a class="raccourci" href="#nous">A propos</a>
|
||||||
<a class="raccourci" href="Assets/Pages/Autres/nous.html">A propos</a>
|
<a class="raccourci" id="borL" href="#contact">Contact</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="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
<a id="go" 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...">
|
||||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div id="bienvenue">
|
<div id="bienvenue">
|
||||||
|
|
@ -39,46 +35,47 @@
|
||||||
<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>
|
||||||
<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="produits">
|
||||||
|
<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>
|
||||||
<div id="contact">
|
<div id="contact">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<h1>Nous contacter :</h1>
|
<h1>Nous contacter :</h1>
|
||||||
|
|
@ -100,6 +97,34 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="nous">
|
||||||
|
<div class="title">
|
||||||
|
<h1>Qui sommes nous ?</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex-container">
|
||||||
|
<div>
|
||||||
|
<img src="Assets/Images/Sprites/benoit.png" alt>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="Assets/Images/Sprites/florian.png" alt>
|
||||||
|
</div>
|
||||||
|
<div id="engagements">
|
||||||
|
<h2>Nos engagements :</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Etre soucieux de la qualité de nos produits
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Vendre des robots à la pointe de la technologie
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Respecter l'environnement
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
||||||
Reference in a new issue