IUT_Informatique/KyFlo
Archived
1
0
Fork 0
Code Activity

Ajout resp.css

Browse source
This commit is contained in:
KEZEL BENOIT p1907091 2019-11-27 10:36:44 +01:00
parent 10b8358a66
commit 9b7dd27f05
13 changed files with 718 additions and 530 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
Assets/Pages/Autres/checkout.html
View file

@ -1,36 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<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"> <link rel="stylesheet" type="text/css" href="../../css.css">
</head> </head>
<body id="produit"> <body id="produit">
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="nous.html">A propos</a> <a id="nous" href="nous.html">A propos</a>
<a id ="contactN" href="contact.html">Contact</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="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="search_result.html">GO</a> <a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site"> <input type="text" placeholder="Rechercher sur tout le site">
</div> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
<table id="basket"> <table id="basket">
<tr id="cent"> <tr id="cent">
<th>Nom Produit</th><th>Quantité</th><th>Prix</th> <th>Nom Produit</th>
<th>Quantité</th>
<th>Prix</th>
</tr> </tr>
<tr> <tr>
<td>R2D2</td><td><input type="text" value="2"></td><td>500 €</td> <td>R2D2</td>
<td><input type="text" value="2"></td>
<td>500 €</td>
</tr> </tr>
<tr> <tr>
<td>Nao</td><td><input type="text" value="1"></td><td>5 000€</td> <td>Nao</td>
<td><input type="text" value="1"></td>
<td>5 000€</td>
</tr> </tr>
<tr> <tr>
<td id="total" COLSPAN=3>TOTAL : 6 000€</td> <td id="total" COLSPAN=3>TOTAL : 6 000€</td>
@ -42,10 +51,10 @@
<form action="commande.html"> <form action="commande.html">
<h1>Nom et prénom :</h1> <h1>Nom et prénom :</h1>
<input type="text" required> <input type="text" required>
<h1>Adresse ligne 1 :</h1> <h1>Adresse ligne 1 :</h1>
<input type="text" placeholder="Rue, voie, boite postale, nom de société" required> <input type="text" placeholder="Rue, voie, boite postale, nom de société" required>
<h1>Adresse ligne 2 :</h1> <h1>Adresse ligne 2 :</h1>
<input type="text" placeholder="Batiment, Etage, Lieu-Dit"> <input type="text" placeholder="Batiment, Etage, Lieu-Dit">
@ -60,33 +69,36 @@
<h1>Numéro de téléphone :</h1> <h1>Numéro de téléphone :</h1>
<input type="tel" required> <input type="tel" required>
<h1 id="valider">Valider:</h1> <h1 id="valider">Valider:</h1>
<input type="submit" value="Payer"> <input type="submit" value="Payer">
</form> </form>
</div> </div>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <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> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

12
Assets/Pages/Autres/commande.html
View file

@ -1,14 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
@ -18,14 +21,14 @@
<a id="loupe" href="search_result.html">GO</a> <a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site"> <input type="text" placeholder="Rechercher sur tout le site">
</div> </div>
</nav> </nav>
<div id="Merci"> <div id="Merci">
<h1>Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !</h1> <h1>Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !</h1>
<img src="../../Images/Icones/smiley.png" alt> <img src="../../Images/Icones/smiley.png" alt>
<h2><a href="../../../index.html">Retourner a l'accueil</a></h2> <h2><a href="../../../index.html">Retourner a l'accueil</a></h2>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
@ -49,6 +52,7 @@
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

4
Assets/Pages/Autres/commentaire.html
View file

@ -1,12 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav">
@ -52,4 +55,5 @@
</footer> </footer>
</body> </body>
</html> </html>

80
Assets/Pages/Autres/contact.html
View file

@ -1,75 +1,89 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="nous.html">A propos</a> <a id="nous" href="nous.html">A propos</a>
<a id ="contactN" href="contact.html">Contact</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="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="search_result.html">GO</a> <a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site"> <input type="text" placeholder="Rechercher sur tout le site">
</div> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
<h1>Nous contacter :</h1> <h1>Nous contacter :</h1>
<form action="commentaire.html"> <form action="commentaire.html">
<h2>Nom et Prénom :</h2> <h2>Nom et Prénom :</h2>
<input type="text" required> <input type="text" required>
<h2>Email :</h2> <h2>Email :</h2>
<input type="email" required> <input type="email" required>
<h2>Question :</h2> <h2>Question :</h2>
<input type="text" placeholder="Question, suggestion, remarque" required> <input type="text" placeholder="Question, suggestion, remarque" required>
<h2 id="valider">Valider:</h2> <h2 id="valider">Valider:</h2>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
<h1>Nos réseaux sociaux :</h1> <h1>Nos réseaux sociaux :</h1>
<table id="reseaux"> <table id="reseaux">
<tr id="res"> <tr id="res">
<td><a href="#"><img src="../../Images/Icones/facebook.png" alt></a></td> <td>
<td><a href="#"><img src="../../Images/Icones/twitter.png" alt></a></td> <a href="#"><img src="../../Images/Icones/facebook.png" alt></a>
<td><a href="#"><img src="../../Images/Icones/yt.png" alt></a></td> </td>
<td><a href="#"><img src="../../Images/Icones/insta.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> </tr>
</table> </table>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <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> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

103
Assets/Pages/Autres/nous.html
View file

