From ab9406bff08f5fd14e7247e565cb44a6f4dd723a Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Mon, 10 Mar 2025 15:03:18 +0100
Subject: [PATCH] Started to work on projects presentation

WIP
---
 index.html | 31 +++++++++++++++++++++++++++++--
 style.css  | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index e265abc..5dc631c 100644
--- a/index.html
+++ b/index.html
@@ -80,7 +80,7 @@
         </article>
         <button class="feature_button">Oui ! Je veux en savoir plus !</button>
       </div>
-    </div>
+    </div> <!-- Feature div -->
 
     <div class="feature_div">
       <div class="feature_text_div">
@@ -99,7 +99,34 @@
       <div class="feature_img_div">
         <img src="https://picsum.photos/600/400">
       </div>
-    </div>
+    </div> <!-- Feature div -->
+
+    <div class="intersection_div" style="margin-top: 30px;">
+      <div class="intersection_content test">
+        <h2 class="test">Looking for something ?</h2>
+        <a href="#"><div class="intersection_button_div test"><p>Hello World</p></div></a>
+      </div>
+    </div> <!-- Intersection div -->
+
+    <div id="projects_summary">
+      <div id="projects_summary_text">
+        <h1>Les projets que j'ai déjà fait</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis 
+          lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id 
+          porttitor erat, vitae dapibus velit. Praesent id felis tincidunt.</p>
+      </div>
+
+      <div id="projects_holder">
+
+        <div class="project">
+          <div class="project_picture">
+            <img src="https://picsum.photos/400/300">
+          </div>
+          <!-- TODO : Project description -->
+        </div>
+
+      </div>
+    </div> <!-- Projects summary -->
 
   </body>
 </html>
diff --git a/style.css b/style.css
index 89f537d..41c42fc 100644
--- a/style.css
+++ b/style.css
@@ -148,7 +148,6 @@ h1,h2,h3,h4,h5,p{
 }
 
 .feature_div{
-    border: 4px dotted red;
     width: 75%;
     margin: auto;
     margin-top: 30px;
@@ -187,4 +186,50 @@ h1,h2,h3,h4,h5,p{
     border: none;
     border-radius: 6px;
     font-size: 1.3em;
+}
+
+#projects_summary{
+    border: 4px dotted red;
+    width: 80%;
+    margin: auto;
+    margin-top: 30px;
+}
+#projects_summary_text h1{
+    margin-top: 0;
+    margin-bottom: 20px;
+    text-align: center;
+}
+#projects_summary_text p{
+    margin-top: 0;
+    margin-bottom: 20px;
+    text-align: center;
+}
+#projects_holder{
+    width: 90%;
+    margin: auto;
+    margin-top: 15px;
+    border: 4px dotted green;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+.project{
+    max-width: 400px;
+    max-height: 600px;
+    width: 100%;
+    height: 100%;
+    background-color: #A58181;
+    border-radius: 8px;
+}
+.project_picture{
+    height: 200px;
+    width: 95%;
+    margin: auto;
+    margin-top: 10px;
+}
+.project_picture img{
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file