Skip to content

Commit 6d715a0

Browse files
Mayank77marutiMayank77maruti
authored
Merge pull request #95 from eshitatalukdar08/main
 Responsive FAQ Section
2 parents 826b592 + 2cffab8 commit 6d715a0

File tree

3 files changed

+181
-1
lines changed

3 files changed

+181
-1
lines changed

‎assets/css/style.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1415,7 +1415,118 @@ body.nav-active {
14151415
letter-spacing: var(--letterSpacing-3);
14161416
}
14171417

1418+
/*-----------------------------------*\
1419+
#FAQ SECTION
1420+
\*-----------------------------------*/
1421+
1422+
.faqs {
1423+
text-align: center;
1424+
background: linear-gradient(45deg, #333, #000);
1425+
border-radius: 10px;
1426+
font-family:'Forum', cursive;
1427+
color: #d6d3ce;
1428+
border-bottom: 1px solid #555;
1429+
}
1430+
1431+
.faqs h1 {
1432+
color: #c49d5b;
1433+
padding-top: 4%;
1434+
font-size: 3.1rem;
1435+
margin-bottom: 15px;
1436+
font-weight: bold;
1437+
text-transform: uppercase;
1438+
letter-spacing: 2px;
1439+
}
1440+
1441+
.faqs p {
1442+
font-size: 20px;
1443+
max-width: 650px;
1444+
margin: 0 auto;
1445+
line-height: 1;
1446+
}
14181447

1448+
/* FAQ Section Styling */
1449+
.faq-section {
1450+
max-width: 800px;
1451+
margin: 50px auto;
1452+
padding: 20px;
1453+
background-color: #111;
1454+
border-radius: 10px;
1455+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
1456+
}
1457+
1458+
.faq {
1459+
margin-bottom: 20px;
1460+
border-bottom: 1px solid #333;
1461+
}
1462+
1463+
.faq:last-child {
1464+
border-bottom: none;
1465+
}
1466+
1467+
.faq-question {
1468+
font-size: 2rem;
1469+
font-weight: bold;
1470+
cursor: pointer;
1471+
margin: 0;
1472+
padding: 20px;
1473+
background-color: #222;
1474+
border-radius: 5px;
1475+
transition: all 0.3s ease;
1476+
color: #bda372;
1477+
}
1478+
1479+
.faq-question:hover {
1480+
background-color: #cf9742ef;
1481+
color: #faf7f3;
1482+
}
1483+
1484+
.faq-answer {
1485+
display: none;
1486+
padding: 15px;
1487+
font-size: 1rem;
1488+
line-height: 1.8;
1489+
color: #ddd;
1490+
background-color: #1b1b1b;
1491+
border-radius: 5px;
1492+
}
1493+
1494+
.contact-link-container p {
1495+
display: inline-flex;
1496+
font-size: 2rem;
1497+
color: #f5f5f5;
1498+
}
1499+
.contact-link-container{
1500+
padding-bottom: 2%;
1501+
}
1502+
.contact-link {
1503+
text-decoration: none;
1504+
color: #e9cd78;
1505+
font-weight: bold;
1506+
font-size: 1.6rem;
1507+
transition: font-size 0.3s ease, color 0.3s ease;
1508+
margin: 2px 0px 0px 5px;
1509+
}
1510+
1511+
.contact-link:hover {
1512+
color: #ffcc00;
1513+
font-size: 1.8rem;
1514+
}
1515+
1516+
/* Responsive Styling */
1517+
@media (max-width: 768px) {
1518+
.header h1 {
1519+
font-size: 2.5rem;
1520+
}
1521+
1522+
.faq-question {
1523+
font-size: 1.2rem;
1524+
}
1525+
1526+
.faq-answer {
1527+
font-size: 0.9rem;
1528+
}
1529+
}
14191530

14201531

14211532

‎assets/js/script.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,4 +232,25 @@ const handleScroll = () => {
232232
};
233233

234234
window.addEventListener('scroll', handleScroll);
235-
handleScroll();
235+
handleScroll();
236+
237+
/**
238+
* FAQ SECTION
239+
*/
240+
241+
const faqQuestions = document.querySelectorAll('.faq-question');
242+
faqQuestions.forEach(question => {
243+
question.addEventListener('click', () => {
244+
const answer = question.nextElementSibling;
245+
if (answer.style.display === 'block') {
246+
answer.style.display = 'none';
247+
} else {
248+
answer.style.display = 'block';
249+
}
250+
faqQuestions.forEach(q => {
251+
if (q !== question) {
252+
q.nextElementSibling.style.display = 'none';
253+
}
254+
});
255+
});
256+
});

‎index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,6 +628,54 @@ <h2 class="headline-1 section-title">603 vor Tells a Story</h2>
628628
}
629629
</style>
630630

631+
<!---
632+
FAQ SECTION
633+
-->
634+
<div class="faqs">
635+
<h1>Frequently Asked Questions</h1>
636+
<p>Explore answers to your queries about our exclusive and tailored luxury spaces.</p>
637+
</header>
638+
639+
<section class="faq-section">
640+
<div class="faq">
641+
<h3 class="faq-question">What types of spaces can I book?</h3>
642+
<div class="faq-answer">
643+
<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>
644+
</div>
645+
</div>
646+
<div class="faq">
647+
<h3 class="faq-question">How do I book a space?</h3>
648+
<div class="faq-answer">
649+
<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>
650+
</div>
651+
</div>
652+
<div class="faq">
653+
<h3 class="faq-question">Can I customize a space for my event?</h3>
654+
<div class="faq-answer">
655+
<p>Absolutely! Many spaces can be tailored to your unique preferences. Contact the host to discuss your specific requirements.</p>
656+
</div>
657+
</div>
658+
<div class="faq">
659+
<h3 class="faq-question">What is the cancellation policy?</h3>
660+
<div class="faq-answer">
661+
<p>Each space has its own cancellation policy, detailed during the booking process. Review the policy carefully before confirming your reservation.</p>
662+
</div>
663+
664+
</div>
665+
<div class="faq">
666+
<h3 class="faq-question">Are there any hidden fees?</h3>
667+
<div class="faq-answer">
668+
<p>All fees, including cleaning and service fees, are transparently displayed during the booking process. There are no hidden charges.</p>
669+
</div>
670+
</div>
671+
</section>
672+
673+
<div class="contact-link-container">
674+
<p>Couldn't find your answer?
675+
<a href="contact.html" class="contact-link">Contact Us</a></p>
676+
</div>
677+
</div>
678+
631679

632680
<!--
633681
- #EVENT

0 commit comments

Comments
 (0)