Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added FAQ in landing page #921

Closed
wants to merge 1 commit into from
Closed

Added FAQ in landing page #921

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 126 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1712,6 +1712,132 @@ <h4>Traveller</h4>
</figure></div>
</div>
</section>
<style>
#faq{

padding-top: 30px;
}


.faq-container {
max-width: 900px;
margin: 40px auto;
padding: 20px;
background-color: rgb(203, 203, 220);
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
}

.faq-title {
text-align: center;
font-size: 1.8em;
color: #161515;
margin-bottom: 20px;
}

.faq {
margin-bottom: 15px;
}

.faq input[type="checkbox"] {
display: none;
}

.faq-question {
padding: 15px;
font-size: 1.2em;
background-color: #100f0f;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
/* display: block; */
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}

.faq-question:hover {
background-color: #0d0d0d;
}

.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 15px;
background-color: #f3f1ef;
color: #333;
border-left: 4px solid #191818;
transition: all 0.6s ease;
}

.faq input[type="checkbox"]:checked ~ .faq-answer {
max-height: 150px;
padding: 15px;
}
.arrow {
margin-top: -3px;
display: inline-block;
width: 12px;
height: 12px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
transition: transform 0.3s ease;
}
/* Rotate arrow on FAQ open */
.faq input[type="checkbox"]:checked + label .arrow {
transform: rotate(225deg);
}
</style>
<!-- FAQ Section for Traveling Booking Web App -->
<section id="faq">
<div class="faq-container">
<h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq1">
<label for="faq1" class="faq-question">1. How do I book a flight or hotel? <span class="arrow"></span></label>
<div class="faq-answer">
You can book flights or hotels through our app by selecting your destination and travel dates. Once you find a suitable option, follow the steps to confirm your booking.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq2">
<label for="faq2" class="faq-question">2. Can I cancel or modify my booking? <span class="arrow"></span></label>
<div class="faq-answer">
Yes, you can cancel or modify your booking through the "My Bookings" section. Cancellation and modification policies depend on the airline or hotel, so please review the specific terms before confirming changes.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq3">
<label for="faq3" class="faq-question">3. Are there any additional fees when booking? <span class="arrow"></span></label>
<div class="faq-answer">
Our prices include taxes and service fees, but additional charges may apply for services like extra baggage, seat selection, or in-room amenities. These will be clearly displayed during the booking process.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq4">
<label for="faq4" class="faq-question">4. How can I check the status of my flight? <span class="arrow"></span></label>
<div class="faq-answer">
You can check the status of your flight in real-time through our app under the "Flight Status" section. You'll receive notifications if there are any changes to your schedule.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq5">
<label for="faq5" class="faq-question">5. Do you offer customer support for booking issues? <span class="arrow"></span></label>
<div class="faq-answer">
Yes, we provide 24/7 customer support for any booking-related issues. You can contact us via the "Help" section in the app or email us directly for assistance.
</div>
</div>
</div>
</section>


<section id="reviews" class="reviews-section">
Expand Down