Merge pull request #4624 from HarshitGupta1511/main

Added responsive NavBar in the Homepage. issue #3577

assets/css/navbar.css

@@ -93,4 +93,63 @@
         text-decoration: none;
         display: flex;
     }
-}
+}
+
+
+.navbarr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background: linear-gradient(rgb(236, 145, 145),rgb(189, 239, 189),rgb(161, 161, 209),rgb(220, 220, 159));
+}
+
+.logox {
+  font-size: 1.5rem;
+  font-weight: bolder;
+  color: rgb(17, 4, 4); 
+}
+
+.nav-linkss {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+.nav-linkss li {
+  margin-right: 4rem;
+}
+
+
+.nav-linkss a {
+  text-decoration: none;
+  color: #333;  
+}
+
+.nav-linkss a:hover{
+  color: aqua;
+  text-decoration: underline;
+}
+
+
+
+/* Media Queries for responsiveness */
+
+@media screen and (max-width: 768px) {
+  .navbar {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    margin-top: 1rem;
+  }
+
+  .nav-links li {
+    margin-right: 0;
+    margin-bottom: 1rem;
+  }
+}

index.html

@@ -92,6 +92,18 @@
 }
   </style>
 </head>
+
+
+<!-- NavBar -->
+
+<nav class="navbarr">
+  <a href="#" class="logox">GAMΕΖΟΝΕ🕹️</a>  <ul class="nav-linkss">
+    <li><a href="#">Home</a></li>
+    <li><a href="#about">About Us</a></li>
+    <li><a href="#">Contributors</a></li></ul>
+</nav>
+
+
 <!-- Light-Dark theme SWITCH -->
 
 <label id="themeToggleWrapper"  class="theme-toggle" for="themeToggle" style="position: fixed; top: 30px; right: 30px; z-index: 100; display: flex; align-items: center; border: none; background-color: transparent;">