morden footer implimented

Author: KhulisoJohn

index.html

@@ -542,22 +542,48 @@ <h6 class="fw-bold">Phone</h6>
     </section>
 
     <!-- Footer -->
-    <footer class="bg-blackgray py-3">
-        <div class="container-fluid">
-            <div class="row align-items-center text-center text-md-start">
-                <div class="col-12 col-md-8 footer__section mb-2 mb-md-0">
-                    <p class="fw-normal mb-0 text-white fs-5">Copyright 2025 &copy; 
-                        <a href="https://github.com/KhulisoJohn" target="_blank" class="text-white fw-bold">khulysojohn</a> All Rights Reserved
-                    </p>
-                </div>
-                <div class="col-12 col-md-4 d-flex social justify-content-md-end justify-content-center gap-4">
-                    <a href="https://web.facebook.com/FountainOfFireMinistrySA/" class="text-white fs-4"><i class=" bi bi-facebook"></i></a>
-                    <a href="https://www.tiktok.com/@fountainministry" class="text-white fs-4"><i class="bi bi-tiktok"></i></a>
-                    <a href="https://youtube.com/@fountainoffireministrysa" class="text-white fs-4"><i class="bi bi-youtube"></i></a>
-                </div>
-            </div>
-        </div>
-    </footer>
+    <footer class="text-light pt-5 pb-3" style="background-color:#ebb036">
+  <div class="container">
+    <div class="row align-items-center text-center text-md-start">
+      
+      <!-- About / Logo -->
+      <div class="col-md-4 mb-3 mb-md-0">
+        <img src="https://mapeni.sirv.com/Images/fountain/logo1.jpg" alt="Fountain Logo" class="mb-2" style="width:80px; border-radius:50%;">
+        <p class="mb-1 fw-bold">Fountain of Fire Ministry</p>
+        <small class="text-muted">Spreading the Gospel since 2008</small>
+      </div>
+
+      <!-- Quick Links -->
+      <div class="col-md-4 mb-3 mb-md-0">
+        <h6 class="fw-bold mb-2">Quick Links</h6>
+        <ul class="list-unstyled">
+          <li><a href="#Home" class="text-light text-decoration-none">Home</a></li>
+          <li><a href="#About" class="text-light text-decoration-none">About</a></li>
+          <li><a href="#services" class="text-light text-decoration-none">Services</a></li>
+          <li><a href="#portfolio" class="text-light text-decoration-none">Gallery</a></li>
+          <li><a href="#contact__section" class="text-light text-decoration-none">Contact</a></li>
+        </ul>
+      </div>
+
+      <!-- Social -->
+      <div class="col-md-4 text-center text-md-end">
+        <h6 class="fw-bold mb-2">Connect with us</h6>
+        <a href="https://web.facebook.com/FountainOfFireMinistrySA/" class="text-light fs-4 mx-1 hover-effect"><i class="bi bi-facebook"></i></a>
+        <a href="https://www.tiktok.com/@fountainministry" class="text-light fs-4 mx-1 hover-effect"><i class="bi bi-tiktok"></i></a>
+        <a href="https://youtube.com/@fountainoffireministrysa" class="text-light fs-4 mx-1 hover-effect"><i class="bi bi-youtube"></i></a>
+        <a href="https://github.com/KhulisoJohn" class="text-light fs-4 mx-1 hover-effect"><i class="bi bi-github"></i></a>
+      </div>
+
+    </div>
+
+    <!-- Bottom text -->
+    <div class="row mt-3">
+      <div class="col-12 text-center text-muted small">
+        &copy; 2025 khulysojohn. All Rights Reserved.
+      </div>
+    </div>
+  </div>
+</footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script src="main.js"></script>

style.css

@@ -562,7 +562,3 @@ button.contact__btn {
     padding: 10px 40px;
 }
 
-
- .social .bi {
-    color:blue
-}