Merge pull request #132 from CodeByRajeev/Current-Page-Navbar-1

Enhancing Current Page in Nav-Bar
JAYESHBATRA · Jan 18, 2024 · d6c0227 · d6c0227
2 parents e21f044 + 315e129
commit d6c0227
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 13 deletions.
diff --git a/Pages/3D-Visualizations/index.html b/Pages/3D-Visualizations/index.html
@@ -22,7 +22,7 @@
                   <li><a href="../../index.html" class="hover-link">Home</a></li>
                   <li><a href="../About-Us/index.html" class="hover-link">About Us</a></li>
                   <li><a href="../Simulation/index.html" class="hover-link">Simulations</a></li>
-                  <li><a href="../3D-Visualizations/index.html" class="hover-link">3D Visualisations</a></li>
+                  <li><a href="../3D-Visualizations/index.html" class="hover-link current-page">3D Visualisations</a></li>
                   <li><a href="../Quizes/index.html" class="hover-link">Quizzes</a></li>
                   <li><a href="../Videos/index.html" class="hover-link">Videos</a></li>
                   <li><a href="../Doubt Engine/index.html" class="hover-link">Doubt Engine</a></li>
@@ -136,4 +136,4 @@ <h2>Deoxyribonucleic acid(DNA)</h2>
     <script src="../../scroll-reveal.js"></script>
 
 </body>
-</html>
+</html>
diff --git a/Pages/3D-Visualizations/style.css b/Pages/3D-Visualizations/style.css
@@ -100,6 +100,17 @@ ul {
     color: var(--accent-color);
 }
 
+.current-page {
+	color:#4d006b;
+	background-origin: border-box; 
+	padding: 8px 12px;
+    border-radius: 8px; 
+    border: 2px solid rgb(0, 30, 94);
+    text-decoration: none; 
+	font-weight: lighter;
+}
+
+
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;

diff --git a/Pages/About-Us/index.html b/Pages/About-Us/index.html
@@ -50,7 +50,7 @@
           <div class="basis-[730px] nav-links" id="nav-links">
               <ul class="nav-menu flex items-center list-none justify-between">
                   <li><a href="../../index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Home</a></li>
-                  <li><a href="../About-Us/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">About Us</a></li>
+                  <li><a href="../About-Us/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color current-page">About Us</a></li>
                   <li><a href="../Simulation/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Simulations</a></li>
                   <li><a href="../3D-Visualizations/index.html" class="text-primary_text_color transition duration-200 ease-out hover:text-accent_color">3D Visualisations</a></li>
                   <li><a href="../Quizes/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Quizzes</a></li>
@@ -120,4 +120,4 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
     <script src="../../scroll-reveal.js"></script>
 
 </body>
-</html>
+</html>
diff --git a/Pages/About-Us/style.css b/Pages/About-Us/style.css
@@ -25,6 +25,17 @@
 .nav-toggle {
     display: none;
 }
+.current-page {
+	color:#4d006b;
+	background-origin: border-box; 
+	padding: 8px 12px;
+    border-radius: 8px; 
+    border: 2px solid rgb(0, 30, 94);
+    text-decoration: none; 
+	font-weight: lighter;
+}
+
+
 
 .hamburger{ /* In Use */
   display: none;

diff --git a/Pages/Doubt Engine/index.html b/Pages/Doubt Engine/index.html
@@ -56,7 +56,7 @@
                 <li><a href="../3D-Visualizations/index.html" class="text-primary_text_color transition duration-200 ease-out hover:text-accent_color">3D Visualisations</a></li>
                 <li><a href="../Quizes/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Quizzes</a></li>
                 <li><a href="../Videos/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Videos</a></li>
-                <li><a href="../Doubt Engine/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Doubt Engine</a></li>
+                <li><a href="../Doubt Engine/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color current-page">Doubt Engine</a></li>
             </ul>
         </div>
         <div class="hamburger cursor-pointer">
@@ -109,4 +109,4 @@ <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl
     <script src="../../scroll-reveal.js"></script>
 
 </body>
-</html>
+</html>
diff --git a/Pages/Doubt Engine/style.css b/Pages/Doubt Engine/style.css
@@ -21,6 +21,16 @@
   cursor: pointer;
 }
 
+.current-page {
+	color:#4d006b;
+	background-origin: border-box; 
+	padding: 8px 12px;
+    border-radius: 8px; 
+    border: 2px solid rgb(0, 30, 94);
+    text-decoration: none; 
+	font-weight: lighter;
+}
+
 .bar{
   display: block;
   width: 25px;
@@ -60,4 +70,4 @@
   .button-10:focus {
     box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
     outline: 0;
-  }
+  }
diff --git a/Pages/Quizes/index.html b/Pages/Quizes/index.html
@@ -23,7 +23,7 @@
                   <li><a href="../About-Us/index.html" class="hover-link">About Us</a></li>
                   <li><a href="../Simulation/index.html" class="hover-link">Simulations</a></li>
                   <li><a href="../3D-Visualizations/index.html" class="hover-link">3D Visualisations</a></li>
