adding css on articles
This commit is contained in:
Kybo
parent
6082ca1649
commit
0238e85d80
5 changed files with 287 additions and 324 deletions
|
|
@ -13,8 +13,6 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<nav>
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
|
|
@ -23,56 +21,74 @@
|
|||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
<div id="content">
|
||||
|
||||
<div class="title">
|
||||
<h1>Résumé</h1>
|
||||
</div>
|
||||
|
||||
<div class="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 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>
|
||||
<div id="Coms">
|
||||
<h1>Commentaires clients :</h1>
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Isabelle Dunand</h1>
|
||||
<h3>Superbe robot, il est tout à fait fonctionnel !</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Richard Mauron</h1>
|
||||
<h3>Excellent ! Très bonne qualité, j'ai adoré le programmer !</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Laissez nous un commentaire :</h2>
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h1>Nom et Prénom :</h1>
|
||||
<input type="text" required>
|
||||
|
||||
<h1>Email :</h1>
|
||||
<input type="email" required>
|
||||
|
||||
<h1>Commentaire:</h1>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h1 id="valider">Valider:</h1>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
<h3>Nao est un robot humanoide qui vous assiste dans vos tâches quotidiennes</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Caractéristiques techniques</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="Carac">
|
||||
<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>
|
||||
|
||||
<div class="title">
|
||||
<h1>Commentaires clients</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Isabelle Dunand</h1>
|
||||
<h2>Superbe robot, il est tout à fait fonctionnel !</h2>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Richard Mauron</h1>
|
||||
<h2>Excellent ! Très bonne qualité, j'ai adoré le programmer !</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Laissez nous un commentaire :</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
<h2>Email :</h2>
|
||||
<input type="email" required>
|
||||
|
||||
<h2>Commentaire:</h2>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h2 id="valider">Valider:</h2>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,10 @@
|
|||
<link rel="stylesheet" type="text/css" href="../../css/resp.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body id="produit">
|
||||
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
|
|
@ -22,58 +21,76 @@
|
|||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
<div id="content">
|
||||
|
||||
<div class="title">
|
||||
<h1>Résumé</h1>
|
||||
</div>
|
||||
|
||||
<div class="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 (anciennement Aldebaran), capable de reconnaître certaines émotions.</h3>
|
||||
</div>
|
||||
<div id="Carac">
|
||||
<h1>Caractéristiques du robot :</h1>
|
||||
<h2>Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran
|
||||
tactile.
|
||||
</h2>
|
||||
<h2>Du haut de ses 1m20, Pepper n’a aucun mal pour percevoir son environnement et engager le dialogue lorsqu’il aperçoit une personne. L'écran tactile sur son torse affiche du contenu pour renforcer les messages et seconder la parole.</h2>
|
||||
<h2>Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.</h2>
|
||||
</div>
|
||||
<div id="Coms">
|
||||
<h1>Commentaires clients :</h1>
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Michel Dirate</h1>
|
||||
<h3>Livraison très longue ! Cependant, produit de qualité.</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Ines Foubi</h1>
|
||||
<h3>Bon robot, ma famille l'adore !</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Robert Ritar</h1>
|
||||
<h3>Robot très serviable.</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Laissez nous un commentaire :</h2>
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h1>Nom et Prénom :</h1>
|
||||
<input type="text" required>
|
||||
|
||||
<h1>Email :</h1>
|
||||
<input type="email" required>
|
||||
|
||||
<h1>Commentaire:</h1>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h1 id="valider">Valider:</h1>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
<h3>Pepper est un robot humanoïde, développé par la société SoftBank Robotics (anciennement Aldebaran), capable de reconnaître certaines émotions</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Caractéristiques techniques</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="Carac">
|
||||
<h2>Pepper est le premier robot humanoïde au monde capable d'identifier les visages et les principales émotions humaines. Pepper a été conçu pour interagir avec les humains de la façon la plus naturelle possible à travers le dialogue et son écran
|
||||
tactile.</h2>
|
||||
<h2>Du haut de ses 1m20, Pepper n’a aucun mal pour percevoir son environnement et engager le dialogue lorsqu’il aperçoit une personne. L'écran tactile sur son torse affiche du contenu pour renforcer les messages et seconder la parole.</h2>
|
||||
<h2>Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.</h2>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Commentaires clients</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Michel Dirate</h1>
|
||||
<h2>Livraison très longue ! Cependant, produit de qualité.</h2>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Ines Foubi</h1>
|
||||
<h2>Bon robot, ma famille l'adore !</h2>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Robert Ritar</h1>
|
||||
<h2>Robot très serviable.</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Laissez nous un commentaire :</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
<h2>Email :</h2>
|
||||
<input type="email" required>
|
||||
|
||||
<h2>Commentaire:</h2>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h2 id="valider">Valider:</h2>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,11 @@
|
|||
<link rel="stylesheet" type="text/css" href="../../css/resp.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body id="produit">
|
||||
|
||||
|
||||
<nav>
|
||||
<body>
|
||||
<nav>
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
<a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
|
||||
|
|
@ -22,51 +21,70 @@
|
|||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
<div id="content">
|
||||
|
||||
<div class="title">
|
||||
<h1>Résumé</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="Produit">
|
||||
<img src="../../Images/Produits/r2d2.png" alt>
|
||||
<h1>ROBOT R2D2</h1>
|
||||
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
|
||||
<h2>500€</h2>
|
||||
<h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien.</h3>
|
||||
</div>
|
||||
<div id="Carac">
|
||||
<h1>Caractéristiques du robot :</h1>
|
||||
<h2>R2D2 est équipé de la dernière technologie de streaming musical pour vour lire toutes vos musiques préférées</h2>
|
||||
<h2>Son design tout droit tiré de la série vous plongera dans l'univers Star Wars à coup sur !</h2>
|
||||
<h2>Il possède une reconnaissance vocale très optimale qui vous permettras de le piloter rien qu'a la voix !</h2>
|
||||
</div>
|
||||
<div id="Coms">
|
||||
<h1>Commentaires clients :</h1>
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Patrick Busson</h1>
|
||||
<h3>Petit robot sympathique, très utile au quotidien !</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Clara Soufu</h1>
|
||||
<h3>Grande fan de Star Wars, j'adore ce petit robot personnel !</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Laissez nous un commentaire :</h2>
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h1>Nom et Prénom :</h1>
|
||||
<input type="text" required>
|
||||
|
||||
<h1>Email :</h1>
|
||||
<input type="email" required>
|
||||
|
||||
<h1>Commentaire:</h1>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h1 id="valider">Valider:</h1>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
<h2>5 000€</h2>
|
||||
<h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Caractéristiques techniques</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="Carac">
|
||||
<h2>R2D2 est équipé de la dernière technologie de streaming musical pour vour lire toutes vos musiques préférées</h2>
|
||||
<h2>Son design tout droit tiré de la série vous plongera dans l'univers Star Wars à coup sur !</h2>
|
||||
<h2>Il possède une reconnaissance vocale très optimale qui vous permettras de le piloter rien qu'a la voix !</h2>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Commentaires clients</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Patrick Busson</h1>
|
||||
<h2>Petit robot sympathique, très utile au quotidien !</h2>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Clara Soufu</h1>
|
||||
<h2>Grande fan de Star Wars, j'adore ce petit robot personnel !</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Laissez nous un commentaire :</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
<h2>Email :</h2>
|
||||
<input type="email" required>
|
||||
|
||||
<h2>Commentaire:</h2>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h2 id="valider">Valider:</h2>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,10 @@
|
|||
<link rel="stylesheet" type="text/css" href="../../css/resp.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body id="produit">
|
||||
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
|
||||
<a class="raccourci" href="../../../index.html#nous">A propos</a>
|
||||
|
|
@ -22,9 +21,12 @@
|
|||
<a id="go" href="search_result.html">GO</a>
|
||||
<input type="text" placeholder="Rechercher sur tout le site...">
|
||||
</nav>
|
||||
<button id="hautPage" onclick="window.location.href='#nav'"><img src="../../Images/Icones/arrow.png" alt></button>
|
||||
|
||||
<div id="content">
|
||||
<div class="title">
|
||||
<h1>Résumé</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="Produit">
|
||||
<img src="../../Images/Produits/terminator.png" alt>
|
||||
<h1>ROBOT TERMINATOR</h1>
|
||||
|
|
@ -32,42 +34,57 @@
|
|||
<h2>50 000€</h2>
|
||||
<h3>Le robot terminator est idéal si vous envisagez de conquérir la planète !</h3>
|
||||
</div>
|
||||
<div id="Carac">
|
||||
<h1>Caractéristiques du robot :</h1>
|
||||
<h2>Terminator est équipé de nombreux lazers et est doté d'une IA des plus avancée.</h2>
|
||||
<h2>Son design humanoide lui permet de se fondre dans la masse une fois habillé !</h2>
|
||||
<h2>Il peut controler l'esprit des autres personnes grâce aux ondes qu'il emet.</h2>
|
||||
</div>
|
||||
<div id="Coms">
|
||||
<h1>Commentaires clients :</h1>
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Aude Fousi</h1>
|
||||
<h3>Robot trop effrayant et trop cher !</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Pierre Tarte</h1>
|
||||
<h3>Superbe robot, je vais pouvoir mettre mon plan de coup d'état a éxécution...</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Caractéristiques techniques</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="Carac">
|
||||
<h2>Terminator est équipé de nombreux lazers et est doté d'une IA des plus avancée.</h2>
|
||||
<h2>Son design humanoide lui permet de se fondre dans la masse une fois habillé !</h2>
|
||||
<h2>Il peut controler l'esprit des autres personnes grâce aux ondes qu'il emet.</h2>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Commentaires clients</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div id="Client">
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarF.png" alt>
|
||||
<h1>Aude Fousi</h1>
|
||||
<h2>Robot trop effrayant et trop cher !</h2>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../Images/Icones/avatarH.png" alt>
|
||||
<h1>Pierre Tarte</h1>
|
||||
<h2>Superbe robot, je vais pouvoir mettre mon plan de coup d'état a éxécution...</h2>
|
||||
</div>
|
||||
<h2>Laissez nous un commentaire :</h2>
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h1>Nom et Prénom :</h1>
|
||||
<input type="text" required>
|
||||
|
||||
<h1>Email :</h1>
|
||||
<input type="email" required>
|
||||
|
||||
<h1>Commentaire:</h1>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h1 id="valider">Valider:</h1>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>Laissez nous un commentaire :</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" id="com">
|
||||
<form action="../Autres/commentaire.html">
|
||||
<h2>Nom et Prénom :</h2>
|
||||
<input type="text" required>
|
||||
|
||||
<h2>Email :</h2>
|
||||
<input type="email" required>
|
||||
|
||||
<h2>Commentaire:</h2>
|
||||
<input type="text" placeholder="Commentaire" required>
|
||||
|
||||
<h2 id="valider">Valider:</h2>
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -323,39 +323,6 @@ div#slider figure {
|
|||
|
||||
/* 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;
|
||||
|
|
@ -510,11 +477,13 @@ td#contact {
|
|||
|
||||
#Produit {
|
||||
margin-top: 5%;
|
||||
padding-bottom: 5vw;
|
||||
}
|
||||
|
||||
#Produit>h1 {
|
||||
text-align: left;
|
||||
font-size: 4vw;
|
||||
color: black;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
|
|
@ -537,7 +506,7 @@ td#contact {
|
|||
text-align: left;
|
||||
font-size: 1.5vw;
|
||||
margin-left: 25%;
|
||||
color: lightgrey;
|
||||
color: rgb(63, 63, 63);
|
||||
}
|
||||
|
||||
#Produit>img {
|
||||
|
|
@ -549,19 +518,19 @@ td#contact {
|
|||
}
|
||||
|
||||
#Produit>button {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: transparent;
|
||||
padding: 1vw 1vw;
|
||||
float: right;
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
margin-right: 10%;
|
||||
color: white;
|
||||
border: 0.1vw solid white;
|
||||
color: black;
|
||||
border: 0.1vw solid rgb(68, 68, 68);
|
||||
}
|
||||
|
||||
#Produit>button:hover {
|
||||
color: white;
|
||||
background-color: rgba(204, 25, 25, 0.5);
|
||||
background-color: rgb(68, 68, 68);
|
||||
transition-duration: 0.5s;
|
||||
border-radius: 2vw;
|
||||
}
|
||||
|
|
@ -569,11 +538,6 @@ td#contact {
|
|||
|
||||
/*CARACTERISTIQUES PRODUIT*/
|
||||
|
||||
#Carac {
|
||||
width: 100%;
|
||||
border-top: 0.2vw solid white;
|
||||
margin-top: 8%;
|
||||
}
|
||||
|
||||
#Carac>h1 {
|
||||
font-size: 3vw;
|
||||
|
|
@ -582,7 +546,7 @@ td#contact {
|
|||
|
||||
#Carac>h2 {
|
||||
font-size: 1.5vw;
|
||||
color: lightgrey;
|
||||
color: rgb(43, 43, 43);
|
||||
}
|
||||
|
||||
/*================================================*/
|
||||
|
|
@ -596,19 +560,13 @@ td#contact {
|
|||
|
||||
#Client>div>h1 {
|
||||
font-size: 2vw;
|
||||
color: white;
|
||||
color: rgb(0, 0, 0);
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
#Client>div>h2 {
|
||||
font-size: 1vw;
|
||||
color: yellow;
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
#Client>div>h3 {
|
||||
font-size: 1.5vw;
|
||||
color: lightgrey;
|
||||
color: rgb(56, 56, 56);
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
|
|
@ -628,81 +586,10 @@ td#contact {
|
|||
|
||||
/*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;
|
||||
#com h2{
|
||||
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*/
|
||||
|
|
@ -755,7 +642,7 @@ table#basket input:valid{
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#livraison input{
|
||||
input{
|
||||
width: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
|
@ -768,6 +655,39 @@ table#basket input:valid{
|
|||
margin-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
|
||||
input:valid{
|
||||
border-bottom : 0.2vw solid rgb(24, 216, 40);
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
input[placeholder=Commentaire],
|
||||
select,
|
||||
input[placeholder="Question, suggestion, remarque"],
|
||||
select {
|
||||
width: 60%;
|
||||
padding: 1vw 1vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
input[type=submit]{
|
||||
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{
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 0.15vw solid rgb(0, 0, 0);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
#livraison h2{
|
||||
text-align: left;
|
||||
font-size: 2.5vw;
|
||||
|
|
@ -784,30 +704,5 @@ table#basket input:valid{
|
|||
}
|
||||
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
|
||||
/*===============================================*/
|
||||
|
|
|
|||
Reference in a new issue