From cb491e84a7640afeb2bf9cdfb3f1ca27594d4b72 Mon Sep 17 00:00:00 2001
From: S G Sumanth <sumanthusha01@gmail.com>
Date: Wed, 30 Oct 2024 14:36:00 +0530
Subject: [PATCH 1/2] Made the footer section interactive

---
 index.html | 113 +++++++++++++++-----------
 styles.css | 234 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 296 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index 5c87ee0..12ab6e4 100644
--- a/index.html
+++ b/index.html
@@ -468,56 +468,77 @@ <h3>Add Event</h3>
         </div>
     </section>
 <hr>
-    <footer class="footer-section">
-        <div class="container">
-            <!-- Logo and About Section -->
-            <div class="footer-logo-about">
-                <a href="index.html" class="footer-logo-link">
-                    <img src="images/logo.png" alt="Code Social Logo" class="footer-logo">
-                    <span class="website-name">Code Social</span>
-                </a>
-                <p class="footer-about-text">
-                    Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and
-                    connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and
-                    opportunities to cultivate their skills, explore their interests, and <br>collaborate with
-                    like-minded peers.
-                </p>
-                <div class="social-icons">
-                    <a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png"
-                            alt="WhatsApp"></a>
-                    <a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png"
-                            alt="Discord"></a>
-                    <a href="https://www.linkedin.com/company/code-social/" target="_blank"><img
-                            src="./images/linkedin-icon.png" alt="LinkedIn"></a>
-                </div>
-            </div>
+<footer class="footer-section">
+    <div class="container">
+        <!-- Logo and About Section -->
+        <div class="footer-logo-about">
+            <a href="index.html" class="footer-logo-link">
+                <img src="images/logo.png" alt="Code Social Logo" class="footer-logo animated-logo">
+                <span class="website-name">Code Social</span>
+            </a>
+            <p class="footer-about-text">
+                Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and
+                connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and
+                opportunities to cultivate their skills, explore their interests, and <br>collaborate with
+                like-minded peers.
+            </p>
+        </div>
 
-            <!-- Links Section -->
-            <div class="footer-links">
-                <div class="footer-column">
-                    <p class="footer-title">Quick Links</p>
-                    <ul class="footer-list">
-                        <li><a href="#">About Us</a></li>
-                        <li><a href="events.html">Events</a></li>
-                        <li><a href="#">Community Guidelines</a></li>
-                        <li><a href="#">Careers</a></li>
-                    </ul>
-                </div>
-                <div class="footer-column">
-                    <p class="footer-title">Help</p>
-                    <ul class="footer-list">
-                        <li><a href="#">Contact Us</a></li>
-                        <li><a href="#">Volunteer Opportunities</a></li>
-                        <li><a href="#">Terms & Conditions</a></li>
-                    </ul>
-                </div>
+        <!-- Links Section -->
+        <div class="footer-links">
+            <div class="footer-column">
+                <p class="footer-title">Quick Links</p>
+                <ul class="footer-list">
+                    <li><a href="#" class="footer-link">About Us</a></li>
+                    <li><a href="events.html" class="footer-link">Events</a></li>
+                    <li><a href="#" class="footer-link">Community Guidelines</a></li>
+                    <li><a href="#" class="footer-link">Careers</a></li>
+                </ul>
+            </div>
+            <div class="footer-column">
+                <p class="footer-title">Help</p>
+                <ul class="footer-list">
+                    <li><a href="#" class="footer-link">Contact Us</a></li>
+                    <li><a href="#" class="footer-link">Volunteer Opportunities</a></li>
+                    <li><a href="#" class="footer-link">Terms & Conditions</a></li>
+                </ul>
             </div>
         </div>
 
