IUT_Informatique/KyFlo
Archived
1
0
Fork 0
Code Activity

adding css on articles

Browse source
This commit is contained in:
Kybo 2019-12-16 21:24:09 +01:00
parent 6082ca1649
commit 0238e85d80
5 changed files with 287 additions and 324 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
Assets/Pages/Produits/nao.html
View file

@ -13,8 +13,6 @@
</head> </head>
<body> <body>
<nav> <nav>
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a class="raccourci" href="../../../index.html#nous">A propos</a> <a class="raccourci" href="../../../index.html#nous">A propos</a>
@ -23,18 +21,26 @@
<a id="go" href="search_result.html">GO</a> <a id="go" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site..."> <input type="text" placeholder="Rechercher sur tout le site...">
</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>Résumé</h1>
</div>
<div class="content">
<div id="Produit"> <div id="Produit">
<img src="../../Images/Produits/nao.png" alt> <img src="../../Images/Produits/nao.png" alt>
<h1>ROBOT NAO</h1> <h1>ROBOT NAO</h1>
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button> <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
<h2>5 000€</h2> <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 <h3>Nao est un robot humanoide qui vous assiste dans vos tâches quotidiennes</h3>
standard de la robotcup.</h3>
</div> </div>
<div id="Carac"> </div>
<h1>Caractéristiques du robot :</h1>
<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 <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> 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) <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)
@ -43,36 +49,46 @@
<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 <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> 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>
<div id="Coms">
<h1>Commentaires clients :</h1> <div class="title">
<h1>Commentaires clients</h1>
</div>
<div class="content">
<div id="Client"> <div id="Client">
<div> <div>
<img src="../../Images/Icones/avatarF.png" alt> <img src="../../Images/Icones/avatarF.png" alt>
<h1>Isabelle Dunand</h1> <h1>Isabelle Dunand</h1>
<h3>Superbe robot, il est tout à fait fonctionnel !</h3> <h2>Superbe robot, il est tout à fait fonctionnel !</h2>
</div> </div>
<div> <div>
<img src="../../Images/Icones/avatarH.png" alt> <img src="../../Images/Icones/avatarH.png" alt>
<h1>Richard Mauron</h1> <h1>Richard Mauron</h1>
<h3>Excellent ! Très bonne qualité, j'ai adoré le programmer !</h3> <h2>Excellent ! Très bonne qualité, j'ai adoré le programmer !</h3>
</div> </div>
</div> </div>
<h2>Laissez nous un commentaire :</h2> </div>
<div class="title">
<h1>Laissez nous un commentaire :</h1>
</div>
<div class="content" id="com">
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h2>Nom et Prénom :</h2>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h2>Email :</h2>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h2>Commentaire:</h2>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h2 id="valider">Valider:</h2>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>

59
Assets/Pages/Produits/pepper.html
View file

@ -9,11 +9,10 @@
<link rel="stylesheet" type="text/css" href="../../css/resp.css"> <link rel="stylesheet" type="text/css" href="../../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 id="produit"> <body>
<nav> <nav>
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a class="raccourci" href="../../../index.html#nous">A propos</a> <a class="raccourci" href="../../../index.html#nous">A propos</a>
@ -22,58 +21,76 @@
<a id="go" href="search_result.html">GO</a> <a id="go" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site..."> <input type="text" placeholder="Rechercher sur tout le site...">
</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>Résumé</h1>
</div>
<div class="content">
<div id="Produit"> <div id="Produit">
<img src="../../Images/Produits/pepper.png" alt> <img src="../../Images/Produits/pepper.png" alt>
<h1>ROBOT PEPPER</h1> <h1>ROBOT PEPPER</h1>
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button> <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
<h2>15 000€</h2> <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> <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 id="Carac"> </div>
<h1>Caractéristiques du robot :</h1>
<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 <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. tactile.</h2>
</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>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> <h2>Son design tout en rondeurs assure une utilisation sans danger et une très bonne acceptation des utilisateurs.</h2>
</div> </div>
<div id="Coms">
<h1>Commentaires clients :</h1> <div class="title">
<h1>Commentaires clients</h1>
</div>
<div class="content">
<div id="Client"> <div id="Client">
<div> <div>
<img src="../../Images/Icones/avatarH.png" alt> <img src="../../Images/Icones/avatarH.png" alt>
<h1>Michel Dirate</h1> <h1>Michel Dirate</h1>
<h3>Livraison très longue ! Cependant, produit de qualité.</h3> <h2>Livraison très longue ! Cependant, produit de qualité.</h2>
</div> </div>
<div> <div>
<img src="../../Images/Icones/avatarF.png" alt> <img src="../../Images/Icones/avatarF.png" alt>
<h1>Ines Foubi</h1> <h1>Ines Foubi</h1>
<h3>Bon robot, ma famille l'adore !</h3> <h2>Bon robot, ma famille l'adore !</h2>
</div> </div>
<div> <div>
<img src="../../Images/Icones/avatarH.png" alt> <img src="../../Images/Icones/avatarH.png" alt>
<h1>Robert Ritar</h1> <h1>Robert Ritar</h1>
<h3>Robot très serviable.</h3> <h2>Robot très serviable.</h2>
</div> </div>
</div> </div>
<h2>Laissez nous un commentaire :</h2> </div>
<div class="title">
<h1>Laissez nous un commentaire :</h1>
</div>
<div class="content" id="com">
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h2>Nom et Prénom :</h2>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h2>Email :</h2>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h2>Commentaire:</h2>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h2 id="valider">Valider:</h2>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>

