From 71e34dfe130fd9dbd390b1b24ffa903537bcdca2 Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Mon, 17 Mar 2025 19:05:41 +0100
Subject: [PATCH] Footer social networks

---
 index.html | 14 +++++++++++++-
 style.css  | 38 ++++++++++++++++++++++++++++++++------
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 4148925..e4686ee 100644
--- a/index.html
+++ b/index.html
@@ -141,12 +141,23 @@
         <img src="https://picsum.photos/50/50">
       </div>-->
       <div id="footer_content">
+
+        <div id="footer_social_networks">
+          <h1>Social networks</h1>
+
+          <a href="#">
+            <div class="footer_social_network_item">
+              <img src="https://picsum.photos/50">
+            </div>
+          </a>
+
+        </div>
         
         <nav id="footer_content_links">
           <h1>Sitemap</h1>
 
           <div class="footer_links_box">
-            <p class="footer_links_box_title">Projects</p>
+            <h2 class="footer_links_box_title">Projects</h2>
             <ul>
               <li><p><a href="#">Project 1</a></p></li>
               <li><p><a href="#">Project 2</a></p></li>
@@ -155,6 +166,7 @@
           </div>
 
         </nav> <!-- Footer content links -->
+
       </div> <!-- Footer content -->
       <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin</p>
     </footer>
diff --git a/style.css b/style.css
index d5832c1..d7bb303 100644
--- a/style.css
+++ b/style.css
@@ -274,6 +274,36 @@ footer{
     flex-wrap: wrap;
 }
 
+#footer_content h1{
+    font-size: 2em;
+    width: 100%;
+    margin: 0;
+    margin-bottom: 4px;
+    height: fit-content;   
+}
+
+#footer_social_networks{
+    width: 15%;
+    border: 2px rgb(16, 207, 102) dotted;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    margin-right: 20px;
+}
+.footer_social_network_item{
+    width: 50px;
+    height: 50px;
+    margin: 0;
+    margin-right: 20px;
+    margin-top: 10px;
+}
+.footer_social_network_item img{
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+
 #footer_content_links{
     display: flex;
     flex-direction: row;
@@ -281,11 +311,7 @@ footer{
     min-width: 50px;
     flex-wrap: wrap;
     border: 2px rgb(212, 15, 230) dotted;
-}
-#footer_content_links h1{
-    font-size: 2em;
-    width: 100%;
-    margin: 0;
+    align-content: flex-start;
 }
 .footer_links_box{
     border: 3px blue dotted;
@@ -294,7 +320,7 @@ footer{
     margin-bottom: 15px;
 }
 .footer_links_box_title{
-    font-size: 1.8em;
+    font-size: 1.6em;
     border-bottom: rgb(179, 72, 122) 2px solid;
     margin: 0;
     margin-bottom: 2px;