1
0
Fork 0

basket added

This commit is contained in:
Kybo 2019-12-15 19:59:26 +01:00
parent 7669c24573
commit cb80b17e90
32 changed files with 286 additions and 363 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 320 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 153 KiB

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 487 KiB

After

Width:  |  Height:  |  Size: 485 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 273 KiB

After

Width:  |  Height:  |  Size: 271 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

View file

@ -6,25 +6,24 @@
<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.css">
<link rel="stylesheet" type="text/css" href="../../css.css"> <link rel="stylesheet" type="text/css" href="../../css/resp.css">
</head> </head>
<body id="produit"> <body>
<nav>
<nav id="nav">
<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 class="raccourci" href="#nous">A propos</a>
<a id="contactN" href="contact.html">Contact</a> <a class="raccourci" id="borL" href="#contact">Contact</a>
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a> <a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
<a id="loupe" href="search_result.html">GO</a> <a id="go" 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>
</nav> </nav>
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
<div id="content"> <div class="title">
<h1>Votre panier :</h1>
</div>
<div class="content">
<table id="basket"> <table id="basket">
<tr id="cent"> <tr id="cent">
<th>Nom Produit</th> <th>Nom Produit</th>
@ -45,36 +44,32 @@
<td id="total" COLSPAN=3>TOTAL : 6 000€</td> <td id="total" COLSPAN=3>TOTAL : 6 000€</td>
</tr> </tr>
</table> </table>
</div>
<div class="title">
<h1>Livraison :</h1>
</div>
<div class="content">
<div id="livraison"> <div id="livraison">
<h1>Coordonnées de livraison :</h1> <h2>Coordonnées de livraison :</h2>
<form action="commande.html"> <form action="commande.html">
<h1>Nom et prénom :</h1> <table>
<input type="text" required> <tr>
<td>Nom et prénom :<input type="text" required></td><td>Ville :<input type="text" required></td>
<h1>Adresse ligne 1 :</h1> </tr>
<input type="text" placeholder="Rue, voie, boite postale, nom de société" required> <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>
<h1>Adresse ligne 2 :</h1> </tr>
<input type="text" placeholder="Batiment, Etage, Lieu-Dit"> <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>
<h1>Ville :</h1> </tr>
<input type="text" required> </table>
<h2 id="valid">Valider:</h2>
<h1>État / Région / Canton :</h1>
<input type="text" required>
<h1>Code postal :</h1>
<input type="text" required>
<h1>Numéro de téléphone :</h1>
<input type="tel" required>
<h1 id="valider">Valider:</h1>
<input type="submit" value="Payer"> <input type="submit" value="Payer">
</form> </form>
</div> </div>
</div> </div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>

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 id="nav">
<div class="topnav">
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a id="nous" href="nous.html">A propos</a>
<a id="contactN" href="contact.html">Contact</a>
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site">
</div>
</nav>
<button id="hautPage" onclick="window.location.href='#nav'"><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>

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 id="nav">
<div class="topnav">
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a class="raccourci" href="#nous">A propos</a>
<a class="raccourci" href="contact.html">Contact</a>
<a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
<a id="loupe" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site">
</div>
</nav>
<button id="hautPage" onclick="window.location.href='#nav'"><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>

View file