@ -1,74 +1,95 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="nous.html">A propos</a> <a id="nous" href="nous.html">A propos</a>
<a id ="contactN" href="contact.html">Contact</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="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="search_result.html">GO</a> <a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site"> <input type="text" placeholder="Rechercher sur tout le site">
</div> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
<h1>Qui sommes-nous ?</h1> <h1>Qui sommes-nous ?</h1>
<h2>L'équipe :</h2> <h2>L'équipe :</h2>
<table id="equipe"> <table id="equipe">
<tr id="equ"> <tr id="equ">
<td><img src="../../Images/Sprites/benoit.png" alt></td><td><img src="../../Images/Sprites/florian.png" alt></td> <td><img src="../../Images/Sprites/benoit.png" alt></td>
</tr> <td><img src="../../Images/Sprites/florian.png" alt></td>
</table> </tr>
<h2>Nos engagements :</h2> </table>
<ul> <h2>Nos engagements :</h2>
<li><h3>Etre soucieux de la qualité de nos produits</h3></li> <ul>
<li><h3>Vendre des robots à la pointe de la technologie</h3></li> <li>
<li><h3>Respecter l'environnement</h3></li> <h3>Etre soucieux de la qualité de nos produits</h3>
</ul> </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> <h1>Nos réseaux sociaux :</h1>
<table id="reseaux"> <table id="reseaux">
<tr id="res"> <tr id="res">
<td><a href="#"><img src="../../Images/Icones/facebook.png" alt></a></td> <td>
<td><a href="#"><img src="../../Images/Icones/twitter.png" alt></a></td> <a href="#"><img src="../../Images/Icones/facebook.png" alt></a>
<td><a href="#"><img src="../../Images/Icones/yt.png" alt></a></td> </td>
<td><a href="#"><img src="../../Images/Icones/insta.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> </tr>
</table> </table>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <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> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

75
Assets/Pages/Autres/search_result.html
View file

@ -1,36 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="nous.html">A propos</a> <a id="nous" href="nous.html">A propos</a>
<a id ="contactN" href="contact.html">Contact</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="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="search_result.html">GO</a> <a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site..."> <input type="text" placeholder="Rechercher sur tout le site...">
</div> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
<div id="produits"> <div id="produits">
<h1>Résultats pour la recherche "robot guerrier":</h1> <h1>Résultats pour la recherche "robot guerrier":</h1>
<div class="flex-container"> <div class="flex-container">
<div><a href="#"><img src="../../Images/Produits/soldat.png" alt><h3>Robot soldat</h3><h4>200€</h4></a></div> <div>
<div><a href="#"><img src="../../Images/Produits/valkyrie.png" alt><h3>Robot valkyrie</h3><h4>300€</h4></a></div> <a href="#"><img src="../../Images/Produits/soldat.png" alt>
<div><a href="../Produits/terminator.html"><img src="../../Images/Produits/terminator.png" alt><h3>Robot Terminator</h3><h4>50 000€</h4></a></div> <h3>Robot soldat</h3>
<h4>200€</h4>
</a>
</div>
<div>
<a href="#"><img src="../../Images/Produits/valkyrie.png" alt>
<h3>Robot valkyrie</h3>
<h4>300€</h4>
</a>
</div>
<div>
<a href="../Produits/terminator.html"><img src="../../Images/Produits/terminator.png" alt>
<h3>Robot Terminator</h3>
<h4>50 000€</h4>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -38,23 +56,26 @@
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <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> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

76
Assets/Pages/Produits/nao.html
View file

@ -1,42 +1,49 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="../Autres/nous.html">A propos</a> <a id="nous" href="../Autres/nous.html">A propos</a>
<a id ="contactN" href="../Autres/contact.html">Contact</a> <a id="contactN" href="../Autres/contact.html">Contact</a>
<a id ="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a> <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="../Autres/search_result.html">GO</a> <a id="loupe" href="../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> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
<div id="Produit"> <div id="Produit">
<img src="../../Images/Produits/nao.png" alt> <img src="../../Images/Produits/nao.png" alt>
<h1>ROBOT NAO</h1> <h1>ROBOT NAO</h1>
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button> <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
<h2>5 000€</h2> <h2>5 000€</h2>
<h3>Nao est un robot humanoide français crée entre 2005 et 2006 sur Aldebaran ou plutot dans la société Aldebaran. En effet Nao a été conçu dans une start-up française à Paris.A partir de 2007, il va remplacer le robot canidé "Aibo" comme plateforme standard de la robotcup.</h3> <h3>Nao est un robot humanoide français crée entre 2005 et 2006 sur Aldebaran ou plutot dans la société Aldebaran. En effet Nao a été conçu dans une start-up française à Paris.A partir de 2007, il va remplacer le robot canidé "Aibo" comme plateforme
standard de la robotcup.</h3>
</div> </div>
<div id="Carac"> <div id="Carac">
<h1>Caractéristiques du robot :</h1> <h1>Caractéristiques du robot :</h1>
<h2>La plateforme robotique NAO existe en différents modèles qui comportent de 14 à 25 degrés de liberté. Elle est équipée d'une centrale inertielle avec un accéléromètre 3 axes et 2 gyromètres, de 2 sonars utilisant des capteurs à ultrason (émetteurs et récepteurs), de 8 capteurs de pressions résistifs sous les pieds et de 2 bumpers. NAO dispose de 90 minutes d'autonomie.</h2> <h2>La plateforme robotique NAO existe en différents modèles qui comportent de 14 à 25 degrés de liberté. Elle est équipée d'une centrale inertielle avec un accéléromètre 3 axes et 2 gyromètres, de 2 sonars utilisant des capteurs à ultrason (émetteurs
<h2>Le robot dispose également d'un système multimédia évolué incluant quatre microphones (pour la reconnaissance vocale et la localisation de la source sonore), deux haut-parleurs (pour la synthèse vocale), et deux caméras HD (1280 × 960 pixels) (pour la localisation ou la reconnaissance de visage ou d'objet). et récepteurs), de 8 capteurs de pressions résistifs sous les pieds et de 2 bumpers. NAO dispose de 90 minutes d'autonomie.</h2>
Ces deux caméras couleurs, positionnées verticalement, lui permettent de voir une personne de 1,8 m de la tête au pied à 1,5 m. Malheureusement, pour le moment, ces deux caméras ne sont pas activables en même temps.</h2> <h2>Le robot dispose également d'un système multimédia évolué incluant quatre microphones (pour la reconnaissance vocale et la localisation de la source sonore), deux haut-parleurs (pour la synthèse vocale), et deux caméras HD (1280 × 960 pixels)
<h2>La plateforme robotique NAO est livrée avec une suite logicielle qui comporte un outil de programmation graphique (Choregraphe), un simulateur physique (NaoSim) et un kit de développement (SDK) qui permet de développer en Python (scripts des modules Chroregraphe) et C++ (modules embarqués). Des ponts en C#, Java et Matlab existent également. NAO est compatible avec Microsoft Robotics Studio, Cyberbotics Webots et Gostai Studio (Urbi).</h2> (pour la localisation ou la reconnaissance de visage ou d'objet). Ces deux caméras couleurs, positionnées verticalement, lui permettent de voir une personne de 1,8 m de la tête au pied à 1,5 m. Malheureusement, pour le moment, ces deux
caméras ne sont pas activables en même temps.</h2>
<h2>La plateforme robotique NAO est livrée avec une suite logicielle qui comporte un outil de programmation graphique (Choregraphe), un simulateur physique (NaoSim) et un kit de développement (SDK) qui permet de développer en Python (scripts des
modules Chroregraphe) et C++ (modules embarqués). Des ponts en C#, Java et Matlab existent également. NAO est compatible avec Microsoft Robotics Studio, Cyberbotics Webots et Gostai Studio (Urbi).</h2>
</div> </div>
<div id="Coms"> <div id="Coms">
<h1>Commentaires clients :</h1> <h1>Commentaires clients :</h1>
@ -56,39 +63,42 @@
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h1>Nom et Prénom :</h1>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h1>Email :</h1>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h1>Commentaire:</h1>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h1 id="valider">Valider:</h1>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="../Autres/checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <td><a href="../Autres/checkout.html">Votre panier</a></td>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

