Skip to content

Commit

Permalink
Merge pull request #1496 from aslams2020/FAQSection
Browse files Browse the repository at this point in the history 
✔️Improved the FAQ Section of the Website!
  • Loading branch information
@arghadipmanna101
arghadipmanna101 authored Jul 26, 2024
2 parents dc12285 + ca473f6 commit b09ecc2
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 172 deletions.
128 changes: 36 additions & 92 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -488,139 +488,83 @@ Search Bar

/* FAQ Section Styles */


#faq {
background: linear-gradient(45deg , #e52e71, #2d7cea );
background: rgb(234, 251, 253);
/* background-image: linear-gradient(90deg, #020024 0%, #092b79 35%, #00d4ff 100%); */
border-radius: 15px;
padding: 30px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
/* Increased box shadow */
margin-bottom: 75px;
/* margin-top: 50px; */
}

#faq .heading {
.faq-heading {
font-weight: bold;
display: block;
color: #333;
font-size: 38px;
margin-bottom: 300px !important;
}

.accordion-item {
border: none;
.faq-card {
background: white;
border-radius: 10px;
margin-bottom: 20px;
}

#faq .accordion .card {
border: none;
border-radius: 15px;
margin-bottom: 25px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 10px;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#faq .accordion .card:hover {
.faq-card:hover {
transform: translateY(-5px);
/* Added hover effect */
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
/* Increased box shadow on hover */
}


#faq .accordion .card-header {
background-color: #fff;
border: none;
border-radius: 15px 15px 0 0;
padding: 15px 20px;
}

.accordion-header {
background-color: #fff;
border: none;
border-radius: 10px;
padding: 15px 20px;
.faq-icon {
text-align: center;
position: relative;
left: 400px;
/* top: 0px; */
margin-bottom: 15px;
}

.accordion-item .collapse {
visibility: visible;
.faq-icon img {
width: 20px;
height: 20px;
}

#faq .accordion .btn-link {
font-size: 1.1rem;
.faq-question {
font-size: 18px;
font-weight: bold;
color: #007bff;
text-decoration: none;
cursor: pointer;
width: 100%;
text-align: left;
}

#faq .accordion .btn-link:hover {
text-decoration: underline;
}

#faq .accordion .btn-link.collapsed {
/* margin-bottom: 10px; */
color: #333;
}

#faq .accordion .card-body {
border-radius: 0 0 15px 15px;
padding: 20px;
.faq-answer {
font-size: 16px;
background-color: #f9f9f9;
}


#faq .heading {
font-weight: bold;
color: white;
font-size: 30px;
text-align: center;
}

#faq .accordion .accordion-item {
border: none;
border-bottom: 1px solid #ddd;
}

#faq .accordion .accordion-button {
font-size: 1.1rem;
font-weight: bold;
color: blueviolet;
text-decoration: none;
cursor: pointer;
}

#faq .accordion .accordion-button:hover {
text-decoration: underline;
}

#faq .accordion .accordion-button:not(.collapsed) {
color: blueviolet;
background-color: #fff;
}

#faq .accordion .accordion-body {
padding: 1rem 1.25rem;
background-color: #f8f9fa;
color: #555;
}

