navbar misalignment

thecodingvivek · Dec 24, 2024 · e25fdf7 · e25fdf7
1 parent 21ce7f3
commit e25fdf7
Show file tree

Hide file tree

Showing 11 changed files with 598 additions and 347 deletions.
diff --git a/Culture/Culture.html b/Culture/Culture.html
@@ -9,21 +9,19 @@
         <link rel="stylesheet" href="stylec.css">
         <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
-        <style>
-  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@600&display=swap');
-</style>
-
+        <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">   
 </head>
 <body>
 	<!--navbar-->
-        <header class ="header">
-            <nav class="navbar">
-                <span><a href="#home" style="display:flex; align-items: center;"><img class="img2" src="logo_smaller.png" width="50"
-                    style="color: #000;" ><h1 class="logo">&nbsp;Off The Beaten பாதை</h1></a></span>
-                    <a href="../../index.html" style="font-family: Poppins;">Home </a>
-            </nav>
-        </header>
+        <nav class="navbar">
+            <div class="logo_cont">
+                <a href="#home" style="display:flex; align-items: center;">
+                    <img class="img2" src="./logo_smaller.png" width="50" style=" color: #000;">
+                    <h1 class="logo">&nbsp;off the beaten பாதை</h1>
+                </a>
+            </div>
+            <a href="../../index.html" style="font-family: Poppins;font-weight:bold">Home </a>
+        </nav>
         <!--navbar-->
 
         <!-- About -->

diff --git a/Culture/stylec.css b/Culture/stylec.css
@@ -1,5 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Montserrat:wght@400;800&family=Parisienne&family=Roboto&family=Teko:wght@300&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@300&display=swap');
+
+/* removed padding and margin */
+body{
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
 
-  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@600&display=swap');
 
 .header {
   background-color: whitesmoke;
@@ -14,16 +26,47 @@
   height: 75px; 
 }
 
+/* changed navbar css */
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: saturate(180%) blur(10px);
+  display: flex;
+  width: calc(100% - 40px);
+  padding: 0 20px;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+  color: whitesmoke;
+}
+
+
 .logo {
-  font-family: 'Poppins', 'TeX Gyre Schola', serif;
-  font-size: 1.8rem;
-  color:black;
-  text-transform: lowercase;
+  font-family: 'poppins',sans-serif;
+  font-size: 1.5rem;
   letter-spacing: 0.4rem;
-  padding: 0;
-  margin: 0;
+  /* padding: 0 1.2rem; */
+  font-weight: 100;
+  color: rgb(254, 252, 252); 
+}
+
+@media only screen and (max-width: 1245px) {
+  .logo {
+      font-size: 16px;
+  }
 }
 
