From 170fb2f2e78505cde6f3379d521400a56c127060 Mon Sep 17 00:00:00 2001
From: Lakshyaraj Singh Ranawat <lakshyaraj.singh.05@gmail.com>
Date: Mon, 21 Oct 2024 23:41:51 +0530
Subject: [PATCH] Little Changes

---
 assets/css/style.css | 29 +++++++++++++++++++++++++----
 index.html           |  7 ++++---
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index d206ccb..c641462 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -287,10 +287,10 @@ nav .nav_buttons {
 }
 
 .body .text {
-    padding-top: 900px;
+    padding-top: 800px;
     color: white;
     font-size: 18px;
-
+      
     text-align: center;
 }
 
@@ -317,7 +317,7 @@ nav .nav_buttons {
     cursor: pointer;
 
     padding: 15px 25px;
-    margin: 10px;
+    margin: 0px;
 
     border: 1px solid var(--color_1);
 
@@ -600,28 +600,49 @@ nav .nav_buttons {
 }
 
 .get_involved .Option:hover {
-    background-color: rgba(149, 165, 166, 0.1);
+    background-color: rgba(149, 165, 166, 0.94);
     transform: scale(1.02);
     color: lightgreen;
 }
 
+
+
 .get_involved #_1 {
     background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
         url("../images/Individual.webp");
     background-size: cover;
+    transition:0.4s ;
 }
 
 .get_involved #_2 {
     background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
         url("../images/Businesses.webp");
     background-size: cover;
+    transition:0.4s ;
 }
 
 .get_involved #_3 {
     background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
         url("../images/School.webp");
     background-size: cover;
+    transition:0.4s ;
 }
+.get_involved #_1:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.472), rgba(0, 0, 0, 0.529)),
+    url("../images/Individual.webp");
+background-size: cover;
+}
+.get_involved #_2:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.472), rgba(0, 0, 0, 0.529)),
+    url("../images/Businesses.webp");
+background-size: cover;
+}
+.get_involved #_3:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.472), rgba(0, 0, 0, 0.529)),
+    url("../images/School.webp");
+background-size: cover;
+}
+
 
 .Donate {
     /* height: 60vh; */
diff --git a/index.html b/index.html
index 4a65f23..60a4cd6 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
             rel="stylesheet"
         />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
+      
         <title>Tree2Hope</title>
 
         <!-- font awesome cdn -->
@@ -256,9 +257,9 @@
 
         <!--Added margin to bottom-->
         <div class="get_involved section mb-5">
-            <div class="Option" id="_1"   data-aos="fade-right" data-aos-duration="1000" data-aos-delay="100">INDIVIDUALS</div>
-            <div class="Option" id="_2"   data-aos="fade-left" data-aos-duration="1000" data-aos-delay="100">BUSINESSES</div>
-            <div class="Option" id="_3"   data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">SCHOOLS</div>
+            <div class="Option" id="_1"   data-aos="fade-right" data-aos-duration="1000" data-aos-delay="100"><h3>INDIVIDUALS</h3></div>
+            <div class="Option" id="_2"   data-aos="fade-left" data-aos-duration="1000" data-aos-delay="100"><h3>BUSINESSES</h3></div>
+            <div class="Option" id="_3"   data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"><h3>SCHOOLS</h3></div>
         </div>
         <div id="events" class="events section"  data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
             <div class="plant_with_us">