IUT_Informatique/KyFlo
Archived
1
0
Fork 0
Code Activity

Navbar final design

Browse source
This commit is contained in:
Kybo 2019-11-23 13:44:49 +01:00
parent b23812a55d
commit 09d3b08dd2
22 changed files with 443 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Images/Produits/cat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 191 KiB

BIN
Images/Produits/jaune.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
Images/Produits/loupeN.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
Images/Produits/nao.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 MiB

After

Width:  |  Height:  |  Size: 200 KiB

BIN
Images/Produits/pepper.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 MiB

After

Width:  |  Height:  |  Size: 83 KiB

BIN
Images/Produits/r2d2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 MiB

After

Width:  |  Height:  |  Size: 342 KiB

BIN
Images/Produits/romeo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
Images/Produits/soldat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
Images/Produits/terminator.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
Images/Produits/valkyrie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 195 KiB

BIN
Images/Promotions/promo1.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 226 KiB

After

Width:  |  Height:  |  Size: 278 KiB

BIN
Images/Promotions/promo2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 188 KiB

BIN
Images/Promotions/promo3.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 301 KiB

After

Width:  |  Height:  |  Size: 315 KiB

BIN
Images/Promotions/promo4.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 175 KiB

After

Width:  |  Height:  |  Size: 222 KiB

13
checkout.html
View file

@ -8,10 +8,15 @@
</head> </head>
<body id="produit"> <body id="produit">
<nav>
<a href="index.html"><img src="Images/logo.png" alt></a> <nav id="nav">
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a> <div class="topnav">
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a> <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> </nav>
<table> <table>

13
commande.html
View file

@ -7,10 +7,15 @@
<link rel="stylesheet" type="text/css" href="css.css"> <link rel="stylesheet" type="text/css" href="css.css">
</head> </head>
<body> <body>
<nav>
<a href="index.html"><img src="Images/logo.png" alt></a> <nav id="nav">
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a> <div class="topnav">
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a> <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> </nav>
<div id="Merci"> <div id="Merci">
<h1>Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !</h1> <h1>Merci beaucoup d'avoir commmander sur notre site ! Votre commande arrive bientôt !</h1>

13
commentaire.html
View file

@ -7,10 +7,15 @@
<link rel="stylesheet" type="text/css" href="css.css"> <link rel="stylesheet" type="text/css" href="css.css">
</head> </head>
<body> <body>
<nav>
<a href="index.html"><img src="Images/logo.png" alt></a> <nav id="nav">
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a> <div class="topnav">
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></a> <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> </nav>
<div id="Merci"> <div id="Merci">
<h1>Merci beaucoup pour votre réponse ! Votre commentaire a été pris en compte !</h1> <h1>Merci beaucoup pour votre réponse ! Votre commentaire a été pris en compte !</h1>

276
css.css
View file

@ -1,14 +1,14 @@
/*204, 25, 25*/ /*204, 25, 25*/
/*==========================================================================================*/ /*==========================================================================================*/
/*BODY + NAV*/ /*BODY + GENERAL*/
body{ body{
background : linear-gradient(to left,#141414, #444444, #141414); background : linear-gradient(to left,#141414, #444444, #141414);
margin: 0;
} }
body#produit
{ #content{
background : linear-gradient( #1c0224, #08023a, #022425); margin-left: 8vw;
z-index: 10; margin-right: 8vw;
font-family: 'Bookman', sans-serif;
} }
h1{ h1{
@ -16,38 +16,6 @@ h1{
color : white; 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{ body>#bienvenue>h1{
font-size : 3vw; font-size : 3vw;
@ -59,6 +27,170 @@ body>#bienvenue>h2{
color : lightgrey; color : lightgrey;
text-align: center; 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 */ /* CSS Confirmation commentaire */
#Merci>h1{ #Merci>h1{
@ -126,7 +258,7 @@ body>#bienvenue>h2{
#Produit>img{ #Produit>img{
width: 20%; width: 20%;
float: left; float: left;
border: 0.2vw solid white; border: 0.2vw solid rgb(204, 25, 25);
border-radius: 10px; border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
@ -140,15 +272,38 @@ body>#bienvenue>h2{
font-size : 2vw; font-size : 2vw;
margin-right: 10%; margin-right: 10%;
color: white; color: white;
border : 0.1vw solid white; border : 0.1vw solid rgb(204, 25, 25);
} }
#Produit>button:hover{ #Produit>button:hover{
color: black; color: white;
background-color: rgba(255,255,255,0.5); background-color: rgba(204,25,25,0.5);
transition-duration: 0.5s; transition-duration: 0.5s;
border-radius: 2vw; 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*/ /*CARACTERISTIQUES PRODUIT*/
#Carac{ #Carac{
@ -235,7 +390,7 @@ input, select {
width: 20%; width: 20%;
padding: 1vw 1vw; padding: 1vw 1vw;
font-size: 1.5vw; 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; color: white;
border : 0.1vw solid rgba(255, 255, 255, 0.5); border : 0.1vw solid rgba(255, 255, 255, 0.5);
border-radius: 3vw; border-radius: 3vw;
@ -288,9 +443,7 @@ div#slider {
width: 100%; width: 100%;
max-width: 1920px; max-width: 1920px;
margin: auto; margin: auto;
border-radius: 12px;
margin-top: 5%; margin-top: 5%;
border : 0.1vw solid red;
} }
@ -340,37 +493,6 @@ div#slider figure {
/*Panier*/ /*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{ form[action="commande.html"]>h1{
font-size: 1.5vw; font-size: 1.5vw;
} }
@ -384,3 +506,5 @@ form[action="commande.html"]>input[type=text], select {
#livraison { #livraison {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
/*=================================*/

55
index.html
View file

@ -9,10 +9,14 @@
</head> </head>
<body> <body>
<nav> <nav id="nav">
<a href="index.html"><img src="Images/logo.png" alt="logo"></a> <div class="topnav">
<a href="checkout.html"><img id="panier" src="Images/cart.png" alt></a> <a id ="kyflo" class="active" href="index.html">KyFlo</a>
<a href="search_result.html"><img id ="loupe" src="Images/Produits/loupe.png" alt></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> </nav>
<div id="bienvenue"> <div id="bienvenue">
@ -27,10 +31,49 @@
<a href="r2d2.html"><img src="Images/Promotions/promo3.png" alt></a> <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="trompettiste.html"><img src="Images/Promotions/promo4.png" alt></a>
<a href="nao.html"><img src="Images/Promotions/promo1.png" alt></a> <a href="nao.html"><img src="Images/Promotions/promo1.png" alt></a>
</figure> </figure>
</div> </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> </body>
</html> </html>

14
nao.html
View file

@ -10,12 +10,17 @@
</head> </head>
<body> <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> </nav>
<div id="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>
@ -59,5 +64,6 @@
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div>
</body> </body>
</html> </html>

14
pepper.html
View file

@ -9,12 +9,17 @@
</head> </head>
<body id="produit"> <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> </nav>
<div id="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>
@ -62,5 +67,6 @@
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div>
</body> </body>
</html> </html>

14
r2d2.html
View file

@ -9,12 +9,17 @@
</head> </head>
<body id="produit"> <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> </nav>
<div id="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>
@ -57,5 +62,6 @@
<input type="submit" value="Envoyer"> <input type="submit" value="Envoyer">
</form> </form>
</div> </div>
</div>
</body> </body>
</html> </html>