navbar fixed

JAYESHBATRA · May 14, 2024 · 387ec3c · 387ec3c
1 parent 3b7f56d
commit 387ec3c
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 37 deletions.
diff --git a/Pages/Videos/sources/button-1/index.html b/Pages/Videos/sources/button-1/index.html
@@ -20,12 +20,24 @@
           </a>
           <div class="nav-links" id="nav-links">
               <ul class="nav-menu">
-                  <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">Quizes</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>
+                  <li><a href="../../../About-Us/index.html" class="hover-link">
+                    <i class="fa-solid fa-building-columns" style="font-size:10px;"></i>About Us</a></li>
+
+                  <li><a href="../../../Simulation/index.html" class="hover-link">
+                    <i class="fa-solid fa-plug-circle-check" style="font-size:10px;"></i>Simulations</a></li>
+
+                  <li><a href="../../../3D-Visualizations/index.html" class="hover-link">
+                    <i class="fa-brands fa-unity"  style="font-size:10px;"></i>3D Visualisations</a></li>
+
+                  <li><a href="../../../Quizes/index.html" class="hover-link">
+                    <i class="fa-solid fa-list-check"  style="font-size:10px;"></i>Quizes</a></li>
+
+                  <li><a href="../../../Videos/index.html" class="hover-link selected">
+                    <i class="fa-solid fa-video"  style="font-size:10px;"></i>Videos</a></li>
+
+                  <li><a href="../../../Doubt Engine/index.html" class="hover-link">
+                    <i class="fa-solid fa-check-double" style="font-size:10px;"></i>Doubt Engine</a></li>
+
               </ul>
           </div>
           <div class="hamburger">

