From 56a2ad631b94bd1aa5106aa029c934f062046564 Mon Sep 17 00:00:00 2001 From: Tina Date: Sun, 14 Jul 2024 14:30:01 +0530 Subject: [PATCH] Tansition in FAQ page --- faq-website.js | 66 +++++++++++++- faq.css | 228 +++++++++++++++++++++++++++++++++++++++++++++++++ faq.html | 162 ++++++++++++++++------------------- 3 files changed, 366 insertions(+), 90 deletions(-) create mode 100644 faq.css diff --git a/faq-website.js b/faq-website.js index 760971bb..dc12dac0 100644 --- a/faq-website.js +++ b/faq-website.js @@ -1,4 +1,3 @@ - const accordions = document.querySelectorAll(".accordion"); accordions.forEach((accordion, index) => { @@ -19,3 +18,68 @@ accordions.forEach((accordion, index) => { }); }); }); + +document.addEventListener("DOMContentLoaded", function () { + // Highlight active navbar + const navLinks = document.querySelectorAll(".navLinks a"); + + function highlightNavLink() { + const scrollPosition = window.scrollY; + + navLinks.forEach((link) => { + const sectionId = link.getAttribute("href").substring(1); + const section = document.getElementById(sectionId); + + // Adjust this value to control when the link should be highlighted + const offsetPercentage = 20; + + if ( + section.offsetTop - window.innerHeight * (offsetPercentage / 100) <= + scrollPosition && + section.offsetTop + section.offsetHeight > scrollPosition + ) { + link.classList.add("active"); + } else { + link.classList.remove("active"); + } + }); + } + + document.addEventListener("scroll", highlightNavLink); + window.addEventListener("resize", highlightNavLink); + + // Initialize AOS library + AOS.init(); + + // Set animation delays for FAQs + const faqs = document.querySelectorAll(".faq"); + faqs.forEach((faq, index) => { + faq.style.animationDelay = `${index * 0.2}s`; + }); +}); + +// Logout Button +document.addEventListener("DOMContentLoaded", function () { + var isLoggedIn = localStorage.getItem("isLoggedIn"); + var loginButton = document.getElementById("btn-style"); + var logoutButton = document.getElementById("logout-btn"); + + if (isLoggedIn === "true") { + loginButton.style.display = "none"; + logoutButton.style.display = "block"; + loginButton.disabled = true; + logoutButton.disabled = false; + logoutButton.style.cursor = "pointer"; + logoutButton.addEventListener("click", function () { + localStorage.setItem("isLoggedIn", "false"); + window.location.href = "./index.html"; + }); + } else { + loginButton.style.display = "block"; + logoutButton.disabled = true; + } +}); + +function sendEmail() { + window.location.href = "mailto:arpanchowdhury003@gmail.com"; +} diff --git a/faq.css b/faq.css new file mode 100644 index 00000000..efc4b90e --- /dev/null +++ b/faq.css @@ -0,0 +1,228 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); + +* { + box-sizing: border-box; + border-radius: 20px; +} + +:root { + --color-primary: #ffd54b; + --color-text: #545d7a; + --color-white: #fff; + --color-title: #242e4c; + --color-background: #f7f8fb; + --color-border: #dae1f5; + --transition: 0.4s ease-in-out; + --shadow: 0px 60px 56px -12px rgba(9, 40, 163, 0.05); +} + +body { + font-family: "Poppins", sans-serif; + color: var(--color-text); + font-size: 16px; + font-weight: 400; + margin: 0; + padding: 0; +} + +/* .container { + width: 100% !important; + margin: auto; + min-height: 100vh; + padding: 2rem; + display: grid; + place-items: center; +} */ + +.faq-container { + margin: 0 auto; + max-width: 900px !important; + width: 80%; +} + +.faq { + background-color: rgb(176, 196, 242, 0.3); + border: 1px solid #9a9afb; + color: black; + border-radius: 25px; + margin: 20px 0; + overflow: hidden; + padding: 30px; + position: relative; + transition: 0.3s ease; + cursor: pointer; + opacity: 0; + transform: translateX(-100%); + animation: slideInFromLeft 2s ease-in-out forwards; /* Animation duration is now 2 seconds */ +} + +.faq.active { + background: rgb(239, 239, 239); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.faq.active::before, +.faq.active::after { + color: #2ecc71; + content: "\f075"; + font-family: "Poppins", sans-serif; + font-size: 7rem; + left: 20px; + opacity: 0.2; + position: absolute; + top: 20px; + z-index: 0; +} + +.faq.active::before { + color: #3498db; + left: -30px; + top: -10px; + transform: rotateY(180deg); +} + +.faq-title { + margin: 0 35px 0 0; + color: #3685fb; + transition: transform 0.3s ease; +} + +.faq-title:hover { + transform: scale(1.1); +} + +.faq-text { + margin: 30px 0 0; + color: black; +} + +.faq-toggle { + align-items: center; + background: rgb(239, 239, 239); + border: 0; + border-radius: 50%; + cursor: pointer; + display: flex; + font-size: 1rem; + height: 30px; + justify-content: center; + padding: 0; + position: absolute; + right: 30px; + top: 10px; /* Moving toggle button to top to remove overlapping with faq-title */ + width: 30px; +} + +.faq-toggle .fa-times, +.faq.active .faq-toggle .fa-chevron-down { + display: none; +} + +.accordion__wrapper { + background: url("https://img.freepik.com/free-photo/pouch-map-toy-airplane-blue-background-with-space-writing-text_23-2147958180.jpg") + no-repeat center center fixed; + background-size: cover; + box-shadow: var(--shadow); + border-radius: 10px; + width: 100%; + margin-top: 20px; + min-height: 100vh; + padding: 2rem; + display: grid; + place-items: center; + position: relative; /* Ensure position is relative for z-index to work */ + z-index: 1; /* Ensure the FAQ wrapper is above the background image */ +} + +.accordion__title { + font-size: 25px; + font-weight: 800; + color: var(--color-title); + text-align: center; + margin-bottom: 4rem; +} + +.accordion { + border-bottom: 0.1rem solid var(--color-border); + padding-bottom: 2rem; + margin-bottom: 3rem; + width: 100%; +} + +.accordion__header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + cursor: pointer; +} + +.accordion__icon { + background-color: var(--color-primary); + width: 2.2rem; + height: 2.2rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + color: var(--color-white); + flex-shrink: 0; +} + +.accordion__question { + font-size: 18px; + font-weight: 700; + color: var(--color-title); + width: 100%; +} + +.accordion__answer { + padding: 2rem 0; + font-size: 16px; +} + +.accordion__content { + overflow: hidden; + height: 0; + transition: var(--transition); +} + +@media screen and (min-width: 580px) { + .accordion__wrapper { + padding: 5rem 8rem; + } +} + +.more { + padding: 50px; + background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9dwjbQHiWY1sgKRxCurFvyI4pwTMM9L2AVQ&s") + no-repeat center center fixed; + background-size: cover; + margin: 10px auto; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.more p { + color: grey; +} + +.moreemail { + padding: 10px 20px; + font-size: 18px; + border-radius: 10px; + color: white; + background-color: rgb(40, 87, 241); +} + +@keyframes slideInFromLeft { + 0% { + opacity: 0; + transform: translateX(-100%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} diff --git a/faq.html b/faq.html index 8b58683b..fb6f8824 100644 --- a/faq.html +++ b/faq.html @@ -5,7 +5,7 @@ - + @@ -195,101 +195,85 @@ -
-
-

Frequently Asked Questions

- - -
-
-

How do I book my travel arrangements through your website?

- - - -
-
-

Booking your travel with us is simple and convenient. - Start by entering your destination, travel dates, and other relevant details on our homepage. - Browse through the available options, including flights, hotels, and car rentals. Once you find - the perfect combination for your trip, follow the easy step-by-step process to confirm your booking. - If you encounter any issues or have questions during the booking process, our customer support team is - available 24/7 to assist you.

-
-
- - -
-
-

What measures are in place to ensure the safety of my personal information?

- - - -
-
-

We take the security of your personal information seriously. - Our website employs state-of-the-art encryption technology to safeguard your data during the booking process. - Additionally, we adhere to strict privacy policies and comply with industry standards to protect your information. - Rest assured that your details are used solely for the purpose of facilitating your travel arrangements, - and we do not share your information with third parties without your consent. - For more details, please refer to our Privacy Policy.

-
-
- - -
-
-

Can I make changes to my booking or cancel it if needed?

- - - -
-
-

Yes, we understand that plans can change. Depending on the terms and conditions - of your specific booking, you may be able to make modifications or cancel your reservation. - Log in to your account on our website, navigate to the "Manage Booking" section, and follow - the provided instructions. Keep in mind that there may be associated fees or restrictions depending - on the type of booking and the time of the requested changes. For further assistance, feel free to - contact our customer support team, and they will guide you through the process.

-
-
- - -
-
-

Will I get assistance while on travel?

- - - -
-
-

Yes, We provide 24X7 support and customer assistance while we are serving you.

-
-
- - -
-
-

Can I negotiate the prices?

- - - -
-
-

Sure! If it's a customized trip, we can negotiate prices based on requirements. However, if on group tours or offers, we cannot negotiate the prices.

-
-
+
+

Frequently Asked Questions

+ + +
+
+

How do I book my travel arrangements through your website?

+ + +
-
- -
-
+
+

Booking your travel with us is simple and convenient. Start by entering your destination, travel dates, and other relevant details on our homepage. Browse through the available options, including flights, hotels, and car rentals. Once you find the perfect combination for your trip, follow the easy step-by-step process to confirm your booking. If you encounter any issues or have questions during the booking process, our customer support team is available 24/7 to assist you.

+
+
+ + +
+
+

What measures are in place to ensure the safety of my personal information?

+ + + +
+
+

We take the security of your personal information seriously. Our website employs state-of-the-art encryption technology to safeguard your data during the booking process. Additionally, we adhere to strict privacy policies and comply with industry standards to protect your information. Rest assured that your details are used solely for the purpose of facilitating your travel arrangements, and we do not share your information with third parties without your consent. For more details, please refer to our Privacy Policy.

+
+
+ + +
+
+

Can I make changes to my booking or cancel it if needed?

+ + + +
+
+

Yes, we understand that plans can change. Depending on the terms and conditions of your specific booking, you may be able to make modifications or cancel your reservation. Log in to your account on our website, navigate to the "Manage Booking" section, and follow the provided instructions. Keep in mind that there may be associated fees or restrictions depending on the type of booking and the time of the requested changes. For further assistance, feel free to contact our customer support team, and they will guide you through the process.

+
+
+ + +
+
+

Will I get assistance while on travel?

+ + + +
+
+

Yes, We provide 24X7 support and customer assistance while we are serving you.

+
+
+ + +
+
+

Can I negotiate the prices?

+ + + +
+
+

Sure! If it's a customized trip, we can negotiate prices based on requirements. However, if on group tours or offers, we cannot negotiate the prices.

+
+
+
+ +
+

Have More questions?

Feel Free to Email us!

-
+
+