Merge pull request #600 from Shobhit1729Aryan/main

corrected the nav bar also in dark mode

assets/css/darkmode.css

@@ -374,6 +374,7 @@ body.nav-active {
   z-index: 2;
   transition: 0.25s var(--cubic-in);
   visibility: hidden;
+  gap: 2rem;
 }
 
 .navbar.active {
@@ -396,12 +397,14 @@ body.nav-active {
 
 .navbar-item:not(:last-child) {
   border-block-end: 1px solid var(--black_10);
+
 }
 
 .navbar-link {
   padding-block: 8px;
   transition: var(--transition);
   color: var(--light-gray);
+
 }
 
 .navbar-link:is(:hover, :focus-visible) {
@@ -1246,11 +1249,12 @@ body.nav-active {
   .navbar.active {
     all: unset;
     display: block;
+    margin-left: -23px;
   }
 
   .navbar-list {
     display: flex;
-    gap: 8px;
+    gap: rem;
   }
 
   .navbar-item:not(:last-child) {
@@ -1548,6 +1552,7 @@ button:hover {
   background: var(--black);
   border-radius: 50px;
   position: relative;
+
 }
 
 .searchButton {
@@ -1584,6 +1589,8 @@ button:hover {
 }
 .searchInput::placeholder {
   color: var(--light-coral);
+
+
 }
 .searchInput {
   border: none;
@@ -1592,6 +1599,7 @@ button:hover {
   color: var(--light-coral);
   font-size: 15px;
   padding: 8px;
+  padding-left: 13px;
 }
 
 .svgxml {

index.html

@@ -65,7 +65,7 @@
   -->
   <header class="header" data-header>
 
-    <div class="container" style="margin-left: 13rem;">
+    <div class="container" style="margin-left: 5rem;">
 
       <a href="#">
         <img src="./assets/images/Skillwise_logo-removebg-preview.png" width="50" height="10" alt="SkillWise home">
@@ -156,7 +156,8 @@
           </li>
         </ul>
       </nav>
-      <a href="../signin.html" class="btn" id = "freeTrial">Start Free Trial</a>
+
+      <a href="../signin.html" class="btn" id = "freeTrial"  >Start Free Trial</a> 
 
       <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
         <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>

style.css

@@ -180,13 +180,14 @@
 #freeTrial{
   position: absolute;
  right: 80px;
-
+margin-right: 60px;
+
 
 }
 
 #theme-toggle{
   position: absolute;
   right: 5px;
   top: 20px;
-
+  margin-right: 60px;
 }