Merge branch 'main' into SmoothScrolling

GarimaSingh0109 · Oct 18, 2024 · 2653e8c · 2653e8c
2 parents 55bd342 + 668c1a9
commit 2653e8c
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,10 @@
     <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
   </head>
   <body>
+</head>
+
+<body>
+<!-- Progress Bar -->
     <div id="progress-container">
       <div id="progress-bar"></div>
     </div>
@@ -31,6 +35,33 @@
           <div class="checkbox-con">
             <input id="checkbox" type="checkbox" />
           </div>
+        <a href="index.html"><h1>Waste Management</h1></a>
+        <nav>
+
+            <div class="btn-nav">
+
+                <button class="button"> <a href="#upload">Upload</a></button>
+                <button class="button"><a href="#features">Features</a></button>
+
+                <button class="button"><a href="#feedback">Feedback</a></button>
+
+                <button class="button"><a href="#about">About Me</a></button>
+
+                <button class="button"><a href="register.html">Sign up</a></button>
+
+                <button class="button"><a href="#footer">Contact</a></button>
+
+                <!-- <div class="checkbox-con">
+                    <input id="checkbox" type="checkbox">
+                </div> -->
+
+            </div>
+
+
+        </nav>
+        <div class="nav-controls">
+            <button id="theme-toggle" aria-label="Toggle dark mode">🌓</button>
+            <button id="menu-toggle" aria-label="Toggle menu">☰</button>
         </div>
       </nav>
       <div class="nav-controls">

diff --git a/styles.css b/styles.css
@@ -989,3 +989,52 @@ body {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
 }
+
+.btn-nav .button {
+  background: linear-gradient(135deg, #98c6a7, #629584);
+  border: none;
+  border-radius: 8px;
+  padding: 12px 25px;
+  margin: 5px;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn-nav .button a {
+  color: white;
+  text-decoration: none;
+}
+
+.btn-nav .button:hover {
+  background: linear-gradient(135deg, #0056b3, #003f7f);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.btn-nav .button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.btn-nav .button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.5);
+}
+
+.btn-nav .checkbox-con {
+  display: flex;
+  align-items: center;
+}
+
+.btn-nav #checkbox {
+  margin-left: 10px;
+  transform: scale(1.5);
+  transition: transform 0.2s ease;
+}
+
+.btn-nav #checkbox:hover {
+  transform: scale(1.7);
+}