From 2b3c973386cb77f9d43916b36fad8fe42b476296 Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Mon, 17 Mar 2025 23:16:07 +0100
Subject: [PATCH] Contact button on footer

Also added picture
---
 index.html | 17 ++++++++++++-----
 style.css  | 36 ++++++++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index e4686ee..a8aad4d 100644
--- a/index.html
+++ b/index.html
@@ -129,7 +129,7 @@
                 urna. Aliquam id porttitor erat, vitae dapibus velit. Praesent 
                 id felis tincidunt,</p>
             </article>
-            <button class="button project_button">Oui ! </button>
+            <button class="button project_button">Oui !</button>
           </div>
         </div>
 
@@ -137,9 +137,6 @@
     </div> <!-- Projects summary -->
 
     <footer>
-      <!--<div id="footer_picture">
-        <img src="https://picsum.photos/50/50">
-      </div>-->
       <div id="footer_content">
 
         <div id="footer_social_networks">
@@ -167,8 +164,18 @@
 
         </nav> <!-- Footer content links -->
 
+        <div id="footer_contact_div">
+          <h1>Contact</h1>
+          <p>Want to contact me ? Let's have a talk !</p>
+          <div id="footer_contact_button" class="button">Contact</div>
+        </div>
+
+        <div id="footer_picture">
+          <img src="https://picsum.photos/50/50">
+        </div>-
+
       </div> <!-- Footer content -->
-      <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin</p>
+      <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
     </footer>
 
   </body>
diff --git a/style.css b/style.css
index d7bb303..d842545 100644
--- a/style.css
+++ b/style.css
@@ -34,6 +34,7 @@ a:visited{
     border: none;
     border-radius: 6px;
     cursor: pointer;
+    text-align: center;
 }
 
 #welcome_div{
@@ -272,10 +273,11 @@ footer{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    gap: 30px;
 }
 
 #footer_content h1{
-    font-size: 2em;
+    font-size: 1.8em;
     width: 100%;
     margin: 0;
     margin-bottom: 4px;
@@ -289,7 +291,6 @@ footer{
     flex-direction: row;
     flex-wrap: wrap;
     align-content: flex-start;
-    margin-right: 20px;
 }
 .footer_social_network_item{
     width: 50px;
@@ -320,7 +321,7 @@ footer{
     margin-bottom: 15px;
 }
 .footer_links_box_title{
-    font-size: 1.6em;
+    font-size: 1.4em;
     border-bottom: rgb(179, 72, 122) 2px solid;
     margin: 0;
     margin-bottom: 2px;
@@ -339,18 +340,37 @@ footer{
     margin-bottom: 2px;
 }
 
+#footer_contact_div{
+    border: rgb(82, 15, 170) 2px solid;
+    width: 15%;
+}
+#footer_contact_div h1{
+    width: fit-content !important;
+    margin: auto;
+    margin-bottom: 0;
+}
+#footer_contact_div p{
+    margin-top: 10px;
+    margin-bottom: 12px;
+    text-align: center;
+}
+#footer_contact_button{
+    background-color: rgb(65, 185, 61);
+    font-size: 1.1em;
+    width: 50%;
+    margin: auto;
+}
+
 #footer_little_text{
     font-size: 0.8em;
     margin: 0;
     margin-left: 20px;
 }
 #footer_picture{
-    width: 5vw;
-    height: 5vw;
-    right: 10%;
-    top: 10px;
+    width: 100px;
+    height: 100px;
+    margin-left: auto;
     border: 2px green dotted;
-    position: absolute;
 }
 #footer_picture img{
     width: 100%;