+.logo_cont{
+  width: fit-content;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+
+
 .navbar a {
   margin-left: 10px;
   color: black;

diff --git a/Food/Food/Food.html b/Food/Food/Food.html
@@ -13,22 +13,15 @@
   </head>
   <body>
     <!--navbar-->
-    <header class="header">
-      <nav class="navbar">
-        <span
-          ><a href="Food.html" style="display: flex; align-items: center"
-            ><img
-              class="img2"
-              src="logo_smaller.png"
-              width="40"
-              style="margin: -25px -10px -25px -20px; color: #000"
-            />
-            <h1 class="logo">&nbsp;Off The Beaten பாதை</h1></a
-          ></span
-        >
-        <a href="../../index.html">Home </a>
-      </nav>
-    </header>
+    <nav class="navbar">
+      <div class="logo_cont">
+          <a href="#home" style="display:flex; align-items: center;">
+              <img class="img2" src="./logo_smaller.png" width="50" style=" color: #000;">
+              <h1 class="logo">&nbsp;off the beaten பாதை</h1>
+          </a>
+      </div>
+      <a href="../../index.html" style="font-family: Poppins;font-weight:bold">Home </a>
+    </nav>
     <!--navbar-->
 
     <!-- About -->

diff --git a/Food/Food/style.css b/Food/Food/style.css
@@ -1,6 +1,11 @@
 /* Global Styles */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@300&display=swap');
+
 body {
   background-color: black;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
 }
 
 div {
@@ -12,32 +17,54 @@ div {
   margin: auto 30px;
 }
 
-/* Header */
-.header {
-  background-color: #333333;
-  padding: 10px 20px;
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: darkblue;
+  height: 75px; 
 }
 
+/* changed navbar css */
 .navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: saturate(180%) blur(10px);
   display: flex;
-  margin: 10px;
+  width: calc(100% - 40px);
+  padding: 0 20px;
   justify-content: space-between;
   align-items: center;
-  color: #ffffff;
-  height: 75px;
-  font-size: 1.5rem;
-  font-weight: bolder;
+  z-index: 10;
+  color: whitesmoke;
 }
 
+
 .logo {
-  font-family: "New Century Schoolbook", "TeX Gyre Schola", serif;
-  font-size: 1.8rem;
-  text-transform: uppercase;
+  font-family: 'poppins',sans-serif;
+  font-size: 1.5rem;
   letter-spacing: 0.4rem;
-  padding: 0;
-  margin: 0;
+  /* padding: 0 1.2rem; */
+  font-weight: 100;
+  color: rgb(254, 252, 252); 
+}
+
+@media only screen and (max-width: 1245px) {
+  .logo {
+      font-size: 16px;
+  }
+}
+
+.logo_cont{
+  width: fit-content;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
+
 .navbar a {
   margin-left: 10px;
   color: #ffffff;

diff --git a/History/History.html b/History/History.html
@@ -13,15 +13,15 @@
     </head>
     <body>
         <!--navbar-->
-        <header class ="header">
-            <nav class="navbar">
-                <span><a href="#home" style="display:flex; align-items: center;"><img class="img2" src="logo_smaller.png" width="40"
-                    style="margin: -25px -10px -25px -20px ; color: #000;" ><h1 class="logo">&nbsp;Off The Beaten பாதை</h1></a></span>
-            <a href="../../index.html">Home </a>
-
-
-            </nav>
-        </header>
+        <nav class="navbar">
+            <div class="logo_cont">
+                <a href="#home" style="display:flex; align-items: center;">
+                    <img class="img2" src="./logo_smaller.png" width="50" style=" color: #000;">
+                    <h1 class="logo">&nbsp;off the beaten பாதை</h1>
+                </a>
+            </div>
+            <a href="../../index.html" style="font-family: Poppins;font-weight:bold">Home </a>
+        </nav>
         <!--navbar-->
 
         <!-- About -->

diff --git a/History/style.css b/History/style.css
@@ -1,32 +1,69 @@
-.header {
-  background-color: #333333;
-  padding: 10px 20px;
-}
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@300&display=swap');
+
+
 html {
   max-width: 100%;
   overflow-x: hidden;
 }
 
+/* removed padding and margin */
+body{
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+
 .navbar {
   display: flex;
   justify-content: space-between;
-  font-size: 1.5rem;
-  font-weight: bolder;
   align-items: center;
-  margin: 10px;
-  color: #ffffff;
-  height: 75px; /* Adjust the height as desired */
+  color: darkblue;
+  height: 75px; 
 }
 
+/* changed navbar css */
+.navbar {
+
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: saturate(180%) blur(10px);
+  display: flex;
+  width: calc(100% - 40px);
+  padding: 0 20px;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+  color: whitesmoke;
+}
+
+
 .logo {
-  font-family: 'New Century Schoolbook', 'TeX Gyre Schola', serif;
-  font-size: 1.8rem;
-  text-transform: uppercase;
+  font-family: 'poppins',sans-serif;
+  font-size: 1.5rem;
   letter-spacing: 0.4rem;
-  padding: 0;
-  margin: 0;
+  /* padding: 0 1.2rem; */
+  font-weight: 100;
+  color: rgb(254, 252, 252); 
 }
 
+@media only screen and (max-width: 1245px) {
+  .logo {
+      font-size: 16px;
+  }
+}
+
+.logo_cont{
+  width: fit-content;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+
 .navbar a {
   margin-left: 10px;
   color: #ffffff;

diff --git a/Spiritual/Spiritual.html b/Spiritual/Spiritual.html
@@ -17,13 +17,15 @@
 </head>
 <body>
 	<!--navbar-->
-        <header class ="header">
-            <nav class="navbar">
-                <span><a href="#home" style="display:flex; align-items: center;"><img class="img2" src="logo_smaller.png" width="50"
-                    style="color: #000;" ><h1 class="logo">&nbsp;Off The Beaten பாதை</h1></a></span>
-                    <a href="../../index.html" style="font-family: Poppins;">Home </a>
-            </nav>
-        </header>
+        <nav class="navbar">
+            <div class="logo_cont">
+                <a href="#home" style="display:flex; align-items: center;">
+                    <img class="img2" src="./logo_smaller.png" width="50" style=" color: #000;">
+                    <h1 class="logo">&nbsp;off the beaten பாதை</h1>
+                </a>
+            </div>
+            <a href="../../index.html" style="font-family: Poppins;font-weight:bold">Home </a>
+        </nav>
         <!--navbar-->
 
         <!-- About -->