From eed231bc38436943f57b8b0b79a78fbf31c33b25 Mon Sep 17 00:00:00 2001
From: Khwaaish <khwaaishdiwan@gmail.com>
Date: Thu, 31 Jul 2025 14:54:15 +0530
Subject: [PATCH] Enhanced the footer #25

---
 _footer.html | 192 +++++++++++++++++++++++++++++---------------------
 index.html   | 195 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 304 insertions(+), 83 deletions(-)

diff --git a/_footer.html b/_footer.html
index 28a1682..d2161f2 100644
--- a/_footer.html
+++ b/_footer.html
@@ -1,90 +1,120 @@
-<div class="bg-yellow mt-3" >
-<div class="container overflow-x-hidden  ">
-  <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 pt-5 mt-1 d-flex justify-content-md-between justify-content-center">
-    <div class="col mb-3 ">
-      <!-- <a href="./" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
-        <img src="./assets/images/logo.png" class="w-100" alt="Gurukul Dream Foundation logo">
-      </a> -->
-      
-      <div class="col mb-3 text-center text-md-start">
-      <h5 class="text-success h1 my-3 pt-1 libre-baskerville-regular">Contact Us</h5>
-      <ul class="nav flex-column p-0">
-      <li class=" mb-2"><a href="tel:+918269250197" class="nav-link p-0 text-dark ">
-          <span>
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
-            <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
-          </svg>
-        </span>  
-        <span class="text-black ">+918269250197</span></a>
-      </li>  
-      <li class=" mb-2"><a href="mailto:info@gurukuldreamfoundation.org" class="nav-link p-0  text-dark">
-          <span>
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
-              <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
-            </svg>
-          </span>  
-          <span class="text-black small">info@gurukuldreamfoundation.org</span></a>
-      </li>
-        
-    </ul>
-  </div>
-  <div class="all-social-links pt-1 text-center text-md-start my-3 pt-0">
-    <div class="py-md-3"></div>
-        <!-- <h3 class="h4 mt-2 mb-3 text-success">
-        Social Media
-        </h3> -->
-        <div class="social-media-links d-flex align-items-center justify-content-enenly gap-3 justify-self-start justify-content-center w-100 px-4 px-md-0">
-            <a href="https://twitter.com/DreamGurukul?s=08" target="_blank" title="Twitter (X)"  class=" border rounded-circle p-1 border-black  text-white  text-center d-flex align-items-center justify-content-center social-media-logoes">
-                <img src="./assets/images/logoes/twitter.webp" class="rounded-circle " width="30px" alt="Social Media Logoes">
-            </a>
-            <a href="https://www.facebook.com/Gurukul-Dream-Foundation-106034151488777/" target="_blank" title="Facebook"  class="text-white border rounded-circle p-1 border-black   text-center d-flex align-items-center justify-content-center social-media-logoes">
-             <img src="./assets/images/logoes/facebook.png" class="rounded-circle " width="30px" alt="Social Media Logoes">
-            </a>
-            <a href="https://instagram.com/gurukuldreamfoundation?utm_medium=copy_link" target="_blank" title="Instagram"  class="text-white border rounded-circle p-1 border-black      text-center d-flex align-items-center justify-content-center social-media-logoes">
-              <img src="./assets/images/logoes/instagram.avif" class="rounded-circle " width="30px" alt="Social Media Logoes">
-            </a>
-            <a href="https://www.linkedin.com/company/gurukul-dream-foundation" target="_blank" title="LinkedIn"  class=" border rounded-circle p-1 border-black  text-black bg-white  text-center d-flex align-items-center justify-content-center social-media-logoes">
-              <img src="./assets/images/logoes/linkedin.png" class="rounded-circle " width="30px" alt="Social Media Logoes">
+<!-- Improved Footer HTML with Embedded CSS -->
+<div class="footer-wrapper bg-light mt-5">
+  <style>
+    .footer-wrapper {
+      background-color: #f3f3cd;
+      color: #1e1e1e;
+      font-family: 'Segoe UI', sans-serif;
+    }
+    .footer-wrapper a {
+      color: #333;
+      text-decoration: none;
+    }
+    .footer-wrapper a:hover {
+      color: #007bff;
+    }
+    .footer-wrapper h5,
+    .footer-wrapper h3 {
+      font-weight: 700;
+    }
+    .social-media-links a img {
+      transition: transform 0.3s ease;
+    }
+    .social-media-links a:hover img {
+      transform: scale(1.1);
+    }
+    .social-media-links a {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    .form-control {
+      border-radius: 0.5rem;
+    }
+    .btn-primary {
+      background-color: #198754;
+      border: none;
+    }
+    .btn-primary:hover {
+      background-color: #157347;
+    }
+    .scroll-to-top {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      color: #f0ad4e;
+      background: #fff;
+      border-radius: 50%;
+      padding: 8px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+  </style>
+
+  <div class="container py-5">
+    <footer class="row row-cols-1 row-cols-md-3 g-4">
+      <!-- Contact Section -->
+      <div class="col">
+        <h5>Contact Us</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2">
+            <a href="tel:+918269250197">
+              📞 +91 82692 50197
             </a>
-            <a href="https://youtu.be/M2y2MtGPANQ" target="_blank" title="YouTube"  class="text-white border rounded-circle p-1 border-black     text-center d-flex align-items-center justify-content-center social-media-logoes">
-             <img src="./assets/images/logoes/youtube.jpg" class="rounded-circle " width="30px" alt="Social Media Logoes">
+          </li>
+          <li>
+            <a href="mailto:info@gurukuldreamfoundation.org">
+              ✉️ info@gurukuldreamfoundation.org
             </a>
+          </li>
+        </ul>
+
+        <!-- Social Media Links -->
+        <div class="social-media-links d-flex gap-2 mt-3">
+          <a href="https://twitter.com/DreamGurukul?s=08" target="_blank">
+            <img src="./assets/images/logoes/twitter.webp" width="30" alt="Twitter">
+          </a>
+          <a href="https://www.facebook.com/Gurukul-Dream-Foundation-106034151488777/" target="_blank">
+            <img src="./assets/images/logoes/facebook.png" width="30" alt="Facebook">
+          </a>
+          <a href="https://instagram.com/gurukuldreamfoundation?utm_medium=copy_link" target="_blank">
+            <img src="./assets/images/logoes/instagram.avif" width="30" alt="Instagram">
+          </a>
+          <a href="https://www.linkedin.com/company/gurukul-dream-foundation" target="_blank">
+            <img src="./assets/images/logoes/linkedin.png" width="30" alt="LinkedIn">
+          </a>
+          <a href="https://youtu.be/M2y2MtGPANQ" target="_blank">
+            <img src="./assets/images/logoes/youtube.jpg" width="30" alt="YouTube">
+          </a>
         </div>
       </div>
-      
-    </div>
-
-    <a href="./" class="d-flex fs-5 mt-2 align-items-center footer-logo-responsive flex-column mb-3 link-body-emphasis text-decoration-none w-25">
-      <img src="./assets/images/gdf-logo.png" class="w-100" alt="">
-        <!-- <img src="./assets/images/logo.png" class="w-100" alt="Gurukul Dream Foundation logo"> -->
-       <!-- Gurukul Dream Foundation -->
-      </a>
-    <!-- <div class="col my-3">
-    </div> -->
 
-    <div class="justify-self-end my-3 " id="Contact" style="width: 400px !important;">
-    <h3 class="h1 text-success libre-baskerville-regular">Get in Touch</h3>
-      <form action="./assets/email.php" method="POST">
-        <input type="text" name="name" class="form-control my-3" required placeholder="Name">
-        <input type="number" name="mobile" class="form-control my-3" required placeholder="Phone No.">
-        <input type="email" name="email" class="form-control my-3" required placeholder="Email">
-        <textarea type="text" name="message" class="form-control my-3" required placeholder="Drop a message..." style="height: 100px;"></textarea>
-        <button class="btn btn-primary mt-2" type="submit" >Send</button>
-      </form>
-    </div>
+      <!-- Logo -->
+      <div class="col text-center">
+        <img src="./assets/images/gdf-logo.png" alt="GDF Logo" class="img-fluid" style="max-width: 150px;">
+      </div>
 
-    
+      <!-- Contact Form -->
+      <div class="col">
+        <h3>Get in Touch</h3>
+        <form action="./assets/email.php" method="POST">
+          <input type="text" name="name" class="form-control my-2" required placeholder="Name">
+          <input type="number" name="mobile" class="form-control my-2" required placeholder="Phone No.">
+          <input type="email" name="email" class="form-control my-2" required placeholder="Email">
+          <textarea name="message" class="form-control my-2" required placeholder="Drop a message..." style="height: 100px;"></textarea>
+          <button class="btn btn-primary mt-2" type="submit">Send</button>
+        </form>
+      </div>
+    </footer>
 
+    <hr>
+    <p class="text-center fw-bold">Copyright &copy; 2024 | Gurukul Dream Foundation. All Rights Reserved.</p>
+  </div>
 
-  </footer>
-  <hr class="text-dark w-100">
-  <p class="text-body-secondary text-center fw-bold">Copyright &copy; 2024 | Gurukul Dream Foundation. All Rights Reserved.</p>
+  <!-- Scroll to Top -->
+  <a class="scroll-to-top" href="#" title="Go to Top">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-caret-up-square-fill" viewBox="0 0 16 16">
+      <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11"/>
+    </svg>
+  </a>
 </div>
-</div>
-
-
-<a class="position-fixed text-orange shadow-yellow rounded shadow" href="#" title="Go to Top" style="bottom: 30px; right: 30px;">
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-up-square-fill" viewBox="0 0 16 16">
-  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11"/>
-</svg>
-</a>
diff --git a/index.html b/index.html
index 7fadee2..3ecdba1 100644
--- a/index.html
+++ b/index.html
@@ -625,8 +625,199 @@ <h2 class="text-center libre-baskerville-regular">Our Partners</h2>
     </main>
 
 
-    <!--  -->
-    <div id="footer"></div>
+    <!-- FOOTER  -->
+    <!-- Enhanced Footer Layout with Logo Left, Quick Links, Contact, Social, Form -->
+<div class="footer-wrapper bg-yellow mt-5">
+  <style>
+    .footer-wrapper {
+      background-color: #ffd700;
+      color: #1e1e1e;
+      font-family: 'Segoe UI', sans-serif;
+    }
+    .footer-wrapper a {
+      color: #333;
+      text-decoration: none;
+    }
+    .footer-wrapper a:hover {
+      color: #007bff;
+    }
+    .footer-wrapper h5,
+    .footer-wrapper h3 {
+      font-weight: 700;
+    }
+    .follow-us-list h5 {
+  font-weight: bold;
+  margin-bottom: 1rem;
+  text-decoration: underline;
+}
+
+.follow-us-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.follow-us-list li {
+  margin-bottom: 1rem;
+}
+
+.follow-us-list a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #000;
+}
+
+.follow-us-list a img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #fff;
+  padding: 5px;
+  margin-right: 10px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
+  transition: transform 0.3s ease;
+}
+
+.follow-us-list a:hover img {
+  transform: scale(1.1);
+}
+
+    .form-control {
+      border-radius: 0.5rem;
+    }
+    .btn-primary {
+      background-color: #198754;
+      border: none;
+    }
+    .btn-primary:hover {
+      background-color: #157347;
+    }
+    .scroll-to-top {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      color: #f0ad4e;
+      background: #fff;
+      border-radius: 50%;
+      padding: 8px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+    .footer-logo {
+      max-width: 140px;
+    }
+    .footer-description {
+      font-size: 0.875rem;
+      color: #444;
+      max-width: 240px;
+    }
+    .quick-links ul {
+      list-style: none;
+      padding: 0;
+    }
+    .quick-links ul li {
+      margin-bottom: 0.5rem;
+    }
+  </style>
+
+  <div class="container py-5">
+    <footer class="row row-cols-1 row-cols-md-5 g-4 align-items-start">
+      <!-- Logo & Desc -->
+      <div class="col">
+        <img src="./assets/images/gdf-logo.png" alt="GDF Logo" class="img-fluid footer-logo mb-2">
+        <p class="footer-description">Gurukul Dream Foundation is dedicated to transforming youth through education and empowerment initiatives across India.</p>
+      </div>
+
+      <!-- Quick Links -->
+      <div class="col quick-links">
+        <h5>Quick Links</h5>
+        <ul>
+          <li><a href="./">Home</a></li>
+          <li><a href="./about.html">About Us</a></li>
+          <li><a href="./projects.html">Projects</a></li>
+          <li><a href="./donate.html">Donate</a></li>
+          <li><a href="./contact.html">Contact</a></li>
+        </ul>
+      </div>
+
+      <!-- Contact Info -->
+      <div class="col">
+        <h5>Contact Us</h5>
+        <ul class="list-unstyled">
+          <li class="mb-2 d-flex align-items-center gap-2">
+            <span>📞</span>
+            <a href="tel:+918269250197">+91 82692 50197</a>
+          </li>
+          <li class="d-flex align-items-center gap-2">
+            <span>✉️</span>
+            <a href="mailto:info@gurukuldreamfoundation.org">email here</a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Follow Us -->
+      <div class="follow-us-list">
+  <h5>Follow Us</h5>
+  <ul>
+    <li>
+      <a href="https://twitter.com/DreamGurukul?s=08" target="_blank">
+        <img src="./assets/images/logoes/twitter.webp" alt="Twitter">
+        <span>Twitter</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://www.facebook.com/Gurukul-Dream-Foundation-106034151488777/" target="_blank">
+        <img src="./assets/images/logoes/facebook.png" alt="Facebook">
+        <span>Facebook</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://instagram.com/gurukuldreamfoundation?utm_medium=copy_link" target="_blank">
+        <img src="./assets/images/logoes/instagram.avif" alt="Instagram">
+        <span>Instagram</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://www.linkedin.com/company/gurukul-dream-foundation" target="_blank">
+        <img src="./assets/images/logoes/linkedin.png" alt="LinkedIn">
+        <span>LinkedIn</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://youtu.be/M2y2MtGPANQ" target="_blank">
+        <img src="./assets/images/logoes/youtube.jpg" alt="YouTube">
+        <span>YouTube</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+
+      <!-- Contact Form -->
+      <div class="col">
+        <h3>Get in Touch</h3>
+        <form action="./assets/email.php" method="POST">
+          <input type="text" name="name" class="form-control my-2" required placeholder="Name">
+          <input type="number" name="mobile" class="form-control my-2" required placeholder="Phone No.">
+          <input type="email" name="email" class="form-control my-2" required placeholder="Email">
+          <textarea name="message" class="form-control my-2" required placeholder="Drop a message..." style="height: 100px;"></textarea>
+          <button class="btn btn-primary mt-2" type="submit">Send</button>
+        </form>
+      </div>
+    </footer>
+
+    <hr>
+    <p class="text-center fw-bold">Copyright &copy; 2024 | Gurukul Dream Foundation. All Rights Reserved.</p>
+  </div>
+
+  <!-- Scroll to Top -->
+  <a class="scroll-to-top" href="#" title="Go to Top">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-caret-up-square-fill" viewBox="0 0 16 16">
+      <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11"/>
+    </svg>
+  </a>
+</div>
+
 
     <script src="./assets/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script src="./assets/js/script.js"></script>