Design final 1.0
BIN
Images/Icones/facebook.png
Normal file
After Width: | Height: | Size: 7.5 KiB |
BIN
Images/Icones/insta.png
Normal file
After Width: | Height: | Size: 218 KiB |
BIN
Images/Icones/twitter.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
Images/Icones/yt.png
Normal file
After Width: | Height: | Size: 14 KiB |
4
Images/Produits/arrow.svg
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="700">
|
||||||
|
<path d="M350,0 700,700 350,550 0,700" fill="#0C0"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 164 B |
BIN
Images/arrow.png
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
Images/benoit.png
Normal file
After Width: | Height: | Size: 207 KiB |
BIN
Images/florian.png
Normal file
After Width: | Height: | Size: 6.5 KiB |
|
@ -4,6 +4,7 @@
|
||||||
<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 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">
|
||||||
|
@ -12,14 +13,15 @@
|
||||||
<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">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/cart.png" alt></a>
|
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||||
<input type="text" placeholder="Rechercher...">
|
<input type="text" placeholder="Rechercher...">
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<button id="hautPage" onclick="window.location.href='#nav'"><img src="Images/arrow.png" alt></button>
|
||||||
<table>
|
<div id="content">
|
||||||
|
<table id="basket">
|
||||||
<tr>
|
<tr>
|
||||||
<th>Nom Produit</th><th>Quantité</th><th>Prix</th>
|
<th>Nom Produit</th><th>Quantité</th><th>Prix</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -58,10 +60,32 @@
|
||||||
<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>Valider:</h1>
|
<h1 id="valider">Valider:</h1>
|
||||||
<input type="submit" value="Payer">
|
<input type="submit" value="Payer">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -5,13 +5,14 @@
|
||||||
<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 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">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/cart.png" alt></a>
|
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||||
<input type="text" placeholder="Rechercher...">
|
<input type="text" placeholder="Rechercher...">
|
||||||
|
@ -23,5 +24,27 @@
|
||||||
<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>
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -5,23 +5,47 @@
|
||||||
<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 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="#home">KyFlo</a>
|
<a id ="kyflo" class="active" href="#home">KyFlo</a>
|
||||||
<a id ="nous" href="#nous">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/cart.png" alt></a>
|
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||||
<input type="text" placeholder="Rechercher...">
|
<input type="text" placeholder="Rechercher...">
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div id="Merci">
|
<div id="Merci">
|
||||||
<h1>Merci beaucoup pour votre réponse ! Votre commentaire a été pris en compte !</h1>
|
<h1>Merci beaucoup pour votre réponse ! Votre commentaire a été pris en compte !</h1>
|
||||||
<img src="Images/Produits/pouce.png" alt>
|
<img src="Images/Produits/pouce.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>
|
||||||
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
62
contact.html
|
@ -5,8 +5,70 @@
|
||||||
<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 href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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/cart.png" alt></a>
|
||||||
|
<input type="text" placeholder="Rechercher...">
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<button id="hautPage" onclick="window.location.href='#nav'"><img src="Images/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="text" 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>
|
</body>
|
||||||
</html>
|
</html>
|
145
css.css
|
@ -4,6 +4,8 @@
|
||||||
body{
|
body{
|
||||||
background : linear-gradient(to left,#141414, #444444, #141414);
|
background : linear-gradient(to left,#141414, #444444, #141414);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#content{
|
#content{
|
||||||
|
@ -27,6 +29,23 @@ body>#bienvenue>h2{
|
||||||
color : lightgrey;
|
color : lightgrey;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button#hautPage{
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
left: 95%;
|
||||||
|
top: 90%;
|
||||||
|
padding: 1vw 1vw;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
border: 0.1vw solid rgb(204,25,25);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
button#hautPage>img{
|
||||||
|
width:2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*=====================================*/
|
/*=====================================*/
|
||||||
/*NAVBAR*/
|
/*NAVBAR*/
|
||||||
|
|
||||||
|
@ -126,8 +145,12 @@ a#nous{
|
||||||
|
|
||||||
/*======================================*/
|
/*======================================*/
|
||||||
|
|
||||||
|
|
||||||
/*FOOTER*/
|
/*FOOTER*/
|
||||||
|
|
||||||
|
footer{
|
||||||
|
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);
|
||||||
|
@ -212,20 +235,23 @@ td#contact{
|
||||||
|
|
||||||
}
|
}
|
||||||
#Merci>h2>a:hover{
|
#Merci>h2>a:hover{
|
||||||
color : yellow;
|
color : rgb(204, 25, 25);
|
||||||
}
|
}
|
||||||
|
|
||||||
#Merci>img{
|
#Merci>img{
|
||||||
margin-left: 45%;
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
width : 10%;
|
width : 10%;
|
||||||
margin-top: 5%;
|
margin-top: 5%;
|
||||||
|
float : none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*==========================================*/
|
/*==========================================*/
|
||||||
|
|
||||||
/*==========================================*/
|
/*==========================================*/
|
||||||
/* CSS Produits */
|
/* CSS DESCRIPTION PRODUIT */
|
||||||
/*EN TETE PRODUIT*/
|
/*EN TETE PRODUIT*/
|
||||||
#Produit{
|
#Produit{
|
||||||
margin-top: 5%;
|
margin-top: 5%;
|
||||||
|
@ -281,12 +307,25 @@ td#contact{
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.5s;
|
||||||
border-radius: 2vw;
|
border-radius: 2vw;
|
||||||
}
|
}
|
||||||
|
/*=====================*/
|
||||||
|
/* MOSAIQUE PRODUITS*/
|
||||||
|
|
||||||
|
#produits{
|
||||||
|
border: 0.1vw solid red;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
margin-top: 8vw;
|
||||||
|
}
|
||||||
|
|
||||||
table#mosaique{
|
table#mosaique{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table#mosaique>tr{
|
||||||
|
border :0.1vw solid rgb(204, 25, 25);
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
table#mosaique>tr>td>img{
|
table#mosaique>tr>td>img{
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
@ -302,13 +341,13 @@ h3,h4{
|
||||||
|
|
||||||
h3:hover{
|
h3:hover{
|
||||||
color: rgb(204, 25, 25);
|
color: rgb(204, 25, 25);
|
||||||
transition-duration: 0.5s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
/*================================================*/
|
/*================================================*/
|
||||||
/*CARACTERISTIQUES PRODUIT*/
|
/*CARACTERISTIQUES PRODUIT*/
|
||||||
#Carac{
|
#Carac{
|
||||||
width : 100%;
|
width : 100%;
|
||||||
border-top : 0.2vw solid white;
|
border-top : 0.2vw solid rgb(204,25,25);
|
||||||
margin-top: 8%;
|
margin-top: 8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -354,14 +393,14 @@ h3:hover{
|
||||||
}
|
}
|
||||||
#Client>div{
|
#Client>div{
|
||||||
margin-bottom: 3%;
|
margin-bottom: 3%;
|
||||||
border-bottom: 0.1vw solid darkgrey;
|
border-bottom: 0.1vw solid rgb(134, 134, 134);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*================================================*/
|
/*================================================*/
|
||||||
/*ESPACE LAISSER COMMENTAIRE*/
|
/*ESPACE LAISSER COMMENTAIRE*/
|
||||||
#Coms{
|
#Coms{
|
||||||
width : 100%;
|
width : 100%;
|
||||||
border-top : 0.2vw solid white;
|
border-top : 0.2vw solid rgb(204,25,25);
|
||||||
margin-top: 5%;
|
margin-top: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -373,7 +412,7 @@ h3:hover{
|
||||||
#Coms>h2{
|
#Coms>h2{
|
||||||
font-size: 3vw;
|
font-size: 3vw;
|
||||||
color: white;
|
color: white;
|
||||||
border-top: 0.2vw dashed white;
|
border-top: 0.2vw dashed rgb(204, 25, 25);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -408,7 +447,7 @@ input:valid{
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
input[placeholder=Commentaire], select {
|
input[placeholder=Commentaire], 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;
|
||||||
|
@ -419,17 +458,25 @@ input[type=submit], select {
|
||||||
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 white;
|
border : 0.15vw solid rgb(204,25,25);
|
||||||
color : white;
|
color : white;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=submit]:hover {
|
input[type=submit]:hover {
|
||||||
color: black;
|
color: rgb(255, 255, 255);
|
||||||
background-color: rgba(255, 255, 255, 0.856);
|
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-radius: 2vw;
|
border-radius: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1#valider{
|
||||||
|
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);
|
||||||
|
@ -507,4 +554,76 @@ form[action="commande.html"]>input[type=text], select {
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=number], select{
|
||||||
|
border : 0.1vw solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#basket{
|
||||||
|
margin-top: 5vw;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
td#total{
|
||||||
|
text-align: right;
|
||||||
|
color: rgb(204,25,25);
|
||||||
|
font-size: 2vw;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0vw 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
/*=================================*/
|
/*=================================*/
|
||||||
|
|
||||||
|
/*CONTACT*/
|
||||||
|
|
||||||
|
#content>h1{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content>form>h2{
|
||||||
|
font-size: 1.5vw;
|
||||||
|
color: lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#reseaux{
|
||||||
|
width: 70%;
|
||||||
|
margin : auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr#res>td{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr#res>td>a>img{
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
/*===========================*/
|
||||||
|
/*QUI SOMMES NOUS*/
|
||||||
|
#content>h1{
|
||||||
|
margin-top: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content>h2{
|
||||||
|
font-size: 2vw;
|
||||||
|
color: white;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content>ul>li>h3{
|
||||||
|
font-size: 1.5vw;
|
||||||
|
color: lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#equipe{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr#equ>td{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr#equ>td>img{
|
||||||
|
float: none;
|
||||||
|
border: 0.2vw solid rgb(204, 25, 25);
|
||||||
|
}
|
18
index.html
|
@ -5,6 +5,8 @@
|
||||||
<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 href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -12,7 +14,7 @@
|
||||||
<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">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/cart.png" alt></a>
|
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||||
<input type="text" placeholder="Rechercher...">
|
<input type="text" placeholder="Rechercher...">
|
||||||
|
@ -33,6 +35,7 @@
|
||||||
<a href="nao.html"><img src="Images/Promotions/promo1.png" alt></a>
|
<a href="nao.html"><img src="Images/Promotions/promo1.png" alt></a>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="hautPage" onclick="window.location.href='#nav'"><img src="Images/arrow.png" alt></button>
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<div id="produits">
|
<div id="produits">
|
||||||
<h1>Tout nos produits :</h1>
|
<h1>Tout nos produits :</h1>
|
||||||
|
@ -47,12 +50,15 @@
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="#"><img src="Images/Produits/jaune.png" alt><h3>Robot fun</h3><h4>50€</h4></a></td>
|
<td><a href="#"><img src="Images/Produits/jaune.png" alt><h3>Robot fun</h3><h4>50€</h4></a></td>
|
||||||
<td><a href="#"><img src="Images/Produits/valkyrie.png" alt><h3>Robot valkyrie</h3><h4>00€</h4></a></td>
|
<td><a href="#"><img src="Images/Produits/valkyrie.png" alt><h3>Robot valkyrie</h3><h4>300€</h4></a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="#"><img src="Images/Produits/pepper.png" alt><h3>Robot Pepper</h3><h4>15 000€</h4></a></td>
|
||||||
|
<td><a href="#"><img src="Images/Produits/terminator.png" alt><h3>Robot Terminator</h3><h4>50 000€</h4></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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/>
|
|
||||||
<footer>
|
<footer>
|
||||||
<div id="acces">
|
<div id="acces">
|
||||||
<table>
|
<table>
|
||||||
|
@ -62,13 +68,13 @@
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="index.html">Accueil</a></td>
|
<td><a href="index.html">Accueil</a></td>
|
||||||
<td><a href="#slider">Nos Promotions</a></td>
|
<td><a href="index.html#slider">Nos Promotions</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="#produits">Nos Produits</a></td>
|
<td><a href="index.html#produits">Nos Produits</a></td>
|
||||||
<td><a href="checkout.html">Votre panier</a></td>
|
<td><a href="checkout.html">Votre panier</a></td>
|
||||||
<td id="contact"><button id="contactB">Nous contacter</button></td>
|
<td id="contact"><button onclick="window.location.href='contact.html'" id="contactB">Nous contacter</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
30
nao.html
|
@ -5,7 +5,8 @@
|
||||||
<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">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -14,12 +15,13 @@
|
||||||
<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">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/cart.png" alt></a>
|
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||||
<input type="text" placeholder="Rechercher...">
|
<input type="text" placeholder="Rechercher...">
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<button id="hautPage" onclick="window.location.href='#nav'"><img src="Images/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>
|
||||||
|
@ -60,10 +62,32 @@
|
||||||
<h1>Commentaire:</h1>
|
<h1>Commentaire:</h1>
|
||||||
<input type="text" placeholder="Commentaire" required>
|
<input type="text" placeholder="Commentaire" required>
|
||||||
|
|
||||||
<h1>Valider:</h1>
|
<h1 id="valider">Valider:</h1>
|
||||||
<input type="submit" value="Envoyer">
|
<input type="submit" value="Envoyer">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
73
nous.html
Normal file
|
@ -0,0 +1,73 @@
|
||||||
|
<!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 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/cart.png" alt></a>
|
||||||
|
<input type="text" placeholder="Rechercher...">
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<button id="hautPage" onclick="window.location.href='#nav'"><img src="Images/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/benoit.png" alt></td><td><img src="Images/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>
|
28
pepper.html
|
@ -5,6 +5,7 @@
|
||||||
<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 href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body id="produit">
|
<body id="produit">
|
||||||
|
@ -13,12 +14,13 @@
|
||||||
<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">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/cart.png" alt></a>
|
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||||
<input type="text" placeholder="Rechercher...">
|
<input type="text" placeholder="Rechercher...">
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<button id="hautPage" onclick="window.location.href='#nav'"><img src="Images/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>
|
||||||
|
@ -63,10 +65,32 @@
|
||||||
<h1>Commentaire:</h1>
|
<h1>Commentaire:</h1>
|
||||||
<input type="text" placeholder="Commentaire" required>
|
<input type="text" placeholder="Commentaire" required>
|
||||||
|
|
||||||
<h1>Valider:</h1>
|
<h1 id="valider">Valider:</h1>
|
||||||
<input type="submit" value="Envoyer">
|
<input type="submit" value="Envoyer">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
28
r2d2.html
|
@ -5,6 +5,7 @@
|
||||||
<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 href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body id="produit">
|
<body id="produit">
|
||||||
|
@ -13,12 +14,13 @@
|
||||||
<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">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/cart.png" alt></a>
|
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||||
<input type="text" placeholder="Rechercher...">
|
<input type="text" placeholder="Rechercher...">
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<button id="hautPage" onclick="window.location.href='#nav'"><img src="Images/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>
|
||||||
|
@ -58,10 +60,32 @@
|
||||||
<h1>Commentaire:</h1>
|
<h1>Commentaire:</h1>
|
||||||
<input type="text" placeholder="Commentaire" required>
|
<input type="text" placeholder="Commentaire" required>
|
||||||
|
|
||||||
<h1>Valider:</h1>
|
<h1 id="valider">Valider:</h1>
|
||||||
<input type="submit" value="Envoyer">
|
<input type="submit" value="Envoyer">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|