56
Assets/Pages/Produits/r2d2.html
View file

@ -9,11 +9,10 @@
<link rel="stylesheet" type="text/css" href="../../css/resp.css"> <link rel="stylesheet" type="text/css" href="../../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 id="produit"> <body>
<nav> <nav>
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a class="raccourci" href="../../../index.html#nous">A propos</a> <a class="raccourci" href="../../../index.html#nous">A propos</a>
@ -22,51 +21,70 @@
<a id="go" href="search_result.html">GO</a> <a id="go" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site..."> <input type="text" placeholder="Rechercher sur tout le site...">
</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>Résumé</h1>
</div>
<div class="content">
<div id="Produit"> <div id="Produit">
<img src="../../Images/Produits/r2d2.png" alt> <img src="../../Images/Produits/r2d2.png" alt>
<h1>ROBOT R2D2</h1> <h1>ROBOT R2D2</h1>
<button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button> <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
<h2>500€</h2> <h2>5 000€</h2>
<h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien.</h3> <h3>R2D2 est un petit robot de compagnie capable de vous servir d'assistant intergalactique au quotidien</h3>
</div> </div>
<div id="Carac"> </div>
<h1>Caractéristiques du robot :</h1>
<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>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>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> <h2>Il possède une reconnaissance vocale très optimale qui vous permettras de le piloter rien qu'a la voix !</h2>
</div> </div>
<div id="Coms">
<h1>Commentaires clients :</h1> <div class="title">
<h1>Commentaires clients</h1>
</div>
<div class="content">
<div id="Client"> <div id="Client">
<div> <div>
<img src="../../Images/Icones/avatarH.png" alt> <img src="../../Images/Icones/avatarH.png" alt>
<h1>Patrick Busson</h1> <h1>Patrick Busson</h1>
<h3>Petit robot sympathique, très utile au quotidien !</h3> <h2>Petit robot sympathique, très utile au quotidien !</h2>
</div> </div>
<div> <div>
<img src="../../Images/Icones/avatarF.png" alt> <img src="../../Images/Icones/avatarF.png" alt>
<h1>Clara Soufu</h1> <h1>Clara Soufu</h1>
<h3>Grande fan de Star Wars, j'adore ce petit robot personnel !</h3> <h2>Grande fan de Star Wars, j'adore ce petit robot personnel !</h2>
</div> </div>
</div> </div>
<h2>Laissez nous un commentaire :</h2> </div>
<div class="title">
<h1>Laissez nous un commentaire :</h1>
</div>
<div class="content" id="com">
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h2>Nom et Prénom :</h2>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h2>Email :</h2>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h2>Commentaire:</h2>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h2 id="valider">Valider:</h2>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>

51
Assets/Pages/Produits/terminator.html
View file

@ -9,11 +9,10 @@
<link rel="stylesheet" type="text/css" href="../../css/resp.css"> <link rel="stylesheet" type="text/css" href="../../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 id="produit"> <body>
<nav> <nav>
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a class="raccourci" href="../../../index.html#nous">A propos</a> <a class="raccourci" href="../../../index.html#nous">A propos</a>
@ -22,9 +21,12 @@
<a id="go" href="search_result.html">GO</a> <a id="go" href="search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site..."> <input type="text" placeholder="Rechercher sur tout le site...">
</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>Résumé</h1>
</div>
<div class="content">
<div id="Produit"> <div id="Produit">
<img src="../../Images/Produits/terminator.png" alt> <img src="../../Images/Produits/terminator.png" alt>
<h1>ROBOT TERMINATOR</h1> <h1>ROBOT TERMINATOR</h1>
@ -32,42 +34,57 @@
<h2>50 000€</h2> <h2>50 000€</h2>
<h3>Le robot terminator est idéal si vous envisagez de conquérir la planète !</h3> <h3>Le robot terminator est idéal si vous envisagez de conquérir la planète !</h3>
</div> </div>
<div id="Carac"> </div>
<h1>Caractéristiques du robot :</h1>
<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>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>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> <h2>Il peut controler l'esprit des autres personnes grâce aux ondes qu'il emet.</h2>
</div> </div>
<div id="Coms">
<h1>Commentaires clients :</h1> <div class="title">
<h1>Commentaires clients</h1>
</div>
<div class="content">
<div id="Client"> <div id="Client">
<div> <div>
<img src="../../Images/Icones/avatarF.png" alt> <img src="../../Images/Icones/avatarF.png" alt>
<h1>Aude Fousi</h1> <h1>Aude Fousi</h1>
<h3>Robot trop effrayant et trop cher !</h3> <h2>Robot trop effrayant et trop cher !</h2>
</div> </div>
<div> <div>
<img src="../../Images/Icones/avatarH.png" alt> <img src="../../Images/Icones/avatarH.png" alt>
<h1>Pierre Tarte</h1> <h1>Pierre Tarte</h1>
<h3>Superbe robot, je vais pouvoir mettre mon plan de coup d'état a éxécution...</h3> <h2>Superbe robot, je vais pouvoir mettre mon plan de coup d'état a éxécution...</h2>
</div> </div>
</div> </div>
<h2>Laissez nous un commentaire :</h2> </div>
<div class="title">
<h1>Laissez nous un commentaire :</h1>
</div>
<div class="content" id="com">
<form action="../Autres/commentaire.html"> <form action="../Autres/commentaire.html">
<h1>Nom et Prénom :</h1> <h2>Nom et Prénom :</h2>
<input type="text" required> <input type="text" required>
<h1>Email :</h1> <h2>Email :</h2>
<input type="email" required> <input type="email" required>
<h1>Commentaire:</h1> <h2>Commentaire:</h2>
<input type="text" placeholder="Commentaire" required> <input type="text" placeholder="Commentaire" required>
<h1 id="valider">Valider:</h1> <h2 id="valider">Valider:</h2>
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div>
<footer> <footer>
<div id="acces"> <div id="acces">
<table> <table>