/* Responsive Styles */
@media (max-width: 768px) {
#faq .heading {
.faq-heading {
font-size: 1.5rem;
}

#faq .accordion .accordion-button {
font-size: 1rem;
.faq-card {
padding: 15px;
}

#faq .accordion .accordion-body {
padding: 0.75rem 1rem;
.faq-question {
font-size: 1.1rem;
}

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


/* faq css end */


Expand Down
170 changes: 90 additions & 80 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1028,94 +1028,104 @@ <h5 class="brand-directory-heading">Top Stories : Brand Directory</h5>



<!-- FAQ Section -->
<div class="container" id="faq">
<div style="display: flex;" class="container mt-5">
<h2 style="width: 35%;padding-left: 5vw;" class="text-center mb-4 heading">Frequently Asked Questions</h2>
<div style="width: 65%;" class="accordion" id="faqAccordion">
<div class="accordion-item">
<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">
1. How do I create an account?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
To create an account on Flipkart, simply click on the "Sign Up" button located at the
top-right corner of the homepage. Follow the prompts to enter your details and create your
account.
</div>
</div>
<!-- FAQ Section -->
<div class="faq-container" id="faq">
<div> <h2 class="faq-heading text-center mb-4">Frequently Asked Questions</h2></div>

<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</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">
2. How can I place an order?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
Placing an order on Flipkart is easy! Once you've found the product you want to buy, click
on it to view details and then click on the "Buy Now" or "Add to Cart" button. Follow the
steps to complete your order.
</div>
</div>
<h5 class="faq-question">How do I create an account?</h5>
<p class="faq-answer">To create an account on Flipkart, simply click on the "Sign Up" button located
at the top-right corner of the homepage. Follow the prompts to enter your details and create
your account.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</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">
3. What payment options are available?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
Flipkart offers various payment options including credit/debit cards, net banking, UPI, EMI,
and Cash on Delivery (COD) for eligible orders.
</div>
</div>
<h5 class="faq-question">How can I place an order?</h5>
<p class="faq-answer">Placing an order on Flipkart is easy! Once you've found the product you want
to buy, click on it to view details and then click on the "Buy Now" or "Add to Cart" button.
</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</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="collapseFour">
4. How can I track my order?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
You can track your order by clicking on the "Track Order" link in the "My Orders" section of
your Flipkart account. You will receive regular updates on your order status via email and
SMS.
</div>
</div>
<h5 class="faq-question">What payment options are available?</h5>
<p class="faq-answer">Flipkart offers various payment options including credit/debit cards, net
banking, UPI, EMI, and Cash on Delivery (COD) for eligible orders.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
5. What is Flipkart's return policy?
</button>
</h2>
<div id="collapse5" class="accordion-collapse collapse" aria-labelledby="heading5"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
Flipkart has a hassle-free return policy. If you're not satisfied with your purchase, you
can initiate a return within the specified return period. Simply go to the "My Orders"
section, select the order you want to return, and follow the prompts.
</div>
</div>
<h5 class="faq-question">How can I track my order?</h5>
<p class="faq-answer">You can track your order by clicking on the "Track Order" link in the "My
Orders" section of your Flipkart account. You will receive regular updates on your order status
via email and SMS.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</div>
<h5 class="faq-question">What is Flipkart's return policy?</h5>
<p class="faq-answer">Flipkart has a hassle-free return policy. If you're not satisfied with your
purchase, you can initiate a return within the specified return period. Simply go to the "My
Orders" section, select the order you want to return, and follow the prompts.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</div>
<h5 class="faq-question">Is the cost of the appointment covered by private health insurance?</h5>
<p class="faq-answer">Many private health insurance plans cover the cost of our appointments. We recommend checking with your insurance provider to confirm the extent of your coverage. If you need documentation for your insurance claim, please let us know.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</div>
<h5 class="faq-question">What is your cancellation policy?</h5>
<p class="faq-answer">Our cancellation policy requires that you notify us at least 24 hours in advance if you need to cancel or reschedule your appointment. Failure to do so may result in a cancellation fee. We understand that emergencies happen, so please contact us as soon as possible.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</div>
<h5 class="faq-question">Do I need a referral?</h5>
<p class="faq-answer">Referrals are not necessary to book an appointment with us. However, if you have a referral from a healthcare provider, please bring it along to your appointment. It can provide useful background information for our consultants.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="faq-card">
<div class="faq-icon">
<img src="https://img.icons8.com/ios-filled/50/000000/question-mark.png" alt="Question Icon">
</div>
<h5 class="faq-question">What are the parking and public transport options?</h5>
<p class="faq-answer">We offer complimentary parking for all our clients. Our office is also easily accessible by public transport. The nearest bus stop is a 5-minute walk, and the train station is about 10 minutes away. Detailed directions can be found on our website.</p>
</div>
</div>
</div>
<!-- faq end -->
</div>
<!-- faq end -->
<!-- Contact Us -->
<div class="main">

Expand Down

0 comments on commit b09ecc2

Please sign in to comment.