66
Assets/Pages/Produits/pepper.html
View file

@ -1,38 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body id="produit"> <body id="produit">
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="../Autres/nous.html">A propos</a> <a id="nous" href="../Autres/nous.html">A propos</a>
<a id ="contactN" href="../Autres/contact.html">Contact</a> <a id="contactN" href="../Autres/contact.html">Contact</a>
<a id ="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a> <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="../Autres/search_result.html">GO</a> <a id="loupe" href="../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> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
<div id="Produit"> <div id="Produit">
<img src="../../Images/Produits/pepper.png" alt> <img src="../../Images/Produits/pepper.png" alt>
<h1>ROBOT PEPPER</h1> <h1>ROBOT PEPPER</h1>
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button> <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
<h2>15 000€</h2> <h2>15 000€</h2>
<h3>Pepper est un robot humanoïde, développé par la société SoftBank Robotics (anciennement Aldebaran), capable de reconnaître certaines émotions.</h3> <h3>Pepper est un robot humanoïde, développé par la société SoftBank Robotics (anciennement Aldebaran), capable de reconnaître certaines émotions.</h3>
</div> </div>
<div id="Carac"> <div id="Carac">
<h1>Caractéristiques du robot :</h1> <h1>Caractéristiques du robot :</h1>
<h2>Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran tactile.</h2> <h2>Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran
tactile.
</h2>
<h2>Du haut de ses 1m20, Pepper n’a aucun mal pour percevoir son environnement et engager le dialogue lorsqu’il aperçoit une personne. L'écran tactile sur son torse affiche du contenu pour renforcer les messages et seconder la parole.</h2> <h2>Du haut de ses 1m20, Pepper n’a aucun mal pour percevoir son environnement et engager le dialogue lorsqu’il aperçoit une personne. L'écran tactile sur son torse affiche du contenu pour renforcer les messages et seconder la parole.</h2>
<h2>Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.</h2> <h2>Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.</h2>
</div> </div>
@ -59,39 +64,42 @@
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h1>Nom et Prénom :</h1>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h1>Email :</h1>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h1>Commentaire:</h1>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h1 id="valider">Valider:</h1>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="../Autres/checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <td><a href="../Autres/checkout.html">Votre panier</a></td>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

62
Assets/Pages/Produits/r2d2.html
View file

@ -1,33 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body id="produit"> <body id="produit">
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="../Autres/nous.html">A propos</a> <a id="nous" href="../Autres/nous.html">A propos</a>
<a id ="contactN" href="../Autres/contact.html">Contact</a> <a id="contactN" href="../Autres/contact.html">Contact</a>
<a id ="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a> <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="../Autres/search_result.html">GO</a> <a id="loupe" href="../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> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
<div id="Produit"> <div id="Produit">
<img src="../../Images/Produits/r2d2.png" alt> <img src="../../Images/Produits/r2d2.png" alt>
<h1>ROBOT R2D2</h1> <h1>ROBOT R2D2</h1>
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button> <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
<h2>500€</h2> <h2>500€</h2>
<h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien.</h3> <h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien.</h3>
</div> </div>
<div id="Carac"> <div id="Carac">
@ -54,39 +57,42 @@
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h1>Nom et Prénom :</h1>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h1>Email :</h1>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h1>Commentaire:</h1>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h1 id="valider">Valider:</h1>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="../Autres/checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <td><a href="../Autres/checkout.html">Votre panier</a></td>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

