Make the footer and placeholders

acf-sack · Apr 16, 2024 · e60f582 · e60f582
1 parent 861e3e7
commit e60f582
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 29 deletions.
diff --git 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");
   });
diff --git a/assets/placeholders/footer.html 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>
diff --git a/assets/placeholders/nav.html 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>
diff --git 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;
+}
diff --git 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/[email protected]/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>