parent
dd52d190fa
commit
32cad342ba
11 changed files with 284 additions and 345 deletions
BIN
Assets/Images/Icones/arrow.png
Normal file
BIN
Assets/Images/Icones/arrow.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
BIN
Assets/Images/Icones/cart.png
Normal file
BIN
Assets/Images/Icones/cart.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 175 KiB |
Binary file not shown.
Before Width: | Height: | Size: 364 KiB |
|
@ -13,22 +13,20 @@
|
|||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<a href="#" class="logo">KYFLO</a>
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn"/>
|
||||
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
|
||||
<ul class="menu">
|
||||
<li><input type="text" placeholder="Rechercher..."></li>
|
||||
<li><a href="#nous">A propos</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a href="Assets/Pages/Autres/checkout.html">Panier</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<div class="title">
|
||||
<h1>Votre panier :</h1>
|
||||
<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><h3>Panier</h3></a>
|
||||
<a id="loupe" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site">
|
||||
</div>
|
||||
<div class="content">
|
||||
</nav>
|
||||
|
||||
|
||||
<button id="hautPage" onclick="window.location.href='#kyflo'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
<div id="content">
|
||||
<table id="basket">
|
||||
<tr id="cent">
|
||||
<th>Nom Produit</th>
|
||||
|
@ -49,69 +47,59 @@
|
|||
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Livraison :</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="livraison">
|
||||
<h1>Coordonnées de livraison :</h1>
|
||||
<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>Valider:</h2>
|
||||
<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 class="footer">
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Accès rapide</th><th></th>
|
||||
<th>Accès rapide</th>
|
||||
<th id="line"></th>
|
||||
<th>Une question ?</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Accueil</a></td>
|
||||
<td><a href="#slider">Nos Promotions</a></td>
|
||||
|
||||
<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="#produits">Nos Produits</a></td>
|
||||
<td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
89
Assets/Pages/Autres/contact.html
Normal file
89
Assets/Pages/Autres/contact.html
Normal file
|
@ -0,0 +1,89 @@
|
|||
<!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>
|
||||
<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><h3>Panier</h3></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='#kyflo'"><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>
|
95
Assets/Pages/Autres/nous.html
Normal file
95
Assets/Pages/Autres/nous.html
Normal file
|
@ -0,0 +1,95 @@
|
|||
<!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>
|
||||
<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><h3>Panier</h3></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='#kyflo'"><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>
|
182
Assets/css.css
182
Assets/css.css
|
@ -5,7 +5,9 @@
|
|||
body{
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: linear-gradient(to left, rgb(4, 64, 141), rgb(70, 1, 87));
|
||||
background-image: url("Images/bg.jpg");
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
|
||||
|
@ -222,7 +224,7 @@ div#slider figure {
|
|||
|
||||
.title{
|
||||
padding: 5vw 1vw;
|
||||
background-color: rgba(255, 255, 255, 0.377);
|
||||
background-color: rgba(255, 255, 255, 0.548);
|
||||
}
|
||||
|
||||
.title>h1{
|
||||
|
@ -253,7 +255,7 @@ div#slider figure {
|
|||
}
|
||||
|
||||
.top{
|
||||
padding: 3vw 1vw;
|
||||
padding: 5vw 1vw;
|
||||
}
|
||||
|
||||
.top>h1{
|
||||
|
@ -308,177 +310,3 @@ div#slider figure {
|
|||
#nous ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* CONTACT */
|
||||
#contact input{
|
||||
width: 30%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 20px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 0.2vw solid grey;
|
||||
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: 10%;
|
||||
}
|
||||
|
||||
#contact input[type=submit]:hover{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
#contact h2{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
background-color: #ddd;
|
||||
width: 100%;
|
||||
margin-top: 5%;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
.footer table{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer tr{
|
||||
line-height: 10vh;
|
||||
}
|
||||
|
||||
.footer th{
|
||||
text-align: left;
|
||||
font-size: 40px;
|
||||
border-bottom: 0.2vw solid grey;
|
||||
}
|
||||
|
||||
.footer td{
|
||||
font-size: 30px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.footer h1{
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.footer table#reseaux img{
|
||||
width: 20%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
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: 30px;
|
||||
}
|
||||
|
||||
table#basket tr{
|
||||
line-height: 5vh;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
table#basket td{
|
||||
border: 0.1vw solid grey;
|
||||
}
|
||||
|
||||
table#basket td#total{
|
||||
text-align: right;
|
||||
font-size: 30px;
|
||||
color: black;
|
||||
padding-right: 2vw;
|
||||
}
|
||||
|
||||
table#basket input{
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
width: 10%;
|
||||
padding: 0.3vw;
|
||||
}
|
||||
|
||||
/*LIVRAISON*/
|
||||
|
||||
#livraison table{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#livraison input{
|
||||
width: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 20px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 0.2vw solid grey;
|
||||
padding: 0.5vw;
|
||||
margin-top: 0.5vh;
|
||||
margin-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
#livraison h1{
|
||||
text-align: left;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#livraison td{
|
||||
font-size: 20px;
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#livraison h2{
|
||||
font-size: 20px;
|
||||
text-align : center;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
67
index.html
67
index.html
|
@ -20,8 +20,8 @@
|
|||
<ul class="menu">
|
||||
<li><input type="text" placeholder="Rechercher..."></li>
|
||||
<li><a href="#nous">A propos</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li><a href="Assets/Pages/Autres/checkout.html">Panier</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Panier</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
|
@ -40,7 +40,6 @@
|
|||
</figure>
|
||||
</div>
|
||||
|
||||
<div id="produits">
|
||||
<div class="title">
|
||||
<h1>Tous nos produits :</h1>
|
||||
</div>
|
||||
|
@ -53,7 +52,6 @@
|
|||
<div class="ok"><div class="spec">N°1 des ventes</div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></a></div>
|
||||
<div class="ok"><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nous">
|
||||
<div class="title">
|
||||
|
@ -73,66 +71,7 @@
|
|||
|
||||
</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>
|
||||
|
||||
<div class="footer">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Accès rapide</th><th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Accueil</a></td>
|
||||
<td><a href="#slider">Nos Promotions</a></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#produits">Nos Produits</a></td>
|
||||
<td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h1>Nos réseaux sociaux :</h1>
|
||||
<table id="reseaux">
|
||||
<tr id="res">
|
||||
<td>
|
||||
<a href="#"><img src="Assets/Images/Icones/facebook.png" alt></a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#"><img src="Assets/Images/Icones/twitter.png" alt></a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#"><img src="Assets/Images/Icones/yt.png" alt></a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#"><img src="Assets/Images/Icones/insta.png" alt></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
Reference in a new issue