62
Assets/Pages/Produits/terminator.html
View file

@ -1,26 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Kyflo</title> <title>Kyflo</title>
<link rel="stylesheet" type="text/css" href="../../css.css"> <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"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head> </head>
<body id="produit"> <body id="produit">
<nav id="nav"> <nav id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id ="nous" href="../Autres/nous.html">A propos</a> <a id="nous" href="../Autres/nous.html">A propos</a>
<a id ="contactN" href="../Autres/contact.html">Contact</a> <a id="contactN" href="../Autres/contact.html">Contact</a>
<a id ="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a> <a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="../Autres/search_result.html">GO</a> <a id="loupe" href="../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> </div>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button> <button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div id="content">
@ -28,7 +31,7 @@
<img src="../../Images/Produits/terminator.png" alt> <img src="../../Images/Produits/terminator.png" alt>
<h1>ROBOT TERMINATOR</h1> <h1>ROBOT TERMINATOR</h1>
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button> <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
<h2>50 000€</h2> <h2>50 000€</h2>
<h3>Le robot terminator est idéal si vous envisagez de conquérir la planète !</h3> <h3>Le robot terminator est idéal si vous envisagez de conquérir la planète !</h3>
</div> </div>
<div id="Carac"> <div id="Carac">
@ -55,39 +58,42 @@
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h1>Nom et Prénom :</h1>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h1>Email :</h1>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h1>Commentaire:</h1>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h1 id="valider">Valider:</h1>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="../../../index.html">Accueil</a></td> </tr>
<td><a href="../../../index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="../../../index.html">Accueil</a></td>
</tr> <td><a href="../../../index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="../../../index.html#produits">Nos Produits</a></td> </tr>
<td><a href="../Autres/checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td> <td><a href="../../../index.html#produits">Nos Produits</a></td>
</tr> <td><a href="../Autres/checkout.html">Votre panier</a></td>
<td id="contact"><button onclick="window.location.href='../Autres/contact.html'" id="contactB">Nous contacter</button></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

525
Assets/css.css
View file

