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

Responsive FAQ Section #95

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+181 −1
Open

Responsive FAQ Section #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ccb2f77
Added a FAQs section
eshitatalukdar08 Jan 9, 2025
2cffab8
Moved FAQ styles and scripts to centralized CSS and JS files
eshitatalukdar08 Jan 10, 2025
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
111 changes: 111 additions & 0 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1414,7 +1414,118 @@ body.nav-active {
letter-spacing: var(--letterSpacing-3);
}

/*-----------------------------------*\
#FAQ SECTION
\*-----------------------------------*/

.faqs {
text-align: center;
background: linear-gradient(45deg, #333, #000);
border-radius: 10px;
font-family:'Forum', cursive;
color: #d6d3ce;
border-bottom: 1px solid #555;
}

.faqs h1 {
color: #c49d5b;
padding-top: 4%;
font-size: 3.1rem;
margin-bottom: 15px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}

.faqs p {
font-size: 20px;
max-width: 650px;
margin: 0 auto;
line-height: 1;
}

/* FAQ Section Styling */
.faq-section {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #111;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
}

.faq {
margin-bottom: 20px;
border-bottom: 1px solid #333;
}

.faq:last-child {
border-bottom: none;
}

.faq-question {
font-size: 2rem;
font-weight: bold;
cursor: pointer;
margin: 0;
padding: 20px;
background-color: #222;
border-radius: 5px;
transition: all 0.3s ease;
color: #bda372;
}

.faq-question:hover {
background-color: #cf9742ef;
color: #faf7f3;
}

.faq-answer {
display: none;
padding: 15px;
font-size: 1rem;
line-height: 1.8;
color: #ddd;
background-color: #1b1b1b;
border-radius: 5px;
}

.contact-link-container p {
display: inline-flex;
font-size: 2rem;
color: #f5f5f5;
}
.contact-link-container{
padding-bottom: 2%;
}
.contact-link {
text-decoration: none;
color: #e9cd78;
font-weight: bold;
font-size: 1.6rem;
transition: font-size 0.3s ease, color 0.3s ease;
margin: 2px 0px 0px 5px;
}

.contact-link:hover {
color: #ffcc00;
font-size: 1.8rem;
}

/* Responsive Styling */
@media (max-width: 768px) {
.header h1 {
font-size: 2.5rem;
}

.faq-question {
font-size: 1.2rem;
}

.faq-answer {
font-size: 0.9rem;
}
}



Expand Down
23 changes: 22 additions & 1 deletion assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,4 +232,25 @@ const handleScroll = () => {
};

window.addEventListener('scroll', handleScroll);
handleScroll();
handleScroll();

/**
* FAQ SECTION
*/

const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', () => {
const answer = question.nextElementSibling;
if (answer.style.display === 'block') {
answer.style.display = 'none';
} else {
answer.style.display = 'block';
}
faqQuestions.forEach(q => {
if (q !== question) {
q.nextElementSibling.style.display = 'none';
}
});
});
});
48 changes: 48 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -618,6 +618,54 @@ <h2 class="headline-1 section-title">603 vor Tells a Story</h2>
}
</style>

<!---
FAQ SECTION
-->
<div class="faqs">
<h1>Frequently Asked Questions</h1>
<p>Explore answers to your queries about our exclusive and tailored luxury spaces.</p>
</header>

<section class="faq-section">
<div class="faq">
<h3 class="faq-question">What types of spaces can I book?</h3>
<div class="faq-answer">
<p>Our platform offers an exquisite selection of modern offices, creative studios, event venues, and more. Each space blends elegance and functionality to match your needs.</p>
</div>
</div>
<div class="faq">
<h3 class="faq-question">How do I book a space?</h3>
<div class="faq-answer">
<p>Browse our curated collection, select your preferred space, and complete the booking in just a few clicks. Enjoy instant confirmation and a seamless experience.</p>
</div>
</div>
<div class="faq">
<h3 class="faq-question">Can I customize a space for my event?</h3>
<div class="faq-answer">
<p>Absolutely! Many spaces can be tailored to your unique preferences. Contact the host to discuss your specific requirements.</p>
</div>
</div>
<div class="faq">
<h3 class="faq-question">What is the cancellation policy?</h3>
<div class="faq-answer">
<p>Each space has its own cancellation policy, detailed during the booking process. Review the policy carefully before confirming your reservation.</p>
</div>

</div>
<div class="faq">
<h3 class="faq-question">Are there any hidden fees?</h3>
<div class="faq-answer">
<p>All fees, including cleaning and service fees, are transparently displayed during the booking process. There are no hidden charges.</p>
</div>
</div>
</section>

<div class="contact-link-container">
<p>Couldn't find your answer?
<a href="contact.html" class="contact-link">Contact Us</a></p>
</div>
</div>


<!--
- #EVENT
Expand Down