Merge pull request #1210 from VidhanThakur09/vidhan

Improve the navbar
ANSHIKA-26 · Oct 20, 2024 · 583aee6 · 583aee6 · vercel · Oct 20, 2024
2 parents 8463d93 + d6d6544
commit 583aee6
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/blog.html b/blog.html
@@ -15,8 +15,9 @@
 
   <!--css-->
   <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> -->
-  <link rel="stylesheet" href="style.css">
+
   <link rel="stylesheet" href="Scroll_and_progressbar.css">
+  <link rel="stylesheet" href="style.css">
 
 
 </head>
@@ -28,7 +29,6 @@
 
   <div class= "progress-container">
     <div class= "progress-bar" id="progress-bar"></div>
- main
   </div>
   <div class= "layout-container" style="margin-bottom: 4rem;">
 
@@ -55,7 +55,6 @@ <h2>WordWise</h2>
 
         <a href= "contact_us.html">Contact Us</a>
         <a href= "give_feedback.html">Give Feedback</a>
-main
       </div>
 
 

diff --git a/category.html b/category.html
@@ -17,9 +17,10 @@
 
     <!--css-->
     <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> -->
-    <link rel="stylesheet" href="style.css">
+
     <link rel="stylesheet" href="category.css">
     <link rel="stylesheet" href="Scroll_and_progressbar.css">
+    <link rel="stylesheet" href="style.css">
 
     <style>
         * {

diff --git a/contact_us.html b/contact_us.html
@@ -84,7 +84,6 @@
 </head>
 
 <body>
-TranslationTool
   <div class="progress-container">
     <div class="progress-bar" id="progress-bar"></div>
   </div>

diff --git a/index.html b/index.html
@@ -226,13 +226,13 @@
 <!-- Navigation Bar  -->
 <div class="layout-container" style="margin-bottom: 4rem;">
 
-    <header>
+    <header >
 
 
 
     <div class="logo">
 
-        <h2>WordWise</h2>
+        <h2 href="index.html">WordWise</h2>
     </div>
     <div class="nav-links1">
         <a href="index.html">Home</a>
@@ -247,7 +247,7 @@ <h2>WordWise</h2>
 
 
 
-              <div class="dropdown">
+              <div class="dropdown" >
                 <!-- Profile Icon -->
                 <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
                     <i class="fas fa-user-circle"></i>
@@ -424,7 +424,7 @@ <h2>Forgot Password</h2>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <script src="backend/signup/signup.js"></script> <!-- Link to your JavaScript file -->
 
-      <div class="theme-switch-wrapper">
+      <div class="theme-switch-wrapper" >
         <label class="theme-switch" for="checkbox">
             <input type="checkbox" id="checkbox">
             <div class="slider">

diff --git a/style.css b/style.css
@@ -791,6 +791,9 @@ header {
 
 header {
 
+  position: fixed;
+  margin-top: 1rem;
+  background-color: #f8b5b5;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -801,9 +804,10 @@ header {
   width: 100%;
 }
 .logo {
+  padding-top: 2rem;
   display: flex;
-  align-items: start;
-  gap: 1.2rem;
+  align-items: flex-start;
+  gap: 1.1rem;
   color: #1C160C;
   /* margin: 0 3rem; */
 }
@@ -823,9 +827,13 @@ header {
 
 /* Parent container for nav links */
 .nav-links1 {
+  /* position: fixed;
+  top: 0; */
+  padding-top: 2rem;
   display: flex;
-  gap: 2.1rem;
-  margin: 0 0.5rem;
+  width: 80%;
+  gap: 1.1rem;
+  margin-left:1.3rem ;
   margin-top: 8px;
   position: relative;
   opacity: 0; /* Start hidden for animation */
@@ -838,7 +846,7 @@ header {
   color: #1C160C;
   text-decoration: none;
   font-size: 1rem; /* Original size */
-  font-weight: 500;
+  font-weight: 600;
   padding-bottom: 5px;
   position: relative;
   opacity: 0; /* Start hidden for animation */
@@ -861,14 +869,14 @@ header {
 
 /* Hover effect for links (updated as per admin's request) */
 .nav-links1 a:hover {
-  font-size: 1.2rem; /* Increase font size on hover */
+  font-size: 1.1rem; /* Increase font size on hover */
   font-weight: bold; /* Make text bold on hover */
   color: black; /* Change color to black on hover */
   transform: scale(1.02); /* Very subtle increase on hover */
 }
 
 .nav-links1 a:hover::after {
-  transform: scaleX(1); /* Underline expands */
+  transform: scaleX(0.5); /* Underline expands */
 }
 
 /* Animation for links on page load */
@@ -1050,7 +1058,7 @@ header {
 button {
   border: none;
   border-radius: 9999px;
-
+  
 
 
 
@@ -1168,6 +1176,7 @@ button {
 
 
 .dropdown{
+  padding-top: 2rem;
   float: left;
   color: black;
 }
@@ -2334,7 +2343,7 @@ a {
 .nav-link:hover{
  /* Change background color on hover */
         color: #f8b5b5;
-        scale: 1.1; /* Change text color on hover */
+        scale: 0.5; /* Change text color on hover */
       /* Optional: Change border color on hover */
         transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
 }
@@ -2465,6 +2474,8 @@ h1 {
 }
 
 .theme-switch-wrapper {
+  padding-top: 2rem;
+  margin-left: 10px;
   display: flex;
   align-items: center;
 }
@@ -2517,7 +2528,7 @@ input:checked + .slider {
 }
 
 input:checked + .slider:before {
-  transform: translateX(30px); 
+  transform: translateX(16px); 
 }
 
 .icon {
@@ -2535,7 +2546,7 @@ input:checked + .slider:before {
 }
 
 .moon-icon {
-  right: 5px;
+  right: 3px;
   opacity: 0;
 }
 
@@ -2918,7 +2929,7 @@ for facebook
 }
 
 .flex-wrap a:hover{
-  transform: scale(1.1);
+  transform: scale(2.1);
   padding: 2px 4px;
   border-radius: 4px;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,7 +84,6 @@ @@
     </head>
     <body>
-    TranslationTool
       <div class="progress-container">
         <div class="progress-bar" id="progress-bar"></div>
       </div>
@@ Expand Down @@