From a018c53cf20c68d0cee7fe1e8a007a39bb06a8d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mattias=20M=C3=A4lman?= <bellman247@hotmail.com>
Date: Sat, 15 Nov 2025 19:54:08 +0100
Subject: [PATCH] Add LinkedIn badge to footer and style social links

---
 index.html    | 17 ++++++++++++-----
 src/style.css | 18 ++++++++++++++----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index f9e0b39..488523e 100644
--- a/index.html
+++ b/index.html
@@ -63,11 +63,18 @@ <h2 id="movie-title"></h2>
         <footer>
             <div class="footer-content">
                 <p>&copy; <script>document.write(new Date().getFullYear())</script> Mattias Mälman</p>
-                <a href="https://github.com/bellmano/RandomBeckGenerator_website" target="_blank" rel="noopener noreferrer" class="github-link" title="GitHub">
-                    <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 4.7 18 5 18 5c.6 1.6.2 2.8 0 3.2.8.8 1.3 1.9 1.3 3.1 0 4.7-2.8 5.7-5.5 6 .5.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 0z"/>
-                    </svg>
-                </a>
+                <div class="social-links">
+                    <a href="https://github.com/bellmano/RandomBeckGenerator_website" target="_blank" rel="noopener noreferrer" class="github-link" title="GitHub">
+                        <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 4.7 18 5 18 5c.6 1.6.2 2.8 0 3.2.8.8 1.3 1.9 1.3 3.1 0 4.7-2.8 5.7-5.5 6 .5.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 0z"/>
+                        </svg>
+                    </a>
+                    <a href="https://www.linkedin.com/in/mattias-malman/" target="_blank" rel="noopener noreferrer" class="linkedin-link" title="LinkedIn">
+                        <svg class="linkedin-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/>
+                        </svg>
+                    </a>
+                </div>
             </div>
         </footer>
     </div>
diff --git a/src/style.css b/src/style.css
index 15bdf74..db5f34b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -372,7 +372,14 @@ footer p {
     margin: 0;
 }
 
-.github-link {
+.social-links {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.github-link,
+.linkedin-link {
     color: #9AA2B1;
     transition: all 0.3s ease;
     display: flex;
@@ -382,19 +389,22 @@ footer p {
     border-radius: 6px;
 }
 
-.github-link:hover {
+.github-link:hover,
+.linkedin-link:hover {
     color: #3BA3E5;
     transform: translateY(-2px);
     background-color: rgba(59, 163, 229, 0.1);
 }
 
-.github-icon {
+.github-icon,
+.linkedin-icon {
     width: 20px;
     height: 20px;
     transition: all 0.3s ease;
 }
 
-.github-link:hover .github-icon {
+.github-link:hover .github-icon,
+.linkedin-link:hover .linkedin-icon {
     transform: scale(1.1);
 }