From f84f91cfc6bcbf344ccce1b3484694c31690179f Mon Sep 17 00:00:00 2001
From: prashant <prashant37364@gmail.com>
Date: Sat, 19 Oct 2024 01:29:07 +0530
Subject: [PATCH] i have succssfully updated the div and added the hover effect
 over it

---
 about.html | 54 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/about.html b/about.html
index aa1c64e3a..9c2cb3cc9 100644
--- a/about.html
+++ b/about.html
@@ -73,11 +73,12 @@ <h3>PRIYA Ghosal</h3>
                   </P>
               </div>
                  <div class="team-description">
-                    <p style="color: white;"> Behind BuddyTrail is a diverse team of travel enthusiasts, tech innovators, and customer experience experts.
+                    <p style="color: rgb(0, 0, 0);"> Behind BuddyTrail is a diverse team of travel enthusiasts, tech innovators, and customer experience experts.
                         United by our love for exploration and commitment to excellence, we work tirelessly to ensure your journey with
                         us is seamless, inspiring, and unforgettable.</p>
+                        <div class="align1">  
                         <a href="team.html" id="cta-button">The BuddyTrail Team</a>
-                        
+                        </div>
               </div> 
                 
               
@@ -90,12 +91,20 @@ <h3>PRIYA Ghosal</h3>
  /* Global Styles */
 
  /* CTA Button */
-
- 
+.align1{
+    width: 255px;
+    height: 50px;
+    display: flex;
+    align-self: flex-end;
+    margin-bottom: 10px;
+    justify-content: center;
+    margin-top: 55px;
+    margin-right: 220px;   
+}
 #cta-button {
-   margin-left: 300px;
-    display: inline-block;
-    padding: 10px 10px;  /* Adjust padding for button size */
+    display: flex;
+    justify-content: center;
+    padding: 5px;/* Adjust padding for button size */    
     background-color: #000;  /* Background color black */
     color: #fff;  /* Text color white */
     text-align: center;
@@ -104,9 +113,9 @@ <h3>PRIYA Ghosal</h3>
     border-radius: 5px;  /* Rounded corners */
     width: 250px;  /* Fixed width */
     height: 45px;  /* Fixed height */
-    line-height: 30px;  /* Vertically center text */
+    line-height: 35px;  /* Vertically center text */
     transition: background-color 0.3s ease, transform 0.3s ease;
-    margin-bottom: 20px;
+
 }
 
 /* Hover Effect */
@@ -116,15 +125,24 @@ <h3>PRIYA Ghosal</h3>
 }
 
  .team-description{
-  
-  border: 2px solid black;
-  border-radius: 10%;
-  background-color: #286db3;
-  font-weight: bolder;
-  position:relative;
-  left: 35%;
-  top: -300px;
-  display: inline-block;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20px;
+    background-color: #eef5f9;
+    border-radius: 10px;
+    padding: auto;
+    width: 700px;
+    height: 350px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.4s ease;
+    border: 2px solid transparent;
+ }
+ .team-description:hover{
+    background: linear-gradient(45deg, #ff66b2, #c0c0c0); /* Pink-silver gradient */
+    transform: scale(1.05);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    border-color: #007BFF;
  }
 body {
     font-family: 'Poppins', sans-serif;