From 299602c401df7115dbafff08fc3c389ae146973a Mon Sep 17 00:00:00 2001
From: Mohit Rana <mohitr8998@gmail.com>
Date: Sun, 10 Nov 2024 04:32:55 -0500
Subject: [PATCH] added pop up effect on the cards

---
 index.html |  6 ++++--
 script.js  |  2 --
 styles.css | 24 +++++++++++++++++++-----
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 0586c5e..0aa3818 100644
--- a/index.html
+++ b/index.html
@@ -563,11 +563,13 @@ <h3>Why is it important to sort waste?</h3>
     <section class="feedback" id="feedback">
         <h2>Your Feedback</h2>
         <form id="feedback-form" name="feedback-form">
-            <input type="text" placeholder="Your Name" required="" />
-            <textarea placeholder="Your Feedback" required=""></textarea>
+            <input type="text" placeholder="Your Name" required />
+            <textarea placeholder="Your Feedback" required></textarea>
             <button type="submit">Submit</button>
+            <div id="feedback-message" class="hidden">Your feedback has been submitted successfully!</div>
         </form>
     </section>
+    
 
 
     <section class="about-container">
diff --git a/script.js b/script.js
index c42022e..e16a450 100644
--- a/script.js
+++ b/script.js
@@ -572,5 +572,3 @@ document.addEventListener('DOMContentLoaded', () => {
         body.classList.toggle('dark-mode');
     });
     
-    
- 
diff --git a/styles.css b/styles.css
index 24d0f89..bba5575 100644
--- a/styles.css
+++ b/styles.css
@@ -335,8 +335,11 @@ h2, h3, h4 {
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 15px;
+  transition: transform 0.3s ease;
+}
+.feature-card:hover {
+  transform: scale(1.05);
 }
-
 blockquote {
   font-style: italic;
   color: #777;
@@ -427,6 +430,7 @@ blockquote {
   background-color: #1976d2;
 }
 
+
 /* About Us Section */
 .about-container {
   display: flex;
@@ -450,7 +454,9 @@ blockquote {
   flex: 1;
   padding: 15px;
 }
-
+.mission-container h3{
+  color: #333;
+}
 .mission-box {
   display: flex;
   flex-wrap: wrap;
@@ -464,8 +470,11 @@ blockquote {
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   text-align: center;
+  transition: transform 0.3s ease;
+}
+.mission-item:hover {
+  transform: scale(1.05);
 }
-
 .mission-item img {
   width: 50px;
   margin-bottom: 10px;
@@ -475,7 +484,9 @@ blockquote {
 .values-container {
   background-color: #f8f8f8;
 }
-
+.values-container h3{
+  color: #333;
+}
 .values-cards {
   display: flex;
   flex-wrap: wrap;
@@ -488,8 +499,11 @@ blockquote {
   padding: 15px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+.value-card:hover{
+  transform: scale(1.05);
 }
-
 .value-card h4 {
   margin-bottom: 10px;
 }