Merge branch 'main' into biswajit-sarkar-007/footer-enhanced/issue#1579

PriyaGhosal · Oct 26, 2024 · 840a605 · 840a605
2 parents a3544ae + 1be424a
commit 840a605
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 16 deletions.
diff --git a/about.css b/about.css
@@ -111,21 +111,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
@@ -141,7 +141,8 @@
         <div class="container">
             <nav>
                 <div class="logo">
-                    <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo" />
+                    <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo"
+                        style="transition: transform 0.3s ease;" />
                     <h1 id="logo">BuddyTrail</h1>
                 </div>
                 <button class="hamburger" id="hamburger">☰</button>
@@ -156,7 +157,17 @@ <h1 id="logo">BuddyTrail</h1>
             </nav>
         </div>
     </header>
+    <script>
+        const logo = document.getElementById("logo-web");
+
+        logo.addEventListener("mouseenter", () => {
+            logo.style.transform = "rotateY(20deg) scale(1.1)";
+        });
 
+        logo.addEventListener("mouseleave", () => {
+            logo.style.transform = "rotateY(0) scale(1)";
+        });
+    </script>
     <section class="about">
         <div class="container">
             <h1>About BuddyTrail</h1>
@@ -556,6 +567,7 @@ <h3>PRIYA Ghosal</h3>
 
         }
 
+
         .hover-color {
             transition: color 0.3s ease;
             /* Smooth transition for color change */
@@ -564,6 +576,43 @@ <h3>PRIYA Ghosal</h3>
         .hover-color:hover {
             color: rgb(199, 59, 159);
             /* Change 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;
+
         }
     </style>
 

diff --git a/index.html b/index.html
@@ -785,7 +785,7 @@ <h4>Fly</h4>
     </section>
     <!-- deals -->
     <section id="deals" class="deals-section">
-        <h2>Exclusive Deals and Offers</h2>
+        <h2 style="color: #000000;">Exclusive Deals and Offers</h2>
         <p>Explore our best deals on flights, hotels, and travel packages. Save big on your next adventure!</p>
 
         <div class="carousel">
@@ -2130,18 +2130,30 @@ <h1 id="h1darkbtn">Travel Discussion Forum</h1>
           }
       }
   </style>
-  <h1 style="padding-left:40%;color:#022f5e;padding-top:2px">Destination Guide</h1>
+  <h1 style="padding-left:40%;color: rgba(255, 255, 248, 0.953);padding-top:8px ; margin: 5px 0 2px;">Destination Guide</h1>
   <section id="destinations">
 
       <div class="post-container">
 
           <h3>Share Your Experiences</h3>
           <form id="postForm">
-            <p>Share your experience and guidence</p>
               <textarea id="postContent" placeholder="Write your post here..." required></textarea>
               <button type="submit">Submit</button>
           </form>
-      </div>
+      </div> 
+      <style>
+
+    .post-container {
+    background: linear-gradient(135deg, #f0cac0, #c7dcf7); /* Gradient background */
+
+    border-radius: 8px; 
+    color: white;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
+
+}
+
+
+        </style>
 
       <!-- Right image of a destination inside a container -->
       <div class="destination-image-container">
@@ -2440,7 +2452,7 @@ <h2>Thank You!</h2>
   </main>
 
   <section id="testimonials" class="testimonials-section">
-    <h2 class="testimonials-heading" >Testimonials</h2>
+    <h2 class="testimonials-heading"  style="color: rgba(255, 255, 248, 0.953)">Testimonials</h2>
 
     <div class="testimonials-container">
       <div class="header1 test">
@@ -2635,7 +2647,7 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
   <div class="fixed bottom-0 right-2 scroll-container" id="scrollContainer" style="display: none;">
     <button class="scroll-button group" id="scrollTopBtn">
       <span class="tooltip-text-scroll">
-        <div class="tooltip-icon"> <i class="fa-solid fa-arrow-up"></i></div>
+        <div class="tooltip-icon"> <i class="fa-solid fa-arrow-up" ></i></div>
       </span>
     </button>
   </div>

diff --git a/style.css b/style.css
@@ -564,7 +564,7 @@ video {
 h2 {
   text-align: center;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  color: black;
+  color:  rgba(188, 188, 177, 0.953);
 }
 .location-cards {
   display: flex;