From a66d46c41804433abdc62be0ebf212727767300e Mon Sep 17 00:00:00 2001
From: John Studnicka <computercrafter86@gmail.com>
Date: Tue, 20 Feb 2024 17:48:07 -0700
Subject: [PATCH 1/2] Add socials box at bottom of page

---
 Pages/Desktop.css | 37 +++++++++++++++++++++++++++++++++++
 Pages/index.html  | 49 ++++++++++++++++++++++++++++++-----------------
 2 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/Pages/Desktop.css b/Pages/Desktop.css
index 940af00..10fe60f 100644
--- a/Pages/Desktop.css
+++ b/Pages/Desktop.css
@@ -277,6 +277,43 @@ main {
     display: flex;
 }
 
+.social-icons {
+    position: relative;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    background: #fff;
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 5px; /* Optional, for rounded corners */
+}
+
+.social-icons ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex; /* Displays the icons in a row */
+}
+
+.social-icons ul li {
+    margin-right: 10px; /* Adds some space between icons */
+}
+
+.social-icons ul li:last-child {
+    margin-right: 0; /* Removes margin from the last icon */
+}
+
+.social-icons ul li a img {
+    width: 24px; /* Adjusts the size of the icons */
+    height: auto;
+    transition: transform 0.3s ease; /* Smooth scaling effect on hover */
+}
+
+.social-icons ul li a:hover img {
+    transform: scale(1.1); /* Scales the icon on hover */
+}
+
 /*Mobile*/
 @media screen and (max-width: 1200px) {
     /* comes into effect for screens larger than or equal to 481 pixels */
diff --git a/Pages/index.html b/Pages/index.html
index 8e7deab..8f5f39a 100644
--- a/Pages/index.html
+++ b/Pages/index.html
@@ -231,24 +231,37 @@
                 </section>
 
                 <section class="footer">
-                    <section id="footer-instagram">
-                        <img src="/Resources/Instagram.png" style="width: 5%" />
-                        <div>teamparadise.1165</div>
-                    </section>
-                    <section id="footer-facebook">
-                        <img
-                            src="/Resources/Facebook.png"
-                            style="width: 5%; padding-bottom: 10px"
-                        />
-                        <div>Team Paradise 1165</div>
-                    </section>
-                    <section id="footer-gmail">
-                        <img
-                            src="/Resources/Gmail Logo.png"
-                            style="width: 5%; padding-bottom: 10px"
-                        />
-                        <div>team1165@gmail.com</div>
-                    </section>
+                    <div class="social-icons">
+                        <ul>
+                            <li>
+                                <a
+                                    href="https://www.facebook.com/Team1165"
+                                    target="_blank"
+                                    ><img
+                                        src="/Resources/Facebook.png"
+                                        alt="Facebook"
+                                /></a>
+                            </li>
+                            <li>
+                                <a
+                                    href="mailto:team1165@gmail.com"
+                                    target="_blank"
+                                    ><img
+                                        src="/Resources/Gmail Logo.png"
+                                        alt="Gmail"
+                                /></a>
+                            </li>
+                            <li>
+                                <a
+                                    href="https://www.instagram.com/teamparadise.1165"
+                                    target="_blank"
+                                    ><img
+                                        src="/Resources/Instagram.png"
+                                        alt="Instagram"
+                                /></a>
+                            </li>
+                        </ul>
+                    </div>
                 </section>
             </section>
         </main>

From 0945c45f34378d604330cc467ac44aa0fb0ed59b Mon Sep 17 00:00:00 2001
From: John Studnicka <computercrafter86@gmail.com>
Date: Tue, 20 Feb 2024 17:55:37 -0700
Subject: [PATCH 2/2] Increase icon size slightly

---
 Pages/Desktop.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Pages/Desktop.css b/Pages/Desktop.css
index 10fe60f..577cd53 100644
--- a/Pages/Desktop.css
+++ b/Pages/Desktop.css
@@ -305,7 +305,7 @@ main {
 }
 
 .social-icons ul li a img {
-    width: 24px; /* Adjusts the size of the icons */
+    width: 30px; /* Adjusts the size of the icons */
     height: auto;
     transition: transform 0.3s ease; /* Smooth scaling effect on hover */
 }