From e60f5826866d73b1ab8ec543bb096159efe3d0c6 Mon Sep 17 00:00:00 2001
From: VishwaAmarasinghe <dvpamarasinghe31@gmail.com>
Date: Tue, 16 Apr 2024 13:42:06 +0530
Subject: [PATCH] Make the footer and placeholders

---
 assets/js/script.js             |  6 +++++-
 assets/placeholders/footer.html | 36 +++++++++++++++++++++++++++++++++
 assets/placeholders/nav.html    | 28 +++++++++++++++++++++++++
 assets/style/style.css          | 27 +++++++++++++++++++++++++
 index.html                      | 33 +++++-------------------------
 5 files changed, 101 insertions(+), 29 deletions(-)
 create mode 100644 assets/placeholders/footer.html
 create mode 100644 assets/placeholders/nav.html

diff --git a/assets/js/script.js b/assets/js/script.js
index 8176518..f3812ea 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,4 +1,8 @@
 
 $(function(){
-    $("#nav-placeholders").load("../assets/placeholders/nav.html");
+    $("#nav-placeholder").load("../assets/placeholders/nav.html");
+  });
+
+  $(function(){
+    $("#footer-placeholder").load("../assets/placeholders/footer.html");
   });
\ No newline at end of file
diff --git a/assets/placeholders/footer.html b/assets/placeholders/footer.html
new file mode 100644
index 0000000..980d4e5
--- /dev/null
+++ b/assets/placeholders/footer.html
@@ -0,0 +1,36 @@
+<footer class="footer">
+<hr><br>
+    <div class="row footer-row">
+        <div class="col-9 col-md-6">
+           <span class="footer-head">
+            <img src="/assets/img/acf.png" alt="" srcset="" class="footer-acf">
+            <div class="footer-name">
+                <h2>Cyber Pulse</h2> Organized by ACF
+            </div>
+           
+           </span>
+        </div>
+        <div class="col-9 col-md-6 link-col">
+           <h4>Links</h4>
+           <ul class="footer-links">
+            <li class="footer-link">
+                <a class="footer-link-home " href="index.html">Home</a>
+            </li>
+            <li class="footer-link">
+                <a class="footer-link-about " href="/index.html#about">About</a>
+            </li>
+            <li class="footer-link">
+                <a class="footer-link-contact " href="/index.html#contact">Contact</a>
+            </li>
+            <li class="footer-link">
+                <a class="footer-link-competitions " href="#">Competitions</a>
+            </li>
+           </ul>
+        </div>
+    </div>
+<br>
+<center>
+    <h5>All rights reserved by ©️ 2024 Antonian Computer Fraternity</h5>
+</center>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/assets/placeholders/nav.html b/assets/placeholders/nav.html
new file mode 100644
index 0000000..53d300e
--- /dev/null
+++ b/assets/placeholders/nav.html
@@ -0,0 +1,28 @@
+<nav class="navbar navbar-expand-lg ">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="index.html"><img src=""class="nav-img" alt="">Cyber Pulse</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
+        
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link " href="index.html">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#about">About</a>
+          </li>
+          <li class="nav-item ">
+            <a class="nav-link " href="#contact">
+              Contact Us
+            </a>
+          </li>
+          <li class="nav-item nav-end">
+            <a class="nav-link " href="">Competitions</a>
+          </li>
+        </ul>
+      
+      </div>
+    </div>
+  </nav>
\ No newline at end of file
diff --git a/assets/style/style.css b/assets/style/style.css
index ba5d8f8..25921a6 100644
--- a/assets/style/style.css
+++ b/assets/style/style.css
@@ -104,3 +104,30 @@ background: url("../img/bg.png");
     border: none;
     color: #000000;
 }
+.footer{
+    background-color: #000000;
+    color: #ffffff;
+    padding: 50px;
+}
+.footer .row{
+    margin: 0px !important;
+}
+.footer-acf{
+    width: 100px;
+    height: auto;
+}
+.footer-head{
+    display: flex;
+    padding-bottom: 30px;
+}
+.link-col{
+    padding-left: 30px;
+}
+.footer-links{
+    list-style: none;
+    padding: 0px;
+}
+.footer-link a{
+    text-decoration: none;
+    color: #ffffff;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 5490e91..45d7666 100644
--- a/index.html
+++ b/index.html
@@ -12,34 +12,8 @@
 </head>
 <body>
   <!--navbar starts here-->
-    <nav class="navbar navbar-expand-lg ">
-        <div class="container-fluid">
-          <a class="navbar-brand" href="index.html"><img src=""class="nav-img" alt="">Cyber Pulse</a>
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" >
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
-            
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link " href="index.html">Home</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#about">About</a>
-              </li>
-              <li class="nav-item ">
-                <a class="nav-link " href="#contact">
-                  Contact Us
-                </a>
-              </li>
-              <li class="nav-item nav-end">
-                <a class="nav-link " href="">Competitions</a>
-              </li>
-            </ul>
-          
-          </div>
-        </div>
-      </nav>
+  <div id="nav-placeholder">
+  </div>
   <!--navbar ends here-->
 
 <!--Home section starts here-->
@@ -140,12 +114,15 @@ <h1 class="contact-heading">
   </center>
 </section>
 <!--Contact section ends here-->
+<div id="footer-placeholder">
+</div>
   <!--bootstraps-link-->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   <!--bootstraps-link-->
   <!--Font awsome starts-->
   <script src="https://kit.fontawesome.com/8d78513a47.js" crossorigin="anonymous"></script>
   <!--Font awsome ends-->
+  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="assets/js/script.js"></script>
 </body>
 </html>
\ No newline at end of file