Creating Index page

static/index/styles css/styles.css

@@ -5,15 +5,15 @@
 
 h1 {
     text-align: center;
-    padding: 30px;
+    padding: 50px;
     color: white !important;
 }
 
 body,
 html {
     height: 100%;
     margin: 0;
-    background-color: #161616 !important;
+    background-color: #1a1919 !important;
 }
 
 .navbar {
@@ -49,4 +49,8 @@ html {
     flex-direction: column;
     align-items: center;
     text-align: center;
+}
+
+.mb-4 {
+    background-color: #A9A9A9 !important;
 }

templates/index.html

@@ -20,10 +20,10 @@
             <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                 <ul class="navbar-nav">
                     <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="#">Projects</a>
+                        <a class="nav-link" aria-current="page" href="#">Projects</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#">Create Tests</a>
+                        <a class="nav-link active" href="#">Create Tests</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="#">View Tests</a>
@@ -40,20 +40,28 @@ <h1>Welcome to IATesting!</h1>
                 <div class="card mb-4">
                     <div class="card-body">
                         <h5 class="card-title">Create Your Tests</h5>
-                        <a href="#" class="btn btn-primary">Start Creating</a>
+                        <a href="#" class="btn btn-dark">Start Creating</a>
                     </div>
                 </div>
             </div>
             <div class="col-sm-6 col-md-4">
                 <div class="card mb-4">
                     <div class="card-body">
                         <h5 class="card-title">View Created Tests</h5>
-                        <a href="#" class="btn btn-primary">View Tests</a>
+                        <a href="#" class="btn btn-dark">View Tests</a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    <footer class="bg-body-tertiary text-center text-lg-start">
+        <!-- Copyright -->
+        <div class="text-center p-3" style="background-color:#A9A9A9;">
+            © 2024 Copyright:
+            <a class="text-body" href="https://mdbootstrap.com/"></a>
+        </div>
+        <!-- Copyright -->
+    </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>