added all popups
This commit is contained in:
Kybo
parent
a96c3f6255
commit
d87f0df5e4
9 changed files with 174 additions and 266 deletions
|
|
@ -20,54 +20,64 @@
|
|||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
||||
<div class="title">
|
||||
<h1>Votre panier :</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<table id="basket">
|
||||
<tr id="cent">
|
||||
<th>Nom Produit</th>
|
||||
<th>Quantité</th>
|
||||
<th>Prix</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>R2D2</td>
|
||||
<td><input type="text" value="2"></td>
|
||||
<td>500 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nao</td>
|
||||
<td><input type="text" value="1"></td>
|
||||
<td>5 000€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<div id="dark_popup">
|
||||
|
||||
<div id="popup">
|
||||
<a href="#"><h1>X</h1></a>
|
||||
<h1>Merci pour votre achat ! Votre commande arrive bientot !</h1>
|
||||
<a href="../../../index.html"><h2>Retour à l'accueil</h2></a>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Votre panier :</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<table id="basket">
|
||||
<tr id="cent">
|
||||
<th>Nom Produit</th>
|
||||
<th>Quantité</th>
|
||||
<th>Prix</th>
|
||||
</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>
|
||||
<td>R2D2</td>
|
||||
<td><input type="text" value="2"></td>
|
||||
<td>500 €</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>
|
||||
<td>Nao</td>
|
||||
<td><input type="text" value="1"></td>
|
||||
<td>5 000€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2 id="valid">Valider:</h2>
|
||||
<input type="submit" value="Payer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Livraison :</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="livraison">
|
||||
<h2>Coordonnées de livraison :</h2>
|
||||
<form action="#dark_popup">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="fr" 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>
|
||||
|
||||
<div id="Merci">
|
||||
<h1>Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !</h1>
|
||||
<img src="../../Images/Icones/smiley.png" alt>
|
||||
<h2><a href="../../../index.html">Retourner a l'accueil</a></h2>
|
||||
</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,59 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="fr" 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>
|
||||
|
||||
<div id="content">
|
||||
<div id="Merci">
|
||||
<h1>Merci beaucoup pour votre réponse ! Votre retour a été pris en compte !</h1>
|
||||
<img src="../../Images/Icones/smiley.png" alt>
|
||||
<h2><a href="../../../index.html">Retourner a l'accueil</a></h2>
|
||||
</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="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>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
<a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
|
||||
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<form action="../../../index.html#dark_popup">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
<a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
|
||||
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<form action="../../../index.html#dark_popup">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
<a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
|
||||
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<form action="../../../index.html#dark_popup">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
<a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
|
||||
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<form action="../../../index.html#dark_popup">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ div#bienvenue{
|
|||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
body>#bienvenue>h1 {
|
||||
#bienvenue>h1 {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
|
@ -173,7 +173,7 @@ body>#bienvenue>h1 {
|
|||
100% {margin-left: 0%}
|
||||
}
|
||||
|
||||
body>#bienvenue>h2 {
|
||||
#bienvenue>h2 {
|
||||
font-size: 2vw;
|
||||
color: lightgrey;
|
||||
text-align: center;
|
||||
|
|
@ -716,8 +716,14 @@ input[type=submit]:hover{
|
|||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
#dark_popup:target .title, #dark_popup:target .content{
|
||||
opacity: 0.2;
|
||||
#dark_popup:target .title, #dark_popup:target .content, #dark_popup:target #produits, #dark_popup:target #contact, #dark_popup:target #nous, #dark_popup:target #slider, #dark_popup:target #bienvenue{
|
||||
animation: 1s fade;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes fade{
|
||||
0%{opacity: 1}
|
||||
100%{opacity: 0.2}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
199
index.html
199
index.html
|
|
@ -21,112 +21,121 @@
|
|||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
||||
<div id="bienvenue">
|
||||
<h1>Bienvenue sur le site de KyFlo !</h1>
|
||||
<h2>Vendeur de robot depuis 2010 !</h2>
|
||||
</div>
|
||||
<div id="dark_popup">
|
||||
|
||||
<div id="slider">
|
||||
<figure>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Promotions/promo2.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Promotions/promo3.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Promotions/promo4.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div id="produits">
|
||||
<div class="title">
|
||||
<h1>Tout nos produits :</h1>
|
||||
<div id="popup">
|
||||
<a href="#"><h1>X</h1></a>
|
||||
<h1>Votre question / votre retour a été pris en compte !</h1>
|
||||
<a href="Assets/Pages/Autres/checkout.html"><h2>Voir mon panier</h2></a>
|
||||
<a href="index.html"><h2>Continuer mes achats</h2></a>
|
||||
</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 class="title">
|
||||
<h1>Nous contacter :</h1>
|
||||
<div id="bienvenue">
|
||||
<h1>Bienvenue sur le site de KyFlo !</h1>
|
||||
<h2>Vendeur de robot depuis 2010 !</h2>
|
||||
</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 id="slider">
|
||||
<figure>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Promotions/promo2.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Promotions/promo3.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Promotions/promo4.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
</figure>
|
||||
</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 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 class="title">
|
||||
<h1>Nous contacter :</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<form action="#dark_popup">
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
<div id="acces">
|
||||
|
|
|
|||
Reference in a new issue