-                  <li><a href="../Quizes/index.html" class="hover-link">Quizzes</a></li>
+                  <li><a href="../Quizes/index.html" class="hover-link current-page">Quizzes</a></li>
                   <li><a href="../Videos/index.html" class="hover-link">Videos</a></li>
                   <li><a href="../Doubt Engine/index.html" class="hover-link">Doubt Engine</a></li>
               </ul>

diff --git a/Pages/Quizes/style.css b/Pages/Quizes/style.css
@@ -101,6 +101,15 @@ ul {
     color: var(--accent-color);
 }
 
+.current-page {
+	color:#4d006b;
+	background-origin: border-box; 
+	padding: 8px 12px;
+    border-radius: 8px; 
+    border: 2px solid rgb(0, 30, 94);
+    text-decoration: none; 
+	font-weight: lighter;
+}
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;

diff --git a/Pages/Simulation/index.html b/Pages/Simulation/index.html
@@ -21,7 +21,7 @@
               <ul class="nav-menu">
                 <li><a href="../../index.html" class="hover-link">Home</a></li>
                   <li><a href="../About-Us/index.html" class="hover-link">About Us</a></li>
-                  <li><a href="../Simulation/index.html" class="hover-link">Simulations</a></li>
+                  <li><a href="../Simulation/index.html" class="hover-link current-page">Simulations</a></li>
                   <li><a href="../3D-Visualizations/index.html" class="hover-link">3D Visualisations</a></li>
                   <li><a href="../Quizes/index.html" class="hover-link">Quizzes</a></li>
                   <li><a href="../Videos/index.html" class="hover-link">Videos</a></li>
@@ -123,4 +123,4 @@ <h2>Orbital Configuration</h2>
     <script src="../../scroll-reveal.js"></script>
 
 </body>
-</html>
+</html>
diff --git a/Pages/Simulation/style.css b/Pages/Simulation/style.css
@@ -100,6 +100,16 @@ ul {
     color: var(--accent-color);
 }
 
+.current-page {
+	color:#4d006b;
+	background-origin: border-box; 
+	padding: 8px 12px;
+    border-radius: 8px; 
+    border: 2px solid rgb(0, 30, 94);
+    text-decoration: none; 
+	font-weight: lighter;
+}
+
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;

diff --git a/Pages/Videos/index.html b/Pages/Videos/index.html
@@ -24,7 +24,7 @@
                   <li><a href="../Simulation/index.html" class="hover-link">Simulations</a></li>
                   <li><a href="../3D-Visualizations/index.html" class="hover-link">3D Visualisations</a></li>
                   <li><a href="../Quizes/index.html" class="hover-link">Quizzes</a></li>
-                  <li><a href="../Videos/index.html" class="hover-link">Videos</a></li>
+                  <li><a href="../Videos/index.html" class="hover-link current-page">Videos</a></li>
                   <li><a href="../Doubt Engine/index.html" class="hover-link">Doubt Engine</a></li>
               </ul>
           </div>

diff --git a/Pages/Videos/style.css b/Pages/Videos/style.css
@@ -100,6 +100,16 @@ ul {
     color: var(--accent-color);
 }
 
+.current-page {
+	color:#4d006b;
+	background-origin: border-box; 
+	padding: 8px 12px;
+    border-radius: 8px; 
+    border: 2px solid rgb(0, 30, 94);
+    text-decoration: none; 
+	font-weight: lighter;
+}
+
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;

diff --git a/index.html b/index.html
@@ -96,7 +96,7 @@
         </a>
         <div class="nav-links" id="nav-links">
           <ul class="nav-menu">
-            <li><a href="index.html" class="hover-link">Home</a></li>
+          <li><a href="index.html" class="hover-link current-page ">Home</a></li>
             <li>
               <a href="./Pages/About-Us/index.html" class="hover-link"
                 >About Us</a

diff --git a/style.css b/style.css
@@ -110,6 +110,17 @@ ul {
 	color: var(--accent-color);
 }
 
+.current-page {
+	color:#4d006b;
+	background-origin: border-box; 
+	padding: 8px 12px;
+    border-radius: 8px; 
+    border: 2px solid rgb(0, 30, 94);
+    text-decoration: none; 
+	font-weight: lighter;
+}
+
+
 .primary-button {
 	background-color: var(--accent-color);
 	border-radius: 6px;
@@ -756,4 +767,4 @@ table .ribbon::after {
     50%{
         transform: translateY(3px);
     }
-}
+}