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{
|
body{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
background-image: url("Images/bg.jpg");
|
background-color: #bbb;
|
||||||
background-attachment: fixed;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*NAVBAR*/
|
/*NAVBAR*/
|
||||||
|
@ -41,22 +38,6 @@ a{
|
||||||
background-color: #ddd;
|
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 {
|
.header .logo {
|
||||||
float: left;
|
float: left;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -132,7 +113,7 @@ a{
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*======================================== 1990 652*/
|
/*========================================*/
|
||||||
|
|
||||||
/*Slide des promotions*/
|
/*Slide des promotions*/
|
||||||
|
|
||||||
|
@ -193,7 +174,7 @@ div#slider figure {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
background-color: rgb(234, 234, 234);
|
background-color: rgb(187, 187, 187);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-container>div {
|
.flex-container>div {
|
||||||
|
@ -212,58 +193,30 @@ div#slider figure {
|
||||||
font-size: 0px;
|
font-size: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-container .ok:hover a>p{
|
.flex-container>div:hover a>p{
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content{
|
|
||||||
padding: 5vw 1vw;
|
|
||||||
background-color: rgba(255, 255, 255, 0.548);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content>h1{
|
.content>h1{
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.spec{
|
.spec{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 25px;
|
font-size: 20px;
|
||||||
background-color: rgba(255, 255, 255, 0.651);
|
background-color: rgba(255, 255, 255, 0.651);
|
||||||
color: black;
|
color: black;
|
||||||
width: 100%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
.rupt{
|
.rupt{
|
||||||
text-align: center;
|
text-align: right;
|
||||||
float: right;
|
float: right;
|
||||||
z-index: 3;
|
background-color: black;
|
||||||
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{
|
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 60px;
|
width : 58%;
|
||||||
text-align: center;
|
font-size: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.top>h2{
|
|
||||||
font-size: 50px;
|
|
||||||
color: rgb(204, 204, 204);
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*============================================*/
|
/*============================================*/
|
|
@ -17,13 +17,7 @@
|
||||||
.header .menu-icon{
|
.header .menu-icon{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header ul input{
|
|
||||||
border-bottom: 0.1vw solid grey;
|
|
||||||
margin-top: 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*============================================*/
|
/*============================================*/
|
||||||
|
|
||||||
/* TOUT NOS PRODUITS*/
|
/* TOUT NOS PRODUITS*/
|
||||||
|
|
29
index.html
|
@ -18,18 +18,11 @@
|
||||||
<input class="menu-btn" type="checkbox" id="menu-btn"/>
|
<input class="menu-btn" type="checkbox" id="menu-btn"/>
|
||||||
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
|
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<li><input type="text" placeholder="Rechercher..."></li>
|
|
||||||
<li><a href="#">A propos</a></li>
|
<li><a href="#">A propos</a></li>
|
||||||
<li><a href="#">Contact</a></li>
|
<li><a href="#">Contact</a></li>
|
||||||
<li><a href="#">Panier</a></li>
|
<li><a href="#">Panier</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="top">
|
|
||||||
<h1>Bienvenue sur le site de KyFlo !</h1>
|
|
||||||
<h2>Vendeur de robot depuis 2005</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="slider">
|
<div id="slider">
|
||||||
<figure>
|
<figure>
|
||||||
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
<a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
|
||||||
|
@ -41,18 +34,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<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>
|
||||||
|
|
||||||
<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>
|
</body>
|
||||||
|
|
||||||
|
|