Skip to content

Commit

Permalink
Updated the "Quick Links"
Browse files Browse the repository at this point in the history 
I've applied grid styling to the quick links. This is not only responsive but also looks better than before now.
  • Loading branch information
@devikaharshey
devikaharshey committed Nov 9, 2024
1 parent 7a8e0b5 commit 7d4d973
Showing 1 changed file with 139 additions and 175 deletions.
314 changes: 139 additions & 175 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6711,9 +6711,9 @@ <h4>What if I receive a damaged book?</h4>
</style>

<script>
function showSuccessMessage() {
function showSuccessMessage(){
// Show success message
const successMessage = document.createElement('div');
const successMessage = document.createElement('div');
successMessage.id = 'successMessage';
successMessage.innerHTML = "Thank you for subscribing!";
successMessage.style.display = 'block';
Expand All @@ -6731,11 +6731,11 @@ <h4>What if I receive a damaged book?</h4>
// Reset the form after 3 seconds
setTimeout(function() {
document.getElementById('newsletterForm').reset();
successMessage.style.display = 'none';
}, 3000);
successMessage.style.display = 'none';
}, 3000);

return false;
}
}

// Attach the function to the form submission
document.getElementById('newsletterForm').addEventListener('submit', function(e) {
Expand All @@ -6760,8 +6760,8 @@ <h4>What if I receive a damaged book?</h4>


<script>
document.addEventListener('DOMContentLoaded', () => {
const faqContainers = document.querySelectorAll('.faq-container');
document.addEventListener('DOMContentLoaded', () => {
const faqContainers = document.querySelectorAll('.faq-container');

faqContainers.forEach(faq => {
const question = faq.querySelector('.question');
Expand Down Expand Up @@ -6854,193 +6854,157 @@ <h4>What if I receive a damaged book?</h4>
</p>
<div class="foot-middle">
<h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
<div id="quicklinks" class="row">
<div class="col-md-2">
<ul>
<li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')"><i
class="fas fa-home"></i>
<h4 class="flinks">Home</h4>
</a></li>
<li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')"><i
class="fas fa-book"></i>
<h4 class="flinks">Benefits</h4>
</a></li>
</ul>

<div id="quicklinks">
<div class="quicklink-item">
<a href="#home" onclick="lenis.scrollTo('#home')">
<i class="fas fa-home"></i>
<h4 class="flinks">Home</h4>
</a>
</div>
<div class="col-md-2">
<ul>
<li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')"><i
class="fas fa-dollar-sign"></i>
<h4 class="flinks">Pricing</h4>
</a></li>
<li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')"><i
class="fas fa-envelope"></i>
<h4 class="flinks">Contact</h4>
</a></li>
</ul>
<div class="quicklink-item">
<a href="#benefits" onclick="lenis.scrollTo('#benefits')">
<i class="fas fa-book"></i>
<h4 class="flinks">Benefits</h4>
</a>
</div>
<div class="col-md-2">
<ul>
<li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')"><i
class="fas fa-globe"></i>
<h4 class="flinks">Literary</h4>
</a></li>
<li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')"><i
class="fas fa-question-circle"></i>
<h4 class="flinks">FAQ</h4>
</a></li>
</ul>
<div class="quicklink-item">
<a href="#pricing" onclick="lenis.scrollTo('#pricing')">
<i class="fas fa-dollar-sign"></i>
<h4 class="flinks">Pricing</h4>
</a>
</div>
<div class="col-md-2">
<ul>
<li class="foot-quick"><a href="./assets/html/booklistswap.html"
onclick="lenis.scrollTo('#contact')"><i class="fas fa-exchange-alt"></i>
<h4 class="flinks">Swap</h4>
</a></li>
<li class="foot-quick"><a href="./assets/html/freeBooks.html"
onclick="lenis.scrollTo('#contact')"><i class="fas fa-file-pdf"></i>
<h4 class="flinks">E-Book</h4>
</a></li>
</ul>
<div class="quicklink-item">
<a href="#contact" onclick="lenis.scrollTo('#contact')">
<i class="fas fa-envelope"></i>
<h4 class="flinks">Contact</h4>
</a>
</div>
<div class="col-md-2">
<ul>
<li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')"><i
class="fas fa-info-circle"></i>
<h4 class="flinks">About</h4>
</a></li>
<li class="foot-quick"><a href="./assets/html/book_recommend.html"
onclick="lenis.scrollTo('#contact')"><i class="fas fa-bookmark"></i>
<h4 class="flinks">Recommend</h4>
</a></li>
</ul>
<div class="quicklink-item">
<a href="#chapters" onclick="lenis.scrollTo('#chapters')">
<i class="fas fa-globe"></i>
<h4 class="flinks">Literary</h4>
</a>
</div>
<div>
<ul>
<li class="foot-quick"><a href="/sitemap.html" onclick="lenis.scrollTo('#contact')"><i
class="fa-solid fa-sitemap"></i>
<h4 class="flinks">Site Map</h4>
</a></li>
<li class="foot-quick"><a href="./terms&cond.html"> <i class="fas fa-file-alt"></i>
<h4 class="flinks">Terms and<br>Conditions</h4>
</a></li>
</ul>
<div class="quicklink-item">
<a href="#faqq" onclick="lenis.scrollTo('#faqq')">
<i class="fas fa-question-circle"></i>
<h4 class="flinks">FAQ</h4>
</a>
</div>
<div class="quicklink-item">
<a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">
<i class="fas fa-exchange-alt"></i>
<h4 class="flinks">Swap</h4>
</a>
</div>
<div class="quicklink-item">
<a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')">
<i class="fas fa-file-pdf"></i>
<h4 class="flinks">E-Book</h4>
</a>
</div>
<div class="quicklink-item">
<a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')">
<i class="fas fa-info-circle"></i>
<h4 class="flinks">About</h4>
</a>
</div>
<div class="quicklink-item">
<a href="./assets/html/book_recommend.html" onclick="lenis.scrollTo('#contact')">
<i class="fas fa-bookmark"></i>
<h4 class="flinks">Recommend</h4>
</a>
</div>
<div class="quicklink-item">
<a href="/sitemap.html" onclick="lenis.scrollTo('#contact')">
<i class="fa-solid fa-sitemap"></i>
<h4 class="flinks">Site Map</h4>
</a>
</div>
<div class="quicklink-item">
<a href="./terms&cond.html">
<i class="fas fa-file-alt"></i>
<h4 class="flinks">Terms and<br>Conditions</h4>
</a>
</div>
<div class="quicklink-item">
<a href="/chatt.html">
<i class="fa-solid fa-message"></i>
<h4 class="flinks">Community Chat</h4>
</a>
</div>
<div class="quicklink-item">
<a href="assets/html/read_later.html">
<i class="fa-solid fa-book-open-reader"></i>
<h4 class="flinks">Read Later</h4>
</a>
</div>
<div class="quicklink-item">
<a href="assets/html/ConnReader.html">
<i class="fa-solid fa-users"></i>
<h4 class="flinks">Reader Connection</h4>
</a>
</div>
<div class="quicklink-item">
<a href="assets/html/blog.html">
<i class="fas fa-book"></i>
<h4 class="flinks">Blogs</h4>
</a>
</div>
</div>

<div id="quicklink" class="row">
<div>
<ul>
<li class="foot-quick"><a href="/chatt.html"><i class="fa-solid fa-message"></i>
<h4 class="flinks">Community Chat</h4>
</a></li>
</ul>
</div>

<div>
<ul>
<li class="foot-quick"><a href="assets/html/read_later.html"><i class="fa-solid fa-book-open-reader"></i>
<h4 class="flinks">Read Later</h4>
</a></li>
</ul>
</div>

<div>
<ul>
<li class="foot-quick"><a href="assets/html/ConnReader.html"><i class="fa-solid fa-users"></i>
<h4 class="flinks">Reader Connection</h4>
</a></li>
</ul>
</div>
<div>
<ul>
<li class="foot-quick"><a href="assets/html/blog.html"><i class="fas fa-book"></i>
<h4 class="flinks">Blogs</h4>
</a></li>
</ul>
</div>

</div>


</div>
</div>

</div>
</div>
<style>
#quicklink{
#quicklinks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}

.quicklink-item {
display: flex;
justify-content: flex-start;
gap:20px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
text-align: center;
background-color: #f9f9f9;
transition: background-color 0.3s ease;
}

#quicklink ul {
list-style-type: none;
padding: 0;
}

#quicklink .foot-quick {
display: flex;
align-items: center;
margin-bottom: 0rem;
/* Adjust spacing between list items */
}

#quicklink .foot-quick a {
display: flex;
flex-direction: row;
/* Ensure icon and text are in a row */
align-items: center;
/* Vertically center-align the icon and text */
text-decoration: none;
color: rgb(83, 74, 74);
/* Adjust link color as needed */
}

#quicklink .foot-quick a i {
margin-right: 0.5rem;
/* Adjust spacing between icon and text */
}

#quicklink .foot-quick a p {
margin: 0;
/* Remove default margins from <p> */
}

.dark-mode #quicklink .foot-quick h4 {
color: #909dc2;
}



#quicklinks:hover {
text-decoration: none;

.quicklink-item:hover {
background-color: #ececec;
}

.social-icons input[type="email"] {
border: 0.2rem solid #ccc;
/* Gray border */
border-radius: 0.4rem;
/* Rounded corners */
padding: 1rem;
/* Inner padding */
font-size: 1.6rem;
/* Font size */

.quicklink-item i {
font-size: 24px;
color: #555;
margin-bottom: 5px;
}

#confirmationMessage {
margin-left: 5rem;
font-size: 2.3rem;
color: green;


.quicklink-item h4 {
font-size: 14px;
color: #333;
margin: 0;
}

/* for small screen */

@media (max-width: 768px) {
#confirmationMessage {
margin-left: 0;
text-align: center;
font-size: 1.8rem;
#quicklinks {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
#quicklinks {
grid-template-columns: 1fr;
}
}
</style>
Expand Down

0 comments on commit 7d4d973

Please sign in to comment.