diff --git a/Pages/Videos/sources/button-1/style.css b/Pages/Videos/sources/button-1/style.css
@@ -94,12 +94,30 @@ ul {
 .hover-link {
     color: var(--primary-text-color);
     transition: 0.2s ease-out;
+    font-size: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+}
+
+.selected{
+    border: 2.3px solid #4D006B;
+    color: #4D006B;
+    height: 38px;
+    width: 88px;
+    border-radius: 8.5px;
 }
 
+
 .hover-link:hover {
     color: var(--accent-color);
 }
 
+.selected:hover{
+    color: #4D006B;
+}
+
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;
@@ -141,7 +159,7 @@ ul {
 }
 
 .nav-links {
-    flex-basis: 730px;
+    flex-basis: 740px;
 }
 
 .nav-menu{

diff --git a/Pages/Videos/sources/button-2/index.html b/Pages/Videos/sources/button-2/index.html
@@ -19,15 +19,27 @@
               <img src="./assets/asset 41.png" alt="company logo">
           </a>
           <div class="nav-links" id="nav-links">
-              <ul class="nav-menu">
-                  <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">Quizes</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>
-          </div>
+            <ul class="nav-menu">
+                <li><a href="../../../About-Us/index.html" class="hover-link">
+                  <i class="fa-solid fa-building-columns" style="font-size:10px;"></i>About Us</a></li>
+
+                <li><a href="../../../Simulation/index.html" class="hover-link">
+                  <i class="fa-solid fa-plug-circle-check" style="font-size:10px;"></i>Simulations</a></li>
+
+                <li><a href="../../../3D-Visualizations/index.html" class="hover-link">
+                  <i class="fa-brands fa-unity"  style="font-size:10px;"></i>3D Visualisations</a></li>
+
+                <li><a href="../../../Quizes/index.html" class="hover-link">
+                  <i class="fa-solid fa-list-check"  style="font-size:10px;"></i>Quizes</a></li>
+
+                <li><a href="../../../Videos/index.html" class="hover-link selected">
+                  <i class="fa-solid fa-video"  style="font-size:10px;"></i>Videos</a></li>
+
+                <li><a href="../../../Doubt Engine/index.html" class="hover-link">
+                  <i class="fa-solid fa-check-double" style="font-size:10px;"></i>Doubt Engine</a></li>
+
+            </ul>
+        </div>
           <div class="hamburger">
             <span class="bar"></span>
             <span class="bar"></span>

diff --git a/Pages/Videos/sources/button-2/style.css b/Pages/Videos/sources/button-2/style.css
@@ -94,12 +94,30 @@ ul {
 .hover-link {
     color: var(--primary-text-color);
     transition: 0.2s ease-out;
+    font-size: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+}
+
+.selected{
+    border: 2.3px solid #4D006B;
+    color: #4D006B;
+    height: 38px;
+    width: 88px;
+    border-radius: 8.5px;
 }
 
+
 .hover-link:hover {
     color: var(--accent-color);
 }
 
+.selected:hover{
+    color: #4D006B;
+}
+
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;
@@ -141,7 +159,7 @@ ul {
 }
 
 .nav-links {
-    flex-basis: 730px;
+    flex-basis: 740px;
 }
 
 .nav-menu{

diff --git a/Pages/Videos/sources/button-3/index.html b/Pages/Videos/sources/button-3/index.html
@@ -19,15 +19,27 @@
               <img src="./assets/asset 41.png" alt="company logo">
           </a>
           <div class="nav-links" id="nav-links">
-              <ul class="nav-menu">
-                  <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">Quizes</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>
-          </div>
+            <ul class="nav-menu">
+                <li><a href="../../../About-Us/index.html" class="hover-link">
+                  <i class="fa-solid fa-building-columns" style="font-size:10px;"></i>About Us</a></li>
+
+                <li><a href="../../../Simulation/index.html" class="hover-link">
+                  <i class="fa-solid fa-plug-circle-check" style="font-size:10px;"></i>Simulations</a></li>
+
+                <li><a href="../../../3D-Visualizations/index.html" class="hover-link">
+                  <i class="fa-brands fa-unity"  style="font-size:10px;"></i>3D Visualisations</a></li>
+
+                <li><a href="../../../Quizes/index.html" class="hover-link">
+                  <i class="fa-solid fa-list-check"  style="font-size:10px;"></i>Quizes</a></li>
+
+                <li><a href="../../../Videos/index.html" class="hover-link selected">
+                  <i class="fa-solid fa-video"  style="font-size:10px;"></i>Videos</a></li>
+
+                <li><a href="../../../Doubt Engine/index.html" class="hover-link">
+                  <i class="fa-solid fa-check-double" style="font-size:10px;"></i>Doubt Engine</a></li>
+
+            </ul>
+        </div>
           <div class="hamburger">
             <span class="bar"></span>
             <span class="bar"></span>

diff --git a/Pages/Videos/sources/button-3/style.css b/Pages/Videos/sources/button-3/style.css
@@ -94,12 +94,30 @@ ul {
 .hover-link {
     color: var(--primary-text-color);
     transition: 0.2s ease-out;
+    font-size: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+}
+
+.selected{
+    border: 2.3px solid #4D006B;
+    color: #4D006B;
+    height: 38px;
+    width: 88px;
+    border-radius: 8.5px;
 }
 
+
 .hover-link:hover {
     color: var(--accent-color);
 }
 
+.selected:hover{
+    color: #4D006B;
+}
+
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;
@@ -141,7 +159,7 @@ ul {
 }
 
 .nav-links {
-    flex-basis: 730px;
+    flex-basis: 740px;
 }
 
 .nav-menu{

diff --git a/Pages/Videos/sources/button-4/index.html b/Pages/Videos/sources/button-4/index.html
@@ -19,15 +19,27 @@
               <img src="./assets/asset 41.png" alt="company logo">
           </a>
           <div class="nav-links" id="nav-links">
-              <ul class="nav-menu">
-                  <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">Quizes</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>
-          </div>
+            <ul class="nav-menu">
+                <li><a href="../../../About-Us/index.html" class="hover-link">
+                  <i class="fa-solid fa-building-columns" style="font-size:10px;"></i>About Us</a></li>
+
+                <li><a href="../../../Simulation/index.html" class="hover-link">
+                  <i class="fa-solid fa-plug-circle-check" style="font-size:10px;"></i>Simulations</a></li>
+
+                <li><a href="../../../3D-Visualizations/index.html" class="hover-link">
+                  <i class="fa-brands fa-unity"  style="font-size:10px;"></i>3D Visualisations</a></li>
+
+                <li><a href="../../../Quizes/index.html" class="hover-link">
+                  <i class="fa-solid fa-list-check"  style="font-size:10px;"></i>Quizes</a></li>
+
+                <li><a href="../../../Videos/index.html" class="hover-link selected">
+                  <i class="fa-solid fa-video"  style="font-size:10px;"></i>Videos</a></li>
+
+                <li><a href="../../../Doubt Engine/index.html" class="hover-link">
+                  <i class="fa-solid fa-check-double" style="font-size:10px;"></i>Doubt Engine</a></li>
+
+            </ul>
+        </div>
           <div class="hamburger">
             <span class="bar"></span>
             <span class="bar"></span>

diff --git a/Pages/Videos/sources/button-4/style.css b/Pages/Videos/sources/button-4/style.css
@@ -94,12 +94,30 @@ ul {
 .hover-link {
     color: var(--primary-text-color);
     transition: 0.2s ease-out;
+    font-size: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+}
+
+.selected{
+    border: 2.3px solid #4D006B;
+    color: #4D006B;
+    height: 38px;
+    width: 88px;
+    border-radius: 8.5px;
 }
 
+
 .hover-link:hover {
     color: var(--accent-color);
 }
 
+.selected:hover{
+    color: #4D006B;
+}
+
 .primary-button {
     background-color: var(--accent-color);
     border-radius: 6px;
@@ -141,7 +159,7 @@ ul {
 }
 
 .nav-links {
-    flex-basis: 730px;
+    flex-basis: 740px;
 }
 
 .nav-menu{