Skip to content

Commit

Permalink
Updated "Quick Links" again
Browse files Browse the repository at this point in the history 
I've updated "Quick Links" again according to the suggestions received and the section looks even better now. And it's responsive too!
  • Loading branch information
@devikaharshey
devikaharshey committed Nov 10, 2024
1 parent 7d4d973 commit fe337e8
Showing 1 changed file with 80 additions and 81 deletions.
161 changes: 80 additions & 81 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6856,102 +6856,102 @@ <h4>What if I receive a damaged book?</h4>
<h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>

<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>
<div class="quicklink-item">
<i class="fas fa-home"></i>
<h4 class="flinks">Home</h4>
</div>
</a>
</div>
<div class="quicklink-item">
<a href="#benefits" onclick="lenis.scrollTo('#benefits')">
<i class="fas fa-book"></i>
<h4 class="flinks">Benefits</h4>
<div class="quicklink-item">
<i class="fas fa-book"></i>
<h4 class="flinks">Benefits</h4>
</div>
</a>
</div>
<div class="quicklink-item">
<a href="#pricing" onclick="lenis.scrollTo('#pricing')">
<i class="fas fa-dollar-sign"></i>
<h4 class="flinks">Pricing</h4>
<div class="quicklink-item">
<i class="fas fa-dollar-sign"></i>
<h4 class="flinks">Pricing</h4>
</div>
</a>
</div>
<div class="quicklink-item">
<a href="#contact" onclick="lenis.scrollTo('#contact')">
<i class="fas fa-envelope"></i>
<h4 class="flinks">Contact</h4>
<div class="quicklink-item">
<i class="fas fa-envelope"></i>
<h4 class="flinks">Contact</h4>
</div>
</a>
</div>
<div class="quicklink-item">
<a href="#chapters" onclick="lenis.scrollTo('#chapters')">
<i class="fas fa-globe"></i>
<h4 class="flinks">Literary</h4>
<div class="quicklink-item">
<i class="fas fa-globe"></i>
<h4 class="flinks">Literary</h4>
</div>
</a>
</div>
<div class="quicklink-item">
<a href="#faqq" onclick="lenis.scrollTo('#faqq')">
<i class="fas fa-question-circle"></i>
<h4 class="flinks">FAQ</h4>
<div class="quicklink-item">
<i class="fas fa-question-circle"></i>
<h4 class="flinks">FAQ</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fas fa-exchange-alt"></i>
<h4 class="flinks">Swap</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fas fa-file-pdf"></i>
<h4 class="flinks">E-Book</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fas fa-info-circle"></i>
<h4 class="flinks">About</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fas fa-bookmark"></i>
<h4 class="flinks">Recommend</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fa-solid fa-sitemap"></i>
<h4 class="flinks">Site Map</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fas fa-file-alt"></i>
<h4 class="flinks">T & C</h4>
</div>
</a>
</div>
<div class="quicklink-item">
<a href="/chatt.html">
<i class="fa-solid fa-message"></i>
<h4 class="flinks">Community Chat</h4>
<div class="quicklink-item">
<i class="fa-solid fa-message"></i>
<h4 class="flinks">Community Chat</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fa-solid fa-book-open-reader"></i>
<h4 class="flinks">Read Later</h4>
</div>
</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>
<div class="quicklink-item">
<i class="fa-solid fa-users"></i>
<h4 class="flinks">Reader Connection</h4>
</div>
</a>
</div>
<div class="quicklink-item">
<a href="assets/html/blog.html">
<i class="fas fa-book"></i>
<h4 class="flinks">Blogs</h4>
<div class="quicklink-item">
<i class="fas fa-book"></i>
<h4 class="flinks">Blogs</h4>
</div>
</a>
</div>
</div>

</div>
Expand All @@ -6962,49 +6962,48 @@ <h4 class="flinks">Blogs</h4>
<style>
#quicklinks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
grid-template-columns: repeat(4, minmax(80px, 1fr));
gap: 10px;
margin-top: 10px;
}

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

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

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

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

@media (max-width: 768px) {
#quicklinks {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, minmax(80px, 1fr));
}
}

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

0 comments on commit fe337e8

Please sign in to comment.