195
Assets/css/css.css
View file

@ -323,39 +323,6 @@ div#slider figure {
/* CONTACT*/ /* 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{ #contact h2{
margin: 0; margin: 0;
@ -510,11 +477,13 @@ td#contact {
#Produit { #Produit {
margin-top: 5%; margin-top: 5%;
padding-bottom: 5vw;
} }
#Produit>h1 { #Produit>h1 {
text-align: left; text-align: left;
font-size: 4vw; font-size: 4vw;
color: black;
margin-left: 25%; margin-left: 25%;
} }
@ -537,7 +506,7 @@ td#contact {
text-align: left; text-align: left;
font-size: 1.5vw; font-size: 1.5vw;
margin-left: 25%; margin-left: 25%;
color: lightgrey; color: rgb(63, 63, 63);
} }
#Produit>img { #Produit>img {
@ -549,19 +518,19 @@ td#contact {
} }
#Produit>button { #Produit>button {
background-color: rgba(0, 0, 0, 0.5); background-color: transparent;
padding: 1vw 1vw; padding: 1vw 1vw;
float: right; float: right;
text-align: center; text-align: center;
font-size: 2vw; font-size: 2vw;
margin-right: 10%; margin-right: 10%;
color: white; color: black;
border: 0.1vw solid white; border: 0.1vw solid rgb(68, 68, 68);
} }
#Produit>button:hover { #Produit>button:hover {
color: white; color: white;
background-color: rgba(204, 25, 25, 0.5); background-color: rgb(68, 68, 68);
transition-duration: 0.5s; transition-duration: 0.5s;
border-radius: 2vw; border-radius: 2vw;
} }
@ -569,11 +538,6 @@ td#contact {
/*CARACTERISTIQUES PRODUIT*/ /*CARACTERISTIQUES PRODUIT*/
#Carac {
width: 100%;
border-top: 0.2vw solid white;
margin-top: 8%;
}
#Carac>h1 { #Carac>h1 {
font-size: 3vw; font-size: 3vw;
@ -582,7 +546,7 @@ td#contact {
#Carac>h2 { #Carac>h2 {
font-size: 1.5vw; font-size: 1.5vw;
color: lightgrey; color: rgb(43, 43, 43);
} }
/*================================================*/ /*================================================*/
@ -596,19 +560,13 @@ td#contact {
#Client>div>h1 { #Client>div>h1 {
font-size: 2vw; font-size: 2vw;
color: white; color: rgb(0, 0, 0);
margin-left: 8%; margin-left: 8%;
} }
#Client>div>h2 { #Client>div>h2 {
font-size: 1vw;
color: yellow;
margin-left: 8%;
}
#Client>div>h3 {
font-size: 1.5vw; font-size: 1.5vw;
color: lightgrey; color: rgb(56, 56, 56);
margin-left: 8%; margin-left: 8%;
} }
@ -628,81 +586,10 @@ td#contact {
/*ESPACE LAISSER COMMENTAIRE*/ /*ESPACE LAISSER COMMENTAIRE*/
#Coms { #com h2{
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; 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*/ /*Panier*/
@ -755,7 +642,7 @@ table#basket input:valid{
width: 100%; width: 100%;
} }
#livraison input{ input{
width: 50%; width: 50%;
display: block; display: block;
margin: auto; margin: auto;
@ -768,6 +655,39 @@ table#basket input:valid{
margin-bottom: 1.5vh; 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{ #livraison h2{
text-align: left; text-align: left;
font-size: 2.5vw; 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;
}
/*===============================================*/ /*===============================================*/