FAQ component - 4
COPY
<div class="faq">
<div class="container py-5">
<div class="container">
<div class="pb-5">
<h1 class="display-5 fw-bold">Frequently asked questions</h1>
<p class="mb-5">Have a different question and can’t find the answer you’re looking
for? Reach out to our support team by sending us an email and we’ll get back to you as soon as
we can.</p>
</div>
<div class="row g-5 justify-content-center">
<div class="col-md-6">
<h2 class="fs-5">How to build a website?</h2>
<p>Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-6">
<h2 class="fs-5"> How long will it take to get a new website?</h2>
<p>Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-6">
<h2 class="fs-5"> Why can't you hear a pterodactyl go to the bathroom?</h2>
<p>Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-6">
<h2 class="fs-5">Do you only create HTML websites?</h2>
<p>Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-6">
<h2 class="fs-5">How to build a website?</h2>
<p>Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-6">
<h2 class="fs-5"> How long will it take to get a new website?</h2>
<p>Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #002fcac9;
--bs-secondary: #002c69;
--bs-light2: #f3f4f6;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
FAQ component - 3
COPY
<div class="faq">
<div class="container py-5">
<div class="container text-white">
<div class="text-center pb-5">
<h1 class="display-5 fw-bold">Frequently asked questions</h1>
<p class="mb-5 text-white text-opacity-75">Have a different question and can’t find the answer you’re looking
for? Reach out to our support team by sending us an email and we’ll get back to you as soon as
we can.</p>
</div>
<div class="row g-5 justify-content-center">
<div class="col-md-5">
<h2 class="fs-5">How to build a website?</h2>
<p class="text-white text-opacity-75">Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-5">
<h2 class="fs-5"> How long will it take to get a new website?</h2>
<p class="text-white text-opacity-75">Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-5">
<h2 class="fs-5"> Why can't you hear a pterodactyl go to the bathroom?</h2>
<p class="text-white text-opacity-75">Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-5">
<h2 class="fs-5">Do you only create HTML websites?</h2>
<p class="text-white text-opacity-75">Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-5">
<h2 class="fs-5">How to build a website?</h2>
<p class="text-white text-opacity-75">Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
<div class="col-md-5">
<h2 class="fs-5"> How long will it take to get a new website?</h2>
<p class="text-white text-opacity-75">Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #002fcac9;
--bs-secondary: #002c69;
--bs-light2: #f3f4f6;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.faq {
background: var(--bs-primary) url(/component/images/bg/1.png);
background-size: 100%;
}
FAQ component - 2
COPY
<section class="faq py-5">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md-6">
<div class="pb-3">
<h2 class="display-6 fw-medium">Any question?</h2>
</div>
<div class="project-caption mb-40">
<div class="collapse-wrapper">
<div class="accordion" id="accordionExample">
<div class="accordion-item" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Complete CMS integration?</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
Facilisis ac eget mauris nulla enim a diam. Posuere vel eleifend augue
laoreet non praesent ultrices.
</div>
</div>
</div>
<div class="accordion-item ">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">What impacts my car
insurance price?</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
Facilisis ac eget mauris nulla enim a diam. Posuere vel eleifend augue
laoreet non praesent ultrices.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">What does car insurance
cover?</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
Facilisis ac eget mauris nulla enim a diam. Posuere vel eleifend augue
laoreet non praesent ultrices.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseOne">Complete CMS
integration?</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
Facilisis ac eget mauris nulla enim a diam. Posuere vel eleifend augue
laoreet non praesent ultrices.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseThree">What does car insurance
cover?</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Facilisis ac eget mauris nulla enim a diam. Posuere vel eleifend augue
laoreet non praesent ultrices.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="m-4">
<img src="/component/images/nature/road-in-jangol.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #003b8f;
--bs-secondary: #002c69;
--bs-white: #d4e0ff;
--bs-light2: #f3f4f6;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
background: var(--bs-light2);
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
}
.text-white {
color: var(--bs-white) !important;
}
.accordion-button:not(.collapsed) {
color: #ffffff;
background-color: #3a00b7;
}
.accordion-button:focus {
box-shadow: none;
}
.faq {
background: url(/component/images/bg/portfolio-backoverlay-w.svg) left top;
background-size: 100%;
}
FAQ component - 1
COPY
<div class="faq">
<div class="container-xxl py-5">
<div class="container">
<div class="text-center mx-auto" style="max-width: 500px; visibility: visible;">
<h1 class="display-6 fw-bold">FAQs</h1>
<p class="text-primary fs-5 mb-5">Frequently Asked Questions</p>
</div>
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="accordion" id="accordionExample">
<div class="accordion-item" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
How to build a website?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
<div class="accordion-item " style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How long will it take to get a new website?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
<div class="accordion-item " style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Do you only create HTML websites?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
<div class="accordion-item " style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
Will my website be mobile-friendly?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
<div class="accordion-item" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Will you maintain my site for me?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
<div class="accordion-item " style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
I’m on a strict budget. Do you have any low cost options?
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
<div class="accordion-item" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingSeven">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
Will you maintain my site for me?
</button>
</h2>
<div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
<div class="accordion-item" style="visibility: visible; animation-delay: 0.8s; animation-name: fadeInUp;">
<h2 class="accordion-header" id="headingEight">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
I’m on a strict budget. Do you have any low cost options?
</button>
</h2>
<div id="collapseEight" class="accordion-collapse collapse" aria-labelledby="headingEight" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et
magna
diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #002fcac9;
--bs-secondary: #002c69;
--bs-light2: #f3f4f6;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
}
.text-primary {
color: var(--bs-primary) !important;
}
.accordion-button:not(.collapsed) {
color: #ffffff;
background-color: #002fcac9;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-item {
border: 0;
border-bottom: 1px solid #d4e0ff !important;
}
.faq {
background: url(/component/images/nature/nature-02.jpg);
background-size: 100%;
}
More coming soon