From a3544ae079168d9e65e2fde1a22f99c59d7a5858 Mon Sep 17 00:00:00 2001
From: biswa <biswa@007gmail.com>
Date: Sat, 26 Oct 2024 17:16:30 +0530
Subject: [PATCH] Enhanced the footer of about page

---
 about.css  | 123 ++++++++++++++++++++++++--
 about.html | 254 ++++++++++++++++++++++++++++++-----------------------
 2 files changed, 259 insertions(+), 118 deletions(-)

diff --git a/about.css b/about.css
index 48a79c86..eb5c38f9 100644
--- a/about.css
+++ b/about.css
@@ -73,6 +73,9 @@ nav {
     line-height: 1;
 }
 
+
+
+
 .nav-links {
     list-style: none;
     display: flex;
@@ -102,7 +105,10 @@ nav {
 .nav-link.active {
     color: #4C51BF;
     font-weight: bold;
-}
+} 
+
+ 
+
 
 .btn-primary {
     margin-right: -10rem;
@@ -310,7 +316,7 @@ footer {
     font-size: 1.125rem;
 }
 
-.social-icons {
+/* .social-icons {
     display: flex;
     gap: 1rem;
     margin-top: 0.5rem;
@@ -324,24 +330,81 @@ footer {
 .social-icons a:hover {
     color: #4C51BF;
     transform: translateY(-2px);
+} */
+
+ 
+
+.social-icons {
+    display: flex;
+    gap: 15px; /* Adjust spacing between icons */
+    position: relative; /* Ensure the positioning context for the pseudo-elements */
 }
 
-.copyright {
-    text-align: center;
-    margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+.social-icons a {
+    display: inline-block;
+    transition: transform 0.3s ease, color 0.3s ease;
+    position: relative;
+    color: #000; /* Default color for the icons */
 }
 
+.social-icons a::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(0, 0, 255, 0.6); /* Blue background */
+    transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease;
+    z-index: -1; /* Send the background behind the icon */
+}
 
+.social-icons a:hover::before {
+    width: 120%; /* Slightly larger than the icon for a better effect */
+    height: 120%; /* Slightly larger than the icon */
+    top: -10%; /* Adjust position to keep it centered */
+    left: -10%; /* Adjust position to keep it centered */
+}
 
+.social-icons a:hover {
+    transform: scale(1.2);
+    color: #fff; /* Change icon color on hover */
+}
 
+.social-icons img {
+    width: 30px; /* Adjust size of the X logo */
+    height: auto; /* Maintain aspect ratio */
+    transition: transform 0.3s ease;
+}
 
+.social-icons img:hover {
+    transform: scale(1.2);
+}
 
+/* Optional: Additional hover effects for individual icons */
+.social-icons a.discord:hover::before {
+    background: linear-gradient(45deg, #7289da, #61dafb); /* Discord gradient */
+}
 
+.social-icons a.github:hover::before {
+    background: linear-gradient(45deg, #333, #fff); /* GitHub gradient */
+}
 
+.social-icons a.linkedin:hover::before {
+    background: linear-gradient(45deg, #0077b5, #fff); /* LinkedIn gradient */
+}
 
+.social-icons a.twitter:hover::before {
+    background: linear-gradient(45deg, #1da1f2, #fff); /* Twitter gradient */
+}
 
+.copyright {
+    text-align: center;
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
 
 footer {
     width: 100%;
@@ -470,6 +533,10 @@ form button .fas {
     background: #fff;
     margin-right: 15px;
     cursor: pointer;
+
+    & :hover{
+         background-color: #61dafb;
+    }
 }
 
 hr {
@@ -511,6 +578,48 @@ hr {
     animation: moving 2s linear infinite;
 }
 
+ 
+
+.footer-links {
+    list-style: none; /* Remove bullet points */
+    padding: 0; /* Remove default padding */
+}
+
+.footer-links li {
+   
+    margin-right: 20px; /* Space between links */
+}
+
+.footer-links a {
+    text-decoration: none; /* Remove default underline */
+    color: whitesmoke;  
+    position: relative;  
+    transition: color 0.3s ease;  
+}
+
+.footer-links a::after {
+    content: '';  
+    position: absolute;  
+    left: 0;  
+    bottom: -5px;  
+    width: 100%;  
+    height: 2px;  
+    background: blue;  
+    transform: scaleX(0);  
+    transition: transform 0.3s ease;  
+}
+
+.footer-links a:hover::after {
+    transform: scaleX(1); /* Scale to full width on hover */
+}
+
+.footer-links a:hover {
+    color: blue; /* Change text color on hover */
+}
+
+
+ 
+
 @keyframes moving {
 
     0% {
diff --git a/about.html b/about.html
index cd67eb4b..06c34200 100644
--- a/about.html
+++ b/about.html
@@ -8,115 +8,134 @@
     <link rel="stylesheet" href="about.css" />
     <link rel="icon" href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000">
 
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
-  </head>
-  <body>
-      <!-- Preloader -->
-      <div id="preloader">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+</head>
+
+<body>
+    <!-- Preloader -->
+    <div id="preloader">
         <div class="loader-wrapper">
-          <img src="img/logo.png" alt="Travel Website Logo" id="logo">
-          <div class="loader-globe"></div>
+            <img src="img/logo.png" alt="Travel Website Logo" id="logo">
+            <div class="loader-globe"></div>
         </div>
         <div id="loading-text">Ready to Explore the World...</div>
-      </div>
-      <style>
-      /* Preloader Container */
-      #preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: rgba(0, 0, 0, 0.9);
-    z-index: 1000;
-  }
-  
-  /* Wrapper for the logo and loader */
-  .loader-wrapper {
-    position: relative;
-    width: 180px;
-    height: 180px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  /* Logo Styling */
-  #logo {
-    width: 140px;
-    position: relative;
-    z-index: 10; /* Ensures logo stays above the loader */
-    animation: pulse 2s infinite ease-in-out;
-  }
-  
-  /* Circular Loader surrounding the logo */
-  .loader-globe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 8px solid transparent;
-    border-left-color: white;
-    border-right-color: white;
-    animation: spin 2s linear infinite;
-  }
-  
-  /* Loading Text */
-  #loading-text {
-    margin-top: 20px;
-    font-size: 20px;
-    color: white;
-    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
-    letter-spacing: 1px;
-    animation: textGlow 2s ease-in-out infinite;
-  }
-  
-  /* Keyframes Animations */
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  @keyframes textGlow {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-  
-  @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-    100% { transform: scale(1); }
-  }
-      </style>
-      <script>
+    </div>
+    <style>
+        /* Preloader Container */
+        #preloader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            background-color: rgba(0, 0, 0, 0.9);
+            z-index: 1000;
+        }
+
+        /* Wrapper for the logo and loader */
+        .loader-wrapper {
+            position: relative;
+            width: 180px;
+            height: 180px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        /* Logo Styling */
+        #logo {
+            width: 140px;
+            position: relative;
+            z-index: 10;
+            /* Ensures logo stays above the loader */
+            animation: pulse 2s infinite ease-in-out;
+        }
+
+        /* Circular Loader surrounding the logo */
+        .loader-globe {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 8px solid transparent;
+            border-left-color: white;
+            border-right-color: white;
+            animation: spin 2s linear infinite;
+        }
+
+        /* Loading Text */
+        #loading-text {
+            margin-top: 20px;
+            font-size: 20px;
+            color: white;
+            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
+            letter-spacing: 1px;
+            animation: textGlow 2s ease-in-out infinite;
+        }
+
+        /* Keyframes Animations */
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes textGlow {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.5;
+            }
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.05);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+    </style>
+    <script>
         // Function to hide preloader and show content once the page has fully loaded
-    window.addEventListener('load', function() {
-        const preloader = document.getElementById('preloader');
-        const content = document.getElementById('content');
-    
-        // Set a small timeout for better user experience
-        setTimeout(function() {
-            // Hide preloader
-            preloader.style.opacity = '0';
-            preloader.style.transition = 'opacity 1s ease-in-out';
-    
-            // Show content after preloader fades out
-            setTimeout(function() {
-                preloader.style.display = 'none';
-                content.style.display = 'block';
-                content.classList.add('show');  // Trigger fade-in transition
-            }, 1000); // Match the transition duration
-        }, 2000);  // Adjust to the length of your spinner animation
-    });
-    
-      </script>
+        window.addEventListener('load', function () {
+            const preloader = document.getElementById('preloader');
+            const content = document.getElementById('content');
+
+            // Set a small timeout for better user experience
+            setTimeout(function () {
+                // Hide preloader
+                preloader.style.opacity = '0';
+                preloader.style.transition = 'opacity 1s ease-in-out';
+
+                // Show content after preloader fades out
+                setTimeout(function () {
+                    preloader.style.display = 'none';
+                    content.style.display = 'block';
+                    content.classList.add('show');  // Trigger fade-in transition
+                }, 1000); // Match the transition duration
+            }, 2000);  // Adjust to the length of your spinner animation
+        });
+
+    </script>
 
     <header>
         <div class="container">
@@ -536,6 +555,16 @@ <h3>PRIYA Ghosal</h3>
             /* Change text color on hover */
 
         }
+
+        .hover-color {
+            transition: color 0.3s ease;
+            /* Smooth transition for color change */
+        }
+
+        .hover-color:hover {
+            color: rgb(199, 59, 159);
+            /* Change color on hover */
+        }
     </style>
 
     <div class="footer-responsive">
@@ -547,7 +576,9 @@ <h3>PRIYA Ghosal</h3>
                         <img src="img/logo.png" alt="BuddyTrail Logo" />
                         <h1 id="logo">BuddyTrail</h1>
                     </div>
-                    <p>Welcome to BuddyTrail - your premier travel companion! Whether you're planning a family vacation
+                    <p class="hover-color">Welcome to BuddyTrail - your premier travel companion! Whether you're
+                        planning a
+                        family vacation
                         or a
                         getaway with friends, BuddyTrail is here to help you discover and explore incredible
                         destinations.
@@ -569,7 +600,7 @@ <h4>+123 456 7890</h4>
                 <div class="col">
                     <h3>Links <div class="underline"><span></span></div>
                     </h3>
-                    <ul>
+                    <ul class="footer-links">
                         <li><a href="https://buddytrail.netlify.app/#home">Home</a></li>
                         <li><a href="https://buddytrail.netlify.app/#services">Services</a></li>
                         <li><a href="https://buddytrail.netlify.app/about">About Us</a></li>
@@ -594,11 +625,12 @@ <h3>Follow Us <div class="underline"><span></span></div>
                             <a href="https://discord.com/invite/priyaghosal" target="_blank" rel="noopener noreferrer">
                                 <i class="fab fa-discord"></i>
                             </a>
-                            <a href="https://x.com/i/flow/login?redirect_after_login=%2FPriyaGhosa39968" target="_blank" rel="noopener noreferrer">
-                                <img src="img/x-logo.png" alt="X logo"  class="fab">
+                            <a href="https://x.com/i/flow/login?redirect_after_login=%2FPriyaGhosa39968" target="_blank"
+                                rel="noopener noreferrer">
+                                <img src="img/x-logo.png" alt="X logo" class="fab">
                             </a>
-                            
-                            
+
+
                             <a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"
                                 rel="noopener noreferrer">
                                 <i class="fab fa-github"></i>