-        <!-- Footer Bottom -->
-        <hr class="footer-divider">
-        <p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
-    </footer>
+        <!-- Newsletter Section -->
+        <div class="footer-newsletter-container">
+            <div class="footer-newsletter animated-newsletter">
+                <p class="footer-title">Stay Updated</p>
+                <br>
+                <p class="newsletter-text">Subscribe to our newsletter for the latest updates and community news.</p>
+                <br>
+                <form class="newsletter-form">
+                    <input type="email" class="newsletter-input" placeholder="Your Email Address" required>
+                    <button type="submit" class="newsletter-btn">Subscribe</button>
+                </form>
+            </div>
+            
+            <div class="social-icons">
+                <a href="https://wa.me/your-whatsapp-number" target="_blank" class="social-icon-link">
+                    <img src="./images/whatsapp-icon.png" alt="WhatsApp" class="social-icon">
+                </a>
+                <a href="https://discord.gg/MSTNyRSPYW" target="_blank" class="social-icon-link">
+                    <img src="./images/discord-icon.png" alt="Discord" class="social-icon">
+                </a>
+                <a href="https://www.linkedin.com/company/code-social/" target="_blank" class="social-icon-link">
+                    <img src="./images/linkedin-icon.png" alt="LinkedIn" class="social-icon">
+                </a>
+                <a href="https://github.com/Code-Social" target="_blank" class="social-icon-link">
+                    <img src="./images/gitHub.png" alt="GitHub" class="social-icon">
+                </a>
+            </div>
+        </div>        
+    </div>
+
+    <!-- Footer Bottom -->
+    <hr class="footer-divider">
+    <p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
+</footer>
 
 
    <script>
