From 38d1cd83df43ac0a8998c4d38e1044d71343e94b Mon Sep 17 00:00:00 2001
From: Vaibhav Babele <vaibhavbabele15@gmail.com>
Date: Thu, 23 Jan 2025 19:34:49 +0530
Subject: [PATCH 1/7] add separate css page for footer

---
 Blog.html         | 137 +++++++--------
 about.html        | 437 +++++-----------------------------------------
 contact.html      | 232 +++++++-----------------
 contributors.html | 329 +++++++---------------------------
 footer.css        | 163 +++++++++++++++++
 pages/Login.css   |   8 +-
 pages/Login.html  |  87 +++++++++
 pages/SignUp.html |  88 ++++++++++
 styles.css        |   5 +-
 9 files changed, 574 insertions(+), 912 deletions(-)
 create mode 100644 footer.css

diff --git a/Blog.html b/Blog.html
index 9ec960bd..a120a450 100644
--- a/Blog.html
+++ b/Blog.html
@@ -12,6 +12,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link rel="stylesheet" href="footer.css">
   <style>
  /* General Body Styling */
 body {
@@ -299,100 +300,90 @@ <h2 class="blog-post-title">Coding Interview Preparation Tips</h2>
     <a href="#next" class="next-page">Next »</a>
   </div>
 
-  <footer style="background: linear-gradient(to right, #11cb2a, #19be50);; color: #ffffff; padding: 40px 20px; font-family: 'Arial', sans-serif; overflow: hidden;">
+  <footer>
     <!-- Footer Container -->
-    <div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px;">
-      
+    <div class="footer-container">
       <!-- Left Section (Logo and Description) -->
-      <div class="footer-left" style="flex: 2; min-width: 300px;">
+      <div class="footer-left">
         <!-- Logo -->
-        <div class="footer-logo" style="margin-bottom: 20px; animation: fadeInLeft 1s;">
-          <div style="background-color: #8cc152; padding: 20px; border-radius: 8px; display: inline-block;">
-            <h1 style="margin: 0; font-size: 36px; font-weight: bold;">DSA</h1>
+        <div class="footer-logo" >
+          <div class="footer-div" onclick="window.location.href = 'index.html'">
+            <h1>DSA</h1>
           </div>
         </div>
         <!-- Description -->
-        <p style="font-size: 16px; line-height: 1.6; animation: fadeInLeft 1.5s;">
-          DSA problem solutions involve step-by-step methods to solve data structure and algorithm challenges efficiently. 
-          They include understanding the problem, selecting the right approach, implementing optimized code, and analyzing 
-          time and space complexity for performance.
+        <p>
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
         </p>
       </div>
-  
+
       <!-- Quick Links Section -->
+      <div class="footer-section-services">
+        <h2>Quick Links </h2>
+        <ul >
+          <li><a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li><a href="#">Work With Us</a></li>
+          <li><a href="#">Investor Relations</a></li>
+          <li><a href="#">Contact Us</a></li>
+        </ul>
       </div>
-        <div class="footer-section services" >
-          <h2 style="font-size: 18px;
-           margin-bottom: 10px; 
-           transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">DSA Problem Solutions</h2>
-          <ul style="list-style: none; padding: 0;">
-            <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-            <li><a href="Blog.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-            <li><a href="contact.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
-          </ul>
-        </div>
-  
+      <div class="footer-section-services">
+        <h2> DSA Problem Solutions </h2>
+        <ul >
+          <li> <a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li> <a href="#">Work With Us</a></li>
+          <li> <a href="#">Investor Relations</a></li>
+          <li> <a href="contact.html">Contact Us</a> </li>
+        </ul>
+      </div>
+
       <!-- Learn More Section -->
-       <div class="footer-section services" >
-          <h2 style="font-size: 18px;
-           margin-bottom: 10px; 
-           transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Learn More</h2>
-          <ul style="list-style: none; padding: 0;">
-            <li><a href="privacy.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a></li>
-            <li><a href="security.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a></li>
-            <li><a href="terms.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a></li>
-            <li><a href="contributors.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a></li>
-          </ul>
+      <div class="footer-section-services">
+        <h2> Learn More</h2>
+        <ul >
+          <li><a href="privacy.html">Privacy Policy</a></li>
+          <li><a href="security.html">Security</a></li>
+          <li><a ref="terms.html">Terms of Service</a></li>
+          <li><a href="contributors.html">Our Contributors</a></li>
+        </ul>
       </div>
     </div>
-  
+
     <!-- Stay Updated Section -->
-    <div class="footer-section.newsletter" style="background: rgba(255, 255, 255, 0.2); border-radius: 20px;  backdrop-filter: blur(10px); padding: 10px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  transition: transform 0.3s ease, box-shadow 0.3s ease;">
-      <h3 style="font-size: 18px; margin-bottom: 20px; text-align: center; color: #ffffff;">Stay Updated</h3>
-      <p style="text-align: center; font-size: 14px; line-height: 1.8; margin-bottom: 20px;">
-        Subscribe to our newsletter for the latest updates and tips on mastering data structures and algorithms.
+    <div
+      class="footer-section-newsletter" >
+      <h3 > Stay Updated </h3>
+      <p >
+        Subscribe to our newsletter for the latest updates and tips on
+        mastering data structures and algorithms.
       </p>
-      <form action="#" method="POST" style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px;">
-        <input type="email" placeholder="Your Email Address" required style="flex: 1; padding: 10px; font-size: 14px; border: 1px solid #dee2e6; border-radius: 4px;">
-        <button type="submit" style="padding: 10px 20px; font-size: 14px; background-color: #6c757d; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s;">
-          Subscribe
-        </button>
+      <form action="#" method="POST">
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit">Subscribe</button>
       </form>
     </div>
-  
+
     <!-- Social Links -->
-    <div class="social-links" style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s;">
-      <ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px;">
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-facebook"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-twitter"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-linkedin"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-youtube"></i></a></li>
+    <div
+      class="social-links" >
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
       </ul>
     </div>
-  
+
     <!-- Footer Bottom -->
-    <div class="footer-bottom" style="text-align: center; margin-top: 20px; padding-top: 20px; background: none; color: #ffffff; animation: fadeInUp 3s;">
-      <p style="margin: 0; font-size: 14px;">&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+    <div
+      class="footer-bottom">
+      <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
     </div>
   </footer>
   
diff --git a/about.html b/about.html
index 4c78f757..f01193eb 100644
--- a/about.html
+++ b/about.html
@@ -13,6 +13,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
     />
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="footer.css">
     <style>
       .about-hero {
         background: linear-gradient(to right, #11cb2a, #19be50);
@@ -255,6 +256,8 @@
         top: -20px;
         left: -11px;
       }
+
+      
     </style>
   </head>
 
@@ -364,56 +367,19 @@ <h3>Accessibility</h3>
       </div>
     </section>
 
-    <footer
-      style="
-        background: linear-gradient(to right, #11cb2a, #19be50);
-        color: #ffffff;
-        padding: 40px 20px;
-        font-family: 'Arial', sans-serif;
-        overflow: hidden;
-        position: relative;
-        z-index: 0;
-      "
-    >
+    <footer>
       <!-- Footer Container -->
-      <div
-        class="footer-container"
-        style="
-          max-width: 1200px;
-          margin: 0 auto;
-          display: flex;
-          flex-wrap: wrap;
-          gap: 40px;
-        "
-      >
+      <div class="footer-container">
         <!-- Left Section (Logo and Description) -->
-        <div class="footer-left" style="flex: 2; min-width: 300px">
+        <div class="footer-left">
           <!-- Logo -->
-          <div
-            class="footer-logo"
-            style="margin-bottom: 20px; animation: fadeInLeft 1s"
-          >
-            <div
-              style="
-                background-color: #8cc152;
-                padding: 20px;
-                border-radius: 8px;
-                display: inline-block;
-                cursor: pointer;
-              "
-              onclick="window.location.href = 'index.html'"
-            >
-              <h1 style="margin: 0; font-size: 36px; font-weight: bold">DSA</h1>
+          <div class="footer-logo" >
+            <div class="footer-div" onclick="window.location.href = 'index.html'">
+              <h1>DSA</h1>
             </div>
           </div>
           <!-- Description -->
-          <p
-            style="
-              font-size: 16px;
-              line-height: 1.6;
-              animation: fadeInLeft 1.5s;
-            "
-          >
+          <p>
             DSA problem solutions involve step-by-step methods to solve data
             structure and algorithm challenges efficiently. They include
             understanding the problem, selecting the right approach,
@@ -423,377 +389,68 @@ <h1 style="margin: 0; font-size: 36px; font-weight: bold">DSA</h1>
         </div>
 
         <!-- Quick Links Section -->
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Quick Links
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
+        <div class="footer-section-services">
+          <h2>Quick Links </h2>
+          <ul >
+            <li><a href="about.html">Who We Are</a></li>
+            <li> <a href="#">Blog</a></li>
+            <li><a href="#">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="#">Contact Us</a></li>
           </ul>
         </div>
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            DSA Problem Solutions
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
+        <div class="footer-section-services">
+          <h2> DSA Problem Solutions </h2>
+          <ul >
+            <li> <a href="about.html">Who We Are</a></li>
+            <li> <a href="#">Blog</a></li>
+            <li> <a href="#">Work With Us</a></li>
+            <li> <a href="#">Investor Relations</a></li>
+            <li> <a href="contact.html">Contact Us</a> </li>
           </ul>
         </div>
 
         <!-- Learn More Section -->
-        <div class="footer-section services">
-          <h2
-            style="
-              position: relative;
-              z-index: 1;
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Learn More
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="privacy.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Privacy Policy</a
-              >
-            </li>
-            <li>
-              <a
-                href="security.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Security</a
-              >
-            </li>
-            <li>
-              <a
-                href="terms.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Terms of Service</a
-              >
-            </li>
-            <li>
-              <a
-                href="contributors.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Our Contributors</a
-              >
-            </li>
+        <div class="footer-section-services">
+          <h2> Learn More</h2>
+          <ul >
+            <li><a href="privacy.html">Privacy Policy</a></li>
+            <li><a href="security.html">Security</a></li>
+            <li><a ref="terms.html">Terms of Service</a></li>
+            <li><a href="contributors.html">Our Contributors</a></li>
           </ul>
         </div>
       </div>
 
       <!-- Stay Updated Section -->
       <div
-        class="footer-section.newsletter"
-        style="
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 20px;
-          backdrop-filter: blur(10px);
-          padding: 10px;
-          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-          transition: transform 0.3s ease, box-shadow 0.3s ease;
-          height: 10rem;
-        "
-      >
-        <h3
-          style="
-            font-size: 18px;
-            margin-bottom: 20px;
-            text-align: center;
-            color: #ffffff;
-          "
-        >
-          Stay Updated
-        </h3>
-        <p
-          style="
-            text-align: center;
-            font-size: 14px;
-            line-height: 1.8;
-            margin-bottom: 20px;
-          "
-        >
+        class="footer-section-newsletter" >
+        <h3 > Stay Updated </h3>
+        <p >
           Subscribe to our newsletter for the latest updates and tips on
           mastering data structures and algorithms.
         </p>
-        <form
-          action="#"
-          method="POST"
-          style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px"
-        >
-          <input
-            type="email"
-            placeholder="Your Email Address"
-            required
-            style="
-              flex: 1;
-              padding: 10px;
-              font-size: 14px;
-              border: 1px solid #dee2e6;
-              border-radius: 4px;
-            "
-          />
-          <button
-            type="submit"
-            style="
-              padding: 10px 20px;
-              font-size: 14px;
-              background-color: #6c757d;
-              color: #ffffff;
-              border: none;
-              border-radius: 4px;
-              cursor: pointer;
-              transition: background-color 0.3s;
-            "
-          >
-            Subscribe
-          </button>
+        <form action="#" method="POST">
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit">Subscribe</button>
         </form>
       </div>
 
       <!-- Social Links -->
       <div
-        class="social-links"
-        style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s"
-      >
-        <ul
-          style="
-            list-style: none;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-          "
-        >
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-facebook"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fa-brands fa-x-twitter"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-linkedin"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#8cc152';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-youtube"></i
-            ></a>
-          </li>
+        class="social-links" >
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
         </ul>
       </div>
 
       <!-- Footer Bottom -->
       <div
-        class="footer-bottom"
-        style="
-          text-align: center;
-          margin-top: 20px;
-          padding-top: 20px;
-          background: none;
-          color: #ffffff;
-          animation: fadeInUp 3s;
-        "
-      >
-        <p style="margin: 0; font-size: 14px">
-          &copy; <span id="currentYear"></span> DSA Problem Solutions. All
-          rights reserved.
-        </p>
+        class="footer-bottom">
+        <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
       </div>
     </footer>
     <script
diff --git a/contact.html b/contact.html
index ed5e7bf2..65baac0d 100644
--- a/contact.html
+++ b/contact.html
@@ -12,6 +12,7 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="footer.css">
 </head>
 
 <style>
@@ -401,60 +402,7 @@
     }
   }
 
-  footer {
-    background: #fff;
-    padding: 20px;
-    text-align: center;
-    border-top: 2px solid #e0e0e0;
-  }
-
-  .footer-content {
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding: 20px;
-    background-color: white;
-    color: black;
-
-  }
-
-  .footer-section {
-    flex: 1;
-    min-width: 200px;
-  }
-
-  .footer-section img {
-    width: 100px;
-    margin-bottom: 10px;
-  }
-
-  .footer-section ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  .footer-section ul li {
-    margin: 5px 0;
-  }
-
-  .footer-section ul li a {
-    text-decoration: none;
-    color: #333;
-    transition: color 0.3s;
-  }
-
-  .footer-section ul li a:hover {
-    color: #239d21;
-  }
-
-  .footer-bottom {
-    margin-top: 20px;
-    font-size: 0.9rem;
-    color: #555;
-  }
+  
 
   #about {
     margin: 40px;
@@ -472,18 +420,7 @@
 
   }
 