@ -1,93 +1,99 @@
/*204, 25, 25*/ /*204, 25, 25*/
/*==========================================================================================*/ /*==========================================================================================*/
/*BODY + GENERAL*/ /*BODY + GENERAL*/
body{
background : linear-gradient(to left,#141414, #444444, #141414); body {
background: linear-gradient(to left, #141414, #444444, #141414);
margin: 0; margin: 0;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
#content{ #content {
margin-left: 8vw; margin-left: 8vw;
margin-right: 8vw; margin-right: 8vw;
} }
h1{ h1 {
font-size: 3vw; font-size: 3vw;
color : white; color: white;
} }
body>#bienvenue>h1 {
body>#bienvenue>h1{ font-size: 3vw;
font-size : 3vw; color: white;
color : white;
text-align : center;
}
body>#bienvenue>h2{
font-size : 2vw;
color : lightgrey;
text-align: center; text-align: center;
} }
button#hautPage{ body>#bienvenue>h2 {
font-size: 2vw;
color: lightgrey;
text-align: center;
}
button#hautPage {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
left: 95%; left: 95%;
top: 90%; top: 90%;
padding: 1vw 1vw; padding: 1vw 1vw;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border: 0.1vw solid rgb(204,25,25); border: 0.1vw solid rgb(204, 25, 25);
color: white; color: white;
} }
button#hautPage>img{ button#hautPage>img {
width:2vw; width: 2vw;
} }
/*=====================================*/ /*=====================================*/
/*NAVBAR*/ /*NAVBAR*/
a#kyflo{ a#kyflo {
font-size: 5vw; font-size: 3vw;
color: rgb(204, 25, 25); color: rgb(204, 25, 25);
padding: 0.5vw 1vw; padding: 0.5vw 1vw;
transform: none; transform: none;
border : none; border: none;
} }
a#nous{ a#nous {
border-right: 0.15vw solid rgb(204, 25, 25); border-right: 0.15vw solid rgb(204, 25, 25);
border-left: 0.15vw solid rgb(204, 25, 25); border-left: 0.15vw solid rgb(204, 25, 25);
} }
#panier { #panier {
float : right; float: right;
width : 18.5%; width: 9%;
padding : 1.2vw 1vw; padding: 1.2vw 1vw;
border-left: 0.15vw solid rgb(204, 25, 25); border-left: 0.15vw solid rgb(204, 25, 25);
margin-right: -13%; margin-right: -6%;
} }
#loupe{ #loupe {
float: right; float: right;
display: block; display: block;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
text-align: center; text-align: center;
margin-top: 1.2vw; margin-top: 1.2vw;
margin-right: 2vw; margin-right: 2vw;
padding: 1vw; padding: 0.5vw;
border: 0.1vw solid rgb(204,25,25); border: 0.1vw solid rgb(204, 25, 25);
text-decoration: none; text-decoration: none;
font-size: 2vw; font-size: 1vw;
font-weight: bold; font-weight: bold;
transform: none; transform: none;
border-left: none; border-left: none;
background-color: rgb(204, 25, 25); background-color: rgb(204, 25, 25);
} }
#loupe:hover{ #loupe:hover {
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@ -103,9 +109,9 @@ a#nous{
display: block; display: block;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
text-align: center; text-align: center;
padding: 2.4vw 2vw; padding: 1.8vw 1.4vw;
text-decoration: none; text-decoration: none;
font-size: 2vw; font-size: 1vw;
border-right: 0.15vw solid rgb(204, 25, 25); border-right: 0.15vw solid rgb(204, 25, 25);
font-weight: bold; font-weight: bold;
transform: skew(-0.2rad); transform: skew(-0.2rad);
@ -116,100 +122,107 @@ a#nous{
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
.topnav a#nous:hover, a#contactN:hover { .topnav a#nous:hover,
padding: 2.4vw 3vw; a#contactN:hover {
padding: 1.8vw 2.5vw;
} }
.topnav a#kyflo:hover{ .topnav a#kyflo:hover {
color: white; color: white;
background-color: rgb(22, 22, 22); background-color: rgb(22, 22, 22);
} }
.topnav a#panier:hover{ .topnav a#panier:hover {
background-color: black; background-color: black;
margin-right: -2%;
} }
.topnav input[type=text] { .topnav input[type=text] {
float: right; float: right;
padding: 1vw; padding: 0.5vw;
width: 40%; width: 40%;
border: 0.1vw solid rgb(204, 25, 25); border: 0.1vw solid rgb(204, 25, 25);
font-size: 2vw; font-size: 1vw;
margin-top: 1.2vw; margin-top: 1.2vw;
background-color: rgb(22, 22, 22); background-color: rgb(22, 22, 22);
} }
/*======================================*/ /*======================================*/
/*FOOTER*/ /*FOOTER*/
footer{ footer {
margin-top: 8vw; margin-top: 8vw;
} }
footer>div>table{ footer>div>table {
width: 100%; width: 100%;
border-top : 0.1vw solid rgb(204,25,25); border-top: 0.1vw solid rgb(204, 25, 25);
background-color: rgb(27, 27, 27); background-color: rgb(27, 27, 27);
margin : auto; margin: auto;
padding: 2vw 8vw; padding: 2vw 8vw;
}
a{
text-decoration: none;
color : grey;
} }
a:hover{ a {
color:rgb(204, 25, 25); text-decoration: none;
color: grey;
}
a:hover {
color: rgb(204, 25, 25);
transition-duration: 0.4s; transition-duration: 0.4s;
} }
tr{ tr {
border-bottom: 0.2vw solid red; border-bottom: 0.2vw solid red;
color: white; color: white;
height: 5vw; height: 5vw;
} }
th{ th {
font-size: 2vw; font-size: 2vw;
text-align : left; text-align: left;
border-bottom: 0.1vw solid white; border-bottom: 0.1vw solid white;
} }
th#line{ th#line {
border: none; border: none;
} }
button#contactB{
button#contactB {
margin: auto; margin: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 1.5vw 4vw; padding: 1.5vw 4vw;
font-size: 1.5vw; font-size: 1.5vw;
color : lightgrey; color: lightgrey;
background-color: rgb(27, 27, 27); background-color: rgb(27, 27, 27);
border : 0.1vw solid rgb(204, 25, 25); border: 0.1vw solid rgb(204, 25, 25);
transform: skew(-.312rad); transform: skew(-.312rad);
margin-bottom: 2vw; margin-bottom: 2vw;
} }
button#contactB:hover{ button#contactB:hover {
background-color: rgb(204, 25, 25); background-color: rgb(204, 25, 25);
transition-duration: 0.5s; transition-duration: 0.5s;
border-radius: 1vw; border-radius: 1vw;
} }
td{ td {
width: 20%; width: 20%;
font-size: 1.5vw; font-size: 1.5vw;
} }
td#contact{ td#contact {
width: 100%; width: 100%;
} }
/*======================================*/ /*======================================*/
/*FLEX CONTAINER*/ /*FLEX CONTAINER*/
.flex-container { .flex-container {
@ -217,7 +230,7 @@ td#contact{
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-container > div { .flex-container>div {
background-color: rgba(59, 59, 59, 0.5); background-color: rgba(59, 59, 59, 0.5);
width: 47%; width: 47%;
margin: 1vw; margin: 1vw;
@ -226,266 +239,296 @@ td#contact{
font-size: 30px; font-size: 30px;
} }
.flex-container>div>a>h3{ .flex-container>div>a>h3 {
text-align: left; text-align: left;
font-size : 3vw; font-size: 3vw;
margin-left: 35%; margin-left: 35%;
color : lightgrey; color: lightgrey;
} }
.flex-container>div>a>h4{ .flex-container>div>a>h4 {
text-align: left; text-align: left;
font-size : 2vw; font-size: 2vw;
margin-left: 35%; margin-left: 35%;
color : lightgrey; color: lightgrey;
} }
.flex-container>div>a>img{ .flex-container>div>a>img {
width: 30%; width: 30%;
margin-top: 10%; margin-top: 10%;
} }
/*==========================================*/ /*==========================================*/
/*CONFIRMATION COMMENTAIRE*/ /*CONFIRMATION COMMENTAIRE*/
#Merci>h1{
#Merci>h1 {
font-size: 2.8vw; font-size: 2.8vw;
color : white; color: white;
text-align : center; text-align: center;
margin-top: 7%; margin-top: 7%;
} }
#Merci>h2{ #Merci>h2 {
font-size: 2vw; font-size: 2vw;
text-align : center; text-align: center;
margin-top: 5%; margin-top: 5%;
}
#Merci>h2>a{
color : lightgrey;
text-decoration: none;
}
#Merci>h2>a:hover{
color : rgb(204, 25, 25);
} }
#Merci>img{ #Merci>h2>a {
color: lightgrey;
text-decoration: none;
}
#Merci>h2>a:hover {
color: rgb(204, 25, 25);
}
#Merci>img {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width : 10%; width: 10%;
margin-top: 5%; margin-top: 5%;
float : none; float: none;
} }
/*==========================================*/ /*==========================================*/
/*==========================================*/ /*==========================================*/
/* CSS DESCRIPTION PRODUIT */ /* CSS DESCRIPTION PRODUIT */
/*EN TETE PRODUIT*/ /*EN TETE PRODUIT*/
#Produit{
#Produit {
margin-top: 5%; margin-top: 5%;
} }
#Produit>h1{ #Produit>h1 {
text-align: left; text-align: left;
font-size : 4vw; font-size: 4vw;
margin-left: 25%; margin-left: 25%;
} }
#Produit>h2#barre {
#Produit>h2#barre{
text-decoration: line-through; text-decoration: line-through;
} }
#Produit>h2{ #Produit>h2 {
text-align: left; text-align: left;
font-size : 3vw; font-size: 3vw;
margin-left: 25%; margin-left: 25%;
color : red; color: red;
} }
#Produit>h2#barre{ #Produit>h2#barre {
text-decoration: line-through; text-decoration: line-through;
} }
#Produit>h3{ #Produit>h3 {
text-align: left; text-align: left;
font-size : 1.5vw; font-size: 1.5vw;
margin-left: 25%; margin-left: 25%;
color : lightgrey; color: lightgrey;
} }
#Produit>img{ #Produit>img {
width: 20%; width: 20%;
float: left; float: left;
border: 0.2vw solid rgb(204, 25, 25); border: 0.2vw solid rgb(204, 25, 25);
border-radius: 10px; border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
}
#Produit>button{
background-color: rgba(0, 0, 0, 0.5);
padding : 1vw 1vw;
float : right;
text-align : center;
font-size : 2vw;
margin-right: 10%;
color: white;
border : 0.1vw solid rgb(204, 25, 25);
} }
#Produit>button:hover{ #Produit>button {
background-color: rgba(0, 0, 0, 0.5);
padding: 1vw 1vw;
float: right;
text-align: center;
font-size: 2vw;
margin-right: 10%;
color: white; color: white;
background-color: rgba(204,25,25,0.5); border: 0.1vw solid rgb(204, 25, 25);
}
#Produit>button:hover {
color: white;
background-color: rgba(204, 25, 25, 0.5);
transition-duration: 0.5s; transition-duration: 0.5s;
border-radius: 2vw; border-radius: 2vw;
} }
/*=====================*/ /*=====================*/
/* MOSAIQUE PRODUITS*/ /* MOSAIQUE PRODUITS*/
#produits{ #produits {
border: 0.1vw solid red; border: 0.1vw solid red;
background-color: rgba(0,0,0,0.5); background-color: rgba(0, 0, 0, 0.5);
margin-top: 8vw; margin-top: 8vw;
padding: 2vw 2vw; padding: 2vw 2vw;
} }
img {
img{
width: 30%; width: 30%;
float: left; float: left;
} }
h3,h4{ h3,
h4 {
color: white; color: white;
} }
h3:hover{ h3:hover {
color: rgb(204, 25, 25); color: rgb(204, 25, 25);
transition-duration: 0.2s; transition-duration: 0.2s;
} }
/*================================================*/ /*================================================*/
/*CARACTERISTIQUES PRODUIT*/ /*CARACTERISTIQUES PRODUIT*/
#Carac{
width : 100%; #Carac {
border-top : 0.2vw solid rgb(204,25,25); width: 100%;
border-top: 0.2vw solid rgb(204, 25, 25);
margin-top: 8%; margin-top: 8%;
} }
#Carac>h1{ #Carac>h1 {
font-size: 3vw; font-size: 3vw;
color : white; color: white;
} }
#Carac>h2{ #Carac>h2 {
font-size: 1.5vw; font-size: 1.5vw;
color : lightgrey; color: lightgrey;
} }
/*================================================*/ /*================================================*/
/*COMMENTAIRES CLIENT*/ /*COMMENTAIRES CLIENT*/
#Client{ #Client {
width : 100%; width: 100%;
margin-left: 5%; margin-left: 5%;
} }
#Client>div>h1{ #Client>div>h1 {
font-size : 2vw; font-size: 2vw;
color :white; color: white;
margin-left: 8%; margin-left: 8%;
} }
#Client>div>h2 { #Client>div>h2 {
font-size : 1vw; font-size: 1vw;
color : yellow; color: yellow;
margin-left: 8%; margin-left: 8%;
} }
#Client>div>h3 { #Client>div>h3 {
font-size : 1.5vw; font-size: 1.5vw;
color : lightgrey; color: lightgrey;
margin-left: 8%; margin-left: 8%;
} }
#Client>div>img{ #Client>div>img {
float : left; float: left;
width: 7%; width: 7%;
} }
#Client>div{
#Client>div {
margin-bottom: 3%; margin-bottom: 3%;
border-bottom: 0.1vw solid rgb(134, 134, 134); border-bottom: 0.1vw solid rgb(134, 134, 134);
margin-right: 8%; margin-right: 8%;
} }
/*================================================*/ /*================================================*/
/*ESPACE LAISSER COMMENTAIRE*/ /*ESPACE LAISSER COMMENTAIRE*/
#Coms{
width : 100%; #Coms {
border-top : 0.2vw solid rgb(204,25,25); width: 100%;
border-top: 0.2vw solid rgb(204, 25, 25);
margin-top: 5%; margin-top: 5%;
padding: 2vw 2vw; padding: 2vw 2vw;
} }
#Coms>h1{ #Coms>h1 {
font-size: 3vw; font-size: 3vw;
color: white; color: white;
} }
#Coms>h2{ #Coms>h2 {
font-size: 3vw; font-size: 3vw;
color: white; color: white;
border-top: 0.2vw dashed rgb(204, 25, 25); border-top: 0.2vw dashed rgb(204, 25, 25);
text-align: center; text-align: center;
} }
#Coms{ #Coms {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border: 0.1vw solid rgb(204, 25, 25); border: 0.1vw solid rgb(204, 25, 25);
} }
#Coms>form>h1{ #Coms>form>h1 {
font-size: 1.5vw; font-size: 1.5vw;
color : white; color: white;
} }
input, select { input,
select {
width: 20%; width: 20%;
padding: 1vw 1vw; padding: 1vw 1vw;
font-size: 1.5vw; font-size: 1.5vw;
background-color: rgb(27, 27, 27); background-color: rgb(27, 27, 27);
color: white; color: white;
border : 0.1vw solid rgba(255, 255, 255, 0.5); border: 0.1vw solid rgba(255, 255, 255, 0.5);
border-radius: 3vw; border-radius: 3vw;
} }
input:hover{ input:hover {
border-radius: 0vw; border-radius: 0vw;
transition-duration: 0.5s; transition-duration: 0.5s;
} }
input:valid{ input:valid {
border-radius: 0vw; border-radius: 0vw;
transition-duration: 0.5s; transition-duration: 0.5s;
border : 0.1vw solid rgb(8, 170, 8); border: 0.1vw solid rgb(8, 170, 8);
} }
input[placeholder=Commentaire],
input[placeholder=Commentaire], select, input[placeholder="Question, suggestion, remarque"], select { select,
input[placeholder="Question, suggestion, remarque"],
select {
width: 60%; width: 60%;
padding: 1vw 1vw; padding: 1vw 1vw;
font-size: 1.5vw; font-size: 1.5vw;
} }
input[type=submit], select { input[type=submit],
select {
width: 20%; width: 20%;
padding: 1vw 1vw; padding: 1vw 1vw;
font-size: 1.5vw; font-size: 1.5vw;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border : 0.15vw solid rgb(204,25,25); border: 0.15vw solid rgb(204, 25, 25);
color : white; color: white;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -495,29 +538,33 @@ input[type=submit]:hover {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
background-color: rgba(204, 25, 25, 0.5); background-color: rgba(204, 25, 25, 0.5);
transition-duration: 0.5s; transition-duration: 0.5s;
border : 0.15vw solid rgb(0, 0, 0); border: 0.15vw solid rgb(0, 0, 0);
border-radius: 2vw; border-radius: 2vw;
} }
h1#valider{ h1#valider {
text-align: center; text-align: center;
} }
table>tr>td>input{ table>tr>td>input {
border: 0vw solid white; border: 0vw solid white;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
} }
/*================================================*/ /*================================================*/
/*==========================================================================================*/ /*==========================================================================================*/
/*Slide des promotions*/ /*Slide des promotions*/
div#slider { div#slider {
width: 100%; width: 100%;
max-width: 1920px; max-width: 1920px;
margin: auto; margin: auto;
margin-top: 5%; margin-top: 5%;
} }
div#slider figure { div#slider figure {
@ -528,29 +575,49 @@ div#slider figure {
font-size: 0; font-size: 0;
text-align: left; text-align: left;
} }
div#slider figure img { div#slider figure img {
width: 20%; width: 20%;
height: auto; height: auto;
float: left; float: left;
} }
div#slider { div#slider {
width: 100%; width: 100%;
max-width: 1920px; max-width: 1920px;
overflow: hidden overflow: hidden
} }
@keyframes slidy { @keyframes slidy {
0% {left: 0%;} 0% {
20% {left: 0%;} left: 0%;
25% {left: -100%;} }
45% {left: -100%;} 20% {
50% {left: -200%;} left: 0%;
70% {left: -200%;} }
75% {left: -300%;} 25% {
95% {left: -300%;} left: -100%;
100% {left: -400%;} }
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
} }
div#slider figure { div#slider figure {
position: relative; position: relative;
width: 500%; width: 500%;
@ -562,14 +629,18 @@ div#slider figure {
animation: 16s slidy infinite; animation: 16s slidy infinite;
} }
/*==========================================================================================*/ /*==========================================================================================*/
/*Panier*/ /*Panier*/
form[action="commande.html"]>h1{ form[action="commande.html"]>h1 {
font-size: 1.5vw; font-size: 1.5vw;
} }
form[action="commande.html"]>input[type=text], select { form[action="commande.html"]>input[type=text],
select {
width: 50%; width: 50%;
padding: 1vw 1vw; padding: 1vw 1vw;
font-size: 1.5vw; font-size: 1.5vw;
@ -581,132 +652,96 @@ form[action="commande.html"]>input[type=text], select {
margin-top: 5vw; margin-top: 5vw;
} }
input[type=number], select{ input[type=number],
border : 0.1vw solid white; select {
border: 0.1vw solid white;
} }
table#basket{ table#basket {
margin-top: 5vw; margin-top: 5vw;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
text-align: center; text-align: center;
border: 0.1vw solid rgb(204, 25, 25); border: 0.1vw solid rgb(204, 25, 25);
} }
tr#cent>th{ tr#cent>th {
text-align: center; text-align: center;
} }
td#total{ td#total {
text-align: right; text-align: right;
color: rgb(204,25,25); color: rgb(204, 25, 25);
font-size: 2vw; font-size: 2vw;
font-weight: bold; font-weight: bold;
padding: 0vw 2vw; padding: 0vw 2vw;
} }
/*=================================*/ /*=================================*/
/*CONTACT*/ /*CONTACT*/
#content>h1{ #content>h1 {
text-align: center; text-align: center;
font-size: 3vw; font-size: 3vw;
} }
#content>form>h2{ #content>form>h2 {
font-size: 1.5vw; font-size: 1.5vw;
color: lightgrey; color: lightgrey;
} }
table#reseaux{ table#reseaux {
width: 70%; width: 70%;
margin : auto; margin: auto;
} }
tr#res>td{ tr#res>td {
text-align: center; text-align: center;
} }
tr#res>td>a>img{ tr#res>td>a>img {
float: none; float: none;
} }
/*===========================*/ /*===========================*/
/*QUI SOMMES NOUS*/ /*QUI SOMMES NOUS*/
#content>h1{
#content>h1 {
margin-top: 3vw; margin-top: 3vw;
} }
#content>h2{ #content>h2 {
font-size: 2vw; font-size: 2vw;
color: white; color: white;
text-align: left; text-align: left;
margin-top: 5vw; margin-top: 5vw;
} }
#content>ul>li>h3{ #content>ul>li>h3 {
font-size: 1.5vw; font-size: 1.5vw;
color: lightgrey; color: lightgrey;
} }
table#equipe{ table#equipe {
width: 100%; width: 100%;
} }
tr#equ>td{ tr#equ>td {
text-align: center; text-align: center;
} }
tr#equ>td>img{ tr#equ>td>img {
float: none; float: none;
border: 0.2vw solid rgb(204, 25, 25); border: 0.2vw solid rgb(204, 25, 25);
} }
/*=========================*/ /*=========================*/
/*====================================*/
/*PARTIE RESPONSIVE*/
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 76.5%;
margin: 0;
padding: 2vw;
border: none;
transform: none;
}
.topnav a#panier, a#nous{
border: none;
}
.topnav a#nous:hover, a#contactN:hover{
padding : 2.4vw 2vw;
}
a#loupe{
width: 5%;
border-left: 0.1vw solid rgb(204,25,25)
}
.topnav input[type=text] { /*====================================*/
border: 1px solid rgb(190, 73, 73);
}
.flex-container > div {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.flex-container>div>a>img{
width: 20%;
margin-top: 3%;
margin-left: 10%;
}
.flex-container>div>a>h3, .flex-container>div>a>h4{
margin-left: 50%;
}
#content{
margin-left: 2vw;
margin-right: 2vw;
}
}

