pushfezrg
This commit is contained in:
KEZEL BENOIT p1907091
commit
c6776e20ba
Binary file not shown.
BIN
Assets/Images/Icones/cart.png
Normal file
BIN
Assets/Images/Icones/cart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 486 KiB After Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 271 KiB After Width: | Height: | Size: 271 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 364 KiB |
|
|
@ -1,78 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Kyflo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../css.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../resp.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../css/css.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/resp.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="#nous">A propos</a>
|
||||
<a class="raccourci" id="borL" href="#contact">Contact</a>
|
||||
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="go" href="Assets/Pages/Autres/search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
<div class="title">
|
||||
<h1>Votre panier :</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<table id="basket">
|
||||
<tr id="cent">
|
||||
<th>Nom Produit</th>
|
||||
<th>Quantité</th>
|
||||
<th>Prix</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>R2D2</td>
|
||||
<td><input type="text" value="2"></td>
|
||||
<td>500 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nao</td>
|
||||
<td><input type="text" value="1"></td>
|
||||
<td>5 000€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Livraison :</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="livraison">
|
||||
<h2>Coordonnées de livraison :</h2>
|
||||
<form action="commande.html">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Nom et prénom :<input type="text" required></td><td>Ville :<input type="text" required></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>R2D2</td>
|
||||
<td><input type="text" value="2"></td>
|
||||
<td>500 €</td>
|
||||
<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>Nao</td>
|
||||
<td><input type="text" value="1"></td>
|
||||
<td>5 000€</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="total" COLSPAN=3>TOTAL : 6 000€</td>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Livraison :</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="livraison">
|
||||
<h1>Coordonnées de livraison :</h1>
|
||||
<form action="commande.html">
|
||||
<table>
|
||||
<h2 id="valid">Valider:</h2>
|
||||
<input type="submit" value="Payer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Nom et prénom :<input type="text" required></td><td>Ville :<input type="text" required></td>
|
||||
<th>Accès rapide</th>
|
||||
<th id="line"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adresse ligne 1 :<input type="text" placeholder="Rue, voie, boite postale, nom de société" required></td><td>Code postal :<input type="text" required></td>
|
||||
<td><a href="../../../index.html">Accueil</a></td>
|
||||
<td><a href="../../../index.html#slider">Nos Promotions</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adresse ligne 2 :<input type="text" placeholder="Batiment, Etage, Lieu-Dit"></td><td>Numéro de téléphone :<input type="tel" required></td>
|
||||
<td><a href="../../../index.html#produits">Nos Produits</a></td>
|
||||
<td><a href="checkout.html">Votre panier</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>Valider:</h2>
|
||||
<input type="submit" value="Payer">
|
||||
</form>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<<<<<<< HEAD
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
|
@ -114,6 +131,9 @@
|
|||
</footer>
|
||||
</body>
|
||||
|
||||
=======
|
||||
</footer>
|
||||
>>>>>>> 75deceed14d3e757e09d579692a2bc221bdad696
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -12,12 +12,12 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<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><h3>Panier</h3></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>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<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><h3>Panier</h3></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>
|
||||
|
|
|
|||
|
|
@ -14,19 +14,19 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<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><h3>Panier</h3></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='#kyflo'"><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="produits">
|
||||
<h1>Résultats pour la recherche "robot guerrier":</h1>
|
||||
|
|
|
|||
|
|
@ -15,29 +15,33 @@
|
|||
<body>
|
||||
|
||||
|
||||
<nav>
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a id="nous" href="../Autres/nous.html">A propos</a>
|
||||
<a id="contactN" href="../Autres/contact.html">Contact</a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
|
||||
<a id="loupe" href="../Autres/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>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
<div id="content">
|
||||
<div id="Produit">
|
||||
<img src="../../Images/Produits/nao.png" alt>
|
||||
<h1>ROBOT NAO</h1>
|
||||
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
|
||||
<h2>5 000€</h2>
|
||||
<h3>Nao est un robot assistant qui vous aidera dans vos taches quotidiennes</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 id="Carac">
|
||||
<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>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). 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>
|
||||
|
|
|
|||
|
|
@ -14,24 +14,24 @@
|
|||
<body id="produit">
|
||||
|
||||
|
||||
<nav>
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a id="nous" href="../Autres/nous.html">A propos</a>
|
||||
<a id="contactN" href="../Autres/contact.html">Contact</a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
|
||||
<a id="loupe" href="../Autres/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>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
<div id="content">
|
||||
<div id="Produit">
|
||||
<img src="../../Images/Produits/pepper.png" alt>
|
||||
<h1>ROBOT PEPPER</h1>
|
||||
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
|
||||
<h2>15 000€</h2>
|
||||
<h3>Pepper est un robot humanoïde, développé par la société SoftBank Robotics, 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 id="Carac">
|
||||
<h1>Caractéristiques du robot :</h1>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<body id="produit">
|
||||
|
||||
|
||||
<nav>
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a id="nous" href="../Autres/nous.html">A propos</a>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<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><h3>Panier</h3></button>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
<div id="content">
|
||||
<div id="Produit">
|
||||
<img src="../../Images/Produits/r2d2.png" alt>
|
||||
|
|
|
|||
|
|
@ -14,17 +14,17 @@
|
|||
<body id="produit">
|
||||
|
||||
|
||||
<nav>
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a id="nous" href="../Autres/nous.html">A propos</a>
|
||||
<a id="contactN" href="../Autres/contact.html">Contact</a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
|
||||
<a id="panier" href="../Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
|
||||
<a id="loupe" href="../Autres/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>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
|
||||
<div id="content">
|
||||
<div id="Produit">
|
||||
|
|
|
|||
483
Assets/css.css
483
Assets/css.css
|
|
@ -1,483 +0,0 @@
|
|||
html{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: linear-gradient(to left, rgb(4, 64, 141), rgb(70, 1, 87));
|
||||
|
||||
}
|
||||
|
||||
/*NAVBAR*/
|
||||
|
||||
a{
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header{
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
|
||||
.header ul{
|
||||
margin: 0;
|
||||
padding : 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.header ul a{
|
||||
display: block;
|
||||
padding: 20px;
|
||||
border-right: 1px solid #aaa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header ul a:hover{
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.header ul input{
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
padding: 0.1vw;
|
||||
margin-left: 3%;
|
||||
border: none;
|
||||
border-bottom: 0.2vw solid grey;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.header ul input:focus{
|
||||
border-bottom: 0.2vw solid rgb(20, 178, 231);
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
float: left;
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
text-decoration : none;
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.header .menu {
|
||||
clear: both;
|
||||
max-height: 0;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.header .menu-icon{
|
||||
padding: 28px 20px;
|
||||
position: relative;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header .menu-icon .nav-icon{
|
||||
background: #333;
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 18px;
|
||||
position: relative;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
|
||||
.header .menu-icon .nav-icon:before{
|
||||
background: #333;
|
||||
content:"";
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 5px;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.header .menu-icon .nav-icon:after{
|
||||
background: #333;
|
||||
content:"";
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease-out;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.header .menu-btn{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked ~ .menu{
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked ~ .menu-icon .nav-icon{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked ~ .menu-icon .nav-icon:before{
|
||||
transform: rotate(-45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header .menu-btn:checked ~ .menu-icon .nav-icon:after{
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/*======================================== 1990 652*/
|
||||
|
||||
/*Slide des promotions*/
|
||||
|
||||
div#slider {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div#slider figure {
|
||||
position: relative;
|
||||
width: 500%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#slider figure img {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div#slider {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
@keyframes slidy {
|
||||
0% {left: 0%;}
|
||||
20% {left: 0%;}
|
||||
25% {left: -100%;}
|
||||
45% {left: -100%;}
|
||||
50% {left: -200%;}
|
||||
70% {left: -200%;}
|
||||
75% {left: -300%;}
|
||||
95% {left: -300%;}
|
||||
100% {left: -400%;}
|
||||
}
|
||||
|
||||
div#slider figure {
|
||||
position: relative;
|
||||
width: 500%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
animation: 16s slidy infinite;
|
||||
}
|
||||
/*============================================*/
|
||||
|
||||
/* TOUT NOS PRODUITS*/
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
background-color: rgb(234, 234, 234);
|
||||
}
|
||||
|
||||
.flex-container>div {
|
||||
box-shadow: 0.3vw 0.3vw 2px grey;
|
||||
width: 40%;
|
||||
margin: 1vw;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.flex-container>div>a>img{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.flex-container>div>a>p{
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.flex-container .ok:hover a>img{
|
||||
width: 100%;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.title{
|
||||
padding: 5vw 1vw;
|
||||
background-color: rgba(255, 255, 255, 0.377);
|
||||
}
|
||||
|
||||
.title>h1{
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.spec{
|
||||
text-align: left;
|
||||
font-size: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.651);
|
||||
color: black;
|
||||
width: 100%;
|
||||
}
|
||||
.rupt{
|
||||
text-align: center;
|
||||
float: right;
|
||||
z-index: 3;
|
||||
background-color: rgba(0, 0, 0, 0.829);
|
||||
color: red;
|
||||
width : 100%;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.out{
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.top{
|
||||
padding: 3vw 1vw;
|
||||
}
|
||||
|
||||
.top>h1{
|
||||
color: white;
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.top>h2{
|
||||
font-size: 50px;
|
||||
color: rgb(204, 204, 204);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*============================================*/
|
||||
|
||||
/* QUI SOMMES NOUS ?*/
|
||||
.content {
|
||||
background-color: rgb(234, 234, 234);
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
|
||||
#nous table{
|
||||
width: 100%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
#nous img{
|
||||
display: block;
|
||||
margin: auto;
|
||||
border-radius: 1vw;
|
||||
width: 30%;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
#nous h2{
|
||||
font-size: 40px;
|
||||
padding-top: 2vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#nous h3{
|
||||
color: rgb(53, 53, 53);
|
||||
}
|
||||
|
||||
#nous td{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#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%;
|
||||
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;
|
||||
}
|
||||
798
Assets/css/css.css
Normal file
798
Assets/css/css.css
Normal file
|
|
@ -0,0 +1,798 @@
|
|||
/*BODY + GENERAL*/
|
||||
|
||||
html{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to left, rgb(10, 1, 92), rgb(0, 82, 50));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #ddd;
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2vw;
|
||||
color: white;
|
||||
}
|
||||
/*=====================================*/
|
||||
|
||||
/*NAVBAR*/
|
||||
|
||||
a#kyflo {
|
||||
font-size: 3vw;
|
||||
color: rgb(0, 0, 0);
|
||||
padding: 0.5vw 1vw;
|
||||
transform: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
a.raccourci {
|
||||
border-right: 0.15vw solid rgb(0, 0, 0);
|
||||
border-left: 0.15vw solid rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
#borL{
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
|
||||
#panier {
|
||||
float: right;
|
||||
width: 9%;
|
||||
padding: 1.2vw 1vw;
|
||||
border-left: 0.15vw solid rgb(0, 0, 0);
|
||||
margin-right: -6%;
|
||||
}
|
||||
|
||||
a#panier>h3{
|
||||
margin-top :0.5vw;
|
||||
margin-bottom: 0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#go {
|
||||
float: right;
|
||||
display: block;
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
margin-top: 1.2vw;
|
||||
margin-right: 2vw;
|
||||
padding: 0.5vw;
|
||||
border: 0.1vw solid rgb(0, 0, 0);
|
||||
text-decoration: none;
|
||||
font-size: 1vw;
|
||||
font-weight: bold;
|
||||
transform: none;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
#go:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: rgb(0, 0, 0);
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: hidden;
|
||||
background-color: rgb(255, 255, 255);
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
animation: 1s down;
|
||||
}
|
||||
|
||||
@keyframes down {
|
||||
0%{margin-top: -10%}
|
||||
100%{margin-top: 0%}
|
||||
}
|
||||
|
||||
nav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
padding: 1.8vw 1.4vw;
|
||||
text-decoration: none;
|
||||
font-size: 1vw;
|
||||
border-right: 0.15vw solid white;
|
||||
font-weight: bold;
|
||||
transform: skew(-0.2rad);
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: rgb(206, 206, 206);
|
||||
color: black;
|
||||
}
|
||||
|
||||
nav .raccourci:hover,
|
||||
.raccourci:hover {
|
||||
padding: 1.8vw 2.5vw;
|
||||
}
|
||||
|
||||
nav a#kyflo:hover {
|
||||
background-color :transparent;
|
||||
}
|
||||
|
||||
nav a#panier:hover {
|
||||
background-color: rgb(206, 206, 206);
|
||||
margin-right: -2%;
|
||||
}
|
||||
|
||||
nav input[type=text] {
|
||||
float: right;
|
||||
padding: 0.5vw;
|
||||
color: black;
|
||||
width: 40%;
|
||||
border: none;
|
||||
border-bottom: 0.1vw solid rgb(0, 0, 0);
|
||||
font-size: 1vw;
|
||||
margin-top: 1.2vw;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
/*================================================*/
|
||||
|
||||
/*TOP*/
|
||||
div#bienvenue{
|
||||
padding: 4vw;
|
||||
animation: 1s right;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
body>#bienvenue>h1 {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes right{
|
||||
0% {margin-left: -150%}
|
||||
100% {margin-left: 0%}
|
||||
}
|
||||
|
||||
body>#bienvenue>h2 {
|
||||
font-size: 2vw;
|
||||
color: lightgrey;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*=================*/
|
||||
|
||||
/*Slide des promotions*/
|
||||
|
||||
div#slider {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div#slider figure {
|
||||
position: relative;
|
||||
width: 500%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#slider figure img {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div#slider {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
@keyframes slidy {
|
||||
0% {left: 0%;}
|
||||
20% {left: 0%;}
|
||||
25% {left: -100%;}
|
||||
45% {left: -100%;}
|
||||
50% {left: -200%;}
|
||||
70% {left: -200%;}
|
||||
75% {left: -300%;}
|
||||
95% {left: -300%;}
|
||||
100% {left: -400%;}
|
||||
}
|
||||
|
||||
div#slider figure {
|
||||
position: relative;
|
||||
width: 500%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
animation: 16s slidy infinite;
|
||||
}
|
||||
/*======================================*/
|
||||
|
||||
/* TITRE */
|
||||
.title h1{
|
||||
font-size: 4vw;
|
||||
padding: 6vw;
|
||||
margin: 0;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title{
|
||||
background-color: rgba(255, 255, 255, 0.4)
|
||||
}
|
||||
/*================================================*/
|
||||
|
||||
/*FLEX CONTAINER*/
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #ddd;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-container>div {
|
||||
width: 30%;
|
||||
margin: 1vw;
|
||||
text-align: center;
|
||||
line-height: 3vw;
|
||||
border-bottom: 0.2vw solid grey;
|
||||
border-right: 0.2vw solid grey;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.flex-container>div>a>h2 {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.flex-container>div>a>img {
|
||||
float: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.flex-container div:hover img{
|
||||
width: 60%;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.out img{
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.out h1{
|
||||
font-size: 2vw;
|
||||
color: white;
|
||||
background-color: black;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flex-container div.out:hover img{
|
||||
width: 50%;
|
||||
cursor: not-allowed;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.flex-container div.out:hover{
|
||||
cursor: not-allowed;
|
||||
border: none;
|
||||
border-bottom: 0.2vw solid grey;
|
||||
border-right: 0.2vw solid grey;
|
||||
}
|
||||
|
||||
.flex-container div:hover{
|
||||
border: 0.3vw solid grey;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
/*==========================================*/
|
||||
|
||||
/* CONTACT*/
|
||||
|
||||
#contact input{
|
||||
width: 50%;
|
||||
color: black;
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 2vw;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 0.2vw solid rgb(90, 90, 90);
|
||||
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: 30%;
|
||||
}
|
||||
|
||||
#contact input[type=submit]:hover{
|
||||
background-color: grey;
|
||||
color: white;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
#contact h2{
|
||||
margin: 0;
|
||||
padding: 2vw;
|
||||
font-size: 2vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*==========================================================*/
|
||||
/* 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 {
|
||||
margin-top: 8vw;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer>div>table {
|
||||
width: 100%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin: auto;
|
||||
padding: 2vw 8vw;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgb(90, 90, 90);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(0, 0, 0);
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 5vw;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 2vw;
|
||||
color: black;
|
||||
text-align: left;
|
||||
border-bottom: 0.1vw solid rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
th#line{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
button#contactB {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5vw 4vw;
|
||||
font-size: 1.5vw;
|
||||
color: rgb(90, 90, 90);
|
||||
background-color: transparent;
|
||||
border: 0.1vw solid rgb(90, 90, 90);
|
||||
transform: skew(-.312rad);
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
button#contactB:hover {
|
||||
background-color: rgb(90, 90, 90);
|
||||
color: white;
|
||||
transition-duration: 0.5s;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 20%;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
td#contact {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*======================================*/
|
||||
|
||||
/*CONFIRMATION COMMENTAIRE*/
|
||||
|
||||
#Merci>h1 {
|
||||
font-size: 2.8vw;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
}
|
||||
|
||||
#Merci>h2 {
|
||||
font-size: 2vw;
|
||||
text-align: center;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
#Merci>h2>a {
|
||||
color: lightgrey;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#Merci>h2>a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#Merci>img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 10%;
|
||||
margin-top: 5%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/*==========================================*/
|
||||
|
||||
/* CSS DESCRIPTION PRODUIT */
|
||||
/*EN TETE PRODUIT*/
|
||||
|
||||
#Produit {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
#Produit>h1 {
|
||||
text-align: left;
|
||||
font-size: 4vw;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
#Produit>h2#barre {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#Produit>h2 {
|
||||
text-align: left;
|
||||
font-size: 3vw;
|
||||
margin-left: 25%;
|
||||
color: red;
|
||||
}
|
||||
|
||||
#Produit>h2#barre {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#Produit>h3 {
|
||||
text-align: left;
|
||||
font-size: 1.5vw;
|
||||
margin-left: 25%;
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
#Produit>img {
|
||||
width: 20%;
|
||||
float: left;
|
||||
border: 0.2vw solid white;
|
||||
border-radius: 10px;
|
||||
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 white;
|
||||
}
|
||||
|
||||
#Produit>button:hover {
|
||||
color: white;
|
||||
background-color: rgba(204, 25, 25, 0.5);
|
||||
transition-duration: 0.5s;
|
||||
border-radius: 2vw;
|
||||
}
|
||||
/*=====================*/
|
||||
|
||||
/*CARACTERISTIQUES PRODUIT*/
|
||||
|
||||
#Carac {
|
||||
width: 100%;
|
||||
border-top: 0.2vw solid white;
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
#Carac>h1 {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#Carac>h2 {
|
||||
font-size: 1.5vw;
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
/*================================================*/
|
||||
|
||||
/*COMMENTAIRES CLIENT*/
|
||||
|
||||
#Client {
|
||||
width: 100%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
#Client>div>h1 {
|
||||
font-size: 2vw;
|
||||
color: white;
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
#Client>div>h2 {
|
||||
font-size: 1vw;
|
||||
color: yellow;
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
#Client>div>h3 {
|
||||
font-size: 1.5vw;
|
||||
color: lightgrey;
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
#Client>div>img {
|
||||
float: left;
|
||||
width: 7%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#Client>div {
|
||||
margin-bottom: 3%;
|
||||
border-bottom: 0.1vw solid rgb(134, 134, 134);
|
||||
margin-right: 8%;
|
||||
}
|
||||
|
||||
/*================================================*/
|
||||
|
||||
/*ESPACE LAISSER COMMENTAIRE*/
|
||||
|
||||
#Coms {
|
||||
width: 100%;
|
||||
border-top: 0.2vw solid white;
|
||||
margin-top: 5%;
|
||||
padding: 2vw 2vw;
|
||||
}
|
||||
|
||||
#Coms>h1 {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#Coms>h2 {
|
||||
font-size: 3vw;
|
||||
color: white;
|
||||
border-top: 0.2vw dashed white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#Coms {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 0.1vw solid white;
|
||||
}
|
||||
|
||||
#Coms>form>h1 {
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input:valid {
|
||||
border-radius: 0vw;
|
||||
transition-duration: 0.5s;
|
||||
border: 0.1vw solid rgb(8, 170, 8);
|
||||
}
|
||||
|
||||
input[placeholder=Commentaire],
|
||||
select,
|
||||
input[placeholder="Question, suggestion, remarque"],
|
||||
select {
|
||||
width: 60%;
|
||||
padding: 1vw 1vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
input[type=submit],
|
||||
select {
|
||||
width: 20%;
|
||||
padding: 1vw 1vw;
|
||||
font-size: 1.5vw;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 0.15vw solid white;
|
||||
color: white;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
input[type=submit]:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: rgba(204, 25, 25, 0.5);
|
||||
transition-duration: 0.5s;
|
||||
border: 0.15vw solid rgb(0, 0, 0);
|
||||
border-radius: 2vw;
|
||||
}
|
||||
|
||||
h1#valider {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table>tr>td>input {
|
||||
border: 0vw solid white;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
|
||||
/*================================================*/
|
||||
|
||||
/*Panier*/
|
||||
|
||||
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: 2.5vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
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;
|
||||
font-size: 2.5vw;
|
||||
font-weight: bold;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/*===============================================*/
|
||||
133
Assets/css/resp.css
Normal file
133
Assets/css/resp.css
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
@media screen and (max-width: 600px) {
|
||||
|
||||
/*===========GENERAL===========*/
|
||||
h1{
|
||||
font-size: 3vw;
|
||||
}
|
||||
body>#bienvenue>h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
body>#bienvenue>h2 {
|
||||
font-size: 2vw;
|
||||
}
|
||||
button#hautPage{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/*===========NAVBAR===========*/
|
||||
nav{
|
||||
position: static;
|
||||
}
|
||||
nav input[type=text] {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 76.5%;
|
||||
border: 0.1vw solid black;
|
||||
margin: 0;
|
||||
padding: 2vw;
|
||||
transform: none;
|
||||
font-size: 3vw;
|
||||
}
|
||||
nav a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2vw;
|
||||
border: none;
|
||||
transform: none;
|
||||
font-size: 3vw;
|
||||
|
||||
}
|
||||
nav a#kyflo{
|
||||
font-size: 8vw;
|
||||
text-align: center;
|
||||
}
|
||||
nav a#panier,
|
||||
a.raccourci {
|
||||
border: none;
|
||||
}
|
||||
nav a#panier{
|
||||
width: 20%;
|
||||
margin-right: -14%;
|
||||
}
|
||||
nav a#panier:hover{
|
||||
margin-right: -14%;
|
||||
}
|
||||
nav a.raccourci:hover,
|
||||
a.raccourci:hover {
|
||||
padding: 2vw 2vw;
|
||||
}
|
||||
nav a#go {
|
||||
width: 5%;
|
||||
padding: 1vw;
|
||||
font-size: 3vw;
|
||||
border: 0.1vw solid rgb(0, 0, 0)
|
||||
}
|
||||
nav a#panier>h3{
|
||||
display:none;
|
||||
}
|
||||
/*===========FLEX CONTAINER===========*/
|
||||
.flex-container>div {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.flex-container>div>a>img {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.flex-container div:hover img{
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.flex-container div.out:hover img{
|
||||
width: 20%;
|
||||
cursor: not-allowed;;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-left: 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=========*/
|
||||
|
||||
th {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 20%;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
|
||||
/*=====Produits=======*/
|
||||
#Produit>h3 {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
#Carac>h2 {
|
||||
font-size: 2.5vw;
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@media (min-width:750px){
|
||||
/*NAVBAR*/
|
||||
.header{
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.header li{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header li a{
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.header .menu{
|
||||
clear: none;
|
||||
float: right;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.header .menu-icon{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header ul input{
|
||||
border-bottom: 0.1vw solid grey;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
|
||||
/*============================================*/
|
||||
|
||||
/* TOUT NOS PRODUITS*/
|
||||
.flex-container>div {
|
||||
width: 20%;
|
||||
margin: 1vw;
|
||||
}
|
||||
|
||||
.flex-container>div>a>img{
|
||||
width: 80%;
|
||||
}
|
||||
/*============================================*/
|
||||
}
|
||||
157
index.html
157
index.html
|
|
@ -5,32 +5,28 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Kyflo</title>
|
||||
<link rel="stylesheet" type="text/css" href="Assets/css.css">
|
||||
<link rel="stylesheet" type="text/css" href="Assets/resp.css">
|
||||
<link rel="stylesheet" type="text/css" href="Assets/css/css.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">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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="top">
|
||||
|
||||
<nav>
|
||||
<a id="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a class="raccourci" href="#nous">A propos</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="go" href="Assets/Pages/Autres/search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
|
||||
<div id="bienvenue">
|
||||
<h1>Bienvenue sur le site de KyFlo !</h1>
|
||||
<h2>Vendeur de robot depuis 2005</h2>
|
||||
<h2>Vendeur de robot depuis 2010 !</h2>
|
||||
</div>
|
||||
|
||||
<div id="slider">
|
||||
<div id="slider">
|
||||
<figure>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Promotions/promo2.png" alt></a>
|
||||
|
|
@ -38,42 +34,48 @@
|
|||
<a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Promotions/promo4.png" alt></a>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="produits">
|
||||
<div class="title">
|
||||
<h1>Tous nos produits :</h1>
|
||||
<h1>Tout 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>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
|
||||
<h2>Robot Nao</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div class="out">
|
||||
<h1>Rupture de stock</h1>
|
||||
<a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
|
||||
<h2>Robot soldat</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
|
||||
<h2>Robot r2d2</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div class="out">
|
||||
<h1>Rupture de stock</h1>
|
||||
<a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
|
||||
<h2>Robot valkyrie</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
|
||||
<h2>Robot Pepper</h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
|
||||
<h2>Terminator</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nous">
|
||||
<div class="title">
|
||||
<h1>Qui sommes nous ?</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2>L'équipe :</h2>
|
||||
<table id="equipe">
|
||||
<tr id="equ">
|
||||
<td><img src="Assets/Images/Sprites/benoit.png" alt></td>
|
||||
<td><h2>Nos engagements :</h2><h3>Etre soucieux de la qualité de nos produits</h3><h3>Vendre des robots à la pointe de la technologie</h3><h3>Respecter l'environnement</h3></td>
|
||||
<td><img src="Assets/Images/Sprites/florian.png" alt></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="contact">
|
||||
<div class="title">
|
||||
<h1>Nous contacter :</h1>
|
||||
|
|
@ -95,6 +97,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<<<<<<< HEAD
|
||||
<footer>
|
||||
<table>
|
||||
<tbody>
|
||||
|
|
@ -132,6 +135,60 @@
|
|||
</table>
|
||||
|
||||
<footer>
|
||||
=======
|
||||
<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>
|
||||
<div id="acces">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Accès rapide</th>
|
||||
<th id="line"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="index.html">Accueil</a></td>
|
||||
<td><a href="index.html#slider">Nos Promotions</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="index.html#produits">Nos Produits</a></td>
|
||||
<td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
>>>>>>> 75deceed14d3e757e09d579692a2bc221bdad696
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Reference in a new issue