Added my feature changes for UI enhancement (#722)

Author: sanss03

CodeClip

@@ -0,0 +1 @@
+Subproject commit 4aced00397aac773ae09bf5b58607fc9d91330c4

index.html

@@ -95,44 +95,60 @@ <h2>Loading<span class="dots"></span></h2>
     </div>
     <a id="top"></a>  <!--added for issue 260 -->
     <!-- ================================ Header Section Start Here ================================ -->
-    <header>
-      <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
-        <div class="container">
-          <a class="navbar-brand" href="#top">Code<span>Clip</span></a>
-          <button
-            class="navbar-toggler"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent"
-            aria-expanded="false"
-            aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <!-- ================================ issue #605 Starts Here ================================ -->
-           <div class="collapse navbar-collapse" id="navbarSupportedContent">
-              <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                <li class="nav-item">
-                    <a class="nav-link" aria-current="page" href="#top">Home</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#challengeSection">Challenges</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#aboutSection">About</a>
-                        </li>
-                        <li class="nav-item">
-                    <a class="nav-link" href="#contactFooter">Contact</a>
-                  </li>
-                </ul>
-          </div>
-          <!-- ================================ issue #605 Ends Here ================================ -->
-        </div>
-      </nav>
-    </header>
+    <!-- ================================ Updated Navbar ================================ -->
+<nav class="navbar navbar-expand-lg fixed-top custom-navbar">
+  <div class="container">
+    <!-- Brand / Logo -->
+    <a class="navbar-brand fw-bold logo-text" href="#top">
+      <i class="fa-solid fa-code me-2"></i>Code<span>Clip</span>
+    </a>
+
+    <!-- Toggler for Mobile -->
+    <button
+      class="navbar-toggler border-0"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarNav"
+      aria-controls="navbarNav"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <!-- Navbar Links -->
+    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+      <ul class="navbar-nav align-items-center">
+        <li class="nav-item">
+          <a class="nav-link active" href="#top">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#challengeSection">Challenges</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#aboutSection">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#contactFooter">Contact</a>
+        </li>
+        <li class="nav-item ms-lg-3">
+          <a
+            href="https://github.com/opensource-society/CodeClip"
+            target="_blank"
+            class="btn btn-primary btn-sm contribute-btn"
+          >
+            <i class="fa-brands fa-github me-1"></i> Contribute
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+<!-- ================================ Updated Navbar Ends ================================ -->
+
     <!-- ================================ Header Section Start Here ================================ -->
  <main>
     <!-- ================================ Hero Section Start Here ================================ -->