-  .DSA-footer-logo {
-    width: 100px;
-    margin-top: 40px
-  }
-
-  .social-icons {
-    margin-left: 15%;
-    list-style: none;
-    padding: 0;
-    display: flex;
-    gap: 10px
-  }
+  
 
   @media (max-width: 770px) {
     .content-wrapper {
@@ -661,145 +598,94 @@ <h3>Call Us</h3>
 
   </main>
 
-
-  <footer
-    style="background: linear-gradient(to right, #11cb2a, #19be50);; color: #ffffff; padding: 40px 20px; font-family: 'Arial', sans-serif; overflow: hidden;">
+  <footer>
     <!-- Footer Container -->
-    <div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px;">
-
+    <div class="footer-container">
       <!-- Left Section (Logo and Description) -->
-      <div class="footer-left" style="flex: 2; min-width: 300px;">
+      <div class="footer-left">
         <!-- Logo -->
-        <div class="footer-logo" style="margin-bottom: 20px; animation: fadeInLeft 1s;">
-          <div style="background-color: #8cc152; padding: 20px; border-radius: 8px; display: inline-block;">
-            <h1 style="margin: 0; font-size: 36px; font-weight: bold;">DSA</h1>
-
+        <div class="footer-logo" >
+          <div class="footer-div" onclick="window.location.href = 'index.html'">
+            <h1>DSA</h1>
           </div>
         </div>
         <!-- Description -->
-        <p style="font-size: 16px; line-height: 1.6; animation: fadeInLeft 1.5s;">
-          DSA problem solutions involve step-by-step methods to solve data structure and algorithm challenges
-          efficiently.
-          They include understanding the problem, selecting the right approach, implementing optimized code, and
-          analyzing
-          time and space complexity for performance.
+        <p>
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
         </p>
       </div>
 
       <!-- Quick Links Section -->
-      <div class="footer-section services">
-        <h2 style="font-size: 18px;
-         margin-bottom: 10px; 
-         transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">
-          Quick Links</h2>
-        <ul style="list-style: none; padding: 0;">
-          <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
+      <div class="footer-section-services">
+        <h2>Quick Links </h2>
+        <ul >
+          <li><a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li><a href="#">Work With Us</a></li>
+          <li><a href="#">Investor Relations</a></li>
+          <li><a href="#">Contact Us</a></li>
         </ul>
       </div>
-      <div class="footer-section services">
-        <h2 style="font-size: 18px;
-         margin-bottom: 10px; 
-         transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">
-          DSA Problem Solutions</h2>
-        <ul style="list-style: none; padding: 0;">
-          <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-          <li><a href="contact.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
+      <div class="footer-section-services">
+        <h2> DSA Problem Solutions </h2>
+        <ul >
+          <li> <a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li> <a href="#">Work With Us</a></li>
+          <li> <a href="#">Investor Relations</a></li>
+          <li> <a href="contact.html">Contact Us</a> </li>
         </ul>
       </div>
 
       <!-- Learn More Section -->
-      <div class="footer-section services">
-        <h2 style="font-size: 18px;
-         margin-bottom: 10px; 
-         transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">
-          Learn More</h2>
-        <ul style="list-style: none; padding: 0;">
-          <li><a href="privacy.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a></li>
-          <li><a href="security.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a></li>
-          <li><a href="terms.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a></li>
-          <li><a href="contributors.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a></li>
+      <div class="footer-section-services">
+        <h2> Learn More</h2>
+        <ul >
+          <li><a href="privacy.html">Privacy Policy</a></li>
+          <li><a href="security.html">Security</a></li>
+          <li><a ref="terms.html">Terms of Service</a></li>
+          <li><a href="contributors.html">Our Contributors</a></li>
         </ul>
       </div>
     </div>
 
     <!-- Stay Updated Section -->
-    <div class="footer-section.newsletter"
-      style="background: rgba(255, 255, 255, 0.2); border-radius: 20px;  backdrop-filter: blur(10px); padding: 10px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  transition: transform 0.3s ease, box-shadow 0.3s ease;">
-      <h3 style="font-size: 18px; margin-bottom: 20px; text-align: center; color: #ffffff;">Stay Updated</h3>
-      <p style="text-align: center; font-size: 14px; line-height: 1.8; margin-bottom: 20px;">
-        Subscribe to our newsletter for the latest updates and tips on mastering data structures and algorithms.
+    <div
+      class="footer-section-newsletter" >
+      <h3 > Stay Updated </h3>
+      <p >
+        Subscribe to our newsletter for the latest updates and tips on
+        mastering data structures and algorithms.
       </p>
-      <form action="#" method="POST" style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px;">
-        <input type="email" placeholder="Your Email Address" required
-          style="flex: 1; padding: 10px; font-size: 14px; border: 1px solid #dee2e6; border-radius: 4px;">
-        <button type="submit"
-          style="padding: 10px 20px; font-size: 14px; background-color: #6c757d; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s;">
-          Subscribe
-        </button>
+      <form action="#" method="POST">
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit">Subscribe</button>
       </form>
     </div>
 
     <!-- Social Links -->
-    <div class="social-links" style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s;">
-      <ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px;">
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i
-              class="fab fa-facebook"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i
-              class="fa-brands fa-x-twitter"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i
-              class="fab fa-linkedin"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i
-              class="fab fa-youtube"></i></a></li>
+    <div
+      class="social-links" >
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
       </ul>
     </div>
 
     <!-- Footer Bottom -->
-    <div class="footer-bottom"
-      style="text-align: center; margin-top: 20px; padding-top: 20px; background: none; color: #ffffff; animation: fadeInUp 3s;">
-      <p style="margin: 0; font-size: 14px;">
-        &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.
-      </p>
+    <div
+      class="footer-bottom">
+      <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
     </div>
   </footer>
+
+  
   <script>
     // Get the current year and update the span element
     document.getElementById('currentYear').textContent = new Date().getFullYear();
diff --git a/contributors.html b/contributors.html
index 4fa5aeee..92e3d18e 100644
--- a/contributors.html
+++ b/contributors.html
@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
     integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="footer.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
@@ -156,130 +157,7 @@
       background-color: rgb(80, 183, 218);
     }
 
-    footer {
-      background-color: #ffffff;
-      padding: 40px 0;
-      color: #ffffff;
-      box-shadow: 12px 6px 14px rgba(0, 0, 0, 0.15);
-      font-family: "Outfit", serif;
-      font-weight: 300;
-      margin-top: 50px;
-    }
-
-    .footer-content {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
-      max-width: 1200px;
-      margin: auto;
-      padding: 20px;
-    }
-
-    .footer-section {
-      margin: 20px;
-    }
-
-    .footer-section h2 {
-      font-size: 18px;
-      font-weight: bold;
-      margin-bottom: 20px;
-    }
-
-    .footer-section ul {
-      list-style: none;
-      padding: 0;
-    }
-
-    .footer-section ul li {
-      margin-bottom: 10px;
-    }
-
-    .footer-section ul li a {
-      text-decoration: none;
-      color: #6c757d;
-      font-size: 14px;
-    }
-
-    .footer-section ul li a:hover {
-      color: #000;
-    }
-
-    .social-icons {
-      display: flex;
-      gap: 10px;
-    }
-
-    .social-icons li {
-      list-style: none;
-    }
-
-    .social-icons li a {
-      font-size: 20px;
-      color: #6c757d;
-    }
-
-    .footer-section.newsletter h2 {
-      font-size: 22px;
-      color: #ea0202;
-      margin-bottom: 15px;
-    }
-
-    .footer-section.newsletter p {
-      font-size: 14px;
-      color: #130111;
-      margin-bottom: 20px;
-    }
-
-    .footer-section.newsletter .newsletter-form {
-      display: flex;
-      justify-content: center;
-      gap: 10px;
-      align-items: center;
-    }
-
-    .footer-section.newsletter .newsletter-form input {
-      padding: 10px;
-      font-size: 14px;
-      width: 250px;
-      border: 2px solid #ddd;
-      border-radius: 4px;
-      transition: border-color 0.3s ease;
-    }
-
-    .footer-section.newsletter .newsletter-form input:focus {
-      border-color: #ff5722;
-      /* Focused border color */
-      outline: none;
-    }
-
-    .footer-section.newsletter .subscribe-btn {
-      background: linear-gradient(90deg, #ff5722, #ff0000);
-      /* Red gradient */
-      color: #fff;
-      padding: 10px 20px;
-      font-size: 14px;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      transition: background 0.3s ease, transform 0.3s ease;
-    }
-
-    .footer-section.newsletter .subscribe-btn:hover {
-      background: linear-gradient(90deg, #ff0000, #ff5722);
-      /* Reverse gradient on hover */
-      transform: translateY(-3px);
-      /* Button hover animation */
-    }
-
-    .footer-bottom {
-      text-align: center;
-      padding: 20px 0;
-      background-color: #e9ecef;
-      font-size: 14px;
-      position: relative;
-      bottom: 0;
-    }
-
+    
     @keyframes pulse {
       0% {
         text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.6);
@@ -320,23 +198,7 @@
       color: #333;
     }
 
-    /* Footer Styling */
-    footer {
-      background-color: #333;
-      color: #fff;
-      text-align: center;
-      padding: 1rem 0;
-    }
-
-    footer a {
-      color: #00bcd4;
-      text-decoration: none;
-      font-weight: bold;
-    }
-
-    footer a:hover {
-      text-decoration: underline;
-    }
+    
 
     /* Contributors Section Container */
     #contributors {
@@ -393,24 +255,7 @@
     }
 
 
-    footer {
-      background-color: white;
-      color: white;
-      text-align: center;
-      padding: 20px 0;
-      position: relative;
-    }
-
-    footer a {
-      color: #fff;
-      text-decoration: none;
-      margin: 0 10px;
-      font-size: 1.2em;
-    }
-
-    footer a:hover {
-      text-decoration: underline;
-    }
+    
 
     /* Responsive Design */
     @media (max-width: 768px) {
@@ -512,149 +357,95 @@ <h1 class="title" style="text-align: center; margin-top: 40px;">Our Contributors
     </div>
   </main>
 
-
-
-  <footer
-    style="background: linear-gradient(to right,  #0e2511, #19be50);; color: #ffffff; padding: 40px 20px; font-family: 'Arial', sans-serif; overflow: hidden;">
+  <footer>
     <!-- Footer Container -->
-    <div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px;">
-
+    <div class="footer-container">
       <!-- Left Section (Logo and Description) -->
-      <div class="footer-left" style="flex: 2; min-width: 300px;">
+      <div class="footer-left">
         <!-- Logo -->
-        <div class="footer-logo" style="margin-bottom: 20px; animation: fadeInLeft 1s;">
-          <div style="background-color: #8cc152; padding: 20px; border-radius: 8px; display: inline-block;">
-            <h1 style="margin: 0; font-size: 36px; font-weight: bold;">DSA</h1>
+        <div class="footer-logo" >
+          <div class="footer-div" onclick="window.location.href = 'index.html'">
+            <h1>DSA</h1>
           </div>
         </div>
         <!-- Description -->
-        <p style="font-size: 16px; line-height: 1.6; animation: fadeInLeft 1.5s;">
-          DSA problem solutions involve step-by-step methods to solve data structure and algorithm challenges
-          efficiently.
-          They include understanding the problem, selecting the right approach, implementing optimized code, and
-          analyzing
-          time and space complexity for performance.
+        <p>
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
         </p>
       </div>
 
       <!-- Quick Links Section -->
-      <div class="footer-section services">
-        <h2 style="font-size: 18px;
-                   margin-bottom: 10px; 
-                   transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'"
-          onmouseout="this.style.color='white'">Quick Links</h2>
-        <ul style="list-style: none; padding: 0;">
-          <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black';; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
+      <div class="footer-section-services">
+        <h2>Quick Links </h2>
+        <ul >
+          <li><a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li><a href="#">Work With Us</a></li>
+          <li><a href="#">Investor Relations</a></li>
+          <li><a href="#">Contact Us</a></li>
         </ul>
       </div>
-      <div class="footer-section services">
-        <h2 style="font-size: 18px;
-                   margin-bottom: 10px; 
-                   transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'"
-          onmouseout="this.style.color='white'">DSA Problem Solutions</h2>
-        <ul style="list-style: none; padding: 0;">
-          <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-          <li><a href="Blog.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-          <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-          <li><a href="contact.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
+      <div class="footer-section-services">
+        <h2> DSA Problem Solutions </h2>
+        <ul >
+          <li> <a href="about.html">Who We Are</a></li>
+          <li> <a href="#">Blog</a></li>
+          <li> <a href="#">Work With Us</a></li>
+          <li> <a href="#">Investor Relations</a></li>
+          <li> <a href="contact.html">Contact Us</a> </li>
         </ul>
       </div>
 
       <!-- Learn More Section -->
-      <div class="footer-section services">
-        <h2 style="font-size: 18px;
-                   margin-bottom: 10px; 
-                   transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'"
-          onmouseout="this.style.color='white'">Learn More</h2>
-        <ul style="list-style: none; padding: 0;">
-          <li><a href="privacy.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a></li>
-          <li><a href="security.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a></li>
-          <li><a href="terms.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a></li>
-          <li><a href="contributors.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-              onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a></li>
+      <div class="footer-section-services">
+        <h2> Learn More</h2>
+        <ul >
+          <li><a href="privacy.html">Privacy Policy</a></li>
+          <li><a href="security.html">Security</a></li>
+          <li><a ref="terms.html">Terms of Service</a></li>
+          <li><a href="contributors.html">Our Contributors</a></li>
         </ul>
       </div>
     </div>
 
     <!-- Stay Updated Section -->
-    <div class="footer-section.newsletter"
-      style="background: rgba(255, 255, 255, 0.2); border-radius: 20px;  backdrop-filter: blur(10px); padding: 10px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  transition: transform 0.3s ease, box-shadow 0.3s ease; height:10rem">
-      <h3 style="font-size: 18px; margin-bottom: 20px; text-align: center; color: #ffffff;">Stay Updated</h3>
-      <p style="text-align: center; font-size: 14px; line-height: 1.8; margin-bottom: 20px;">
-        Subscribe to our newsletter for the latest updates and tips on mastering data structures and algorithms.
+    <div
+      class="footer-section-newsletter" >
+      <h3 > Stay Updated </h3>
+      <p >
+        Subscribe to our newsletter for the latest updates and tips on
+        mastering data structures and algorithms.
       </p>
-      <form action="#" method="POST" style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px;">
-        <input type="email" placeholder="Your Email Address" required
-          style="flex: 1; padding: 10px; font-size: 14px; border: 1px solid #dee2e6; border-radius: 4px;">
-        <button type="submit"
-          style="padding: 10px 20px; font-size: 14px; background-color: #222; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s;"
-          onmouseover="this.style.backgroundColor='rgba(255, 255, 255,0.8)'; this.style.color= 'black'"
-          onmouseout="this.style.backgroundColor='#222'; this.style.color= 'white'">
-          Subscribe
-        </button>
+      <form action="#" method="POST">
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit">Subscribe</button>
       </form>
     </div>
 
     <!-- Social Links -->
-    <div class="social-links" style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s;">
-      <ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px;">
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#13d8ff';" onmouseout="this.style.color='#ffffff';"><i
-              class="fab fa-facebook"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#222';" onmouseout="this.style.color='#ffffff';"><i
-              class="fa-brands fa-x-twitter"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#13d8ff';" onmouseout="this.style.color='#ffffff';"><i
-              class="fab fa-linkedin"></i></a></li>
-        <li><a href="#" style="color: #fff; font-size: 20px; transition: color 0.3s;"
-            onmouseover="this.style.color='#e84a3cee';" onmouseout="this.style.color='#ffffff';"><i
-              class="fab fa-youtube"></i></a></li>
+    <div
+      class="social-links" >
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
       </ul>
     </div>
 
     <!-- Footer Bottom -->
-    <div class="footer-bottom"
-      style="text-align: center; margin-top: 20px; padding-top: 20px; background: none; color: #ffffff; animation: fadeInUp 3s;">
-      <p style="margin: 0; font-size: 14px;">
-        &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.
-      </p>
+    <div
+      class="footer-bottom">
+      <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
     </div>
   </footer>
 
+  
+
   <script>
     // Set the current year dynamically
     document.getElementById('currentYear').textContent = new Date().getFullYear();
diff --git a/footer.css b/footer.css
new file mode 100644
index 00000000..4c74eac7
--- /dev/null
+++ b/footer.css
@@ -0,0 +1,163 @@
+footer{
+        
+    background: linear-gradient(to right, #11cb2a, #19be50);
+    color: #ffffff;
+    padding: 40px 20px;
+    font-family: 'Arial', sans-serif;
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+  }
+
+  .footer-container{
+    max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 40px;
+  }
+
+  .footer-left{
+    flex: 2;
+    min-width: 300px;
+  }
+
+  .footer-logo{
+    margin-bottom: 20px;
+    animation: fadeInLeft 1s;
+  }
+  .footer-div{
+    background-color: #8cc152;
+    padding: 20px;
+    border-radius: 8px;
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .footer-div p{
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.6;
+  }
+
+  .footer-left p{
+    font-size: 16px;
+    line-height: 1.6;
+    animation: fadeInLeft 1.5s;
+  }
+  .footer-section-services h2{
+    font-size: 18px;
+    margin-bottom: 10px;
+    transition: color 0.3s ease;
+
+  }
+
+  .footer-section-services h2:hover{
+    color:#e67e22;
+  }
+
+  .footer-section-services ul{
+    list-style: none;
+    padding: 0;
+  }
+
+  .footer-section-services a{
+    color: white;
+    text-decoration: none;
+    transition: all 0.3s ease;
+
+  }
+
+  .footer-section-services a:hover{
+    color:black;
+    padding-left:10px;
+  }
+
+  .footer-section-newsletter{
+    width: auto;
+    justify-self: center;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    backdrop-filter: blur(10px);
+    padding: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    height: 10rem;
+  }
+
+  .footer-section-newsletter h3{
+    font-size: 18px;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  .footer-section-newsletter p{
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+    color: #ffffff;
+  }
+  
+  .footer-section-newsletter form{
+    display: flex;
+    gap: 10px;
+  }
+
+  .footer-section-newsletter input{
+    flex: 1;
+
+    padding: 10px;
+    font-size: 14px;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+  }
+
+  .footer-section-newsletter button{
+    padding: 10px 20px;
+    font-size: 14px;
+    background-color: #6c757d;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .social-links{
+    justify-self: center;
+    margin-top: 40px;
+    animation: fadeInUp 2.5s;
+  }
+
+  .social-links ul{
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+  }
+
+  .social-links a{
+    color: #ffffff;
+    font-size: 20px;
+    transition: color 0.3s;
+  }
+
+  .social-links a:hover{
+    color:#8cc152;
+  }
+
+  .footer-bottom{
+    text-align: center;
+    margin-top: 20px;
+    padding-top: 20px;
+    background: none;
+    color: #ffffff;
+    animation: fadeInUp 3s;
+  }
+
+  .footer-bottom p{
+    font-size: 14px;
+    margin: 0;
+  }
\ No newline at end of file
diff --git a/pages/Login.css b/pages/Login.css
index c9a24f0b..c313a631 100644
--- a/pages/Login.css
+++ b/pages/Login.css
@@ -5,11 +5,8 @@ body {
     color: #fff;
     margin: 0;
     padding: 0;
-    display: flex;
-    flex-direction: column; 
-    align-items: center; 
-    justify-content: flex-start; 
-    min-height: 100vh; 
+    
+    
 }
 
 /* Navbar Styles */
@@ -188,6 +185,7 @@ body {
 
 /* Modal */
 .modal {
+  justify-self: center;
     /* width: 80%;  */
     max-width: 500px; 
     padding: 30px;
diff --git a/pages/Login.html b/pages/Login.html
index b935db6e..6c769090 100644
--- a/pages/Login.html
+++ b/pages/Login.html
@@ -7,6 +7,7 @@
     <title>Sign In / Sign Up</title>
     <link rel="stylesheet" href="Login.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../footer.css">
 </head>
 
 <body>
@@ -88,6 +89,92 @@ <h2 class="auth-title">Welcome back</h2>
             </div>
         </div>
     </div>
+    <footer>
+        <!-- Footer Container -->
+        <div class="footer-container">
+          <!-- Left Section (Logo and Description) -->
+          <div class="footer-left">
+            <!-- Logo -->
+            <div class="footer-logo" >
+              <div class="footer-div" onclick="window.location.href = 'index.html'">
+                <h1>DSA</h1>
+              </div>
+            </div>
+            <!-- Description -->
+            <p>
+              DSA problem solutions involve step-by-step methods to solve data
+              structure and algorithm challenges efficiently. They include
+              understanding the problem, selecting the right approach,
+              implementing optimized code, and analyzing time and space complexity
+              for performance.
+            </p>
+          </div>
+    
+          <!-- Quick Links Section -->
+          <div class="footer-section-services">
+            <h2>Quick Links </h2>
+            <ul >
+              <li><a href="about.html">Who We Are</a></li>
+              <li> <a href="#">Blog</a></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#">Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section-services">
+            <h2> DSA Problem Solutions </h2>
+            <ul >
+              <li> <a href="about.html">Who We Are</a></li>
+              <li> <a href="#">Blog</a></li>
+              <li> <a href="#">Work With Us</a></li>
+              <li> <a href="#">Investor Relations</a></li>
+              <li> <a href="contact.html">Contact Us</a> </li>
+            </ul>
+          </div>
+    
+          <!-- Learn More Section -->
+          <div class="footer-section-services">
+            <h2> Learn More</h2>
+            <ul >
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a ref="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
+        </div>
+    
+        <!-- Stay Updated Section -->
+        <div
+          class="footer-section-newsletter" >
+          <h3 > Stay Updated </h3>
+          <p >
+            Subscribe to our newsletter for the latest updates and tips on
+            mastering data structures and algorithms.
+          </p>
+          <form action="#" method="POST">
+            <input type="email" placeholder="Your Email Address" required />
+            <button type="submit">Subscribe</button>
+          </form>
+        </div>
+    
+        <!-- Social Links -->
+        <div
+          class="social-links" >
+          <ul>
+            <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+            <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+            <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+          </ul>
+        </div>
+    
+        <!-- Footer Bottom -->
+        <div
+          class="footer-bottom">
+          <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
+        </div>
+      </footer>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/pages/SignUp.html b/pages/SignUp.html
index 8dd09036..36099fff 100644
--- a/pages/SignUp.html
+++ b/pages/SignUp.html
@@ -7,9 +7,11 @@
     <link rel="stylesheet" href="login.css">
     <title>SIGN UP</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../footer.css">
 </head>
 
 <body>
+    
     <nav class="navbar">
         <div class="logo">
             <img src="img/lightlogo.png" alt="Logo" />
@@ -83,6 +85,92 @@ <h2 class="auth-title">Create an account</h2>
             </form>
         </div>
     </div>
+    <footer>
+        <!-- Footer Container -->
+        <div class="footer-container">
+          <!-- Left Section (Logo and Description) -->
+          <div class="footer-left">
+            <!-- Logo -->
+            <div class="footer-logo" >
+              <div class="footer-div" onclick="window.location.href = 'index.html'">
+                <h1>DSA</h1>
+              </div>
+            </div>
+            <!-- Description -->
+            <p>
+              DSA problem solutions involve step-by-step methods to solve data
+              structure and algorithm challenges efficiently. They include
+              understanding the problem, selecting the right approach,
+              implementing optimized code, and analyzing time and space complexity
+              for performance.
+            </p>
+          </div>
+    
+          <!-- Quick Links Section -->
+          <div class="footer-section-services">
+            <h2>Quick Links </h2>
+            <ul >
+              <li><a href="about.html">Who We Are</a></li>
+              <li> <a href="#">Blog</a></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#">Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section-services">
+            <h2> DSA Problem Solutions </h2>
+            <ul >
+              <li> <a href="about.html">Who We Are</a></li>
+              <li> <a href="#">Blog</a></li>
+              <li> <a href="#">Work With Us</a></li>
+              <li> <a href="#">Investor Relations</a></li>
+              <li> <a href="contact.html">Contact Us</a> </li>
+            </ul>
+          </div>
+    
+          <!-- Learn More Section -->
+          <div class="footer-section-services">
+            <h2> Learn More</h2>
+            <ul >
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a ref="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
+        </div>
+    
+        <!-- Stay Updated Section -->
+        <div
+          class="footer-section-newsletter" >
+          <h3 > Stay Updated </h3>
+          <p >
+            Subscribe to our newsletter for the latest updates and tips on
+            mastering data structures and algorithms.
+          </p>
+          <form action="#" method="POST">
+            <input type="email" placeholder="Your Email Address" required />
+            <button type="submit">Subscribe</button>
+          </form>
+        </div>
+    
+        <!-- Social Links -->
+        <div
+          class="social-links" >
+          <ul>
+            <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+            <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+            <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+          </ul>
+        </div>
+    
+        <!-- Footer Bottom -->
+        <div
+          class="footer-bottom">
+          <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
+        </div>
+      </footer>
 
 </body>
 
diff --git a/styles.css b/styles.css
index 29b42246..4cc038dd 100644
--- a/styles.css
+++ b/styles.css
@@ -703,7 +703,7 @@ footer {
 .social-links a[aria-label="Twitter"]:hover {
   color: #1da1f2;
   text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-=======
+
 footer form input {
   flex: 1;
   padding: 10px;
@@ -962,9 +962,10 @@ h4 {
   opacity: 1;
   visibility: visible;
 }
-=======
+
 .help-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
     background-color: #eaf3ff;
 }
+}
\ No newline at end of file

From 305613d3cf0007b01374342271e8c59efe8c55a7 Mon Sep 17 00:00:00 2001
From: Vaibhav Babele <vaibhavbabele15@gmail.com>
Date: Mon, 27 Jan 2025 15:38:53 +0530
Subject: [PATCH 2/7] add separate footer

---
 footer.css | 170 ++++++++++++++++++++++++++++---------------------
 work.html  | 181 ++++++++++++++++++-----------------------------------
 2 files changed, 158 insertions(+), 193 deletions(-)

diff --git a/footer.css b/footer.css
index 4c74eac7..67e0d152 100644
--- a/footer.css
+++ b/footer.css
@@ -1,163 +1,187 @@
-footer{
-        
-    background: linear-gradient(to right, #11cb2a, #19be50);
-    color: #ffffff;
+/* Footer */
+footer {
+    background: linear-gradient(to right, #a2db2f, #12e16f);
     padding: 40px 20px;
-    font-family: 'Arial', sans-serif;
-    overflow: hidden;
-    position: relative;
-    z-index: 0;
+    font-size: 14px;
+    border-radius: 60px 60px 0px 0px;
+    border:black 8px solid;
   }
 
   .footer-container{
     max-width: 1200px;
-      margin: 0 auto;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 40px;
-  }
-
-  .footer-left{
-    flex: 2;
-    min-width: 300px;
-  }
-
-  .footer-logo{
-    margin-bottom: 20px;
-    animation: fadeInLeft 1s;
-  }
-  .footer-div{
-    background-color: #8cc152;
-    padding: 20px;
-    border-radius: 8px;
-    display: inline-block;
-    cursor: pointer;
-  }
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    
 
-  .footer-div p{
-    margin: 0;
-    font-size: 16px;
-    line-height: 1.6;
   }
 
-  .footer-left p{
-    font-size: 16px;
-    line-height: 1.6;
-    animation: fadeInLeft 1.5s;
-  }
-  .footer-section-services h2{
+  .footer-container h2{
+    color: black;
     font-size: 18px;
     margin-bottom: 10px;
     transition: color 0.3s ease;
 
+    
   }
 
-  .footer-section-services h2:hover{
+  .footer-container h2:hover{
     color:#e67e22;
   }
-
-  .footer-section-services ul{
-    list-style: none;
+  .footer-container ul{
+    list-style: none; 
     padding: 0;
   }
 
-  .footer-section-services a{
-    color: white;
+  .footer-container a{
+    color:white;
     text-decoration: none;
     transition: all 0.3s ease;
-
   }
 
-  .footer-section-services a:hover{
-    color:black;
+  
+
+  .footer-container a:hover{
+    color:green; 
+    text-decoration: none;
     padding-left:10px;
   }
 
+  .footer-left{
+    flex: 2; 
+    min-width: 300px;
+
+    
+    
+    
+  }
+
+  .footer-left p{
+    text-align: justify;
+    color: white;
+    font-size: larger;
+    font-weight: bold;
+    
+  }
+
+.footer-logo {
+    margin-bottom: 20px;
+    
+  }
+
+  .logo-design{
+    text-align: center;
+    background: linear-gradient(to right, #deb914, #12bdec);
+    padding: 20px;
+    border-radius: 8px;
+    display: inline-block;
+    border: black 2px solid;
+   }
+
+   
+
+  
+
   .footer-section-newsletter{
-    width: auto;
-    justify-self: center;
+    
     background: rgba(255, 255, 255, 0.2);
     border-radius: 20px;
     backdrop-filter: blur(10px);
-    padding: 10px;
+    padding: 15px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
-    height: 10rem;
+    border: black 3px solid;
+    margin-top: 20px;
   }
 
   .footer-section-newsletter h3{
     font-size: 18px;
     margin-bottom: 20px;
     text-align: center;
-    color: #ffffff;
+    color: rgb(16, 16, 16);
+    
   }
 
   .footer-section-newsletter p{
+    text-align: center;
     font-size: 14px;
-    line-height: 1.6;
+    line-height: 1.8;
     margin-bottom: 20px;
-    color: #ffffff;
+    color: white;
   }
-  
+
   .footer-section-newsletter form{
-    display: flex;
-    gap: 10px;
+    max-width: 600px; 
+    margin: 0 auto;
+    display: flex; 
+    gap: 10px
   }
 
   .footer-section-newsletter input{
     flex: 1;
-
     padding: 10px;
     font-size: 14px;
+    font-weight: bold;
     border: 1px solid #dee2e6;
-    border-radius: 4px;
+    border-radius: 8px;
+    border: black 2px solid;
   }
 
   .footer-section-newsletter button{
     padding: 10px 20px;
     font-size: 14px;
+    font-weight: bold;
     background-color: #6c757d;
     color: #ffffff;
-    border: none;
-    border-radius: 4px;
+    border: black 2px solid;
+    border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.3s;
+    
   }
 
   .social-links{
-    justify-self: center;
-    margin-top: 40px;
+    margin-top: 40px; 
     animation: fadeInUp 2.5s;
+    text-align: center;
+    
+    
   }
 
   .social-links ul{
     list-style: none;
     padding: 0;
     display: flex;
-    justify-content: center;
+    
     gap: 20px;
   }
 
   .social-links a{
-    color: #ffffff;
-    font-size: 20px;
-    transition: color 0.3s;
+    
+    color: #151414; 
+    font-size: 30px; 
+    transition: color 0.3s
   }
 
   .social-links a:hover{
-    color:#8cc152;
+    color:#f7f8f5;
+
   }
 
   .footer-bottom{
     text-align: center;
+    font-weight: bold;
     margin-top: 20px;
     padding-top: 20px;
     background: none;
     color: #ffffff;
     animation: fadeInUp 3s;
+
   }
 
   .footer-bottom p{
-    font-size: 14px;
-    margin: 0;
-  }
\ No newline at end of file
+    margin: 0; 
+    font-size: 14px
+  }
+
diff --git a/work.html b/work.html
index 176160b8..f1e0ca04 100644
--- a/work.html
+++ b/work.html
@@ -12,7 +12,10 @@
   <link rel="icon" href="/img/logo2.png" type="image/png" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" />
+  
   <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="footer.css">
+  
   <title>Work With Us - DSA Problem Solutions</title>
   <style>
 
@@ -326,31 +329,7 @@
   background-color: #19be50;
 }
 
-/* Footer */
-footer {
-  background: linear-gradient(to right, #11cb2a, #19be50);
-  color: white;
-  padding: 40px 20px;
-  text-align: center;
-  font-size: 14px;
-}
 
-footer .footer-logo {
-  margin-bottom: 20px;
-}
-
-footer p {
-  margin-bottom: 10px;
-}
-
-footer a {
-  color: white;
-  text-decoration: none;
-}
-
-footer a:hover {
-  text-decoration: underline;
-}
 
 #successMessage {
   display: none;
@@ -447,121 +426,83 @@ <h2>Interested? Get in Touch!</h2>
     </section>
   </div>
 
-  <footer style="background: linear-gradient(to right, #11cb2a, #19be50);; color: #ffffff; padding: 40px 20px; font-family: 'Arial', sans-serif; overflow: hidden;">
-    <!-- Footer Container -->
-    <div class="footer-container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px;">
-      
-      <!-- Left Section (Logo and Description) -->
-      <div class="footer-left" style="flex: 2; min-width: 300px;">
-        <!-- Logo -->
-        <div class="footer-logo" style="margin-bottom: 20px; animation: fadeInLeft 1s;">
-          <div style="background-color: #8cc152; padding: 20px; border-radius: 8px; display: inline-block;">
-            <h1 style="margin: 0; font-size: 36px; font-weight: bold;">DSA</h1>
-          </div>
+  <footer >   <!-- Footer Container -->
+    <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+      <div class="footer-left"><!-- Logo -->
+        <div class="footer-logo" >
+          <div class="logo-design"> <h1>DSA</h1></div>
         </div>
         <!-- Description -->
-        <p style="font-size: 16px; line-height: 1.6; animation: fadeInLeft 1.5s;">
-          DSA problem solutions involve step-by-step methods to solve data structure and algorithm challenges efficiently. 
-          They include understanding the problem, selecting the right approach, implementing optimized code, and analyzing 
-          time and space complexity for performance.
+        <p >
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
         </p>
       </div>
-  
+      
       <!-- Quick Links Section -->
-      <div class="footer-section services" >
-          <h2 style="font-size: 18px;
-           margin-bottom: 10px; 
-           transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Quick Links</h2>
-        <ul style="list-style: none; padding: 0;">
-            <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
+        <div class="footer-section services">
+          <h2>  Quick Links </h2>
+          <ul>
+            <li><a href="about.html" >Who We Are</a></li>
+            <li><a href="#">Blog</a ></li>
+            <li><a href="#">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="#" >Contact Us</a></li>
           </ul>
-      </div>
+        </div>
         <div class="footer-section services" >
-          <h2 style="font-size: 18px;
-           margin-bottom: 10px; 
-           transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">DSA Problem Solutions</h2>
-          <ul style="list-style: none; padding: 0;">
-            <li><a href="about.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-            <li><a href="work.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-            <li><a href="#" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-            <li><a href="contact.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
+          <h2> DSA Problem Solutions </h2>
+          <ul>
+            <li><a href="about.html">Who We Are</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="work.html">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="contact.html">Contact Us</a></li>
           </ul>
         </div>
-  
-      <!-- Learn More Section -->
-       <div class="footer-section services" >
-          <h2 style="font-size: 18px;
-           margin-bottom: 10px; 
-           transition: color 0.3s ease;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Learn More</h2>
-          <ul style="list-style: none; padding: 0;">
-            <li><a href="privacy.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a></li>
-            <li><a href="security.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a></li>
-            <li><a href="terms.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a></li>
-            <li><a href="contributors.html" style="color: white; text-decoration: none; transition: all 0.3s ease;"
-                onmouseover="this.style.color='green'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a></li>
+
+        <!-- Learn More Section -->
+        <div class="footer-section services">
+          <h2> Learn More</h2>
+          <ul>
+            <li><a href="privacy.html">Privacy Policy</a></li>
+            <li><a href="security.html">Security</a></li>
+            <li><a href="terms.html">Terms of Service</a></li>
+            <li><a href="contributors.html">Our Contributors</a></li>
           </ul>
-      </div>
+        </div>
     </div>
-  
+    
+
     <!-- Stay Updated Section -->
-    <div class="footer-section.newsletter" style="background: rgba(255, 255, 255, 0.2); border-radius: 20px;  backdrop-filter: blur(10px); padding: 10px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  transition: transform 0.3s ease, box-shadow 0.3s ease;">
-      <h3 style="font-size: 18px; margin-bottom: 20px; text-align: center; color: #ffffff;">Stay Updated</h3>
-      <p style="text-align: center; font-size: 14px; line-height: 1.8; margin-bottom: 20px;">
-        Subscribe to our newsletter for the latest updates and tips on mastering data structures and algorithms.
+    <div class="footer-section-newsletter">
+      <h3>Stay Updated</h3>
+      <p>Subscribe to our newsletter for the latest updates and tips on
+         mastering data structures and algorithms.
       </p>
-      <form action="#" method="POST" style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px;">
-        <input type="email" placeholder="Your Email Address" required style="flex: 1; padding: 10px; font-size: 14px; border: 1px solid #dee2e6; border-radius: 4px;">
-        <button type="submit" style="padding: 10px 20px; font-size: 14px; background-color: #6c757d; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s;">
-          Subscribe
-        </button>
+      <form action="#" method="POST" >
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit" >Subscribe</button>
       </form>
     </div>
-  
+
     <!-- Social Links -->
-    <div class="social-links" style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s;">
-      <ul style="list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px;">
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-facebook"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-twitter"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-linkedin"></i></a></li>
-        <li><a href="#" style="color: #ffffff; font-size: 20px; transition: color 0.3s;" onmouseover="this.style.color='#8cc152';" onmouseout="this.style.color='#ffffff';"><i class="fab fa-youtube"></i></a></li>
+    <div
+      class="social-links">
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
       </ul>
     </div>
-  
+
     <!-- Footer Bottom -->
-    <div class="footer-bottom" style="text-align: center; margin-top: 20px; padding-top: 20px; background: none; color: #ffffff; animation: fadeInUp 3s;">
-      <p style="margin: 0; font-size: 14px;">&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+    <div class="footer-bottom">
+      <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
     </div>
   </footer>
   

From ce833753208c7eb67e0d29516013e17e17517d03 Mon Sep 17 00:00:00 2001
From: Vaibhav Babele <vaibhavbabele15@gmail.com>
Date: Mon, 27 Jan 2025 18:42:36 +0530
Subject: [PATCH 3/7] update css

---
 Blog.html           |  39 +--
 contact.html        |   5 +-
 index.html          |   2 +
 pages/platform.html |   1 +
 pages/styles.css    | 759 ++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 769 insertions(+), 37 deletions(-)

diff --git a/Blog.html b/Blog.html
index a120a450..dfb68939 100644
--- a/Blog.html
+++ b/Blog.html
@@ -4,6 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  
   <meta property="og:title" content="DSA Blog - DSA Problem Solutions" />
   <meta property="og:image" content="/img/logo2.png" />
   <meta property="og:url" content="https://priyeshsingh24.github.io/DSA_SOLUTION_PLATFORM/blog.html" />
@@ -12,6 +14,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link rel="stylesheet" href="pages/navbar.css">
   <link rel="stylesheet" href="footer.css">
   <style>
  /* General Body Styling */
@@ -23,40 +26,6 @@
   background-color: #f5f5f5;
 }
 
-/* Navbar Styling */
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fff;
-  padding: 15px 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.navbar .logo img {
-  height: 40px;
-}
-
-.navbar .nav-links {
-  list-style: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
-
-.navbar .nav-links li {
-  margin-right: 20px;
-}
-
-.navbar .nav-links li a {
-  text-decoration: none;
-  color: #333;
-  font-weight: 600;
-}
-
-.navbar .nav-links li a.active {
-  color: #19be50;
-}
 
 /* Blog Header Styling */
 .blog-header {
@@ -209,7 +178,7 @@
         </svg>
       </button>
       <ul class="nav-links">
-        <li><a href="index.html">Home</a></li>
+        <li><a href="../">Home</a></li>
         <li><a href="#platforms">Platforms</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="blog.html" class="active">Blog</a></li>
diff --git a/contact.html b/contact.html
index 0f2cb13e..fba0cdb0 100644
--- a/contact.html
+++ b/contact.html
@@ -22,9 +22,10 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css" />
-  <link rel="stylesheet" href="footer.css">
-   <link rel="stylesheet" href="navbar.css">
+  
+   <link rel="stylesheet" href="pages/navbar.css">
    <link rel="stylesheet" href="contact.css">
+   <link rel="stylesheet" href="footer.css">
 </head>
 
 <style>
diff --git a/index.html b/index.html
index b1bf5a16..0054d16b 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,8 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="pages/navbar.css">
+    <link rel="stylesheet" href="pages/scroll.css">
   </head>
 
   <body>
diff --git a/pages/platform.html b/pages/platform.html
index b29081fd..709c2836 100644
--- a/pages/platform.html
+++ b/pages/platform.html
@@ -6,6 +6,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="pages/styles.css">
+    <link rel="stylesheet" href="navbar.css">
     <style>
       #scrollBtn {
         position: fixed;
diff --git a/pages/styles.css b/pages/styles.css
index e69de29b..ff4ded8f 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -0,0 +1,759 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+  background-color: #f4f4f4;
+}
+/* Navbar Styles */
+.navbar {
+  background: rgb(24 192 27);
+  padding: 1rem 1rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 10px #37ff01;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px; 
+  border: 5px rgb(144 174 172 / 0%) solid;
+}
+
+/* .logo {
+  display: flex;
+  align-items: center;
+} */
+
+.logo img {
+  height: 40px;
+  width: 8rem;
+  transition: transform 0.3s ease;
+  border-radius: 6px;
+}
+
+.logo img:hover {
+  transform: scale(1.05);
+}
+
+.logo{
+  padding-top: 8px;
+}
+.nav-links {
+  display: flex;
+  gap: 2rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-links li {
+  position: relative;
+}
+
+.nav-links li a {
+  color: #ffffff;
+  font-weight: bold;
+  text-decoration: none;
+  padding: 8px 12px;
+  transition: background-color 0.3s ease-in-out;
+  font-size: 18px;
+}
+
+
+
+.nav-links a:hover {
+  color: #17ff00;
+}
+
+/* Underline animation for nav links */
+.nav-links a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #ffffff;
+  transition: width 0.3s ease;
+}
+
+.nav-links a:hover::after {
+  width: 100%;
+}
+
+/* Active link style */
+.nav-links a.active {
+  color: #ffffff;
+}
+
+.nav-links a.active::after {
+  width: 100%;
+}
+
+/* Mobile menu button - Hidden by default */
+.mobile-menu-btn {
+  color:#000;
+  display: none;
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+/* Hero Section Styles */
+.hero-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4rem;
+  /* margin: -20px; */
+  background: linear-gradient(to right, #11cb2a, #19be50);
+  color: #ffffff;
+  font-family: 'Roboto', sans-serif;
+}
+
+.hero-content {
+  max-width: 70%;
+  /* margin-left: -3rem; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  width: 70%;
+  margin-bottom: 30px;
+
+}
+
+.hero-buttons {
+  /* margin-left: 4rem; */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content:center;
+}
+
+
+.platform-btn {
+width: max-content;
+  background-color: #fff;
+  color: #2575fc;
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.platform-btn:hover {
+  transform: scale(1.1);
+  background-color: #625ee1fa;
+  color: #fff;
+}
+
+.hero-image img {
+  max-width: 400px;
+  height: auto;
+  border-radius: 20px;
+}
+
+
+.footer-title{
+  margin: 40px; text-align: justify;
+}
+
+.footer-logo{
+  width: 100px;
+        margin-top: 20px;
+}
+
+.follow-us{
+  font-size: 18px; margin-bottom: 10px; transition: color 0.3s ease;
+}
+
+.services{
+flex: 1; 
+       min-width: 150px;
+        margin: 10px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .navbar {
+      padding: 1rem;
+  }
+
+  .mobile-menu-btn {
+      display: block;
+  }
+
+ 
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  
+  .nav-links a {
+      color: #e5e7eb;
+  }
+
+  .nav-links a:hover {
+      color: #60a5fa;
+  }
+
+  .nav-links a::after {
+      background-color: #60a5fa;
+  }
+
+  @media (max-width: 768px) {
+      .nav-links {
+          background: rgba(174, 237, 158, 0.98);
+      }
+  }
+}
+
+ .nav-links {
+      display: none; /* Hide by default on mobile */
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      background: rgb(0 0 0 / 98%);
+      flex-direction: column;
+      padding: 1rem;
+      gap: 1rem;
+      box-shadow: 0 2px 10px rgb(24 1 255);
+  }
+
+  /* Show menu when active */
+  .nav-links.active {
+      display: flex;
+  }
+
+  .nav-links li {
+      width: 100%;
+      text-align: center;
+  }
+
+  .nav-links a {
+      display: block;
+      padding: 0.75rem 0;
+  }
+
+  .nav-links a::after {
+      display: none; /* Remove hover animation on mobile */
+  }
+}
+
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+  .nav-links {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .nav-links li {
+    width: 100%;
+  }
+
+  .nav-links li a {
+    text-align: center;
+  }
+
+  .social-icons{
+    display: flex;justify-content: center;
+    align-items: center;
+  }
+
+  .follow-us{
+    text-align: center;
+  }
+}
+
+.content-wrapper {
+  height: 100%;
+  width: 100%;
+}
+header {
+  top: 9px;
+  position: relative;
+  /* z-index: 1; */
+  text-align: center;
+  padding: 40px 0;
+  background-color: #333;
+  color: #fff;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0; 
+}
+header h1 {
+  margin: 0;
+  font-size: 2.5em;
+}
+header p {
+  margin: 10px 0 0;
+  font-size: 1.2em;
+}
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top:2.8rem;
+  width: 100%;
+}
+
+.platform-card {
+  background-color: #fff;
+  border-radius: 20px; 
+  box-shadow: 0 6px 14px rgb(74 209 74); 
+  margin: 10px;
+  padding: 30px; 
+  text-align: center;
+  flex: 1 1 calc(33.33% - 40px);
+  max-width: 360px;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.platform-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 10px 24px #F44336; 
+}
+
+.platform-card img {
+  width: 100px; 
+  height: 100px; 
+  margin-bottom: 15px;
+  object-fit: contain; 
+  border-radius: 10px; 
+  border: none; 
+  outline: none;
+  box-shadow: none; 
+}
+
+.platform-card h2 {
+  margin: 15px 0;
+  font-size: 1.6em;
+  color: #333;
+}
+
+.platform-card a {
+  display: inline-block;
+  margin-top: 15px;
+  padding: 12px 25px;
+  background-color: #2acb1e;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 8px; 
+  transition: background-color 0.3s;
+}
+
+.platform-card a:hover {
+  background-color: #07670a;
+}
+
+@media(max-width:1025px) {
+  .footer-section p {
+    margin: 12px
+  }
+
+  .footer-logo{
+    width: 65px;
+    margin-top: 17px;
+  }
+}
+
+@media (max-width:426px) {
+  .services{
+    margin-left: 34px;
+  }
+}
+
+@media (max-width:376px) {
+  .services{
+  text-align: center;
+  margin-bottom: 0;
+  }
+
+  .learn-more{
+    text-align: center;
+    margin-top: 0;
+  }
+}
+
+@media(max-width: 321px) {
+  .footer-section{
+    width: 290px;
+    margin: 0;
+  }
+
+  .nav-links li a {
+    color: white;
+  }
+}
+
+/* Footer Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#cursor{
+  height: 20px;
+    width:20px;
+    background-color: rgb(125, 239, 11,0.5);
+    border-radius: 50%;
+    position: fixed;
+    font-size: 7px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+
+/* ========================
+   Footer Section
+   ======================== */
+.main-footer {
+  background-color: linear-gradient(to right, #11cb2a, #19be50);;
+  padding: 4rem 5%;
+  color: #333;
+  font-family: 'Arial', sans-serif;
+  /*border-top: 3px solid #aaffaf;*/
+  box-shadow: 0 2px 10px rgb(0 0 0);
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  margin-top: 50px;
+}
+
+.footer-content {
+  display: grid;
+  margin-bottom: 2rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  max-width: 1200px;
+  margin: auto;
+  padding: 20px;
+}
+
+.footer-section h3 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: #000;
+}
+
+.footer-section h4 {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  color: #000;
+}
+
+.footer-section p {
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  letter-spacing: 0.2px;
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-section ul li {
+  margin-bottom: 0.8rem;
+}
+
+.footer-section ul li a {
+  color: #333;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+  color: #E5A186;
+}
+
+.social-links {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  margin-top: 1rem;
+}
+
+.social-links a {
+  color: #f7f5f5;
+  font-size: 1.5rem;
+  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.social-links a[aria-label="Facebook"]:hover {
+  color: #3b5998;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.social-links a[aria-label="Twitter"]:hover {
+  color: #1da1f2;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+.social-links a[aria-label="Instagram"]:hover {
+  color: #e4405f;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.social-links a[aria-label="YouTube"]:hover {
+  color: #ff0000;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.social-links a[aria-label="Linkedin"]:hover {
+  color: #0077b5;
+  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+}
+
+.contact-info li {
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease;
+  gap: 0.6rem;
+}
+
+.contact-info li span {
+  margin-left: 0.3rem;
+  transition: all 0.3s ease;
+}
+
+.contact-info li span:hover {
+  color: #E5A186;
+}
+
+.footer-bottom {
+  text-align: center;
+  margin-top: 20px;
+  padding-top: 20px;
+  font-size: 14px;
+}
+
+#cursor{
+  height: 20px;
+    width:20px;
+    background-color: rgb(125, 239, 11,0.5);
+    border-radius: 50%;
+    position: fixed;
+    font-size: 7px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+form {
+   padding-bottom: 199px;
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   position: relative;  /* Add relative positioning to the form */
+   margin-bottom: 1px;
+}
+
+form::before {
+   content: "";
+   position: absolute;
+   bottom: 0;
+   left: 0%;  /* Adjust this value to control the starting point of the border */
+   width: 92%;  /* Adjust this value to control the length of the border */
+   border-bottom: 1px solid #fafafa;  /* Your border color */
+}
+
+form input{
+   width:80%;
+   padding: 10px;
+   background: transparent;
+   color: #CCC;
+   border: 0;
+   outline: none;
+}
+form button{
+   background: transparent;
+   border: 0;
+   outline: none;
+   cursor: pointer;
+}
+form button .fas{
+  font-size: 16px;
+  padding: 10px 20px;
+  color: #fafafa;
+}
+
+
+.main-footer .footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.main-footer .footer-section {
+  flex: 1 1 18%; /* This ensures each section takes up an equal width, you can adjust percentage as needed */
+  padding: 10px;
+}
+
+.main-footer .footer-section h4 {
+  margin-bottom: 10px;
+}
+
+.main-footer .footer-section ul,
+.main-footer .footer-section form {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.main-footer .footer-section form input {
+  margin-right: 10px;
+}
+
+h4 {
+  position: relative; /* Add relative positioning to the <h3> element */
+}
+
+.underline {
+  width: 50%; /* Adjusted to make the red line shorter */
+  height: 3px;
+  background: linear-gradient(to right, #1b5d37, #29b429, #347e0e);
+  border-radius: 3px;
+  position: absolute;
+  bottom: -8px; /* Adjusted to position the underline correctly below the text */
+  left: 10%; /* Centers the underline horizontally */
+  transform: translateX(-20%); /* This ensures that the underline is centered */
+  overflow: hidden;
+}
+
+.underline span {
+  width: 15px;
+  height: 100%;
+  background: #fff;
+  border-radius: 3px;
+  position: absolute;
+  top: 0;
+  left: -15px; /* Starting off-screen to the left */
+  animation: moving 2s linear infinite;
+}
+
+@keyframes moving {
+  0% {
+    left: -20px; /* Start animation off-screen */
+  }
+  100% {
+    left: 100%; /* Move the span across to the right */
+  }
+}
+
+
+/* Scroll to Top Button */
+#scrollButton {
+    position: fixed;
+    bottom: 120px;
+    right: 25px;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1000;
+    opacity: 0; /* Initially hidden */
+    pointer-events: none; /* Prevent interaction when hidden */
+    transition: opacity 0.5s ease; /* Smooth fade-in effect */
+}
+
+
+#scrollButton.visible {
+    opacity: 1; /* Fully visible */
+    pointer-events: auto; /* Enable interaction */
+}
+
+.outer-circle {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: conic-gradient(
+        #1ad140 0deg,
+        #03730c var(--scroll-progress, 0deg),
+        #1e65d900 var(--scroll-progress, 0deg),
+        #d5e7ec00 360deg
+    );
+    transform: rotate(-90deg); /* Start animation from top */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s ease;
+}
+
+.inner-circle {
+    width: 45px;
+    height: 45px;
+    background: #becdbb;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 6px rgb(0 0 0);
+}
+
+.arrow {
+    font-size: 20px;
+    color: #075728;
+    font-weight: bold;
+    transform: rotate(90deg); /* Fixed direction to the right */
+}
\ No newline at end of file

From 57f901b8c5a23c2faa19186363fb0083e9c0a0d4 Mon Sep 17 00:00:00 2001
From: Vaibhav Babele <vaibhavbabele15@gmail.com>
Date: Mon, 27 Jan 2025 19:36:31 +0530
Subject: [PATCH 4/7] update footer in index,platform,login,contact

---
 contact.html        | 113 ++++++-------
 footer.css          |  46 ++---
 index.html          | 398 ++++++++------------------------------------
 pages/Login.html    |  79 +++++++++
 pages/platform.html | 229 ++++++++-----------------
 pages/styles.css    |   8 +-
 6 files changed, 294 insertions(+), 579 deletions(-)

diff --git a/contact.html b/contact.html
index fba0cdb0..2a708233 100644
--- a/contact.html
+++ b/contact.html
@@ -473,17 +473,7 @@
       min-width: 220px
     }
 
-    .footer-content {
-      padding: 0;
-    }
-
-    footer {
-      padding: 0 5px;
-    }
-
-    .footer-section img {
-      width: 50px
-    }
+    
 
     .social-icons {
       margin-left: 21%;
@@ -634,19 +624,14 @@ <h3>Call Us</h3>
 
   </main>
 
-  <footer>
-    <!-- Footer Container -->
-    <div class="footer-container">
-      <!-- Left Section (Logo and Description) -->
-      <div class="footer-left">
-        <!-- Logo -->
+  <footer >   <!-- Footer Container -->
+    <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+      <div class="footer-left"><!-- Logo -->
         <div class="footer-logo" >
-          <div class="footer-div" onclick="window.location.href = 'index.html'">
-            <h1>DSA</h1>
-          </div>
+          <div class="logo-design"> <h1>DSA</h1></div>
         </div>
         <!-- Description -->
-        <p>
+        <p >
           DSA problem solutions involve step-by-step methods to solve data
           structure and algorithm challenges efficiently. They include
           understanding the problem, selecting the right approach,
@@ -654,70 +639,68 @@ <h1>DSA</h1>
           for performance.
         </p>
       </div>
-  
+      
       <!-- Quick Links Section -->
-      <div class="footer-section-services">
-        <h2>Quick Links </h2>
-        <ul >
-          <li><a href="about.html">Who We Are</a></li>
-          <li> <a href="#">Blog</a></li>
-          <li><a href="#">Work With Us</a></li>
-          <li><a href="#">Investor Relations</a></li>
-          <li><a href="#">Contact Us</a></li>
-        </ul>
-      </div>
-      <div class="footer-section-services">
-        <h2> DSA Problem Solutions </h2>
-        <ul >
-          <li> <a href="about.html">Who We Are</a></li>
-          <li> <a href="#">Blog</a></li>
-          <li> <a href="#">Work With Us</a></li>
-          <li> <a href="#">Investor Relations</a></li>
-          <li> <a href="contact.html">Contact Us</a> </li>
-        </ul>
-      </div>
+        <div class="footer-section services">
+          <h2>  Quick Links </h2>
+          <ul>
+            <li><a href="about.html" >Who We Are</a></li>
+            <li><a href="#">Blog</a ></li>
+            <li><a href="#">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="#" >Contact Us</a></li>
+          </ul>
+        </div>
+        <div class="footer-section services" >
+          <h2> DSA Problem Solutions </h2>
+          <ul>
+            <li><a href="about.html">Who We Are</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="work.html">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="contact.html">Contact Us</a></li>
+          </ul>
+        </div>
 
-      <!-- Learn More Section -->
-      <div class="footer-section-services">
-        <h2> Learn More</h2>
-        <ul >
-          <li><a href="privacy.html">Privacy Policy</a></li>
-          <li><a href="security.html">Security</a></li>
-          <li><a ref="terms.html">Terms of Service</a></li>
-          <li><a href="contributors.html">Our Contributors</a></li>
-        </ul>
-      </div>
+        <!-- Learn More Section -->
+        <div class="footer-section services">
+          <h2> Learn More</h2>
+          <ul>
+            <li><a href="privacy.html">Privacy Policy</a></li>
+            <li><a href="security.html">Security</a></li>
+            <li><a href="terms.html">Terms of Service</a></li>
+            <li><a href="contributors.html">Our Contributors</a></li>
+          </ul>
+        </div>
     </div>
+    
 
     <!-- Stay Updated Section -->
-    <div
-      class="footer-section-newsletter" >
-      <h3 > Stay Updated </h3>
-      <p >
-        Subscribe to our newsletter for the latest updates and tips on
-        mastering data structures and algorithms.
+    <div class="footer-section-newsletter">
+      <h3>Stay Updated</h3>
+      <p>Subscribe to our newsletter for the latest updates and tips on
+         mastering data structures and algorithms.
       </p>
-      <form action="#" method="POST">
+      <form action="#" method="POST" >
         <input type="email" placeholder="Your Email Address" required />
-        <button type="submit">Subscribe</button>
+        <button type="submit" >Subscribe</button>
       </form>
     </div>
 
     <!-- Social Links -->
     <div
-      class="social-links" >
+      class="social-links">
       <ul>
         <li><a href="#"><i class="fab fa-facebook"></i></a></li>
-        <li><a href="#" ><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
         <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
         <li><a href="#"><i class="fab fa-youtube"></i></a></li>
       </ul>
     </div>
 
     <!-- Footer Bottom -->
-    <div
-      class="footer-bottom">
-      <p> &copy; <span id="currentYear"></span> DSA Problem Solutions. All rights reserved.</p>
+    <div class="footer-bottom">
+      <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
     </div>
   </footer>
 
diff --git a/footer.css b/footer.css
index 67e0d152..b17df90a 100644
--- a/footer.css
+++ b/footer.css
@@ -7,7 +7,7 @@ footer {
     border:black 8px solid;
   }
 
-  .footer-container{
+  footer .footer-container{
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
@@ -17,7 +17,7 @@ footer {
 
   }
 
-  .footer-container h2{
+  footer .footer-container h2{
     color: black;
     font-size: 18px;
     margin-bottom: 10px;
@@ -26,7 +26,7 @@ footer {
     
   }
 
-  .footer-container h2:hover{
+  footer .footer-container h2:hover{
     color:#e67e22;
   }
   .footer-container ul{
@@ -34,7 +34,7 @@ footer {
     padding: 0;
   }
 
-  .footer-container a{
+  footer .footer-container a{
     color:white;
     text-decoration: none;
     transition: all 0.3s ease;
@@ -42,13 +42,13 @@ footer {
 
   
 
-  .footer-container a:hover{
+  footer .footer-container a:hover{
     color:green; 
     text-decoration: none;
     padding-left:10px;
   }
 
-  .footer-left{
+  footer .footer-left{
     flex: 2; 
     min-width: 300px;
 
@@ -57,7 +57,7 @@ footer {
     
   }
 
-  .footer-left p{
+  footer .footer-left p{
     text-align: justify;
     color: white;
     font-size: larger;
@@ -65,12 +65,12 @@ footer {
     
   }
 
-.footer-logo {
+footer .footer-logo {
     margin-bottom: 20px;
     
   }
 
-  .logo-design{
+footer .logo-design{
     text-align: center;
     background: linear-gradient(to right, #deb914, #12bdec);
     padding: 20px;
@@ -83,7 +83,7 @@ footer {
 
   
 
-  .footer-section-newsletter{
+  footer .footer-section-newsletter{
     
     background: rgba(255, 255, 255, 0.2);
     border-radius: 20px;
@@ -95,7 +95,7 @@ footer {
     margin-top: 20px;
   }
 
-  .footer-section-newsletter h3{
+  footer .footer-section-newsletter h3{
     font-size: 18px;
     margin-bottom: 20px;
     text-align: center;
@@ -103,7 +103,7 @@ footer {
     
   }
 
-  .footer-section-newsletter p{
+  footer .footer-section-newsletter p{
     text-align: center;
     font-size: 14px;
     line-height: 1.8;
@@ -111,14 +111,14 @@ footer {
     color: white;
   }
 
-  .footer-section-newsletter form{
-    max-width: 600px; 
+  footer .footer-section-newsletter form{
+    
     margin: 0 auto;
     display: flex; 
     gap: 10px
   }
 
-  .footer-section-newsletter input{
+  footer .footer-section-newsletter input{
     flex: 1;
     padding: 10px;
     font-size: 14px;
@@ -128,7 +128,7 @@ footer {
     border: black 2px solid;
   }
 
-  .footer-section-newsletter button{
+  footer .footer-section-newsletter button{
     padding: 10px 20px;
     font-size: 14px;
     font-weight: bold;
@@ -141,7 +141,7 @@ footer {
     
   }
 
-  .social-links{
+  footer .social-links{
     margin-top: 40px; 
     animation: fadeInUp 2.5s;
     text-align: center;
@@ -149,7 +149,7 @@ footer {
     
   }
 
-  .social-links ul{
+  footer .social-links ul{
     list-style: none;
     padding: 0;
     display: flex;
@@ -157,19 +157,19 @@ footer {
     gap: 20px;
   }
 
-  .social-links a{
+  footer .social-links a{
     
     color: #151414; 
     font-size: 30px; 
     transition: color 0.3s
   }
 
-  .social-links a:hover{
+  footer .social-links a:hover{
     color:#f7f8f5;
 
   }
 
-  .footer-bottom{
+  footer .footer-bottom{
     text-align: center;
     font-weight: bold;
     margin-top: 20px;
@@ -180,8 +180,8 @@ footer {
 
   }
 
-  .footer-bottom p{
+  footer .footer-bottom p{
     margin: 0; 
-    font-size: 14px
+    font-size: 14px;
   }
 
diff --git a/index.html b/index.html
index 0054d16b..201eecf1 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,7 @@
       src="https://kit.fontawesome.com/a076d05399.js"
       crossorigin="anonymous"
     ></script>
+    <link rel="stylesheet" href="footer.css">
     <link rel="stylesheet" href="pages/styles.css" />
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
@@ -45,6 +46,7 @@
     />
     <link rel="stylesheet" href="pages/navbar.css">
     <link rel="stylesheet" href="pages/scroll.css">
+   
   </head>
 
   <body>
@@ -333,341 +335,83 @@ <h2>Codeforces</h2>
 
     <br />
     <br />
-    <footer
-      class="main-footer"
-      style="
-        background: linear-gradient(to right, #0e2511, #19be50);
-        color: #ffffff;
-        padding: 20px 20px;
-      "
-    >
-      <div
-        class="footer-content"
-        style="
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          gap: 20px;
-        "
-      >
-        <div
-          class="footer-section"
-          style="flex: 1; min-width: 250px; max-width: 300px"
-        >
-          <!-- Logo -->
-          <div
-            class="footer-logo"
-            style="
-              margin-bottom: 10px;
-              animation: fadeInLeft 1s;
-              text-align: center;
-            "
-          >
-            <div
-              style="padding: 10px; border-radius: 8px; display: inline-block"
-            >
-              <img
-                src="img/lightlogo.png"
-                alt="Logo"
-                style="height: 60px; width: auto"
-              />
-            </div>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
           </div>
-          <p
-            style="
-              text-align: justify;
-              margin-bottom: 20px;
-              line-height: 1.6;
-              color: white;
-            "
-          >
-            DSA problem solutions involve understanding the problem, choosing
-            the right approach, implementing optimized code, and analyzing time
-            and space complexity for efficiency.
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
           </p>
-          <div class="social-links" style="text-align: center">
-            <a href="#" target="_blank" aria-label="Facebook"
-              ><i class="fab fa-facebook"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Twitter"
-              ><i class="fab fa-twitter"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Instagram"
-              ><i class="fab fa-instagram"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="YouTube"
-              ><i class="fab fa-youtube"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Linkedin"
-              ><i class="fa-brands fa-linkedin-in"></i
-            ></a>
-          </div>
         </div>
-
+        
         <!-- Quick Links Section -->
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Quick Links
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 5">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="blog.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="work.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Learn More
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 0">
-            <ul style="list-style: none; padding: 0">
-              <li>
-                <a
-                  href="privacy.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Privacy Policy</a
-                >
-              </li>
-
-              <li>
-                <a
-                  href="Security.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: all 0.3s ease;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Security</a
-                >
-              </li>
-              <li>
-                <a
-                  href="terms.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Terms of Service</a
-                >
-              </li>
-              <li>
-                <a
-                  href="contributors.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Our Contributors</a
-                >
-              </li>
-
-              <li>
-                <a
-                  href="testimonial.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Testimonials</a
-                >
-              </li>
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
             </ul>
-          </ul>
-        </div>
-
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Newsletter
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 0">
-            <form>
-              <i class="fas fa-envelope"></i>
-              <input
-                type="email"
-                placeholder="Enter your email id"
-                required=""
-                fdprocessedid="7t54w"
-              />
-              <button type="submit" fdprocessedid="xi78vf">
-                <i class="fas fa-arrow-right"></i>
-              </button>
-            </form>
-            <br />
-            <h4
-              style="
-                font-size: 18px;
-                margin-bottom: 10px;
-                transition: color 0.3s;
-                color: white;
-              "
-              onmouseover="this.style.color='#e67e22'"
-              onmouseout="this.style.color='white'"
-            >
-              Contact Us
-              <div class="underline"><span></span></div>
-            </h4>
-            <br />
-            <ul style="list-style: none; padding: 0">
-              <ul style="list-style: none; padding: 0">
-                <li>
-                  <a
-                    href="mailto:contact@example.com"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >contact@example.com</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="fas fa-map-marker-alt"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >India</a
-                  >
-                </li>
-              </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="about.html">Who We Are</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="contact.html">Contact Us</a></li>
             </ul>
-          </ul>
-        </div>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a href="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
       </div>
-
-      <div class="footer-bottom" style="text-align: center; margin-top: 10px">
-        <p style="margin: 0; font-size: 14px; color: white">
-          © 2025 DSA Problem Solutions. All rights reserved.
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
         </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
+      </div>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+        </ul>
+      </div>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
       </div>
     </footer>
 
diff --git a/pages/Login.html b/pages/Login.html
index ff8cb2ad..d9df10bb 100644
--- a/pages/Login.html
+++ b/pages/Login.html
@@ -129,5 +129,84 @@ <h2 class="auth-title">Welcome back</h2>
         </div>
       </div>
     </div>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
+          </div>
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
+          </p>
+        </div>
+        
+        <!-- Quick Links Section -->
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="about.html">Who We Are</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a href="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
+      </div>
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
+        </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
+      </div>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+        </ul>
+      </div>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/pages/platform.html b/pages/platform.html
index 709c2836..43cebd5a 100644
--- a/pages/platform.html
+++ b/pages/platform.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="pages/styles.css">
     <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="../footer.css">
     <style>
       #scrollBtn {
         position: fixed;
@@ -415,177 +416,85 @@ <h2>CodeChef</h2>
    
   </main>
     
-       <footer class="main-footer" style="
-        background: linear-gradient(to right, #0e2511, #19be50);
-        color: #ffffff;
-        padding: 20px 20px;
-      ">
-      <div class="footer-content" style="
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          gap: 20px;
-        ">
-        <div class="footer-section" style="flex: 1; min-width: 250px; max-width: 300px">
-          <!-- Logo -->
-          <div class="footer-logo" style="
-              margin-bottom: 10px;
-              animation: fadeInLeft 1s;
-              text-align: center;
-            ">
-            <div style="padding: 10px; border-radius: 8px; display: inline-block">
-              <img src="../img/lightlogo.png" alt="Logo" style="height: 60px; width: auto">
-            </div>
-          </div>
-          <p style="
-              text-align: justify;
-              margin-bottom: 20px;
-              line-height: 1.6;
-              color: white;
-            ">
-            DSA problem solutions involve understanding the problem, choosing
-            the right approach, implementing optimized code, and analyzing time
-            and space complexity for efficiency.
-          </p>
-          <div class="social-links" style="text-align: center">
-            <a href="#" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
-            <a href="#" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-            <a href="#" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-            <a href="#" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
-            <a href="#" target="_blank" aria-label="Linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
-          </div>
+  <footer >   <!-- Footer Container -->
+    <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+      <div class="footer-left"><!-- Logo -->
+        <div class="footer-logo" >
+          <div class="logo-design"> <h1>DSA</h1></div>
         </div>
-
-        <!-- Quick Links Section -->
+        <!-- Description -->
+        <p >
+          DSA problem solutions involve step-by-step methods to solve data
+          structure and algorithm challenges efficiently. They include
+          understanding the problem, selecting the right approach,
+          implementing optimized code, and analyzing time and space complexity
+          for performance.
+        </p>
+      </div>
+      
+      <!-- Quick Links Section -->
         <div class="footer-section services">
-          <h4 style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            " onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">
-            Quick Links
-            <div class="underline"><span></span></div>
-          </h4>
-          <br>
-          <ul style="list-style: none; padding: 5">
-            <li>
-              <a href="../about.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a>
-            </li>
-            <li>
-              <a href="../Blog.html" style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                " onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a>
-            </li>
-            <li>
-              <a href="../work.html" style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                " onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a>
-            </li>
-            <li>
-              <a href="#" style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                " onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a>
-            </li>
-            <li>
-              <a href="../contact.html" style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                " onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a>
-            </li>
+          <h2>  Quick Links </h2>
+          <ul>
+            <li><a href="about.html" >Who We Are</a></li>
+            <li><a href="#">Blog</a ></li>
+            <li><a href="#">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="#" >Contact Us</a></li>
           </ul>
         </div>
-        <div class="footer-section services">
-          <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">
-            Learn More
-            <div class="underline"><span></span></div>
-          </h4>
-          <br>
-          <ul style="list-style: none; padding: 0">
-            <ul style="list-style: none; padding: 0">
-              <li>
-                <a href="../privacy.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a>
-              </li>
-
-              <li>
-                <a href="../Security.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a>
-              </li>
-              <li>
-                <a href="../terms.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a>
-              </li>
-              <li>
-                <a href="../contributors.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a>
-              </li>
-            </ul>
+        <div class="footer-section services" >
+          <h2> DSA Problem Solutions </h2>
+          <ul>
+            <li><a href="about.html">Who We Are</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="work.html">Work With Us</a></li>
+            <li><a href="#">Investor Relations</a></li>
+            <li><a href="contact.html">Contact Us</a></li>
           </ul>
         </div>
 
+        <!-- Learn More Section -->
         <div class="footer-section services">
-          <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">
-            Newsletter
-            <div class="underline"><span></span></div>
-          </h4>
-          <br>
-          <ul style="list-style: none; padding: 0">
-            <form>
-              <i class="fas fa-envelope"></i>
-              <input type="email" placeholder="Enter your email id" required="" fdprocessedid="7t54w">
-              <button type="submit" fdprocessedid="xi78vf">
-                <i class="fas fa-arrow-right"></i>
-              </button>
-            </form>
-            <br>
-            <h4 style="
-                font-size: 18px;
-                margin-bottom: 10px;
-                transition: color 0.3s;
-                color: white;
-              " onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">
-              Contact Us
-              <div class="underline"><span></span></div>
-            </h4>
-            <br>
-            <ul style="list-style: none; padding: 0">
-              <ul style="list-style: none; padding: 0">
-                <li>
-                  <a href="mailto:contact@example.com" style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    " onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">contact@example.com</a>
-                </li>
-                <li>
-                  <a class="fas fa-map-marker-alt" style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    " onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">India</a>
-                </li>
-              </ul>
-            </ul>
+          <h2> Learn More</h2>
+          <ul>
+            <li><a href="privacy.html">Privacy Policy</a></li>
+            <li><a href="security.html">Security</a></li>
+            <li><a href="terms.html">Terms of Service</a></li>
+            <li><a href="contributors.html">Our Contributors</a></li>
           </ul>
         </div>
-      </div>
+    </div>
+    
 
-      <div class="footer-bottom" style="text-align: center; margin-top: 10px">
-        <p style="margin: 0; font-size: 14px; color: white">
-          © 2025 DSA Problem Solutions. All rights reserved.
-        </p>
-      </div>
-    </footer>
+    <!-- Stay Updated Section -->
+    <div class="footer-section-newsletter">
+      <h3>Stay Updated</h3>
+      <p>Subscribe to our newsletter for the latest updates and tips on
+         mastering data structures and algorithms.
+      </p>
+      <form action="#" method="POST" >
+        <input type="email" placeholder="Your Email Address" required />
+        <button type="submit" >Subscribe</button>
+      </form>
+    </div>
+
+    <!-- Social Links -->
+    <div
+      class="social-links">
+      <ul>
+        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+        <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+      </ul>
+    </div>
+
+    <!-- Footer Bottom -->
+    <div class="footer-bottom">
+      <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+    </div>
+  </footer>
         <script>
             document.getElementById("currentYear").textContent = new Date().getFullYear();
         </script>
diff --git a/pages/styles.css b/pages/styles.css
index ff4ded8f..de0b2936 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -597,7 +597,7 @@ header p {
 }
 
 form {
-   padding-bottom: 199px;
+   
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -610,12 +610,12 @@ form::before {
    position: absolute;
    bottom: 0;
    left: 0%;  /* Adjust this value to control the starting point of the border */
-   width: 92%;  /* Adjust this value to control the length of the border */
-   border-bottom: 1px solid #fafafa;  /* Your border color */
+    /* Adjust this value to control the length of the border */
+    /* Your border color */
 }
 
 form input{
-   width:80%;
+   
    padding: 10px;
    background: transparent;
    color: #CCC;

From 1b4e6e83aef190ec1568331b8ca5c399ba423c4f Mon Sep 17 00:00:00 2001
From: Vaibhav Babele <vaibhavbabele15@gmail.com>
Date: Mon, 27 Jan 2025 19:57:35 +0530
Subject: [PATCH 5/7] add footer css in privacy,security,terms,testimonial

---
 Security.html    | 382 +++++++-----------------------------
 about.html       | 131 +++++++------
 privacy.html     | 388 +++++++------------------------------
 terms.html       | 494 ++++++-----------------------------------------
 testimonial.html | 409 ++++++++-------------------------------
 5 files changed, 351 insertions(+), 1453 deletions(-)

diff --git a/Security.html b/Security.html
index c6754592..32d386e1 100644
--- a/Security.html
+++ b/Security.html
@@ -39,6 +39,7 @@
       crossorigin="anonymous"
     ></script>
     <link rel="stylesheet" href="pages/styles.css" />
+    <link rel="stylesheet" href="footer.css">
     <style>
 @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
@@ -449,326 +450,83 @@ <h4>7. Continuous Improvements</h4>
 
     <br />
     <br />
-    <footer
-      class="main-footer"
-      style="
-        background: linear-gradient(to right, #0e2511, #19be50);
-        color: #ffffff;
-        padding: 20px 20px;
-      "
-    >
-      <div
-        class="footer-content"
-        style="
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          gap: 20px;
-        "
-      >
-        <div
-          class="footer-section"
-          style="flex: 1; min-width: 250px; max-width: 300px"
-        >
-          <!-- Logo -->
-          <div
-            class="footer-logo"
-            style="
-              margin-bottom: 10px;
-              animation: fadeInLeft 1s;
-              text-align: center;
-            "
-          >
-            <div
-              style="padding: 10px; border-radius: 8px; display: inline-block"
-            >
-              <img
-                src="img/lightlogo.png"
-                alt="Logo"
-                style="height: 60px; width: auto"
-              />
-            </div>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
           </div>
-          <p
-            style="
-              text-align: justify;
-              margin-bottom: 20px;
-              line-height: 1.6;
-              color: white;
-            "
-          >
-            DSA problem solutions involve understanding the problem, choosing
-            the right approach, implementing optimized code, and analyzing time
-            and space complexity for efficiency.
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
           </p>
-          <div class="social-links" style="text-align: center">
-            <a href="#" target="_blank" aria-label="Facebook"
-              ><i class="fab fa-facebook"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Twitter"
-              ><i class="fab fa-twitter"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Instagram"
-              ><i class="fab fa-instagram"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="YouTube"
-              ><i class="fab fa-youtube"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Linkedin"
-              ><i class="fa-brands fa-linkedin-in"></i
-            ></a>
-          </div>
         </div>
-
+        
         <!-- Quick Links Section -->
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Quick Links
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 5">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="blog.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="work.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Learn More
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 0">
-            <ul style="list-style: none; padding: 0">
-              <li>
-                <a
-                  href="privacy.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Privacy Policy</a
-                >
-              </li>
-
-              <li>
-                <a
-                  href="Security.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: all 0.3s ease;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Security</a
-                >
-              </li>
-              <li>
-                <a
-                  href="terms.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Terms of Service</a
-                >
-              </li>
-              <li>
-                <a
-                  href="contributors.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Our Contributors</a
-                >
-              </li>
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
             </ul>
-          </ul>
-        </div>
-
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Newsletter
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 0">
-            <form>
-              <i class="fas fa-envelope"></i>
-              <input
-                type="email"
-                placeholder="Enter your email id"
-                required=""
-                fdprocessedid="7t54w"
-              />
-              <button type="submit" fdprocessedid="xi78vf">
-                <i class="fas fa-arrow-right"></i>
-              </button>
-            </form>
-            <br />
-            <h4
-              style="
-                font-size: 18px;
-                margin-bottom: 10px;
-                transition: color 0.3s;
-                color: white;
-              "
-              onmouseover="this.style.color='#e67e22'"
-              onmouseout="this.style.color='white'"
-            >
-              Contact Us
-              <div class="underline"><span></span></div>
-            </h4>
-            <br />
-            <ul style="list-style: none; padding: 0">
-              <ul style="list-style: none; padding: 0">
-                <li>
-                  <a
-                    href="mailto:contact@example.com"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >contact@example.com</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="fas fa-map-marker-alt"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >India</a
-                  >
-                </li>
-              </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="about.html">Who We Are</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="contact.html">Contact Us</a></li>
             </ul>
-          </ul>
-        </div>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a href="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
       </div>
-
-      <div class="footer-bottom" style="text-align: center; margin-top: 10px">
-        <p style="margin: 0; font-size: 14px; color: white">
-          © 2025 DSA Problem Solutions. All rights reserved.
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
         </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
+      </div>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+        </ul>
+      </div>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
       </div>
     </footer>
 
diff --git a/about.html b/about.html
index 538ac104..3d003e17 100644
--- a/about.html
+++ b/about.html
@@ -23,6 +23,7 @@
     />
     <link rel="stylesheet" href="./pages/styles.css" />
     <link rel="stylesheet" href="./pages/navbar.css">
+    <link rel="stylesheet" href="footer.css">
     <style>
       .about-hero {
         background: linear-gradient(to left, #395a3d, #0a8833);
@@ -504,71 +505,83 @@ <h3>Accessibility</h3>
         </div>
       </div>
     </section>
-    <footer class="main-footer" style="background: linear-gradient(to right,  #0e2511, #19be50);; color: #ffffff; padding: 20px 20px;">
-      <div class="footer-content" style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;">
-        <div class="footer-section" style="flex: 1; min-width: 250px; max-width: 300px;">
-          <!-- Logo -->
-          <div class="footer-logo" style="margin-bottom: 10px; animation: fadeInLeft 1s; text-align: center;">
-            <div style="padding: 10px; border-radius: 8px; display: inline-block;">
-              <img src="img/lightlogo.png" alt="Logo" style="height: 60px; width: auto;">
-            </div>
-          </div>
-          <p style="text-align: justify; margin-bottom: 20px; line-height: 1.6; color: white;">DSA problem solutions involve understanding the problem, choosing the right approach, implementing optimized code, and analyzing time and space complexity for efficiency.</p>
-          <div class="social-links" style="text-align: center;">
-            <a href="#" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
-            <a href="#" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-            <a href="#" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
-            <a href="#" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
-            <a href="#" target="_blank" aria-label="Linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
           </div>
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
+          </p>
         </div>
-    
+        
         <!-- Quick Links Section -->
-        <div class="footer-section services">
-            <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Quick Links<div class="underline"><span></span></div></h4>
-    <br><ul style="list-style: none; padding: 5;">
-              <li><a href="about.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Who We Are</a></li>
-              <li><a href="blog.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Blog</a></li>
-              <li><a href="work.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Work With Us</a></li>
-              <li><a href="#" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color=' black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Investor Relations</a></li>
-              <li><a href="contact.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color=' black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Contact Us</a></li>
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
             </ul>
-        </div>
-        <div class="footer-section services">
-            <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Learn More<div class="underline"><span></span></div></h4>
-    <br><ul style="list-style: none; padding: 0;">
-               <ul style="list-style: none; padding: 0;">
-              <li><a href="privacy.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Privacy Policy</a></li>
-    
-    
-              <li><a href="Security.html" style="color: white; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Security</a></li>
-              <li><a href="terms.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Terms of Service</a></li>
-              <li><a href="contributors.html" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='black'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">Our Contributors</a></li>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="about.html">Who We Are</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a href="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
             </ul>
-        </ul></div>
-    
-         <div class="footer-section services">
-            <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Newsletter<div class="underline"><span></span></div></h4>
-           <br>
-           <ul style="list-style: none; padding: 0;">
-            <form>
-            <i class="fas fa-envelope"></i>
-            <input type="email" placeholder="Enter your email id" required="" fdprocessedid="7t54w">
-            <button type="submit" fdprocessedid="xi78vf"><i class="fas fa-arrow-right"></i></button>
-          </form>
-          <br>
-          <h4 style="font-size: 18px; margin-bottom: 10px; transition: color 0.3s; color: white;" onmouseover="this.style.color='#e67e22'" onmouseout="this.style.color='white'">Contact Us <div class="underline"><span></span></div></h4>
-          <br>
-          <ul style="list-style: none; padding: 0;">
-               <ul style="list-style: none; padding: 0;">
-              <li><a href="mailto:contact@example.com" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">contact@example.com</a></li>
-              <li><a class="fas fa-map-marker-alt" style="color: white; text-decoration: none; transition: 0.3s; padding-left: 0px;" onmouseover="this.style.color='white'; this.style.paddingLeft='10px'" onmouseout="this.style.color='white'; this.style.paddingLeft='0'">India</a></li>
-               </ul>
-          </ul></ul></div>
+          </div>
+      </div>
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
+        </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
+      </div>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+        </ul>
       </div>
-    
-      <div class="footer-bottom" style="text-align: center; margin-top: 10px;">
-        <p style="margin: 0; font-size: 14px; color: white;">© 2025 DSA Problem Solutions. All rights reserved.</p>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
       </div>
     </footer>
     <script
diff --git a/privacy.html b/privacy.html
index 5f2e477c..08aefd8c 100644
--- a/privacy.html
+++ b/privacy.html
@@ -40,6 +40,7 @@
     ></script>
     <link rel="stylesheet" href="pages/styles.css" />
     <link rel="stylesheet" href="pages/navbar.css">
+    <link rel="stylesheet" href="footer.css">
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
       rel="stylesheet"
@@ -286,328 +287,85 @@ <h4>Contact Us</h4>
     <!-- <button id="scrollBtn" title="Go to top">
       <i class="fa-solid fa-arrow-up fa-lg"></i>
     </button> -->
-    <footer
-    class="main-footer"
-    style="
-      background: linear-gradient(to right, #0e2511, #19be50);
-      color: #ffffff;
-      padding: 20px 20px;
-    "
-  >
-    <div
-      class="footer-content"
-      style="
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap: 20px;
-      "
-    >
-      <div
-        class="footer-section"
-        style="flex: 1; min-width: 250px; max-width: 300px"
-      >
-        <!-- Logo -->
-        <div
-          class="footer-logo"
-          style="
-            margin-bottom: 10px;
-            animation: fadeInLeft 1s;
-            text-align: center;
-          "
-        >
-          <div
-            style="padding: 10px; border-radius: 8px; display: inline-block"
-          >
-            <img
-              src="img/lightlogo.png"
-              alt="Logo"
-              style="height: 60px; width: auto"
-            />
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
           </div>
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
+          </p>
         </div>
-        <p
-          style="
-            text-align: justify;
-            margin-bottom: 20px;
-            line-height: 1.6;
-            color: white;
-          "
-        >
-          DSA problem solutions involve understanding the problem, choosing
-          the right approach, implementing optimized code, and analyzing time
-          and space complexity for efficiency.
-        </p>
-        <div class="social-links" style="text-align: center">
-          <a href="#" target="_blank" aria-label="Facebook"
-            ><i class="fab fa-facebook"></i
-          ></a>
-          <a href="#" target="_blank" aria-label="Twitter"
-            ><i class="fab fa-twitter"></i
-          ></a>
-          <a href="#" target="_blank" aria-label="Instagram"
-            ><i class="fab fa-instagram"></i
-          ></a>
-          <a href="#" target="_blank" aria-label="YouTube"
-            ><i class="fab fa-youtube"></i
-          ></a>
-          <a href="#" target="_blank" aria-label="Linkedin"
-            ><i class="fa-brands fa-linkedin-in"></i
-          ></a>
-        </div>
+        
+        <!-- Quick Links Section -->
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="about.html">Who We Are</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a href="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
       </div>
-
-      <!-- Quick Links Section -->
-      <div class="footer-section services">
-        <h4
-          style="
-            font-size: 18px;
-            margin-bottom: 10px;
-            transition: color 0.3s;
-            color: white;
-          "
-          onmouseover="this.style.color='#e67e22'"
-          onmouseout="this.style.color='white'"
-        >
-          Quick Links
-          <div class="underline"><span></span></div>
-        </h4>
-        <br />
-        <ul style="list-style: none; padding: 5">
-          <li>
-            <a
-              href="about.html"
-              style="
-                color: white;
-                text-decoration: none;
-                transition: 0.3s;
-                padding-left: 0px;
-              "
-              onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-              >Who We Are</a
-            >
-          </li>
-          <li>
-            <a
-              href="blog.html"
-              style="
-                color: white;
-                text-decoration: none;
-                transition: 0.3s;
-                padding-left: 0px;
-              "
-              onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-              >Blog</a
-            >
-          </li>
-          <li>
-            <a
-              href="work.html"
-              style="
-                color: white;
-                text-decoration: none;
-                transition: 0.3s;
-                padding-left: 0px;
-              "
-              onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-              >Work With Us</a
-            >
-          </li>
-          <li>
-            <a
-              href="#"
-              style="
-                color: white;
-                text-decoration: none;
-                transition: 0.3s;
-                padding-left: 0px;
-              "
-              onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-              >Investor Relations</a
-            >
-          </li>
-          <li>
-            <a
-              href="contact.html"
-              style="
-                color: white;
-                text-decoration: none;
-                transition: 0.3s;
-                padding-left: 0px;
-              "
-              onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-              onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-              >Contact Us</a
-            >
-          </li>
-        </ul>
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
+        </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
       </div>
-      <div class="footer-section services">
-        <h4
-          style="
-            font-size: 18px;
-            margin-bottom: 10px;
-            transition: color 0.3s;
-            color: white;
-          "
-          onmouseover="this.style.color='#e67e22'"
-          onmouseout="this.style.color='white'"
-        >
-          Learn More
-          <div class="underline"><span></span></div>
-        </h4>
-        <br />
-        <ul style="list-style: none; padding: 0">
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="privacy.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Privacy Policy</a
-              >
-            </li>
-
-            <li>
-              <a
-                href="Security.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Security</a
-              >
-            </li>
-            <li>
-              <a
-                href="terms.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Terms of Service</a
-              >
-            </li>
-            <li>
-              <a
-                href="contributors.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Our Contributors</a
-              >
-            </li>
-          </ul>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
         </ul>
       </div>
-
-      <div class="footer-section services">
-        <h4
-          style="
-            font-size: 18px;
-            margin-bottom: 10px;
-            transition: color 0.3s;
-            color: white;
-          "
-          onmouseover="this.style.color='#e67e22'"
-          onmouseout="this.style.color='white'"
-        >
-          Newsletter
-          <div class="underline"><span></span></div>
-        </h4>
-        <br />
-        <ul style="list-style: none; padding: 0">
-          <form>
-            <i class="fas fa-envelope"></i>
-            <input
-              type="email"
-              placeholder="Enter your email id"
-              required=""
-              fdprocessedid="7t54w"
-            />
-            <button type="submit" fdprocessedid="xi78vf">
-              <i class="fas fa-arrow-right"></i>
-            </button>
-          </form>
-          <br />
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Contact Us
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 0">
-            <ul style="list-style: none; padding: 0">
-              <li>
-                <a
-                  href="mailto:contact@example.com"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >contact@example.com</a
-                >
-              </li>
-              <li>
-                <a
-                  class="fas fa-map-marker-alt"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >India</a
-                >
-              </li>
-            </ul>
-          </ul>
-        </ul>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
       </div>
-    </div>
-
-    <div class="footer-bottom" style="text-align: center; margin-top: 10px">
-      <p style="margin: 0; font-size: 14px; color: white">
-        © 2025 DSA Problem Solutions. All rights reserved.
-      </p>
-    </div>
-  </footer>
+    </footer>
 
   <script>
     document.getElementById("currentYear").textContent =
diff --git a/terms.html b/terms.html
index 370c40fb..9016ea94 100644
--- a/terms.html
+++ b/terms.html
@@ -35,6 +35,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
     />
     <link rel="stylesheet" href="navbar.css" />
+    <link rel="stylesheet" href="footer.css">
     <script
       src="https://kit.fontawesome.com/a076d05399.js"
       crossorigin="anonymous"
@@ -109,15 +110,7 @@
         border-radius: 10px;
       }
 
-      .footer-title {
-        margin: 40px;
-        text-align: justify;
-      }
-
-      .footer-logo {
-        width: 100px;
-        margin-top: 40px;
-      }
+      
 
       .follow-us {
         font-size: 18px;
@@ -208,24 +201,7 @@
         margin-bottom: 10px;
       }
 
-      footer {
-        background-color: white;
-        color: white;
-        text-align: center;
-        padding: 20px 0;
-        position: relative;
-      }
-
-      footer a {
-        color: #fff;
-        text-decoration: none;
-        margin: 0 10px;
-        font-size: 1.2em;
-      }
-
-      footer a:hover {
-        text-decoration: underline;
-      }
+       
 
       /* Responsive Design */
       @media (max-width: 768px) {
@@ -389,52 +365,14 @@ <h4>8. Contact Us</h4>
       <i class="fa-solid fa-arrow-up fa-lg"></i>
     </button>
 
-    <footer
-      style="
-        background: linear-gradient(to right, #0e2511, #19be50);
-        color: #ffffff;
-        padding: 40px 20px;
-        font-family: 'Arial', sans-serif;
-        overflow: hidden;
-      "
-    >
-      <!-- Footer Container -->
-      <div
-        class="footer-container"
-        style="
-          max-width: 1200px;
-          margin: 0 auto;
-          display: flex;
-          flex-wrap: wrap;
-          gap: 40px;
-        "
-      >
-        <!-- Left Section (Logo and Description) -->
-        <div class="footer-left" style="flex: 2; min-width: 300px">
-          <!-- Logo -->
-          <div
-            class="footer-logo"
-            style="margin-bottom: 20px; animation: fadeInLeft 1s"
-          >
-            <div
-              style="
-                background-color: #8cc152;
-                padding: 20px;
-                border-radius: 8px;
-                display: inline-block;
-              "
-            >
-              <h1 style="margin: 0; font-size: 36px; font-weight: bold">DSA</h1>
-            </div>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
           </div>
           <!-- Description -->
-          <p
-            style="
-              font-size: 16px;
-              line-height: 1.6;
-              animation: fadeInLeft 1.5s;
-            "
-          >
+          <p >
             DSA problem solutions involve step-by-step methods to solve data
             structure and algorithm challenges efficiently. They include
             understanding the problem, selecting the right approach,
@@ -442,380 +380,68 @@ <h1 style="margin: 0; font-size: 36px; font-weight: bold">DSA</h1>
             for performance.
           </p>
         </div>
-
+        
         <!-- Quick Links Section -->
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Quick Links
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black';; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
-          </ul>
-        </div>
-
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            DSA Problem Solutions
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="Blog.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
-          </ul>
-        </div>
-
-        <!-- Learn More Section -->
-        <div class="footer-section services">
-          <h2
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s ease;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Learn More
-          </h2>
-          <ul style="list-style: none; padding: 0">
-            <li>
-              <a
-                href="privacy.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Privacy Policy</a
-              >
-            </li>
-            <li>
-              <a
-                href="security.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Security</a
-              >
-            </li>
-            <li>
-              <a
-                href="terms.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Terms of Service</a
-              >
-            </li>
-            <li>
-              <a
-                href="contributors.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: all 0.3s ease;
-                "
-                onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Our Contributors</a
-              >
-            </li>
-          </ul>
-        </div>
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="about.html">Who We Are</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a href="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
       </div>
-
+      
+  
       <!-- Stay Updated Section -->
-      <div
-        class="footer-section.newsletter"
-        style="
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 20px;
-          backdrop-filter: blur(10px);
-          padding: 10px;
-          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-          transition: transform 0.3s ease, box-shadow 0.3s ease;
-          height: 10rem;
-        "
-      >
-        <h3
-          style="
-            font-size: 18px;
-            margin-bottom: 20px;
-            text-align: center;
-            color: #ffffff;
-          "
-        >
-          Stay Updated
-        </h3>
-        <p
-          style="
-            text-align: center;
-            font-size: 14px;
-            line-height: 1.8;
-            margin-bottom: 20px;
-          "
-        >
-          Subscribe to our newsletter for the latest updates and tips on
-          mastering data structures and algorithms.
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
         </p>
-        <form
-          action="#"
-          method="POST"
-          style="max-width: 600px; margin: 0 auto; display: flex; gap: 10px"
-        >
-          <input
-            type="email"
-            placeholder="Your Email Address"
-            required
-            style="
-              flex: 1;
-              padding: 10px;
-              font-size: 14px;
-              border: 1px solid #dee2e6;
-              border-radius: 4px;
-            "
-          />
-          <button
-            type="submit"
-            style="
-              padding: 10px 20px;
-              font-size: 14px;
-              background-color: #222;
-              color: #ffffff;
-              border: none;
-              border-radius: 4px;
-              cursor: pointer;
-              transition: background-color 0.3s;
-            "
-            onmouseover="this.style.backgroundColor='rgba(255, 255, 255,0.8)'; this.style.color= 'black'"
-            onmouseout="this.style.backgroundColor='#222'; this.style.color= 'white'"
-          >
-            Subscribe
-          </button>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
         </form>
       </div>
-
+  
       <!-- Social Links -->
       <div
-        class="social-links"
-        style="text-align: center; margin-top: 40px; animation: fadeInUp 2.5s"
-      >
-        <ul
-          style="
-            list-style: none;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-          "
-        >
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#13d8ff';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-facebook"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#222';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fa-brands fa-x-twitter"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #ffffff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#13d8ff';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-linkedin"></i
-            ></a>
-          </li>
-          <li>
-            <a
-              href="#"
-              style="color: #fff; font-size: 20px; transition: color 0.3s"
-              onmouseover="this.style.color='#e84a3cee';"
-              onmouseout="this.style.color='#ffffff';"
-              ><i class="fab fa-youtube"></i
-            ></a>
-          </li>
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
         </ul>
       </div>
-
+  
       <!-- Footer Bottom -->
-      <div
-        class="footer-bottom"
-        style="
-          text-align: center;
-          margin-top: 20px;
-          padding-top: 20px;
-          background: none;
-          color: #ffffff;
-          animation: fadeInUp 3s;
-        "
-      >
-        <p style="margin: 0; font-size: 14px">
-          &copy; <span id="currentYear"></span> DSA Problem Solutions. All
-          rights reserved.
-        </p>
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
       </div>
     </footer>
 
diff --git a/testimonial.html b/testimonial.html
index 84af7246..e198ec5c 100644
--- a/testimonial.html
+++ b/testimonial.html
@@ -43,6 +43,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="footer.css">
   </head>
   <style>
     .testimonial-section {
@@ -424,343 +425,85 @@ <h2 class="main-heading">Our happy clients say about us</h2>
                        </div>
         </section>
      
-    <footer
-      class="main-footer"
-      style="
-        background: linear-gradient(to right, #0e2511, #19be50);
-        color: #ffffff;
-        padding: 20px 20px;
-      "
-    >
-      <div
-        class="footer-content"
-        style="
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          gap: 20px;
-        "
-      >
-        <div
-          class="footer-section"
-          style="flex: 1; min-width: 250px; max-width: 300px"
-        >
-          <!-- Logo -->
-          <div
-            class="footer-logo"
-            style="
-              margin-bottom: 10px;
-              animation: fadeInLeft 1s;
-              text-align: center;
-            "
-          >
-            <div
-              style="padding: 10px; border-radius: 8px; display: inline-block"
-            >
-              <img
-                src="img/lightlogo.png"
-                alt="Logo"
-                style="height: 60px; width: auto"
-              />
+        <footer >   <!-- Footer Container -->
+          <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+            <div class="footer-left"><!-- Logo -->
+              <div class="footer-logo" >
+                <div class="logo-design"> <h1>DSA</h1></div>
+              </div>
+              <!-- Description -->
+              <p >
+                DSA problem solutions involve step-by-step methods to solve data
+                structure and algorithm challenges efficiently. They include
+                understanding the problem, selecting the right approach,
+                implementing optimized code, and analyzing time and space complexity
+                for performance.
+              </p>
             </div>
+            
+            <!-- Quick Links Section -->
+              <div class="footer-section services">
+                <h2>  Quick Links </h2>
+                <ul>
+                  <li><a href="about.html" >Who We Are</a></li>
+                  <li><a href="#">Blog</a ></li>
+                  <li><a href="#">Work With Us</a></li>
+                  <li><a href="#">Investor Relations</a></li>
+                  <li><a href="#" >Contact Us</a></li>
+                </ul>
+              </div>
+              <div class="footer-section services" >
+                <h2> DSA Problem Solutions </h2>
+                <ul>
+                  <li><a href="about.html">Who We Are</a></li>
+                  <li><a href="#">Blog</a></li>
+                  <li><a href="work.html">Work With Us</a></li>
+                  <li><a href="#">Investor Relations</a></li>
+                  <li><a href="contact.html">Contact Us</a></li>
+                </ul>
+              </div>
+      
+              <!-- Learn More Section -->
+              <div class="footer-section services">
+                <h2> Learn More</h2>
+                <ul>
+                  <li><a href="privacy.html">Privacy Policy</a></li>
+                  <li><a href="security.html">Security</a></li>
+                  <li><a href="terms.html">Terms of Service</a></li>
+                  <li><a href="contributors.html">Our Contributors</a></li>
+                </ul>
+              </div>
           </div>
-          <p
-            style="
-              text-align: justify;
-              margin-bottom: 20px;
-              line-height: 1.6;
-              color: white;
-            "
-          >
-            DSA problem solutions involve understanding the problem, choosing
-            the right approach, implementing optimized code, and analyzing time
-            and space complexity for efficiency.
-          </p>
-          <div class="social-links" style="text-align: center">
-            <a href="#" target="_blank" aria-label="Facebook"
-              ><i class="fab fa-facebook"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Twitter"
-              ><i class="fab fa-twitter"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Instagram"
-              ><i class="fab fa-instagram"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="YouTube"
-              ><i class="fab fa-youtube"></i
-            ></a>
-            <a href="#" target="_blank" aria-label="Linkedin"
-              ><i class="fa-brands fa-linkedin-in"></i
-            ></a>
-          </div>
-        </div>
-
-        <!-- Quick Links Section -->
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Quick Links
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 5">
-            <li>
-              <a
-                href="about.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Who We Are</a
-              >
-            </li>
-            <li>
-              <a
-                href="blog.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Blog</a
-              >
-            </li>
-            <li>
-              <a
-                href="work.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Work With Us</a
-              >
-            </li>
-            <li>
-              <a
-                href="#"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Investor Relations</a
-              >
-            </li>
-            <li>
-              <a
-                href="contact.html"
-                style="
-                  color: white;
-                  text-decoration: none;
-                  transition: 0.3s;
-                  padding-left: 0px;
-                "
-                onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                >Contact Us</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Learn More
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 0">
-            <ul style="list-style: none; padding: 0">
-              <li>
-                <a
-                  href="privacy.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Privacy Policy</a
-                >
-              </li>
-
-              <li>
-                <a
-                  href="Security.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: all 0.3s ease;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Security</a
-                >
-              </li>
-              <li>
-                <a
-                  href="terms.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Terms of Service</a
-                >
-              </li>
-              <li>
-                <a
-                  href="contributors.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Our Contributors</a
-                >
-              </li>
-
-              <li>
-                <a
-                  href="testimonial.html"
-                  style="
-                    color: white;
-                    text-decoration: none;
-                    transition: 0.3s;
-                    padding-left: 0px;
-                  "
-                  onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                  onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                  >Testimonials</a
-                >
-              </li>
-            </ul>
-          </ul>
-        </div>
-
-        <div class="footer-section services">
-          <h4
-            style="
-              font-size: 18px;
-              margin-bottom: 10px;
-              transition: color 0.3s;
-              color: white;
-            "
-            onmouseover="this.style.color='#e67e22'"
-            onmouseout="this.style.color='white'"
-          >
-            Newsletter
-            <div class="underline"><span></span></div>
-          </h4>
-          <br />
-          <ul style="list-style: none; padding: 0">
-            <form>
-              <i class="fas fa-envelope"></i>
-              <input
-                type="email"
-                placeholder="Enter your email id"
-                required=""
-                fdprocessedid="7t54w"
-              />
-              <button type="submit" fdprocessedid="xi78vf">
-                <i class="fas fa-arrow-right"></i>
-              </button>
+          
+      
+          <!-- Stay Updated Section -->
+          <div class="footer-section-newsletter">
+            <h3>Stay Updated</h3>
+            <p>Subscribe to our newsletter for the latest updates and tips on
+               mastering data structures and algorithms.
+            </p>
+            <form action="#" method="POST" >
+              <input type="email" placeholder="Your Email Address" required />
+              <button type="submit" >Subscribe</button>
             </form>
-            <br />
-            <h4
-              style="
-                font-size: 18px;
-                margin-bottom: 10px;
-                transition: color 0.3s;
-                color: white;
-              "
-              onmouseover="this.style.color='#e67e22'"
-              onmouseout="this.style.color='white'"
-            >
-              Contact Us
-              <div class="underline"><span></span></div>
-            </h4>
-            <br />
-            <ul style="list-style: none; padding: 0">
-              <ul style="list-style: none; padding: 0">
-                <li>
-                  <a
-                    href="mailto:contact@example.com"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >contact@example.com</a
-                  >
-                </li>
-                <li>
-                  <a
-                    class="fas fa-map-marker-alt"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >India</a
-                  >
-                </li>
-              </ul>
+          </div>
+      
+          <!-- Social Links -->
+          <div
+            class="social-links">
+            <ul>
+              <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+              <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+              <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+              <li><a href="#"><i class="fab fa-youtube"></i></a></li>
             </ul>
-          </ul>
-        </div>
-      </div>
-
-      <div class="footer-bottom" style="text-align: center; margin-top: 10px">
-        <p style="margin: 0; font-size: 14px; color: white">
-          © 2025 DSA Problem Solutions. All rights reserved.
-        </p>
-      </div>
-    </footer>
+          </div>
+      
+          <!-- Footer Bottom -->
+          <div class="footer-bottom">
+            <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+          </div>
+        </footer>
 
     <script>
       document.getElementById("currentYear").textContent =

From 7245b89253eaac0c28c38e29acc0569ba7bd68d8 Mon Sep 17 00:00:00 2001
From: Vaibhav Babele <vaibhavbabele15@gmail.com>
Date: Mon, 27 Jan 2025 20:43:13 +0530
Subject: [PATCH 6/7] update to codeforce,codechef,hackerrank,gfg

---
 pages/code360bycn.html   | 390 ++++++++-------------------------------
 pages/codechef.html      |  85 ++++++++-
 pages/codeforces.html    |  85 ++++++++-
 pages/geeksforgeeks.html |  83 ++++++++-
 pages/hackerrank.html    |  84 ++++++++-
 5 files changed, 405 insertions(+), 322 deletions(-)

diff --git a/pages/code360bycn.html b/pages/code360bycn.html
index db5a1709..a3dd0401 100644
--- a/pages/code360bycn.html
+++ b/pages/code360bycn.html
@@ -26,7 +26,8 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="code360bycn.css" />
-    <link rel="stylesheet" href="../navbar.css">
+    <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="../footer.css">
     
    
     
@@ -260,328 +261,85 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                </div>
           </div>
         
-          <footer
-          class="main-footer"
-          style="
-            background: linear-gradient(to right, #0e2511, #19be50);
-            color: #ffffff;
-            padding: 20px 20px;
-          "
-        >
-          <div
-            class="footer-content"
-            style="
-              display: flex;
-              flex-wrap: wrap;
-              justify-content: space-between;
-              gap: 20px;
-            "
-          >
-            <div
-              class="footer-section"
-              style="flex: 1; min-width: 250px; max-width: 300px"
-            >
-              <!-- Logo -->
-              <div
-                class="footer-logo"
-                style="
-                  margin-bottom: 10px;
-                  animation: fadeInLeft 1s;
-                  text-align: center;
-                "
-              >
-                <div
-                  style="padding: 10px; border-radius: 8px; display: inline-block"
-                >
-                  <img
-                    src="../img/lightlogo.png"
-                    alt="Logo"
-                    style="height: 60px; width: auto"
-                  />
+          <footer >   <!-- Footer Container -->
+            <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+              <div class="footer-left"><!-- Logo -->
+                <div class="footer-logo" >
+                  <div class="logo-design"> <h1>DSA</h1></div>
                 </div>
+                <!-- Description -->
+                <p >
+                  DSA problem solutions involve step-by-step methods to solve data
+                  structure and algorithm challenges efficiently. They include
+                  understanding the problem, selecting the right approach,
+                  implementing optimized code, and analyzing time and space complexity
+                  for performance.
+                </p>
               </div>
-              <p
-                style="
-                  text-align: justify;
-                  margin-bottom: 20px;
-                  line-height: 1.6;
-                  color: white;
-                "
-              >
-                DSA problem solutions involve understanding the problem, choosing
-                the right approach, implementing optimized code, and analyzing time
-                and space complexity for efficiency.
-              </p>
-              <div class="social-links" style="text-align: center">
-                <a href="#" target="_blank" aria-label="Facebook"
-                  ><i class="fab fa-facebook"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="Twitter"
-                  ><i class="fab fa-twitter"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="Instagram"
-                  ><i class="fab fa-instagram"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="YouTube"
-                  ><i class="fab fa-youtube"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="Linkedin"
-                  ><i class="fa-brands fa-linkedin-in"></i
-                ></a>
-              </div>
+              
+              <!-- Quick Links Section -->
+                <div class="footer-section services">
+                  <h2>  Quick Links </h2>
+                  <ul>
+                    <li><a href="about.html" >Who We Are</a></li>
+                    <li><a href="#">Blog</a ></li>
+                    <li><a href="#">Work With Us</a></li>
+                    <li><a href="#">Investor Relations</a></li>
+                    <li><a href="#" >Contact Us</a></li>
+                  </ul>
+                </div>
+                <div class="footer-section services" >
+                  <h2> DSA Problem Solutions </h2>
+                  <ul>
+                    <li><a href="about.html">Who We Are</a></li>
+                    <li><a href="#">Blog</a></li>
+                    <li><a href="work.html">Work With Us</a></li>
+                    <li><a href="#">Investor Relations</a></li>
+                    <li><a href="contact.html">Contact Us</a></li>
+                  </ul>
+                </div>
+        
+                <!-- Learn More Section -->
+                <div class="footer-section services">
+                  <h2> Learn More</h2>
+                  <ul>
+                    <li><a href="privacy.html">Privacy Policy</a></li>
+                    <li><a href="security.html">Security</a></li>
+                    <li><a href="terms.html">Terms of Service</a></li>
+                    <li><a href="contributors.html">Our Contributors</a></li>
+                  </ul>
+                </div>
             </div>
-    
-            <!-- Quick Links Section -->
-            <div class="footer-section services">
-              <h4
-                style="
-                  font-size: 18px;
-                  margin-bottom: 10px;
-                  transition: color 0.3s;
-                  color: black;
-                "
-                onmouseover="this.style.color='#e67e22'"
-                onmouseout="this.style.color='white'"
-              >
-                Quick Links
-                <div class="underline"><span></span></div>
-              </h4>
-              <br />
-              <ul style="list-style: none; padding: 5">
-                <li>
-                  <a
-                    href="../about.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Who We Are</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="../blog.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Blog</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="../work.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Work With Us</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Investor Relations</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="../contact.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Contact Us</a
-                  >
-                </li>
-              </ul>
+            
+        
+            <!-- Stay Updated Section -->
+            <div class="footer-section-newsletter">
+              <h3>Stay Updated</h3>
+              <p>Subscribe to our newsletter for the latest updates and tips on
+                 mastering data structures and algorithms.
+              </p>
+              <form action="#" method="POST" >
+                <input type="email" placeholder="Your Email Address" required />
+                <button type="submit" >Subscribe</button>
+              </form>
             </div>
-            <div class="footer-section services">
-              <h4
-                style="
-                  font-size: 18px;
-                  margin-bottom: 10px;
-                  transition: color 0.3s;
-                  color: black;
-                "
-                onmouseover="this.style.color='#e67e22'"
-                onmouseout="this.style.color='white'"
-              >
-                Learn More
-                <div class="underline"><span></span></div>
-              </h4>
-              <br />
-              <ul style="list-style: none; padding: 0">
-                <ul style="list-style: none; padding: 0">
-                  <li>
-                    <a
-                      href="../privacy.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: 0.3s;
-                        padding-left: 0px;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Privacy Policy</a
-                    >
-                  </li>
-    
-                  <li>
-                    <a
-                      href="../Security.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: all 0.3s ease;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Security</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      href="../terms.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: 0.3s;
-                        padding-left: 0px;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Terms of Service</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      href="../contributors.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: 0.3s;
-                        padding-left: 0px;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Our Contributors</a
-                    >
-                  </li>
-                </ul>
+        
+            <!-- Social Links -->
+            <div
+              class="social-links">
+              <ul>
+                <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+                <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+                <li><a href="#"><i class="fab fa-youtube"></i></a></li>
               </ul>
             </div>
-    
-            <div class="footer-section services">
-              <h4
-                style="
-                  font-size: 18px;
-                  margin-bottom: 10px;
-                  transition: color 0.3s;
-                  color: black;
-                "
-                onmouseover="this.style.color='#e67e22'"
-                onmouseout="this.style.color='white'"
-              >
-                Newsletter
-                <div class="underline"><span></span></div>
-              </h4>
-              <br />
-              <ul style="list-style: none; padding: 0; ">
-                <form>
-                  <i class="fas fa-envelope"></i>
-                  <input
-                    type="email"
-                    placeholder="Enter your email id"
-                    required=""
-                    fdprocessedid="7t54w"
-                  />
-                  <button type="submit" fdprocessedid="xi78vf">
-                    <i class="fas fa-arrow-right"></i>
-                  </button>
-                </form>
-                <br />
-                <h4
-                  style="
-                    font-size: 18px;
-                    margin-bottom: 10px;
-                    transition: color 0.3s;
-                    color: black;
-                  "
-                  onmouseover="this.style.color='#e67e22'"
-                  onmouseout="this.style.color='white'"
-                >
-                  Contact Us 
-                  <div class="underline"><span></span></div>
-                </h4>
-                <br />
-                <ul style="list-style: none; padding: 0">
-                  <ul style="list-style: none; padding: 0">
-                    <li>
-                      <a
-                        href="mailto:contact@example.com"
-                        style="
-                          color: white;
-                          text-decoration: none;
-                          transition: 0.3s;
-                          padding-left: 0px;
-                        "
-                        onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                        onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                        >contact@example.com</a
-                      >
-                    </li>
-                    <li>
-                      <a
-                        class="fas fa-map-marker-alt"
-                        style="
-                          color: white;
-                          text-decoration: none;
-                          transition: 0.3s;
-                          padding-left: 0px;
-                        "
-                        onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                        onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                        >India</a
-                      >
-                    </li>
-                  </ul>
-                </ul>
-              </ul>
+        
+            <!-- Footer Bottom -->
+            <div class="footer-bottom">
+              <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
             </div>
-          </div>
-    
-          <div class="footer-bottom" style="text-align: center; margin-top: 10px">
-            <p style="margin: 0; font-size: 14px; color: white">
-              © 2025 DSA Problem Solutions. All rights reserved.
-            </p>
-          </div>
-        </footer>
+          </footer>
           
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
diff --git a/pages/codechef.html b/pages/codechef.html
index 72dc78e0..2f031cbc 100644
--- a/pages/codechef.html
+++ b/pages/codechef.html
@@ -25,9 +25,10 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="codechef.css" />
-    <link rel="stylesheet" href="../navbar.css">
+    <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="../footer.css">
   </head>
-  <body>
+  <>
     <!-- Scroll -->
     <div id="scrollButton" class="hidden">
       <div class="outer-circle">
@@ -176,6 +177,86 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                    </form>
                </div>
           </div>
+        </div>
+        <footer >   <!-- Footer Container -->
+          <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+            <div class="footer-left"><!-- Logo -->
+              <div class="footer-logo" >
+                <div class="logo-design"> <h1>DSA</h1></div>
+              </div>
+              <!-- Description -->
+              <p >
+                DSA problem solutions involve step-by-step methods to solve data
+                structure and algorithm challenges efficiently. They include
+                understanding the problem, selecting the right approach,
+                implementing optimized code, and analyzing time and space complexity
+                for performance.
+              </p>
+            </div>
+            
+            <!-- Quick Links Section -->
+              <div class="footer-section services">
+                <h2>  Quick Links </h2>
+                <ul>
+                  <li><a href="about.html" >Who We Are</a></li>
+                  <li><a href="#">Blog</a ></li>
+                  <li><a href="#">Work With Us</a></li>
+                  <li><a href="#">Investor Relations</a></li>
+                  <li><a href="#" >Contact Us</a></li>
+                </ul>
+              </div>
+              <div class="footer-section services" >
+                <h2> DSA Problem Solutions </h2>
+                <ul>
+                  <li><a href="about.html">Who We Are</a></li>
+                  <li><a href="#">Blog</a></li>
+                  <li><a href="work.html">Work With Us</a></li>
+                  <li><a href="#">Investor Relations</a></li>
+                  <li><a href="contact.html">Contact Us</a></li>
+                </ul>
+              </div>
+      
+              <!-- Learn More Section -->
+              <div class="footer-section services">
+                <h2> Learn More</h2>
+                <ul>
+                  <li><a href="privacy.html">Privacy Policy</a></li>
+                  <li><a href="security.html">Security</a></li>
+                  <li><a href="terms.html">Terms of Service</a></li>
+                  <li><a href="contributors.html">Our Contributors</a></li>
+                </ul>
+              </div>
+          </div>
+          
+      
+          <!-- Stay Updated Section -->
+          <div class="footer-section-newsletter">
+            <h3>Stay Updated</h3>
+            <p>Subscribe to our newsletter for the latest updates and tips on
+               mastering data structures and algorithms.
+            </p>
+            <form action="#" method="POST" >
+              <input type="email" placeholder="Your Email Address" required />
+              <button type="submit" >Subscribe</button>
+            </form>
+          </div>
+      
+          <!-- Social Links -->
+          <div
+            class="social-links">
+            <ul>
+              <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+              <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+              <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+              <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+            </ul>
+          </div>
+      
+          <!-- Footer Bottom -->
+          <div class="footer-bottom">
+            <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+          </div>
+        </footer>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
diff --git a/pages/codeforces.html b/pages/codeforces.html
index 838677bc..979120c9 100644
--- a/pages/codeforces.html
+++ b/pages/codeforces.html
@@ -26,7 +26,8 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="codechef.css" />
-    <link rel="stylesheet" href="../navbar.css">
+    <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="../footer.css">
   </head>
   <body>
     <!-- Scroll -->
@@ -178,7 +179,87 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                    </form>
                </div>
           </div>
-
+        </div>
+    </div>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
+          </div>
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
+          </p>
+        </div>
+        
+        <!-- Quick Links Section -->
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="about.html">Who We Are</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="privacy.html">Privacy Policy</a></li>
+              <li><a href="security.html">Security</a></li>
+              <li><a href="terms.html">Terms of Service</a></li>
+              <li><a href="contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
+      </div>
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
+        </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
+      </div>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+        </ul>
+      </div>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+      </div>
+    </footer>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
     integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
diff --git a/pages/geeksforgeeks.html b/pages/geeksforgeeks.html
index cf696ce0..0fcf4052 100644
--- a/pages/geeksforgeeks.html
+++ b/pages/geeksforgeeks.html
@@ -16,7 +16,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="geekforgeek.css">
-    <link rel="stylesheet" href="./navbar.css">
+    <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="../footer.css">
 </head>
 <body>
     <!-- Scroll -->
@@ -186,6 +187,86 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                  </form>
              </div>
         </div>
+    </div>
+    <footer >   <!-- Footer Container -->
+        <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+          <div class="footer-left"><!-- Logo -->
+            <div class="footer-logo" >
+              <div class="logo-design"> <h1>DSA</h1></div>
+            </div>
+            <!-- Description -->
+            <p >
+              DSA problem solutions involve step-by-step methods to solve data
+              structure and algorithm challenges efficiently. They include
+              understanding the problem, selecting the right approach,
+              implementing optimized code, and analyzing time and space complexity
+              for performance.
+            </p>
+          </div>
+          
+          <!-- Quick Links Section -->
+            <div class="footer-section services">
+              <h2>  Quick Links </h2>
+              <ul>
+                <li><a href="about.html" >Who We Are</a></li>
+                <li><a href="#">Blog</a ></li>
+                <li><a href="#">Work With Us</a></li>
+                <li><a href="#">Investor Relations</a></li>
+                <li><a href="#" >Contact Us</a></li>
+              </ul>
+            </div>
+            <div class="footer-section services" >
+              <h2> DSA Problem Solutions </h2>
+              <ul>
+                <li><a href="about.html">Who We Are</a></li>
+                <li><a href="#">Blog</a></li>
+                <li><a href="work.html">Work With Us</a></li>
+                <li><a href="#">Investor Relations</a></li>
+                <li><a href="contact.html">Contact Us</a></li>
+              </ul>
+            </div>
+    
+            <!-- Learn More Section -->
+            <div class="footer-section services">
+              <h2> Learn More</h2>
+              <ul>
+                <li><a href="privacy.html">Privacy Policy</a></li>
+                <li><a href="security.html">Security</a></li>
+                <li><a href="terms.html">Terms of Service</a></li>
+                <li><a href="contributors.html">Our Contributors</a></li>
+              </ul>
+            </div>
+        </div>
+        
+    
+        <!-- Stay Updated Section -->
+        <div class="footer-section-newsletter">
+          <h3>Stay Updated</h3>
+          <p>Subscribe to our newsletter for the latest updates and tips on
+             mastering data structures and algorithms.
+          </p>
+          <form action="#" method="POST" >
+            <input type="email" placeholder="Your Email Address" required />
+            <button type="submit" >Subscribe</button>
+          </form>
+        </div>
+    
+        <!-- Social Links -->
+        <div
+          class="social-links">
+          <ul>
+            <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+            <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+          </ul>
+        </div>
+    
+        <!-- Footer Bottom -->
+        <div class="footer-bottom">
+          <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+        </div>
+      </footer>
 
 
 
diff --git a/pages/hackerrank.html b/pages/hackerrank.html
index 911c7042..b1c124d9 100644
--- a/pages/hackerrank.html
+++ b/pages/hackerrank.html
@@ -27,8 +27,9 @@
     />
     <link rel="stylesheet" href="hacker.css" />
     <link rel="stylesheet" href="./navbar.css">
+    <link rel="stylesheet" href="../footer.css">
   </head>
-  <body>
+  <>
     <!-- Scroll -->
     <div id="scrollButton" class="hidden">
       <div class="outer-circle">
@@ -189,6 +190,87 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                     </form>
                 </div>
            </div>
+        </div>
+      
+           <footer >   <!-- Footer Container -->
+            <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+              <div class="footer-left"><!-- Logo -->
+                <div class="footer-logo" >
+                  <div class="logo-design"> <h1>DSA</h1></div>
+                </div>
+                <!-- Description -->
+                <p >
+                  DSA problem solutions involve step-by-step methods to solve data
+                  structure and algorithm challenges efficiently. They include
+                  understanding the problem, selecting the right approach,
+                  implementing optimized code, and analyzing time and space complexity
+                  for performance.
+                </p>
+              </div>
+              
+              <!-- Quick Links Section -->
+                <div class="footer-section services">
+                  <h2>  Quick Links </h2>
+                  <ul>
+                    <li><a href="about.html" >Who We Are</a></li>
+                    <li><a href="#">Blog</a ></li>
+                    <li><a href="#">Work With Us</a></li>
+                    <li><a href="#">Investor Relations</a></li>
+                    <li><a href="#" >Contact Us</a></li>
+                  </ul>
+                </div>
+                <div class="footer-section services" >
+                  <h2> DSA Problem Solutions </h2>
+                  <ul>
+                    <li><a href="about.html">Who We Are</a></li>
+                    <li><a href="#">Blog</a></li>
+                    <li><a href="work.html">Work With Us</a></li>
+                    <li><a href="#">Investor Relations</a></li>
+                    <li><a href="contact.html">Contact Us</a></li>
+                  </ul>
+                </div>
+        
+                <!-- Learn More Section -->
+                <div class="footer-section services">
+                  <h2> Learn More</h2>
+                  <ul>
+                    <li><a href="privacy.html">Privacy Policy</a></li>
+                    <li><a href="security.html">Security</a></li>
+                    <li><a href="terms.html">Terms of Service</a></li>
+                    <li><a href="contributors.html">Our Contributors</a></li>
+                  </ul>
+                </div>
+            </div>
+            
+        
+            <!-- Stay Updated Section -->
+            <div class="footer-section-newsletter">
+              <h3>Stay Updated</h3>
+              <p>Subscribe to our newsletter for the latest updates and tips on
+                 mastering data structures and algorithms.
+              </p>
+              <form action="#" method="POST" >
+                <input type="email" placeholder="Your Email Address" required />
+                <button type="submit" >Subscribe</button>
+              </form>
+            </div>
+        
+            <!-- Social Links -->
+            <div
+              class="social-links">
+              <ul>
+                <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+                <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+                <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+              </ul>
+            </div>
+        
+            <!-- Footer Bottom -->
+            <div class="footer-bottom">
+              <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+            </div>
+          </footer>
    
    
    

From 8ed6a82654c63bbdcb0890c8eab1c0a17c889b75 Mon Sep 17 00:00:00 2001
From: Vaibhav Babele <vaibhavbabele15@gmail.com>
Date: Mon, 27 Jan 2025 21:27:45 +0530
Subject: [PATCH 7/7] update footer css to all pages

---
 Security.html        |  35 +---
 footer.css           |   3 +-
 pages/codechef3.html | 388 ++++++++-----------------------------------
 pages/leetcode.html  |  82 +++++++++
 pages/leetcode1.html |  85 +++++++++-
 pages/scroll.js      |   2 +-
 6 files changed, 245 insertions(+), 350 deletions(-)

diff --git a/Security.html b/Security.html
index 32d386e1..e56b70cf 100644
--- a/Security.html
+++ b/Security.html
@@ -111,16 +111,7 @@
   border-radius: 10px;
 }
 
-/* Footer Styles */
-.footer-title {
-  margin: 40px;
-  text-align: justify;
-}
 
-.footer-logo {
-  width: 100px;
-  margin-top: 40px;
-}
 
 .follow-us {
   font-size: 18px;
@@ -202,25 +193,7 @@
   font-size: 2.5em;
 }
 
-/* Footer Styles */
-footer {
-  background-color: #158746;
-  color: white;
-  text-align: center;
-  padding: 20px 0;
-  position: relative;
-}
 
-footer a {
-  color: #fff;
-  text-decoration: none;
-  margin: 0 10px;
-  font-size: 1.2em;
-}
-
-footer a:hover {
-  text-decoration: underline;
-}
 
 /* Responsive Design for Header and Container */
 @media (max-width: 768px) {
@@ -471,17 +444,17 @@ <h4>7. Continuous Improvements</h4>
             <h2>  Quick Links </h2>
             <ul>
               <li><a href="about.html" >Who We Are</a></li>
-              <li><a href="#">Blog</a ></li>
-              <li><a href="#">Work With Us</a></li>
+              <li><a href="Blog.html">Blog</a ></li>
+              <li><a href="work.html">Work With Us</a></li>
               <li><a href="#">Investor Relations</a></li>
-              <li><a href="#" >Contact Us</a></li>
+              <li><a href="contact.html" >Contact Us</a></li>
             </ul>
           </div>
           <div class="footer-section services" >
             <h2> DSA Problem Solutions </h2>
             <ul>
               <li><a href="about.html">Who We Are</a></li>
-              <li><a href="#">Blog</a></li>
+              <li><a href="Blog.html">Blog</a></li>
               <li><a href="work.html">Work With Us</a></li>
               <li><a href="#">Investor Relations</a></li>
               <li><a href="contact.html">Contact Us</a></li>
diff --git a/footer.css b/footer.css
index b17df90a..7b30b844 100644
--- a/footer.css
+++ b/footer.css
@@ -84,7 +84,7 @@ footer .logo-design{
   
 
   footer .footer-section-newsletter{
-    
+    height: 200px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 20px;
     backdrop-filter: blur(10px);
@@ -142,6 +142,7 @@ footer .logo-design{
   }
 
   footer .social-links{
+    
     margin-top: 40px; 
     animation: fadeInUp 2.5s;
     text-align: center;
diff --git a/pages/codechef3.html b/pages/codechef3.html
index 3155745a..c5340a9e 100644
--- a/pages/codechef3.html
+++ b/pages/codechef3.html
@@ -27,6 +27,7 @@
     />
     <link rel="stylesheet" href="codechef.css" />
     <link rel="stylesheet" href="../navbar.css">
+    <link rel="stylesheet" href="../footer.css">
     
    
     
@@ -260,328 +261,85 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                </div>
           </div>
         
-          <footer
-          class="main-footer"
-          style="
-            background: linear-gradient(to right, #0e2511, #19be50);
-            color: #ffffff;
-            padding: 20px 20px;
-          "
-        >
-          <div
-            class="footer-content"
-            style="
-              display: flex;
-              flex-wrap: wrap;
-              justify-content: space-between;
-              gap: 20px;
-            "
-          >
-            <div
-              class="footer-section"
-              style="flex: 1; min-width: 250px; max-width: 300px"
-            >
-              <!-- Logo -->
-              <div
-                class="footer-logo"
-                style="
-                  margin-bottom: 10px;
-                  animation: fadeInLeft 1s;
-                  text-align: center;
-                "
-              >
-                <div
-                  style="padding: 10px; border-radius: 8px; display: inline-block"
-                >
-                  <img
-                    src="../img/lightlogo.png"
-                    alt="Logo"
-                    style="height: 60px; width: auto"
-                  />
+          <footer >   <!-- Footer Container -->
+            <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+              <div class="footer-left"><!-- Logo -->
+                <div class="footer-logo" >
+                  <div class="logo-design"> <h1>DSA</h1></div>
                 </div>
+                <!-- Description -->
+                <p >
+                  DSA problem solutions involve step-by-step methods to solve data
+                  structure and algorithm challenges efficiently. They include
+                  understanding the problem, selecting the right approach,
+                  implementing optimized code, and analyzing time and space complexity
+                  for performance.
+                </p>
               </div>
-              <p
-                style="
-                  text-align: justify;
-                  margin-bottom: 20px;
-                  line-height: 1.6;
-                  color: white;
-                "
-              >
-                DSA problem solutions involve understanding the problem, choosing
-                the right approach, implementing optimized code, and analyzing time
-                and space complexity for efficiency.
-              </p>
-              <div class="social-links" style="text-align: center">
-                <a href="#" target="_blank" aria-label="Facebook"
-                  ><i class="fab fa-facebook"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="Twitter"
-                  ><i class="fab fa-twitter"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="Instagram"
-                  ><i class="fab fa-instagram"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="YouTube"
-                  ><i class="fab fa-youtube"></i
-                ></a>
-                <a href="#" target="_blank" aria-label="Linkedin"
-                  ><i class="fa-brands fa-linkedin-in"></i
-                ></a>
-              </div>
+              
+              <!-- Quick Links Section -->
+                <div class="footer-section services">
+                  <h2>  Quick Links </h2>
+                  <ul>
+                    <li><a href="about.html" >Who We Are</a></li>
+                    <li><a href="#">Blog</a ></li>
+                    <li><a href="#">Work With Us</a></li>
+                    <li><a href="#">Investor Relations</a></li>
+                    <li><a href="#" >Contact Us</a></li>
+                  </ul>
+                </div>
+                <div class="footer-section services" >
+                  <h2> DSA Problem Solutions </h2>
+                  <ul>
+                    <li><a href="../about.html">Who We Are</a></li>
+                    <li><a href="../Blog.html">Blog</a></li>
+                    <li><a href="../work.html">Work With Us</a></li>
+                    <li><a href="#">Investor Relations</a></li>
+                    <li><a href="../contact.html">Contact Us</a></li>
+                  </ul>
+                </div>
+        
+                <!-- Learn More Section -->
+                <div class="footer-section services">
+                  <h2> Learn More</h2>
+                  <ul>
+                    <li><a href="../privacy.html">Privacy Policy</a></li>
+                    <li><a href="../Security.html">Security</a></li>
+                    <li><a href="../terms.html">Terms of Service</a></li>
+                    <li><a href="../contributors.html">Our Contributors</a></li>
+                  </ul>
+                </div>
             </div>
-    
-            <!-- Quick Links Section -->
-            <div class="footer-section services">
-              <h4
-                style="
-                  font-size: 18px;
-                  margin-bottom: 10px;
-                  transition: color 0.3s;
-                  color: black;
-                "
-                onmouseover="this.style.color='#e67e22'"
-                onmouseout="this.style.color='white'"
-              >
-                Quick Links
-                <div class="underline"><span></span></div>
-              </h4>
-              <br />
-              <ul style="list-style: none; padding: 5">
-                <li>
-                  <a
-                    href="../about.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Who We Are</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="../blog.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Blog</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="../work.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color='white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Work With Us</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="#"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Investor Relations</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="../contact.html"
-                    style="
-                      color: white;
-                      text-decoration: none;
-                      transition: 0.3s;
-                      padding-left: 0px;
-                    "
-                    onmouseover="this.style.color=' white'; this.style.paddingLeft='10px'"
-                    onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                    >Contact Us</a
-                  >
-                </li>
-              </ul>
+            
+        
+            <!-- Stay Updated Section -->
+            <div class="footer-section-newsletter">
+              <h3>Stay Updated</h3>
+              <p>Subscribe to our newsletter for the latest updates and tips on
+                 mastering data structures and algorithms.
+              </p>
+              <form action="#" method="POST" >
+                <input type="email" placeholder="Your Email Address" required />
+                <button type="submit" >Subscribe</button>
+              </form>
             </div>
-            <div class="footer-section services">
-              <h4
-                style="
-                  font-size: 18px;
-                  margin-bottom: 10px;
-                  transition: color 0.3s;
-                  color: black;
-                "
-                onmouseover="this.style.color='#e67e22'"
-                onmouseout="this.style.color='white'"
-              >
-                Learn More
-                <div class="underline"><span></span></div>
-              </h4>
-              <br />
-              <ul style="list-style: none; padding: 0">
-                <ul style="list-style: none; padding: 0">
-                  <li>
-                    <a
-                      href="../privacy.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: 0.3s;
-                        padding-left: 0px;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Privacy Policy</a
-                    >
-                  </li>
-    
-                  <li>
-                    <a
-                      href="../Security.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: all 0.3s ease;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Security</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      href="../terms.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: 0.3s;
-                        padding-left: 0px;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Terms of Service</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      href="../contributors.html"
-                      style="
-                        color: white;
-                        text-decoration: none;
-                        transition: 0.3s;
-                        padding-left: 0px;
-                      "
-                      onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                      onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                      >Our Contributors</a
-                    >
-                  </li>
-                </ul>
+        
+            <!-- Social Links -->
+            <div
+              class="social-links">
+              <ul>
+                <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+                <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+                <li><a href="#"><i class="fab fa-youtube"></i></a></li>
               </ul>
             </div>
-    
-            <div class="footer-section services">
-              <h4
-                style="
-                  font-size: 18px;
-                  margin-bottom: 10px;
-                  transition: color 0.3s;
-                  color: black;
-                "
-                onmouseover="this.style.color='#e67e22'"
-                onmouseout="this.style.color='white'"
-              >
-                Newsletter
-                <div class="underline"><span></span></div>
-              </h4>
-              <br />
-              <ul style="list-style: none; padding: 0; ">
-                <form>
-                  <i class="fas fa-envelope"></i>
-                  <input
-                    type="email"
-                    placeholder="Enter your email id"
-                    required=""
-                    fdprocessedid="7t54w"
-                  />
-                  <button type="submit" fdprocessedid="xi78vf">
-                    <i class="fas fa-arrow-right"></i>
-                  </button>
-                </form>
-                <br />
-                <h4
-                  style="
-                    font-size: 18px;
-                    margin-bottom: 10px;
-                    transition: color 0.3s;
-                    color: black;
-                  "
-                  onmouseover="this.style.color='#e67e22'"
-                  onmouseout="this.style.color='white'"
-                >
-                  Contact Us 
-                  <div class="underline"><span></span></div>
-                </h4>
-                <br />
-                <ul style="list-style: none; padding: 0">
-                  <ul style="list-style: none; padding: 0">
-                    <li>
-                      <a
-                        href="mailto:contact@example.com"
-                        style="
-                          color: white;
-                          text-decoration: none;
-                          transition: 0.3s;
-                          padding-left: 0px;
-                        "
-                        onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                        onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                        >contact@example.com</a
-                      >
-                    </li>
-                    <li>
-                      <a
-                        class="fas fa-map-marker-alt"
-                        style="
-                          color: white;
-                          text-decoration: none;
-                          transition: 0.3s;
-                          padding-left: 0px;
-                        "
-                        onmouseover="this.style.color='black'; this.style.paddingLeft='10px'"
-                        onmouseout="this.style.color='white'; this.style.paddingLeft='0'"
-                        >India</a
-                      >
-                    </li>
-                  </ul>
-                </ul>
-              </ul>
+        
+            <!-- Footer Bottom -->
+            <div class="footer-bottom">
+              <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
             </div>
-          </div>
-    
-          <div class="footer-bottom" style="text-align: center; margin-top: 10px">
-            <p style="margin: 0; font-size: 14px; color: white">
-              © 2025 DSA Problem Solutions. All rights reserved.
-            </p>
-          </div>
-        </footer>
+          </footer>
           
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
diff --git a/pages/leetcode.html b/pages/leetcode.html
index 32dd56d3..81fc620c 100644
--- a/pages/leetcode.html
+++ b/pages/leetcode.html
@@ -27,6 +27,7 @@
     />
     <link rel="stylesheet" href="leetcode.css" />
     <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="../footer.css">
   </head>
   <body>
     <!-- Scroll -->
@@ -171,6 +172,87 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                  </form>
              </div>
         </div>
+      </div>
+    </div>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
+          </div>
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
+          </p>
+        </div>
+        
+        <!-- Quick Links Section -->
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="about.html" >Who We Are</a></li>
+              <li><a href="#">Blog</a ></li>
+              <li><a href="#">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="#" >Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="../about.html">Who We Are</a></li>
+              <li><a href="../Blog.html">Blog</a></li>
+              <li><a href="../work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="../contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="../privacy.html">Privacy Policy</a></li>
+              <li><a href="../security.html">Security</a></li>
+              <li><a href="../terms.html">Terms of Service</a></li>
+              <li><a href="../contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
+      </div>
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
+        </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
+      </div>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+        </ul>
+      </div>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+      </div>
+    </footer>
 
 
 
diff --git a/pages/leetcode1.html b/pages/leetcode1.html
index 31111327..5b3710db 100644
--- a/pages/leetcode1.html
+++ b/pages/leetcode1.html
@@ -26,9 +26,10 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="leetcode.css" />
-    <link rel="stylesheet" href="../navbar.css">
+    <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="../footer.css">
   </head>
-  <body>
+  <>
     <div id="cursor"></div>
     <header>
       <nav class="navbar">
@@ -164,6 +165,86 @@ <h3 style="margin-top: 20px;">Add a New Question</h3>
                </form>
            </div>
       </div>
+    </div>
+    <footer >   <!-- Footer Container -->
+      <div  class="footer-container" ><!-- Left Section (Logo and Description) -->
+        <div class="footer-left"><!-- Logo -->
+          <div class="footer-logo" >
+            <div class="logo-design"> <h1>DSA</h1></div>
+          </div>
+          <!-- Description -->
+          <p >
+            DSA problem solutions involve step-by-step methods to solve data
+            structure and algorithm challenges efficiently. They include
+            understanding the problem, selecting the right approach,
+            implementing optimized code, and analyzing time and space complexity
+            for performance.
+          </p>
+        </div>
+        
+        <!-- Quick Links Section -->
+          <div class="footer-section services">
+            <h2>  Quick Links </h2>
+            <ul>
+              <li><a href="../about.html" >Who We Are</a></li>
+              <li><a href="../Blog.html">Blog</a ></li>
+              <li><a href="../work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="../contact.html" >Contact Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section services" >
+            <h2> DSA Problem Solutions </h2>
+            <ul>
+              <li><a href="../about.html">Who We Are</a></li>
+              <li><a href="../Blog.html">Blog</a></li>
+              <li><a href="../work.html">Work With Us</a></li>
+              <li><a href="#">Investor Relations</a></li>
+              <li><a href="../contact.html">Contact Us</a></li>
+            </ul>
+          </div>
+  
+          <!-- Learn More Section -->
+          <div class="footer-section services">
+            <h2> Learn More</h2>
+            <ul>
+              <li><a href="../privacy.html">Privacy Policy</a></li>
+              <li><a href="../security.html">Security</a></li>
+              <li><a href="../terms.html">Terms of Service</a></li>
+              <li><a href="../contributors.html">Our Contributors</a></li>
+            </ul>
+          </div>
+      </div>
+      
+  
+      <!-- Stay Updated Section -->
+      <div class="footer-section-newsletter">
+        <h3>Stay Updated</h3>
+        <p>Subscribe to our newsletter for the latest updates and tips on
+           mastering data structures and algorithms.
+        </p>
+        <form action="#" method="POST" >
+          <input type="email" placeholder="Your Email Address" required />
+          <button type="submit" >Subscribe</button>
+        </form>
+      </div>
+  
+      <!-- Social Links -->
+      <div
+        class="social-links">
+        <ul>
+          <li><a href="#"><i class="fab fa-facebook"></i></a></li>
+          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
+          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
+          <li><a href="#"><i class="fab fa-youtube"></i></a></li>
+        </ul>
+      </div>
+  
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; 2025 DSA Problem Solutions. All rights reserved.</p>
+      </div>
+    </footer>
 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
diff --git a/pages/scroll.js b/pages/scroll.js
index cbb8dd88..5447dfca 100644
--- a/pages/scroll.js
+++ b/pages/scroll.js
@@ -1,4 +1,4 @@
- <!-- Scroll to Top Button -->
+ // Scroll to Top Button -->
 const scrollButton = document.getElementById("scrollButton");
 const outerCircle = document.querySelector(".outer-circle");
 const arrow = document.querySelector(".arrow");