IUT_Informatique/KyFlo
Archived
1
0
Fork 0
Code Activity

flommit

Browse source
This commit is contained in:
KEZEL BENOIT p1907091 2019-12-13 17:13:30 +01:00
parent e6e4c4ae0d
commit dd52d190fa
11 changed files with 345 additions and 284 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Assets/Images/Icones/arrow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
Assets/Images/Icones/cart.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
Assets/Images/Produits/Thumbs.db
View file

Binary file not shown.

BIN
Assets/Images/bg2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
Assets/Images/smart-watch-889639_1280.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 364 KiB

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

@ -13,93 +13,105 @@
<body>
<nav>
<div class="topnav">
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id="nous" href="nous.html">A propos</a>
<a id="contactN" href="contact.html">Contact</a>
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
<a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site">
<header class="header">
<a href="#" class="logo">KYFLO</a>
<input class="menu-btn" type="checkbox" id="menu-btn"/>
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li><input type="text" placeholder="Rechercher..."></li>
<li><a href="#nous">A propos</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="Assets/Pages/Autres/checkout.html">Panier</a></li>
</ul>
</header>
<div class="title">
<h1>Votre panier :</h1>
</div>
<div class="content">
<table id="basket">
<tr id="cent">
<th>Nom Produit</th>
<th>Quantité</th>
<th>Prix</th>
</tr>
<tr>
<td>R2D2</td>
<td><input type="text" value="2"></td>
<td>500 €</td>
</tr>
<tr>
<td>Nao</td>
<td><input type="text" value="1"></td>
<td>5 000€</td>
</tr>
<tr>
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
</tr>
</table>
</div>
</nav>
<button id="hautPage" onclick="window.location.href='#kyflo'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content">
<table id="basket">
<tr id="cent">
<th>Nom Produit</th>
<th>Quantité</th>
<th>Prix</th>
</tr>
<tr>
<td>R2D2</td>
<td><input type="text" value="2"></td>
<td>500 €</td>
</tr>
<tr>
<td>Nao</td>
<td><input type="text" value="1"></td>
<td>5 000€</td>
</tr>
<tr>
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
</tr>
</table>
<div class="title">
<h1>Livraison :</h1>
</div>
<div class="content">
<div id="livraison">
<h1>Coordonnées de livraison :</h1>
<form action="commande.html">
<h1>Nom et prénom :</h1>
<input type="text" required>
<h1>Adresse ligne 1 :</h1>
<input type="text" placeholder="Rue, voie, boite postale, nom de société" required>
<h1>Adresse ligne 2 :</h1>
<input type="text" placeholder="Batiment, Etage, Lieu-Dit">
<h1>Ville :</h1>
<input type="text" required>
<h1>État / Région / Canton :</h1>
<input type="text" required>
<h1>Code postal :</h1>
<input type="text" required>
<h1>Numéro de téléphone :</h1>
<input type="tel" required>
<h1 id="valider">Valider:</h1>
<table>
<tr>
<td>Nom et prénom :<input type="text" required></td><td>Ville :<input type="text" required></td>
</tr>
<tr>
<td>Adresse ligne 1 :<input type="text" placeholder="Rue, voie, boite postale, nom de société" required></td><td>Code postal :<input type="text" required></td>
</tr>
<tr>
<td>Adresse ligne 2 :<input type="text" placeholder="Batiment, Etage, Lieu-Dit"></td><td>Numéro de téléphone :<input type="tel" required></td>
</tr>
</table>
<h2>Valider:</h2>
<input type="submit" value="Payer">
</form>
</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>
<div class="footer">
<table>
<tbody>
<tr>
<th>Accès rapide</th><th></th>
</tr>
<tr>
<td><a href="#">Accueil</a></td>
<td><a href="#slider">Nos Promotions</a></td>
</tr>
<tr>
<td><a href="#produits">Nos Produits</a></td>
<td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
</tr>
</tbody>
</table>
<h1>Nos réseaux sociaux :</h1>
<table id="reseaux">
<tr id="res">
<td>
<a href="#"><img src="../../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>
</body>

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

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

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

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

182
Assets/css.css
View file

