Skip to content

Commit

Permalink
Merge branch 'anuragverma108:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anjaliavv51
Anjaliavv51 committed Aug 10, 2024
2 parents 9add4cd + fbe87e2 commit d05611b
Show file tree
Hide file tree
Showing 79 changed files with 12,206 additions and 3,660 deletions.
235 changes: 215 additions & 20 deletions Mystical-fantaies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@

<nav class="navbar nav_activated" data-navbar>
<a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
<img src="./assets/images/new_logo_banner_dark.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
<img src="./assets/images/final.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
</a>

<ul class="navbar-list">
<img src="./assets/images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
<img src="./assets/images/final.png" class="logopic" style=" width: 150px;">

<li class="navbar-item">
<a href="index.html#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
Expand Down Expand Up @@ -140,6 +140,64 @@
</ul>
</div>
</li>
<div class="action">
<div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div>
<div class="menu">
<h3>XYZ<br /><span>Book Lover</span></h3>
<ul>
<li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
<li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
<li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
<li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
<li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
<li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
</ul>
</div>
</div>


<script>
document.addEventListener("DOMContentLoaded", () => {
const savedAvatar = localStorage.getItem("selectedAvatar");
if (savedAvatar) {
document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
}
});

function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}

document.addEventListener("click", function(event) {
const profile = document.querySelector(".profile");
const menu = document.querySelector(".menu");

if (!profile.contains(event.target) && !menu.contains(event.target)) {
menu.classList.remove("active");
}
});

let lastScrollTop = 0;
const header = document.querySelector('.header');

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > lastScrollTop) {
// Downscroll
header.style.transform = 'translateY(-120%)';
} else {
// Upscroll
header.style.transform = 'translateY(0)';
}

lastScrollTop = scrollTop;
});
</script>


<!-- Google Translate Element -->
<li class="navbar-item">
Expand Down Expand Up @@ -203,7 +261,54 @@
.hover\:grow:hover {
transform: scale(1.02);
}


.menu {
display: none;
position: absolute;
top: 80px;
right: 0;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 200px;
z-index: 1000;
margin-right:200px;
}

.menu.active {
display: block;
}

.menu h3 {
padding: 10px;
text-align: center;
}

.menu ul {
list-style: none;
padding: 10px 0;
}

.menu ul li {
padding: 10px;
display: flex;
align-items: center;
}

.menu ul li img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.profile img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}



</style>
Expand Down Expand Up @@ -231,7 +336,7 @@ <h2 class="h2 section-title has-underline">

<p class="card-subtitle"></p>

<h3 class="h3 card-title"> "Fall in love on every page"</h3>
<h3 class="h3 card-title"> "Unveil Mystical Worlds"</h3>

<p class="card-text">
</p>
Expand All @@ -244,7 +349,7 @@ <h3 class="h3 card-title"> "Fall in love on every page"</h3>

<p class="card-subtitle"></p>

<h3 class="h3 card-title">"Heartfelt tales of happiness and"</h3>
<h3 class="h3 card-title">"Embark on Magical Quests"</h3>

<p class="card-text">
</p>
Expand All @@ -257,7 +362,7 @@ <h3 class="h3 card-title">"Heartfelt tales of happiness and"</h3>

<p class="card-subtitle"></p>

<h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
<h3 class="h3 card-title">"Immerse in Enchanted Tales"</h3>

<p class="card-text">
</p>
Expand Down Expand Up @@ -489,28 +594,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 +624,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 Expand Up @@ -616,6 +810,7 @@ <h5>SUBSCRIBE TO OUR NEWSLETTER</h5>
"https://translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit">
</script>

<div><a href="#" class="logo">SwapReads</a></div>
<div>
<p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
Expand Down
Loading

0 comments on commit d05611b

Please sign in to comment.