Spaces:

mithunparambath
/

nanomatter.tech

Running

App Files Files Community

mithunparambath commited on Oct 27

Commit

3f579ef

verified ·

1 Parent(s): 293b636

please add navigation bar on the top of website

Browse files

Files changed (3) hide show

components/navbar.js +50 -9
index.html +2 -3
products.html +2 -4

components/navbar.js CHANGED Viewed

@@ -4,31 +4,72 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background: rgba(255,255,255,0.95);
           backdrop-filter: blur(10px);
-          border-bottom: 1px solid #e5e7eb;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 1000;
-          transition: all 0.3s ease;
         }
         .nav-container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 1rem;
         }
-        .nav-content {
           display: none;
         }
-</style>
       <nav>
         <div class="nav-container">
-          <div class="nav-content">
-<button class="mobile-menu-btn">
-              <i data-feather="menu"></i>
-            </button>
           </div>
         </div>
       </nav>

     this.shadowRoot.innerHTML = `
       <style>
         nav {
+          background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(255, 102, 0, 0.1);
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 1000;
+          padding: 1rem 0;
         }
         .nav-container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #ff6600;
+          text-decoration: none;
         }
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+        }
+        .nav-links a {
+          color: #374151;
+          text-decoration: none;
+          font-weight: 500;
+          transition: all 0.3s ease;
+        }
+        .nav-links a:hover {
+          color: #ff6600;
+        }
+        .mobile-menu-btn {
           display: none;
+          background: none;
+          border: none;
+          cursor: pointer;
+          color: #374151;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+          }
         }
+      </style>
       <nav>
         <div class="nav-container">
+          <a href="index.html" class="logo">NanoMatter</a>
+          <div class="nav-links">
+            <a href="index.html">Home</a>
+            <a href="products.html">Products</a>
+            <a href="index.html#about">About</a>
+            <a href="index.html#technologies">Technologies</a>
+            <a href="index.html#service">Services</a>
+            <a href="index.html#partnerships">Partnerships</a>
+            <a href="index.html#contact">Contact</a>
           </div>
         </div>
       </nav>

index.html CHANGED Viewed

@@ -30,7 +30,7 @@
 </head>
 <body class="bg-white text-gray-800 font-poppins">
 <custom-navbar></custom-navbar>
-    <!-- Hero Section -->
     <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden grid-pattern">
         <div class="atom-animation" id="atomCanvas"></div>
         <div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
@@ -349,11 +349,10 @@
             </div>
         </div>
     </section>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-    <script src="script.js"></script>
     <script>
         // Initialize feather icons
         feather.replace();

 </head>
 <body class="bg-white text-gray-800 font-poppins">
 <custom-navbar></custom-navbar>
+<!-- Hero Section -->
     <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden grid-pattern">
         <div class="atom-animation" id="atomCanvas"></div>
         <div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
             </div>
         </div>
     </section>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+<script src="script.js"></script>
     <script>
         // Initialize feather icons
         feather.replace();

products.html CHANGED Viewed

@@ -20,8 +20,7 @@
 </head>
 <body class="bg-white text-gray-800 font-poppins">
     <custom-navbar></custom-navbar>
-    <!-- Products Header -->
     <section class="py-20 bg-gradient-to-br from-orange-50 to-white">
         <div class="max-w-6xl mx-auto px-4 text-center">
             <h1 class="text-5xl md:text-6xl font-bold mb-6 text-gray-900">
@@ -247,11 +246,10 @@
                     </a>
             </div>
     </section>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
-    <script src="script.js"></script>
     <script>
         feather.replace();
     </script>

 </head>
 <body class="bg-white text-gray-800 font-poppins">
     <custom-navbar></custom-navbar>
+<!-- Products Header -->
     <section class="py-20 bg-gradient-to-br from-orange-50 to-white">
         <div class="max-w-6xl mx-auto px-4 text-center">
             <h1 class="text-5xl md:text-6xl font-bold mb-6 text-gray-900">
                     </a>
             </div>
     </section>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+<script src="script.js"></script>
     <script>
         feather.replace();
     </script>