1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="faq_area section_padding_130" id="faq">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-8 col-lg-6">
<div class="section_heading text-center wow fadeInUp" data-wow-delay="0.2s" style={{/*visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;*/}}>
<h3><span>Frequently </span> Asked Questions</h3>
<p>Appland is completely creative, lightweight, clean & super responsive app landing page.</p>
<div class="line"></div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-lg-8">
<div class="accordion faq-accordian" id="faqAccordion">
<div class="card border-0 wow fadeInUp" data-wow-delay="0.2s" style={{/*visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;*/}}>
<div class="card-header" id="headingOne">
<h6 class="mb-0 collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">How can I install this app?<span class="lni-chevron-up"></span></h6>
</div>
<div class="collapse" id="collapseOne" aria-labelledby="headingOne" data-parent="#faqAccordion">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quidem facere deserunt sint animi sapiente vitae suscipit.</p>
<p>Appland is completely creative, lightweight, clean & super responsive app landing page.</p>
</div>
</div>
</div>
<div class="card border-0 wow fadeInUp" data-wow-delay="0.3s" style={{/*visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;*/}}>
<div class="card-header" id="headingTwo">
<h6 class="mb-0 collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">The apps isn't installing?<span class="lni-chevron-up"></span></h6>
</div>
<div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#faqAccordion">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quidem facere deserunt sint animi sapiente vitae suscipit.</p>
<p>Appland is completely creative, lightweight, clean & super responsive app landing page.</p>
</div>
</div>
</div>
<div class="card border-0 wow fadeInUp" data-wow-delay="0.4s" style={{/*visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;*/}}>
<div class="card-header" id="headingThree">
<h6 class="mb-0 collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">Contact form isn't working?<span class="lni-chevron-up"></span></h6>
</div>
<div class="collapse" id="collapseThree" aria-labelledby="headingThree" data-parent="#faqAccordion">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quidem facere deserunt sint animi sapiente vitae suscipit.</p>
<p>Appland is completely creative, lightweight, clean & super responsive app landing page.</p>
</div>
</div>
</div>
</div>
<div class="support-button text-center d-flex align-items-center justify-content-center mt-4 wow fadeInUp" data-wow-delay="0.5s" style={{/*visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;*/}}>
<i class="lni-emoji-sad"></i>
<p class="mb-0 px-2">Can't find your answers?</p>
<a href="#/"> Contact us</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{margin-top:20px;}
.section_padding_130 {
padding-top: 130px;
padding-bottom: 130px;
}
.faq_area {
position: relative;
z-index: 1;
background-color: #f5f5ff;
}
.faq-accordian {
position: relative;
z-index: 1;
}
.faq-accordian .card {
position: relative;
z-index: 1;
margin-bottom: 1.5rem;
}
.faq-accordian .card:last-child {
margin-bottom: 0;
}
.faq-accordian .card .card-header {
background-color: #ffffff;
padding: 0;
border-bottom-color: #ebebeb;
}
.faq-accordian .card .card-header h6 {
cursor: pointer;
padding: 1.75rem 2rem;
color: #3f43fd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.faq-accordian .card .card-header h6 span {
font-size: 1.5rem;
}
.faq-accordian .card .card-header h6.collapsed {
color: #070a57;
}
.faq-accordian .card .card-header h6.collapsed span {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.faq-accordian .card .card-body {
padding: 1.75rem 2rem;
}
.faq-accordian .card .card-body p:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 575px) {
.support-button p {
font-size: 14px;
}
}
.support-button i {
color: #3f43fd;
font-size: 1.25rem;
}
@media only screen and (max-width: 575px) {
.support-button i {
font-size: 1rem;
}
}
.support-button a {
text-transform: capitalize;
color: #2ecc71;
}
@media only screen and (max-width: 575px) {
.support-button a {
font-size: 13px;
}
}