diff --git a/styles.css b/styles.css
index 4b5ea5b..0aa71cd 100644
--- a/styles.css
+++ b/styles.css
@@ -502,7 +502,7 @@ body.dark-mode .calendar-day:hover {
   color: orangered;
 }
 .dark-mode .website-name {
-  color: white;
+  color: rgb(20, 19, 19);
 }
 .dark-mode .website-name li{
   color: white;
@@ -1051,7 +1051,7 @@ body.dark-mode #theme-switch {
 /* Footer Styles */
 /* General Styling for Footer */
 .footer-section {
-    background-color: #f9fafb;
+    background-color: #0c0c0d;
     padding: 3rem 1rem;
     color: #6b7280;
     font-family: 'Arial', sans-serif;
@@ -1065,14 +1065,13 @@ body.dark-mode #theme-switch {
 
 /* Dark Mode Footer */
 .dark-mode-footer {
-  background-color: #2E2E2E;
+  background-color: #070707;
   color: #fff;
 }
 
 .dark-text {
-  color: #f1f1f1;
+  color: #070707;
 }
-
 .light-text {
   color: black;
 }
@@ -1179,3 +1178,228 @@ body.dark-mode #theme-switch {
     font-size: 0.875rem;
     color: #6b7280;
   }
+/* Footer Styling */
+.footer-section {
+  background-color: #faf9f9;
+  color: #eee;
+  padding: 2rem;
+  text-align: center;
+}
+
+.footer-logo-about {
+  margin-bottom: 1.5rem;
+}
+
+.footer-logo-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: #eee;
+  animation: fadeIn 1.2s ease-in-out;
+}
+
+.footer-logo {
+  width: 50px;
+  transition: transform 0.3s ease;
+}
+
+.animated-logo:hover {
+  transform: rotate(360deg);
+}
+
+.website-name {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.footer-about-text {
+  max-width: 600px;
+  margin: 0.5rem auto;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.social-icons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.social-icon {
+  width: 24px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.social-icon-link:hover .social-icon {
+  transform: scale(1.2);
+  box-shadow: 0px 0px 5px #aaa;
+}
+
+/* Links Section */
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 1.5rem;
+}
+
+.footer-column {
+  text-align: left;
+}
+
+.footer-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  color: #ffcc00;
+}
+
+.footer-list {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-link {
+  color: #eee;
+  text-decoration: none;
+  font-size: 1rem;
+  transition: color 0.3s;
+}
+
+.footer-link:hover {
+  color: #ffcc00;
+}
+
+/* Footer Bottom */
+.footer-divider {
+  margin: 1rem 0;
+  border: 0;
+  border-top: 1px solid #555;
+}
+
+.footer-bottom-text {
+  font-size: 0.9rem;
+  color: #888;
+  animation: fadeInUp 1.2s ease;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+      opacity: 0;
+      transform: translateY(20px);
+  }
+  to {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
+/* Link Hover Underline Effect */
+.footer-link {
+  color: #eee;
+  text-decoration: none;
+  font-size: 1rem;
+  position: relative;
+  transition: color 0.3s;
+}
+
+.footer-link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 2px;
+  background-color: #ffcc00;
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+  transform-origin: left;
+}
+
+.footer-link:hover {
+  color: #ffcc00;
+}
+
+.footer-link:hover::after {
+  transform: scaleX(1);
+}
+/* Footer Text Animations */
+.footer-about-text, .footer-bottom-text, .footer-title, .footer-link {
+  position: relative;
+  display: inline-block;
+  animation: fadeInUp 1.2s ease;
+  transition: color 0.3s ease;
+}
+
+/* Wiggle Effect on Hover */
+.footer-about-text:hover,
+.footer-bottom-text:hover,
+.footer-title:hover,
+.footer-link:hover {
+  color: #ffcc00;
+  animation: wiggle 0.4s ease-in-out;
+}
+
+/* Keyframes for Wiggle */
+@keyframes wiggle {
+  0%, 100% { transform: rotate(0); }
+  25% { transform: rotate(2deg); }
+  50% { transform: rotate(-2deg); }
+  75% { transform: rotate(1deg); }
+}
+
+/* Fade-in Animation for Initial Load */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animated-newsletter {
+  animation: fadeInUp 1s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes fadeInUp {
+  0% {
+      opacity: 0;
+      transform: translateY(20px);
+  }
+  100% {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
+
+.newsletter-input, .newsletter-btn {
+  transition: all 0.3s ease;
+}
+.newsletter-text {
+  color: black;
+}
+
+.newsletter-input:hover, .newsletter-btn:hover {
+  transform: scale(1.05);
+}
+
+.newsletter-input {
+  padding: 8px;
+  margin-right: 8px;
+}
+
+.newsletter-btn {
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: #121111;
+  border: none;
+  cursor: pointer;
+}

From e8dd3a2a3c9b3990b7f4d3471df6b2041f18bc69 Mon Sep 17 00:00:00 2001
From: S G Sumanth <sumanthusha01@gmail.com>
Date: Wed, 30 Oct 2024 19:38:55 +0530
Subject: [PATCH 2/2] Made the necessary changes

---
 index.html | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 12ab6e4..ea7738f 100644
--- a/index.html
+++ b/index.html
@@ -504,20 +504,8 @@ <h3>Add Event</h3>
                 </ul>
             </div>
         </div>
-
-        <!-- Newsletter Section -->
-        <div class="footer-newsletter-container">
-            <div class="footer-newsletter animated-newsletter">
-                <p class="footer-title">Stay Updated</p>
-                <br>
-                <p class="newsletter-text">Subscribe to our newsletter for the latest updates and community news.</p>
-                <br>
-                <form class="newsletter-form">
-                    <input type="email" class="newsletter-input" placeholder="Your Email Address" required>
-                    <button type="submit" class="newsletter-btn">Subscribe</button>
-                </form>
-            </div>
-            
+        <div>
+        <p class="footer-title">Connect With Us</p>
             <div class="social-icons">
                 <a href="https://wa.me/your-whatsapp-number" target="_blank" class="social-icon-link">
                     <img src="./images/whatsapp-icon.png" alt="WhatsApp" class="social-icon">
@@ -532,8 +520,8 @@ <h3>Add Event</h3>
                     <img src="./images/gitHub.png" alt="GitHub" class="social-icon">
                 </a>
             </div>
-        </div>        
-    </div>
+        </div>      
+        </div>
 
     <!-- Footer Bottom -->
     <hr class="footer-divider">