@ -12,7 +12,6 @@ body {
z-index: 2; z-index: 2;
} }
img { img {
width: 30%; width: 30%;
float: left; float: left;
@ -45,6 +44,10 @@ a.raccourci {
border-left: 0.15vw solid rgb(0, 0, 0); border-left: 0.15vw solid rgb(0, 0, 0);
} }
#borL{
border-left: none;
}
#panier { #panier {
float: right; float: right;
@ -84,14 +87,15 @@ a#panier>h3{
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.topnav { nav {
overflow: hidden; overflow: hidden;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
position: fixed; position: fixed;
z-index: 1; z-index: 1;
width: 100%;
} }
.topnav a { nav a {
float: left; float: left;
display: block; display: block;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
@ -104,26 +108,26 @@ a#panier>h3{
transform: skew(-0.2rad); transform: skew(-0.2rad);
} }
.topnav a:hover { nav a:hover {
background-color: rgb(206, 206, 206); background-color: rgb(206, 206, 206);
color: black; color: black;
} }
.topnav .raccourci:hover, nav .raccourci:hover,
.raccourci:hover { .raccourci:hover {
padding: 1.8vw 2.5vw; padding: 1.8vw 2.5vw;
} }
.topnav a#kyflo:hover { nav a#kyflo:hover {
background-color :transparent; background-color :transparent;
} }
.topnav a#panier:hover { nav a#panier:hover {
background-color: rgb(206, 206, 206); background-color: rgb(206, 206, 206);
margin-right: -2%; margin-right: -2%;
} }
.topnav input[type=text] { nav input[type=text] {
float: right; float: right;
padding: 0.5vw; padding: 0.5vw;
color: black; color: black;
@ -209,9 +213,10 @@ div#slider figure {
/* TITRE */ /* TITRE */
.title h1{ .title h1{
font-size: 3vw; font-size: 4vw;
padding: 6vw; padding: 6vw;
margin: 0; margin: 0;
color: white;
text-align: center; text-align: center;
} }
@ -281,7 +286,7 @@ div#slider figure {
} }
.flex-container div:hover{ .flex-container div:hover{
border: 0.3vw solid lightseagreen; border: 0.3vw solid grey;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@ -331,7 +336,39 @@ div#slider figure {
} }
/*==========================================================*/ /*==========================================================*/
/* QUI SOMMES NOUS ? */
div#nous .flex-container {
justify-content: center;
}
div#nous div{
border: none;
text-align: left;
}
div#nous .flex-container img{
width: 40%;
margin-left: 35%;
}
div#nous .flex-container ul {
font-size: 2vw;
color: rgb(61, 61, 61);
}
div#nous h2 {
font-size: 3vw;
color: black;
text-align: center;
}
div#nous .flex-container div#engagements{
border-left: 0.2vw solid grey;
}
/*================================*/
/*FOOTER*/ /*FOOTER*/
@ -342,7 +379,7 @@ footer {
footer>div>table { footer>div>table {
width: 100%; width: 100%;
background-color: #ddd; background-color: rgb(255, 255, 255);
margin: auto; margin: auto;
padding: 2vw 8vw; padding: 2vw 8vw;
} }
@ -353,13 +390,11 @@ a {
} }
a:hover { a:hover {
color: white; color: rgb(0, 0, 0);
transition-duration: 0.4s; transition-duration: 0.4s;
} }
tr { tr {
border-bottom: 0.2vw solid red;
color: white;
height: 5vw; height: 5vw;
} }
@ -371,7 +406,7 @@ th {
} }
th#line{ th#line{
border: none; border-bottom: none;
} }
button#contactB { button#contactB {
@ -643,45 +678,107 @@ table>tr>td>input {
/*Panier*/ /*Panier*/
form[action="commande.html"]>h1 {
font-size: 1.5vw;
}
form[action="commande.html"]>input[type=text],
select {
width: 50%;
padding: 1vw 1vw;
font-size: 1.5vw;
}
#livraison {
background-color: rgba(0, 0, 0, 0.5);
border: 0.1vw solid white;
margin-top: 5vw;
}
input[type=number],
select {
border: 0.1vw solid white;
}
table#basket{ table#basket{
margin-top: 5vw; background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(0, 0, 0, 0.5);
text-align: center; text-align: center;
border: 0.1vw solid white; width: 100%;
border: 0.2vw solid rgb(0, 0, 0);
border-collapse: collapse;
} }
tr#cent>th { table#basket th{
border: 0.1vw solid grey;
font-size: 2.5vw;
text-align: center; text-align: center;
} }
td#total { table#basket tr{
line-height: 5vh;
}
table#basket td{
border: 0.1vw solid grey;
font-size: 1.5vw;
}
table#basket td#total{
text-align: right; text-align: right;
color: white; font-size: 2.5vw;
font-size: 2vw;
font-weight: bold; font-weight: bold;
padding: 0vw 2vw; color: black;
padding-right: 2vw;
} }
table#basket input{
text-align: center;
font-size: 2vw;
width: 10%;
padding: 0.3vw;
}
table#basket input:valid{
border: 0.1vw solid grey;
}
/*LIVRAISON*/
#livraison table{
width: 100%;
}
#livraison input{
width: 50%;
display: block;
margin: auto;
font-size: 2vw;
background-color: transparent;
border: none;
border-bottom: 0.2vw solid grey;
padding: 0.5vw;
margin-top: 0.5vh;
margin-bottom: 1.5vh;
}
#livraison h2{
text-align: left;
font-size: 2.5vw;
}
#livraison h2#valid{
text-align: center;
}
#livraison td{
font-size: 1.5vw;
color: rgb(0, 0, 0);
text-align: center;
}
#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;
color: black;
}
#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;
}
/*===============================================*/ /*===============================================*/

View file

