From 3e4c95bdff87922fa0b20cfa93ce4e982a22e35f Mon Sep 17 00:00:00 2001
From: KEZEL BENOIT p1907091 <p1907091@univ-lyon1.fr>
Date: Thu, 12 Dec 2019 11:10:56 +0100
Subject: [PATCH] added flex container index

---
 Assets/css.css | 28 ++++++++++++++++++++++++++++
 index.html     | 19 +++++++++++--------
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/Assets/css.css b/Assets/css.css
index 19ef578..a51b91e 100644
--- a/Assets/css.css
+++ b/Assets/css.css
@@ -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;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 65cea39..b5fc444 100644
--- a/index.html
+++ b/index.html
@@ -32,14 +32,17 @@
             <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
         </figure>
 	</div>
-	
-	<div class="flex-container">
-		<div>Robot Nao</div>
-		<div>Robot Valkyrie</div>
-		<div>Robot Terminator</div>
-		<div>Robot x</div>
-		<div>Robot y</div>
-	</div>
+    
+    <div class="content">
+        <div class="flex-container">
+            <div><img src="Assets/Images/Produits/nao.png" alt><p>Nao</p></div>
+            <div><img src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></div>
+            <div><img src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></div>
+            <div><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></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>
 
 </body>