Merge pull request #1588 from biswajit-sarkar-007/biswajit-sarkar-007…

…/footer-enhanced/issue#1579 Enhanced the footer of about page
PriyaGhosal · Oct 28, 2024 · e5d6ed9 · e5d6ed9
2 parents a24ea01 + 840a605
commit e5d6ed9
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 9 deletions.
diff --git 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 {
     display: inline-block;
@@ -370,7 +376,7 @@ footer {
     font-size: 1.125rem;
 }
 
-.social-icons {
+/* .social-icons {
     display: flex;
     gap: 1rem;
     margin-top: 0.5rem;
@@ -384,24 +390,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%;
@@ -530,6 +593,10 @@ form button .fas {
     background: #fff;
     margin-right: 15px;
     cursor: pointer;
+
+    & :hover{
+         background-color: #61dafb;
+    }
 }
 
 hr {
@@ -571,6 +638,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
@@ -567,6 +567,16 @@ <h3>PRIYA Ghosal</h3>
 
         }
 
+
+        .hover-color {
+            transition: color 0.3s ease;
+            /* Smooth transition for color change */
+        }
+
+        .hover-color:hover {
+            color: rgb(199, 59, 159);
+            /* Change color on hover */
+=======
         /* Navbar style */
 
         .nav-link {
@@ -602,6 +612,7 @@ <h3>PRIYA Ghosal</h3>
         .nav-link:hover::after {
             transform: scaleX(1);
             transform-origin: bottom left;
+
         }
     </style>
 
@@ -614,7 +625,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.
@@ -636,7 +649,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>