1
Assets/resp.css Normal file
View file

@ -0,0 +1 @@
@media screen and (max-width: 600px) {}

112
index.html
View file

@ -1,32 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<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">
<link rel="stylesheet" type="text/css" href="Assets/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 id="nav">
<div class="topnav"> <div class="topnav">
<a id ="kyflo" class="active" href="index.html">KyFlo</a> <a id="kyflo" class="active" href="index.html">KyFlo</a>
<a id ="nous" href="Assets/Pages/Autres/nous.html">A propos</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 id="contactN" href="Assets/Pages/Autres/contact.html">Contact</a>
<a id ="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt></a> <a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt></a>
<a id="loupe" href="Assets/Pages/Autres/search_result.html">GO</a> <a id="loupe" 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> </div>
</nav> </nav>
<div id="bienvenue"> <div id="bienvenue">
<h1>Bienvenue sur le site de KyFlo !</h1> <h1>Bienvenue sur le site de KyFlo !</h1>
<h2>Vendeur de robot depuis 2010 !</h2> <h2>Vendeur de robot depuis 2010 !</h2>
</div> </div>
<div id="slider"> <div id="slider">
<figure> <figure>
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a> <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
@ -41,38 +44,81 @@
<div id="produits"> <div id="produits">
<h1>Tout nos produits :</h1> <h1>Tout nos produits :</h1>
<div class="flex-container"> <div class="flex-container">
<div><a href="#"><img src="Assets/Images/Produits/soldat.png" alt><h3>Robot soldat</h3><h4>200€</h4></a></div> <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> <a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
<div><a href="#"><img src="Assets/Images/Produits/cat.png" alt><h3>Robot chat</h3><h4>80€</h4></a></div> <h3>Robot soldat</h3>
<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> <h4>Rupture de stock</h4>
<div><a href="#"><img src="Assets/Images/Produits/jaune.png" alt><h3>Robot champion</h3><h4>50€</h4></a></div> </a>
<div><a href="#"><img src="Assets/Images/Produits/valkyrie.png" alt><h3>Robot valkyrie</h3><h4>300€</h4></a></div> </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>
<div><a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt><h3>Robot Terminator</h3><h4>50 000€</h4></a></div> <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
</div> <h3>Robot Nao</h3>
<h4>5 000€</h4>
</a>
</div>
<div>
<a href="#produits"><img src="Assets/Images/Produits/cat.png" alt>
<h3>Robot chat</h3>
<h4>Rupture de stock</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/jaune.png" alt>
<h3>Robot champion</h3>
<h4>Rupture de stock</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>Robot Terminator</h3>
<h4>50 000€</h4>
</a>
</div>
</div>
</div> </div>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th> <th>Accès rapide</th>
</tr> <th id="line"></th>
<tr> <th>Une question ?</th>
<td><a href="index.html">Accueil</a></td> </tr>
<td><a href="index.html#slider">Nos Promotions</a></td> <tr>
<td></td> <td><a href="index.html">Accueil</a></td>
</tr> <td><a href="index.html#slider">Nos Promotions</a></td>
<tr> <td></td>
<td><a href="index.html#produits">Nos Produits</a></td> </tr>
<td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td> <tr>
<td id="contact"><button onclick="window.location.href='Assets/Pages/Autres/contact.html'" id="contactB">Nous contacter</button></td> <td><a href="index.html#produits">Nos Produits</a></td>
</tr> <td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
<td id="contact"><button onclick="window.location.href='Assets/Pages/Autres/contact.html'" id="contactB">Nous contacter</button></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>