added flex container index
This commit is contained in:
parent
727101274f
commit
3e4c95bdff
2 changed files with 39 additions and 8 deletions
|
@ -168,3 +168,31 @@ div#slider figure {
|
||||||
/*============================================*/
|
/*============================================*/
|
||||||
|
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
|
background-color: rgb(187, 187, 187);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container>div {
|
||||||
|
box-shadow: 0.3vw 0.3vw 2px grey;
|
||||||
|
width: 20%;
|
||||||
|
margin: 1vw;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container>div>img{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container>div>p{
|
||||||
|
font-size: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container>div:hover p{
|
||||||
|
font-size: 40px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
13
index.html
13
index.html
|
@ -33,12 +33,15 @@
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
<div class="flex-container">
|
<div class="flex-container">
|
||||||
<div>Robot Nao</div>
|
<div><img src="Assets/Images/Produits/nao.png" alt><p>Nao</p></div>
|
||||||
<div>Robot Valkyrie</div>
|
<div><img src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></div>
|
||||||
<div>Robot Terminator</div>
|
<div><img src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></div>
|
||||||
<div>Robot x</div>
|
<div><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></div>
|
||||||
<div>Robot y</div>
|
<div><img src="Assets/Images/Produits/pepper.png" alt><p>Pepper</p></div>
|
||||||
|
<div><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
Reference in a new issue