@ -5,9 +5,7 @@
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("Images/bg.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background: linear-gradient(to left, rgb(4, 64, 141), rgb(70, 1, 87));
}
@ -224,7 +222,7 @@ div#slider figure {
.title{
padding: 5vw 1vw;
background-color: rgba(255, 255, 255, 0.548);
background-color: rgba(255, 255, 255, 0.377);
}
.title>h1{
@ -255,7 +253,7 @@ div#slider figure {
}
.top{
padding: 5vw 1vw;
padding: 3vw 1vw;
}
.top>h1{
@ -310,3 +308,177 @@ div#slider figure {
#nous ul {
list-style-type: none;
}
/* CONTACT */
#contact input{
width: 30%;
display: block;
margin: auto;
font-size: 20px;
background-color: transparent;
border: none;
border-bottom: 0.2vw solid grey;
padding: 0.5vw;
}
#contact input:focus{
background-color: rgba(0,0,0,0.1);
border-bottom : 0.2vw solid rgb(16, 133, 172);
transition-duration: 0.3s;
}
#contact input:valid{
border-bottom : 0.2vw solid rgb(24, 216, 40);
transition-duration: 0.3s;
}
#contact input[type=submit]{
border: 0.2vw solid grey;
width: 10%;
}
#contact input[type=submit]:hover{
background-color: grey;
color: white;
transition-duration: 0.3s;
}
#contact h2{
text-align: center;
}
/* FOOTER */
.footer {
background-color: #ddd;
width: 100%;
margin-top: 5%;
padding: 1vw;
}
.footer table{
width: 100%;
}
.footer tr{
line-height: 10vh;
}
.footer th{
text-align: left;
font-size: 40px;
border-bottom: 0.2vw solid grey;
}
.footer td{
font-size: 30px;
color: grey;
}
.footer h1{
text-align: center;
font-size: 40px;
margin-bottom: 5vh;
}
.footer table#reseaux img{
width: 20%;
display: block;
margin: auto;
}
table#basket{
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
width: 100%;
border: 0.2vw solid rgb(0, 0, 0);
border-collapse: collapse;
}
table#basket th{
border: 0.1vw solid grey;
font-size: 30px;
}
table#basket tr{
line-height: 5vh;
font-size: 20px;
}
table#basket td{
border: 0.1vw solid grey;
}
table#basket td#total{
text-align: right;
font-size: 30px;
color: black;
padding-right: 2vw;
}
table#basket input{
text-align: center;
font-size: 20px;
width: 10%;
padding: 0.3vw;
}
/*LIVRAISON*/
#livraison table{
width: 100%;
}
#livraison input{
width: 50%;
display: block;
margin: auto;
font-size: 20px;
background-color: transparent;
border: none;
border-bottom: 0.2vw solid grey;
padding: 0.5vw;
margin-top: 0.5vh;
margin-bottom: 1.5vh;
}
#livraison h1{
text-align: left;
font-size: 30px;
}
#livraison td{
font-size: 20px;
color: rgb(0, 0, 0);
text-align: center;
}
#livraison h2{
font-size: 20px;
text-align : center;
margin-top: 3vh;
}
#livraison input:focus{
background-color: rgba(0,0,0,0.1);
border-bottom : 0.2vw solid rgb(16, 133, 172);
transition-duration: 0.3s;
}
#livraison input:valid{
border-bottom : 0.2vw solid rgb(24, 216, 40);
transition-duration: 0.3s;
}
#livraison input[type=submit]{
border: 0.2vw solid grey;
width: 10%;
display: block;
margin: auto;
}
#livraison input[type=submit]:hover{
background-color: grey;
color: white;
transition-duration: 0.3s;
}

2
Assets/resp.css
View file

@ -1,5 +1,5 @@
@media (min-width:750px){
/* NAVBAR */
/*NAVBAR*/
.header{
position: fixed;
}

87
index.html
View file

@ -20,8 +20,8 @@
<ul class="menu">
<li><input type="text" placeholder="Rechercher..."></li>
<li><a href="#nous">A propos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Panier</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="Assets/Pages/Autres/checkout.html">Panier</a></li>
</ul>
</header>
@ -40,17 +40,19 @@
</figure>
</div>
<div class="title">
<h1>Tous nos produits :</h1>
</div>
<div id="produits">
<div class="title">
<h1>Tous nos produits :</h1>
</div>
<div class="flex-container">
<div class="ok"><a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt><p>Nao</p></a></div>
<div ><div class="rupt">Rutpure de stock</div><a href="#"><img class="out" src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></a></div>
<div class="ok"><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/pepper.png" alt><p>Pepper</p></a></div>
<div><div class="rupt">Rupture de stock</div><a href="#"><img class="out" src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></a></div>
<div class="ok"><div class="spec">N°1 des ventes</div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></a></div>
<div class="ok"><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></a></div>
<div class="flex-container">
<div class="ok"><a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt><p>Nao</p></a></div>
<div ><div class="rupt">Rutpure de stock</div><a href="#"><img class="out" src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></a></div>
<div class="ok"><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/pepper.png" alt><p>Pepper</p></a></div>
<div><div class="rupt">Rupture de stock</div><a href="#"><img class="out" src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></a></div>
<div class="ok"><div class="spec">N°1 des ventes</div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></a></div>
<div class="ok"><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></a></div>
</div>
</div>
<div id="nous">
@ -71,7 +73,66 @@
</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><br>
<div id="contact">
<div class="title">
<h1>Nous contacter :</h1>
</div>
<div class="content">
<form action="commentaire.html">
<h2>Nom et Prénom :</h2>
<input type="text" required>
<h2>Email :</h2>
<input type="email" required>
<h2>Question :</h2>
<input type="text" placeholder="Question, suggestion, remarque" required>
<h2>Valider:</h2>
<input type="submit" value="Envoyer">
</form>
</div>
</div>
<div class="footer">
<table>
<tbody>
<tr>
<th>Accès rapide</th><th></th>
</tr>
<tr>
<td><a href="#">Accueil</a></td>
<td><a href="#slider">Nos Promotions</a></td>
</tr>
<tr>
<td><a href="#produits">Nos Produits</a></td>
<td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
</tr>
</tbody>
</table>
<h1>Nos réseaux sociaux :</h1>
<table id="reseaux">
<tr id="res">
<td>
<a href="#"><img src="Assets/Images/Icones/facebook.png" alt></a>
</td>
<td>
<a href="#"><img src="Assets/Images/Icones/twitter.png" alt></a>
</td>
<td>
<a href="#"><img src="Assets/Images/Icones/yt.png" alt></a>
</td>
<td>
<a href="#"><img src="Assets/Images/Icones/insta.png" alt></a>
</td>
</tr>
</table>
</div>
</body>
</html>