@ -16,10 +16,10 @@
} }
/*===========NAVBAR===========*/ /*===========NAVBAR===========*/
.topnav{ nav{
position: static; position: static;
} }
.topnav input[type=text] { nav input[type=text] {
float: none; float: none;
display: block; display: block;
text-align: left; text-align: left;
@ -30,7 +30,7 @@
transform: none; transform: none;
font-size: 3vw; font-size: 3vw;
} }
.topnav a { nav a {
float: none; float: none;
display: block; display: block;
text-align: left; text-align: left;
@ -42,37 +42,37 @@
font-size: 3vw; font-size: 3vw;
} }
.topnav a#kyflo{ nav a#kyflo{
font-size: 8vw; font-size: 8vw;
text-align: center; text-align: center;
} }
.topnav a#panier, nav a#panier,
a.raccourci { a.raccourci {
border: none; border: none;
} }
.topnav a#panier{ nav a#panier{
width: 20%; width: 20%;
margin-right: -14%; margin-right: -14%;
} }
.topnav a#panier:hover{ nav a#panier:hover{
margin-right: -14%; margin-right: -14%;
} }
.topnav a.raccourci:hover, nav a.raccourci:hover,
a.raccourci:hover { a.raccourci:hover {
padding: 2vw 2vw; padding: 2vw 2vw;
} }
.topnav a#go { nav a#go {
width: 5%; width: 5%;
padding: 1vw; padding: 1vw;
font-size: 3vw; font-size: 3vw;
border: 0.1vw solid rgb(0, 0, 0) border: 0.1vw solid rgb(0, 0, 0)
} }
.topnav a#panier>h3{ nav a#panier>h3{
display:none; display:none;
} }
/*===========FLEX CONTAINER===========*/ /*===========FLEX CONTAINER===========*/
.flex-container>div { .flex-container>div {
width: 40%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -94,6 +94,20 @@
margin-right: 2vw; margin-right: 2vw;
} }
/*=======QUI SOMMES NOUS======*/
div#nous .flex-container img{
width: 30%;
}
div#nous .flex-container div{
width: 40%;
}
div#nous .flex-container div#engagements{
width: 80%;
border: none;
}
/*========FOOTER=========*/ /*========FOOTER=========*/
th { th {
@ -105,30 +119,6 @@
font-size: 2vw; font-size: 2vw;
} }
/*=======FLEX CONTAINER========*/
.flex-container {
justify-content: center;
}
.flex-container>div {
width: 80%;
margin: 1vw;
line-height: 5vw;
}
.flex-container>div>a>h3 {
font-size: 3vw;
}
.flex-container>div>a>h4 {
font-size: 2.5vw;
}
.flex-container>div>a>img {
width: 20%;
margin-top: 5%;
}
/*=====Produits=======*/ /*=====Produits=======*/
#Produit>h3 { #Produit>h3 {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

View file

@ -5,24 +5,20 @@
<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.css">
<link rel="stylesheet" type="text/css" href="Assets/resp.css"> <link rel="stylesheet" type="text/css" href="Assets/css/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>
<div class="topnav">
<a id="kyflo" class="active" href="index.html">KyFlo</a> <a id="kyflo" class="active" href="index.html">KyFlo</a>
<a class="raccourci" href="Assets/Pages/Autres/nous.html">A propos</a> <a class="raccourci" href="#nous">A propos</a>
<a class="raccourci" href="#contact">Contact</a> <a class="raccourci" id="borL" href="#contact">Contact</a>
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a> <a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
<a id="go" href="Assets/Pages/Autres/search_result.html">GO</a> <a id="go" 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>
</nav> </nav>
<div id="bienvenue"> <div id="bienvenue">
@ -39,12 +35,13 @@
<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>
</figure> </figure>
</div> </div>
<div id="produits">
<div class="title"> <div class="title">
<h1>Tout nos produits :</h1> <h1>Tout nos produits :</h1>
</div> </div>
<div class="flex-container"> <div class="flex-container">
<div> <div>
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt> <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
<h2>Robot Nao</h2> <h2>Robot Nao</h2>
@ -78,7 +75,7 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<div id="contact"> <div id="contact">
<div class="title"> <div class="title">
<h1>Nous contacter :</h1> <h1>Nous contacter :</h1>
@ -100,6 +97,34 @@
</form> </form>
</div> </div>
</div> </div>
<div id="nous">
<div class="title">
<h1>Qui sommes nous ?</h1>
</div>
<div class="flex-container">
<div>
<img src="Assets/Images/Sprites/benoit.png" alt>
</div>
<div>
<img src="Assets/Images/Sprites/florian.png" alt>
</div>
<div id="engagements">
<h2>Nos engagements :</h2>
<ul>
<li>
Etre soucieux de la qualité de nos produits
</li>
<li>
Vendre des robots à la pointe de la technologie
</li>
<li>
Respecter l'environnement
</li>
</ul>
</div>
</div>
</div>
<footer> <footer>