From e3be5e0f0b74b877ed9391b4ec507dab8a8562d3 Mon Sep 17 00:00:00 2001
From: Rohan-2601 <rjha09307@gmail.com>
Date: Mon, 21 Oct 2024 10:22:48 +0530
Subject: [PATCH] Updated index.html and styles.css

---
 index.html | 26 ++--------------
 styles.css | 89 +++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 78 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index 91dcd7d..c4fa12c 100644
--- a/index.html
+++ b/index.html
@@ -70,25 +70,7 @@
           <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>
 
@@ -99,10 +81,7 @@
             <button id="menu-toggle" aria-label="Toggle menu">☰</button>
         </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>
+      
     </header>
     <section class="hero">
       <div class="hero-content">
@@ -172,6 +151,7 @@ <h2>Discover Our Features</h2>
             <div class="features-container"></div>
           </section>
           <section class="features" id="features">
+            
             <div class="feature-card" id="eco-friendly">
               <div class="icon"></div>
               <h3>Eco-Friendly Tips</h3>
diff --git a/styles.css b/styles.css
index 7fddd89..b790bfd 100644
--- a/styles.css
+++ b/styles.css
@@ -17,6 +17,12 @@ a {
   text-decoration: none;
   color: inherit;
 }
+.btn-nav{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+}
 
 /* Progress Bar */
 #progress-container {
@@ -36,25 +42,70 @@ a {
   transition: width 0.09s ease-in-out;
   border-radius: 10px;
 }
+.form_style {
+  border-radius: 15px;
+  padding: 5px;
+  background-color:#99e4ab ;
+
 
-/* Header and Navigation */
-header {
-  background-color: #00796b;
-  color: white;
-  padding: 15px;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
+                        
 
+/* Styling the header and centering the h1 */
 header h1 {
-  font-size: 1.5rem;
-  margin: 0;
+  font-size: 36px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20px; /* Adds some space between h1 and buttons */
+  color: #333;
+  padding: 10px;
+  background-color: #99e4ab;
+  border-radius: 8px;
+  
 }
 
+/* Centering the buttons and adding spacing */
+.btn-nav {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap; /* Allows wrapping if screen is too narrow */
+  gap: 20px; /* Adds equal space between buttons */
+  margin-top: 20px;
+}
+
+/* Button styling */
+.button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  text-align: center;
+}
+
+/* Hover effect for buttons */
+.button:hover {
+  background-color: #45a049;
+  transform: scale(1.05);
+}
+
+/* Media query to adjust the layout on smaller screens */
+@media (max-width: 768px) {
+  .btn-nav {
+    flex-direction: column; /* Stack buttons vertically on small screens */
+    gap: 10px;
+  }
+}
+header{
+  background-color: #99e4ab;
+
+}
+
+
+
 nav ul {
   list-style-type: none;
   display: flex;
@@ -307,6 +358,12 @@ nav ul li a:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   text-align: left;
+  object-fit: cover;
+  
+}
+.mission-item img{
+  width: 300px;
+  height: 300px;
 }
 
 /* Hover Effect for Mission Items */
@@ -328,6 +385,8 @@ nav ul li a:hover {
   line-height: 1.6;
 }
 
+
+
 /* Responsive */
 @media (max-width: 768px) {
   .mission-box {
@@ -515,14 +574,16 @@ nav ul li a:hover {
 /* General styling for the section */
 .features {
   padding: 60px 20px;
-  background-color: #f9f9f9;
+  
   text-align: center;
+ 
 }
 
 .features h2 {
   font-size: 36px;
   margin-bottom: 40px;
   color: #333;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 /* Container for feature cards */