From e86ff61066ceb0682f8f1c07429862fbd9abb919 Mon Sep 17 00:00:00 2001 From: biswa Date: Sat, 26 Oct 2024 16:07:19 +0530 Subject: [PATCH] About page Navbar enhanced --- about.css | 76 ++++++++++++-- about.html | 288 +++++++++++++++++++++++++++++++++-------------------- index.html | 2 +- 3 files changed, 247 insertions(+), 119 deletions(-) diff --git a/about.css b/about.css index 48a79c86..3e855f56 100644 --- a/about.css +++ b/about.css @@ -105,21 +105,81 @@ nav { } .btn-primary { - margin-right: -10rem; display: inline-block; - padding: 0.625rem 1.25rem; - background-color: #4C51BF; - color: white; - text-decoration: none; + background: linear-gradient(90deg, #007BFF, #00BFFF); + color: #fff; + padding: 10px 20px; + border: 2px solid transparent; border-radius: 5px; - transition: background-color 0.3s ease, transform 0.2s ease; + font-size: 16px; + font-weight: bold; + text-decoration: none; + text-align: center; + transition: background 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; + box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); + position: relative; } .btn-primary:hover { - background-color: #667EEA; - transform: translateY(-2px); + background: linear-gradient(90deg, #00BFFF, #007BFF); + transform: scale(1.05) translateY(-2px); + box-shadow: 0 6px 12px rgba(0, 86, 179, 0.3); + border-color: #fff; +} + +.btn-primary:active { + transform: scale(1) translateY(0); + box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); +} + +.btn-primary::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.2); + top: 0; + left: 0; + opacity: 0; + transition: opacity 0.5s ease; +} + +.btn-primary:hover::after { + opacity: 1; } +.btn-primary::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 5px; + border: 2px solid transparent; + z-index: -1; + transition: border-color 0.3s ease; +} + +.btn-primary:hover::before { + border-color: #fff; + animation: borderExpand 0.4s forwards; +} + +@keyframes borderExpand { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + + + .main-content { flex-grow: 1; display: flex; diff --git a/about.html b/about.html index cd67eb4b..4460c463 100644 --- a/about.html +++ b/about.html @@ -8,121 +8,141 @@ - - - - -
+ + + + + +
- -
+ +
Ready to Explore the World...
-
- - + 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 + }); + +
+

About BuddyTrail

@@ -536,6 +566,43 @@

PRIYA Ghosal

/* Change text color on hover */ } + + /* Navbar style */ + + .nav-link { + position: relative; + text-decoration: none; + color: whitesmoke; + /* Adjust the color as needed */ + padding: 0 5px; + transition: color 0.3s ease; + } + + .nav-link::after { + content: ""; + position: absolute; + left: 0; + bottom: -3px; + /* Adjust based on padding */ + width: 100%; + height: 2px; + /* Thickness of the underline */ + background-color: #007BFF; + /* Adjust underline color */ + transform: scaleX(0); + transform-origin: bottom right; + transition: transform 0.3s ease; + } + + .nav-link:hover { + color: #007BFF; + /* Change text color on hover, if desired */ + } + + .nav-link:hover::after { + transform: scaleX(1); + transform-origin: bottom left; + }
@@ -594,11 +661,12 @@

Follow Us
- - X logo + + X logo - - + + diff --git a/index.html b/index.html index c2988da6..7a5a45af 100644 --- a/index.html +++ b/index.html @@ -2615,7 +2615,7 @@

Rate your experience