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

Jump to bottom

Added FAQ in landing page #485

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added FAQ in landing page #485

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c69420e
faq
Subham1 Oct 16, 2024
5c774de
faq
Subham1 Oct 16, 2024
c0331a0
updated faq
Subham1 Oct 16, 2024
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
145 changes: 144 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,88 @@
<link rel="stylesheet" href="./Style/popup.css">

</head>
<style>

#faq{
padding-top: 80px;
padding-top: 70px;
}


.faq-container {
max-width: 900px;
margin: 40px auto;
padding: 20px;
background-color: rgb(203, 203, 220);
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 2 10px 8px rgba(255, 254, 254, 0.1);
}

.faq-title {
text-align: center;
font-size: 1.8em;
color: #161515;
margin-bottom: 20px;
}

.faq {
margin-bottom: 15px;
}

.faq input[type="checkbox"] {
display: none;
}

.faq-question {
padding: 15px;
font-size: 1.2em;
background-color: #100f0f;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
/* display: block; */
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}

.faq-question:hover {
background-color: #0d0d0d;
}

.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 15px;
background-color: #f3f1ef;
color: #333;
border-left: 4px solid #191818;
transition: all 0.6s ease;
}

.faq input[type="checkbox"]:checked ~ .faq-answer {
max-height: 150px;
padding: 15px;
}
.arrow {
margin-top: -3px;
display: inline-block;
width: 12px;
height: 12px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
transition: transform 0.3s ease;
}
/* Rotate arrow on FAQ open */
.faq input[type="checkbox"]:checked + label .arrow {
transform: rotate(225deg);
}

</style>

<body>
<!-- preloader -->
Expand Down Expand Up @@ -553,6 +635,67 @@ <h2>Have a feedback? &nbsp;&nbsp;<a href="feedback.html" target="_blank">Click h
</section>




<!-- FAQ Section -->
<section id="faq">
<div class="faq-container">
<h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq1">
<label for="faq1" class="faq-question">1.What is your return and refund policy? ? <span class="arrow"></span></label>
<div class="faq-answer">
We offer a 30-day return policy from the date of delivery. Items must be unworn, unwashed, and in their original condition. Refunds will be processed within 7 business days after the return is approved.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq2">
<label for="faq2" class="faq-question">2.How long does delivery take? ? <span class="arrow"></span></label>
<div class="faq-answer">
Standard delivery typically takes 5-7 business days, depending on your location. Express delivery options are also available, with shipments arriving within 2-3 business days.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq3">
<label for="faq3" class="faq-question">3. How can I be sure about the clothing quality?? <span class="arrow"></span></label>
<div class="faq-answer">
We are committed to offering high-quality fabrics and materials for all our clothing. Each item undergoes strict quality checks to ensure durability and comfort.
</div>
</div>

<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq4">
<label for="faq4" class="faq-question">4. What sizes do you offer?? <span class="arrow"></span></label>
<div class="faq-answer">
Our sizes range from XS to XXL. You can refer to our detailed size guide on each product page to find the perfect fit for you.
</div>
</div>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq5">
<label for="faq5" class="faq-question">5.Do you offer international shipping?? <span class="arrow"></span></label>
<div class="faq-answer">
Yes, we ship to several countries around the world. International shipping costs and delivery times will vary depending on the destination.


</div>
</div>
</div>
</section>












<!-- footer section -->
<footer class="footer">

Expand Down Expand Up @@ -589,7 +732,7 @@ <h1>Contact Us</h1>
<h1>Quick Links</h1>
<ul class="footer-list">
<li><a href="about.html">About Us</a></li>
<li><a href="faq.html">FAQ's</a></li>

<li><a href="terms-conditions.html">Terms & Conditions</a></li>
<li><a href="return-policy.html">Return Policy</a></li>
<li><a href="https://github.com/Tejashri-Taral/TrendTrove-Ecommerce" target="_blank">Star Us</a></li>
Expand Down