Skip to content

Commit

Permalink
added FAQ section to literary realms pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@samarsajad
samarsajad committed Jul 30, 2024
1 parent c6bb3bb commit f96a955
Show file tree
Hide file tree
Showing 8 changed files with 825 additions and 112 deletions.
117 changes: 103 additions & 14 deletions Mystical-fantaies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,28 +489,28 @@ <h2 style="font-size: 20px;">Sonal K</h2>
<!-- Testimonials -->


<div class="faq-section">
<h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
<div class="faqsection">
<h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
</br>
<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How does SwapReads work ?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>SwapReads is a global book exchange platform where users can create profiles,
list the books they're willing to swap, and can find other users collections.
When you find a book you're interested in, you can find suitable offers and can read that book. It's that
easy!</p>
</div>
</div>

<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How does SwapReads contribute to sustainability?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>
By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
reducing the demand for new book production. This helps minimize the environmental impact
Expand All @@ -519,28 +519,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
</div>
</div>

<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How do I join the SwapReads community?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
</div>
</div>

<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
our servers. </p>
</div>
</div>
<div class="faqcontainer">
<div class="questions">
<h4>Can I read the books online without downloading them?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answer">
<p> Yes, many of the free books available on our website can be read online</p>
</div>
</div>
<div class="faqcontainer">
<div class="questions">
<h4>How can I download a free book?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answer">
<p> To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
</div>
</div>
</div>
<style>
.faqcontainer {
width: 80%;
max-width: 600px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-left:450px;
margin-bottom: 20px;
}

.faqheading{
color:darkred;;
margin-left:525px;
font-family: var(--ff-philosopher);
font-size:30px;
}

.questions {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 10px;
background-color: hsl(0deg 100% 80.49%);
color: #fff;
border-radius: 5px;
transition: background-color 0.3s ease;
color: var(--sonic-silver);
font-weight: bold;
justify-content: space-between;
}

.questions:hover {
background-color:#FFB2A8;
}

.questions h4 {
margin: 0;
}

.answer {
display: none;
padding: 10px;
background-color:#FFB2A8;
border-left: 3px solid darkred;
border-radius: 5px;
margin-top: 5px;
color:var(--sonic-silver);
}
.answer:hover{
background-color:#FFB2A8;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqContainers = document.querySelectorAll('.faqcontainer');

faqContainers.forEach(container => {
const question = container.querySelector('.questions');
const answer = container.querySelector('.answer');
const icon = container.querySelector('.icon');

question.addEventListener('click', () => {
answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
icon.classList.toggle('fa-caret-down');
icon.classList.toggle('fa-caret-up');
});
});
});
</script>
<br /><br />

<!--
Expand Down
117 changes: 103 additions & 14 deletions biographies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -777,28 +777,28 @@ <h2 style="font-size: 20px;">Sonal K</h2>
<!-- Testimonials -->


<div class="faq-section">
<h1 class="faq" id="faqq">Some Frequently Asked Questions</h1>
<div class="faqsection">
<h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
</br>
<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How does SwapReads work ?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>SwapReads is a global book exchange platform where users can create profiles,
list the books they're willing to swap, and can find other users collections.
When you find a book you're interested in, you can find suitable offers and can read that book. It's that
easy!</p>
</div>
</div>

<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How does SwapReads contribute to sustainability?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>
By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
reducing the demand for new book production. This helps minimize the environmental impact
Expand All @@ -807,28 +807,117 @@ <h4>How does SwapReads contribute to sustainability?</h4>
</div>
</div>

<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How do I join the SwapReads community?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
</div>
</div>

<div class="faq-container">
<div class="question">
<div class="faqcontainer">
<div class="questions">
<h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answers">
<div class="answer">
<p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
our servers. </p>
</div>
</div>
<div class="faqcontainer">
<div class="questions">
<h4>Can I read the books online without downloading them?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answer">
<p> Yes, many of the free books available on our website can be read online</p>
</div>
</div>
<div class="faqcontainer">
<div class="questions">
<h4>How can I download a free book?</h4>
<i class="icon fa-solid fa-caret-down"></i>
</div>
<div class="answer">
<p> To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
</div>
</div>
</div>
<style>
.faqcontainer {
width: 80%;
max-width: 600px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-left:450px;
margin-bottom: 20px;
}

.faqheading{
color:darkred;;
margin-left:525px;
font-family: var(--ff-philosopher);
font-size:30px;
}

.questions {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 10px;
background-color: hsl(0deg 100% 80.49%);
color: #fff;
border-radius: 5px;
transition: background-color 0.3s ease;
color: var(--sonic-silver);
font-weight: bold;
justify-content: space-between;
}

.questions:hover {
background-color:#FFB2A8;
}

.questions h4 {
margin: 0;
}

.answer {
display: none;
padding: 10px;
background-color:#FFB2A8;
border-left: 3px solid darkred;
border-radius: 5px;
margin-top: 5px;
color:var(--sonic-silver);
}
.answer:hover{
background-color:#FFB2A8;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqContainers = document.querySelectorAll('.faqcontainer');

faqContainers.forEach(container => {
const question = container.querySelector('.questions');
const answer = container.querySelector('.answer');
const icon = container.querySelector('.icon');

question.addEventListener('click', () => {
answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
icon.classList.toggle('fa-caret-down');
icon.classList.toggle('fa-caret-up');
});
});
});
</script>
<br /><br />

<!--
Expand Down
Loading

0 comments on commit f96a955

Please sign in to comment.