Navbar final design
BIN
Images/Produits/cat.png
Normal file
After Width: | Height: | Size: 191 KiB |
BIN
Images/Produits/jaune.png
Normal file
After Width: | Height: | Size: 128 KiB |
BIN
Images/Produits/loupeN.png
Normal file
After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 6.5 MiB After Width: | Height: | Size: 200 KiB |
Before Width: | Height: | Size: 3.4 MiB After Width: | Height: | Size: 83 KiB |
Before Width: | Height: | Size: 16 MiB After Width: | Height: | Size: 342 KiB |
BIN
Images/Produits/romeo.png
Normal file
After Width: | Height: | Size: 128 KiB |
BIN
Images/Produits/soldat.png
Normal file
After Width: | Height: | Size: 132 KiB |
BIN
Images/Produits/terminator.png
Normal file
After Width: | Height: | Size: 192 KiB |
BIN
Images/Produits/valkyrie.png
Normal file
After Width: | Height: | Size: 195 KiB |
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 278 KiB |
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 188 KiB |
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 315 KiB |
Before Width: | Height: | Size: 175 KiB After Width: | Height: | Size: 222 KiB |
|
@ -8,10 +8,15 @@
|
|||
</head>
|
||||
<body id="produit">
|
||||
|
||||
<nav>
|
||||
<a href="index.html"><img src="Images/logo.png" alt></a>
|
||||
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a>
|
||||
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a>
|
||||
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id ="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id ="nous" href="#nous">A propos</a>
|
||||
<a id ="contactN" href="contact.html">Contact</a>
|
||||
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||
<input type="text" placeholder="Rechercher...">
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<table>
|
||||
|
|
|
@ -7,10 +7,15 @@
|
|||
<link rel="stylesheet" type="text/css" href="css.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html"><img src="Images/logo.png" alt></a>
|
||||
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a>
|
||||
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a>
|
||||
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id ="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id ="nous" href="#nous">A propos</a>
|
||||
<a id ="contactN" href="contact.html">Contact</a>
|
||||
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||
<input type="text" placeholder="Rechercher...">
|
||||
</div>
|
||||
</nav>
|
||||
<div id="Merci">
|
||||
<h1>Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !</h1>
|
||||
|
|
|
@ -7,10 +7,15 @@
|
|||
<link rel="stylesheet" type="text/css" href="css.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html"><img src="Images/logo.png" alt></a>
|
||||
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a>
|
||||
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a>
|
||||
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id ="kyflo" class="active" href="#home">KyFlo</a>
|
||||
<a id ="nous" href="#nous">A propos</a>
|
||||
<a id ="contactN" href="contact.html">Contact</a>
|
||||
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||
<input type="text" placeholder="Rechercher...">
|
||||
</div>
|
||||
</nav>
|
||||
<div id="Merci">
|
||||
<h1>Merci beaucoup pour votre réponse ! Votre commentaire a été pris en compte !</h1>
|
||||
|
|
276
css.css
|
@ -1,14 +1,14 @@
|
|||
/*204, 25, 25*/
|
||||
/*==========================================================================================*/
|
||||
/*BODY + NAV*/
|
||||
/*BODY + GENERAL*/
|
||||
body{
|
||||
background : linear-gradient(to left,#141414, #444444, #141414);
|
||||
margin: 0;
|
||||
}
|
||||
body#produit
|
||||
{
|
||||
background : linear-gradient( #1c0224, #08023a, #022425);
|
||||
z-index: 10;
|
||||
font-family: 'Bookman', sans-serif;
|
||||
|
||||
#content{
|
||||
margin-left: 8vw;
|
||||
margin-right: 8vw;
|
||||
}
|
||||
|
||||
h1{
|
||||
|
@ -16,38 +16,6 @@ h1{
|
|||
color : white;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: rgba(22, 22, 22, 0.61);
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
box-shadow: 0vw 0.5vw 0.4vw rgba(255, 0, 0, 0.534);
|
||||
}
|
||||
|
||||
body>nav>a>img{
|
||||
width : 25%;
|
||||
margin : auto;
|
||||
}
|
||||
|
||||
body>nav>a>img:hover{
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
#panier {
|
||||
float : right;
|
||||
width : 5%;
|
||||
margin-right : 1%;
|
||||
margin-left : 3%;
|
||||
padding : 0.9vw 0.9vw;
|
||||
}
|
||||
|
||||
#loupe {
|
||||
float : right;
|
||||
width : 5%;
|
||||
margin-right : 1%;
|
||||
margin-left : 3%;
|
||||
padding : 0.9vw 0.9vw;
|
||||
}
|
||||
|
||||
body>#bienvenue>h1{
|
||||
font-size : 3vw;
|
||||
|
@ -59,6 +27,170 @@ body>#bienvenue>h2{
|
|||
color : lightgrey;
|
||||
text-align: center;
|
||||
}
|
||||
/*=====================================*/
|
||||
/*NAVBAR*/
|
||||
|
||||
a#kyflo{
|
||||
font-size: 5vw;
|
||||
color: rgb(204, 25, 25);
|
||||
padding: 0.5vw 1vw;
|
||||
transform: none;
|
||||
border : none;
|
||||
}
|
||||
|
||||
a#nous{
|
||||
border-right: 0.15vw solid rgb(204, 25, 25);
|
||||
border-left: 0.15vw solid rgb(204, 25, 25);
|
||||
}
|
||||
|
||||
#panier {
|
||||
float : right;
|
||||
width : 18.5%;
|
||||
padding : 1.2vw 1vw;
|
||||
border-left: 0.2vw solid rgb(204, 25, 25);
|
||||
margin-right: -13%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: rgba(22, 22, 22, 0.61);
|
||||
box-shadow: 0vw 0.5vw 0.4vw rgba(255, 0, 0, 0.534);
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
padding: 2.4vw 2vw;
|
||||
text-decoration: none;
|
||||
font-size: 2vw;
|
||||
border-right: 0.15vw solid rgb(204, 25, 25);
|
||||
font-weight: bold;
|
||||
transform: skew(-0.2rad);
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
background-color: rgb(204, 25, 25);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.topnav a#nous:hover, a#contactN:hover {
|
||||
padding: 2.4vw 3vw;
|
||||
}
|
||||
|
||||
.topnav a#kyflo:hover{
|
||||
color: white;
|
||||
background-color: rgb(22, 22, 22);
|
||||
}
|
||||
|
||||
.topnav a#panier:hover{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.topnav input[type=text] {
|
||||
float: right;
|
||||
padding: 1vw;
|
||||
margin-right: 16px;
|
||||
border: 0.1vw solid rgb(204, 25, 25);
|
||||
font-size: 2vw;
|
||||
margin-top: 1.2vw;
|
||||
background-color: rgb(22, 22, 22);
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.topnav a, .topnav input[type=text] {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 87%;
|
||||
margin: 0;
|
||||
padding: 2vw;
|
||||
border: none;
|
||||
transform: none;
|
||||
}
|
||||
.topnav a#panier, a#nous{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.topnav a#nous:hover, a#contactN:hover{
|
||||
padding : 2.4vw 2vw;
|
||||
}
|
||||
|
||||
.topnav input[type=text] {
|
||||
border: 1px solid rgb(190, 73, 73);
|
||||
}
|
||||
}
|
||||
|
||||
/*======================================*/
|
||||
|
||||
|
||||
/*FOOTER*/
|
||||
footer>div>table{
|
||||
width: 100%;
|
||||
border-top : 0.1vw solid rgb(204,25,25);
|
||||
background-color: rgb(27, 27, 27);
|
||||
margin : auto;
|
||||
padding: 2vw 8vw;
|
||||
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color : grey;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color:rgb(204, 25, 25);
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
tr{
|
||||
border-bottom: 0.2vw solid red;
|
||||
color: white;
|
||||
height: 5vw;
|
||||
}
|
||||
|
||||
th{
|
||||
font-size: 2vw;
|
||||
text-align : left;
|
||||
border-bottom: 0.1vw solid white;
|
||||
}
|
||||
|
||||
th#line{
|
||||
border: none;
|
||||
|
||||
}
|
||||
button#contactB{
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5vw 4vw;
|
||||
font-size: 1.5vw;
|
||||
color : lightgrey;
|
||||
background-color: rgb(27, 27, 27);
|
||||
border : 0.1vw solid rgb(204, 25, 25);
|
||||
transform: skew(-.312rad);
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
button#contactB:hover{
|
||||
background-color: rgb(204, 25, 25);
|
||||
transition-duration: 0.5s;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
td{
|
||||
width: 20%;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
td#contact{
|
||||
width: 100%;
|
||||
}
|
||||
/*======================================*/
|
||||
|
||||
/*==========================================*/
|
||||
/* CSS Confirmation commentaire */
|
||||
#Merci>h1{
|
||||
|
@ -126,7 +258,7 @@ body>#bienvenue>h2{
|
|||
#Produit>img{
|
||||
width: 20%;
|
||||
float: left;
|
||||
border: 0.2vw solid white;
|
||||
border: 0.2vw solid rgb(204, 25, 25);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
|
@ -140,15 +272,38 @@ body>#bienvenue>h2{
|
|||
font-size : 2vw;
|
||||
margin-right: 10%;
|
||||
color: white;
|
||||
border : 0.1vw solid white;
|
||||
border : 0.1vw solid rgb(204, 25, 25);
|
||||
}
|
||||
|
||||
#Produit>button:hover{
|
||||
color: black;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
color: white;
|
||||
background-color: rgba(204,25,25,0.5);
|
||||
transition-duration: 0.5s;
|
||||
border-radius: 2vw;
|
||||
}
|
||||
|
||||
table#mosaique{
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
table#mosaique>tr>td>img{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 30%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
h3,h4{
|
||||
color: white;
|
||||
}
|
||||
|
||||
h3:hover{
|
||||
color: rgb(204, 25, 25);
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
/*================================================*/
|
||||
/*CARACTERISTIQUES PRODUIT*/
|
||||
#Carac{
|
||||
|
@ -235,7 +390,7 @@ input, select {
|
|||
width: 20%;
|
||||
padding: 1vw 1vw;
|
||||
font-size: 1.5vw;
|
||||
background: linear-gradient(to left, rgba(128, 128, 128, 0.493), rgba(0, 0, 0, 0.548));
|
||||
background-color: rgb(27, 27, 27);
|
||||
color: white;
|
||||
border : 0.1vw solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 3vw;
|
||||
|
@ -288,9 +443,7 @@ div#slider {
|
|||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
border-radius: 12px;
|
||||
margin-top: 5%;
|
||||
border : 0.1vw solid red;
|
||||
|
||||
}
|
||||
|
||||
|
@ -340,37 +493,6 @@ div#slider figure {
|
|||
|
||||
/*Panier*/
|
||||
|
||||
table{
|
||||
width : 80%;
|
||||
margin : auto;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: rgba(255, 255, 255, 0.233);
|
||||
}
|
||||
|
||||
td {
|
||||
border-top : 0.2vw solid rgb(252, 252, 252);
|
||||
padding : 2vw 2vw;
|
||||
font-size: 2vw;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
th{
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 2vw;
|
||||
color : white;
|
||||
}
|
||||
|
||||
td#total{
|
||||
text-align : right;
|
||||
color : red;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
font-size : 3vw;
|
||||
}
|
||||
|
||||
form[action="commande.html"]>h1{
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
@ -384,3 +506,5 @@ form[action="commande.html"]>input[type=text], select {
|
|||
#livraison {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*=================================*/
|
||||
|
|
55
index.html
|
@ -9,10 +9,14 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="index.html"><img src="Images/logo.png" alt="logo"></a>
|
||||
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a>
|
||||
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a>
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id ="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id ="nous" href="#nous">A propos</a>
|
||||
<a id ="contactN" href="contact.html">Contact</a>
|
||||
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||
<input type="text" placeholder="Rechercher...">
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="bienvenue">
|
||||
|
@ -27,10 +31,49 @@
|
|||
<a href="r2d2.html"><img src="Images/Promotions/promo3.png" alt></a>
|
||||
<a href="trompettiste.html"><img src="Images/Promotions/promo4.png" alt></a>
|
||||
<a href="nao.html"><img src="Images/Promotions/promo1.png" alt></a>
|
||||
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="produits">
|
||||
<h1>Tout nos produits :</h1>
|
||||
<table id="mosaique">
|
||||
<tr>
|
||||
<td><a href="#"><img src="Images/Produits/soldat.png" alt><h3>Robot soldat</h3><h4>200€</h4></a></td>
|
||||
<td><a href="#"><img src="Images/Produits/romeo.png" alt><h3>Robot romeo</h3><h4>100€</h4></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#"><img src="Images/Produits/cat.png" alt><h3>Robot chat</h3><h4>80€</h4></a></td>
|
||||
<td><a href="#"><img src="Images/Produits/r2d2.png" alt><h3>Robot r2d2</h3><h4>500€</h4></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#"><img src="Images/Produits/jaune.png" alt><h3>Robot fun</h3><h4>50€</h4></a></td>
|
||||
<td><a href="#"><img src="Images/Produits/valkyrie.png" alt><h3>Robot valkyrie</h3><h4>00€</h4></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
|
||||
<footer>
|
||||
<div id="acces">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Accès rapide</th><th id="line"></th><th>Une question ?</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="index.html">Accueil</a></td>
|
||||
<td><a href="#slider">Nos Promotions</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#produits">Nos Produits</a></td>
|
||||
<td><a href="checkout.html">Votre panier</a></td>
|
||||
<td id="contact"><button id="contactB">Nous contacter</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
14
nao.html
|
@ -10,12 +10,17 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="index.html"><img src="Images/logo.png" alt></a>
|
||||
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a>
|
||||
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a>
|
||||
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id ="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id ="nous" href="#nous">A propos</a>
|
||||
<a id ="contactN" href="contact.html">Contact</a>
|
||||
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||
<input type="text" placeholder="Rechercher...">
|
||||
</div>
|
||||
</nav>
|
||||
<div id="content">
|
||||
<div id="Produit">
|
||||
<img src="Images/Produits/nao.png" alt>
|
||||
<h1>ROBOT NAO</h1>
|
||||
|
@ -59,5 +64,6 @@
|
|||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
14
pepper.html
|
@ -9,12 +9,17 @@
|
|||
</head>
|
||||
<body id="produit">
|
||||
|
||||
<nav>
|
||||
<a href="index.html"><img id ="logo" src="Images/logo.png" alt="logo"></a>
|
||||
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a>
|
||||
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a>
|
||||
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id ="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id ="nous" href="#nous">A propos</a>
|
||||
<a id ="contactN" href="contact.html">Contact</a>
|
||||
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||
<input type="text" placeholder="Rechercher...">
|
||||
</div>
|
||||
</nav>
|
||||
<div id="content">
|
||||
<div id="Produit">
|
||||
<img src="Images/Produits/pepper.png" alt>
|
||||
<h1>ROBOT PEPPER</h1>
|
||||
|
@ -62,5 +67,6 @@
|
|||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
14
r2d2.html
|
@ -9,12 +9,17 @@
|
|||
</head>
|
||||
<body id="produit">
|
||||
|
||||
<nav>
|
||||
<a href="index.html"><img src="Images/logo.png" alt></a>
|
||||
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a>
|
||||
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a>
|
||||
|
||||
<nav id="nav">
|
||||
<div class="topnav">
|
||||
<a id ="kyflo" class="active" href="index.html">KyFlo</a>
|
||||
<a id ="nous" href="#nous">A propos</a>
|
||||
<a id ="contactN" href="contact.html">Contact</a>
|
||||
<a id ="panier" href="checkout.html"><img src="Images/cart.png" alt></a>
|
||||
<input type="text" placeholder="Rechercher...">
|
||||
</div>
|
||||
</nav>
|
||||
<div id="content">
|
||||
<div id="Produit">
|
||||
<img src="Images/Produits/r2d2.png" alt>
|
||||
<h1>ROBOT R2D2</h1>
|
||||
|
@ -57,5 +62,6 @@
|
|||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|