Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 322 KiB |
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 153 KiB |
Before Width: | Height: | Size: 486 KiB After Width: | Height: | Size: 487 KiB |
Before Width: | Height: | Size: 271 KiB After Width: | Height: | Size: 273 KiB |
Before Width: | Height: | Size: 206 KiB |
|
@ -1,10 +1,7 @@
|
|||
body{
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-image: url("Images/bg.jpg");
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
/*NAVBAR*/
|
||||
|
@ -41,22 +38,6 @@ a{
|
|||
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;
|
||||
|
@ -132,7 +113,7 @@ a{
|
|||
top: 0;
|
||||
}
|
||||
|
||||
/*======================================== 1990 652*/
|
||||
/*========================================*/
|
||||
|
||||
/*Slide des promotions*/
|
||||
|
||||
|
@ -193,7 +174,7 @@ div#slider figure {
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
background-color: rgb(234, 234, 234);
|
||||
background-color: rgb(187, 187, 187);
|
||||
}
|
||||
|
||||
.flex-container>div {
|
||||
|
@ -212,58 +193,30 @@ div#slider figure {
|
|||
font-size: 0px;
|
||||
}
|
||||
|
||||
.flex-container .ok:hover a>p{
|
||||
.flex-container>div:hover a>p{
|
||||
font-size: 40px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.content{
|
||||
padding: 5vw 1vw;
|
||||
background-color: rgba(255, 255, 255, 0.548);
|
||||
}
|
||||
|
||||
.content>h1{
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.spec{
|
||||
text-align: left;
|
||||
font-size: 25px;
|
||||
font-size: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.651);
|
||||
color: black;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
.rupt{
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
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: 5vw 1vw;
|
||||
}
|
||||
|
||||
.top>h1{
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.top>h2{
|
||||
font-size: 50px;
|
||||
color: rgb(204, 204, 204);
|
||||
text-align: center;
|
||||
width : 58%;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/*============================================*/
|
|
@ -18,12 +18,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.header ul input{
|
||||
border-bottom: 0.1vw solid grey;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
|
||||
/*============================================*/
|
||||
|
||||
/* TOUT NOS PRODUITS*/
|
||||
|
|
29
index.html
|
@ -18,18 +18,11 @@
|
|||
<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="#">A propos</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li><a href="#">Panier</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<div class="top">
|
||||
<h1>Bienvenue sur le site de KyFlo !</h1>
|
||||
<h2>Vendeur de robot depuis 2005</h2>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="slider">
|
||||
<figure>
|
||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||
|
@ -41,19 +34,17 @@
|
|||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h1>Tous nos produits :</h1>
|
||||
<h1>Nos produits :</h1>
|
||||
<div class="flex-container">
|
||||
<div><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 src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></a></div>
|
||||
<div><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/pepper.png" alt><p>Pepper</p></a></div>
|
||||
<div><a href="#"><img src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></a></div>
|
||||
<div><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><a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></a></div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|