Skip to content

Commit

Permalink
Updated the "Quick Links" again
Browse files Browse the repository at this point in the history 
According to the suggestions received, I've again updated "Quick Links" and it looks much better now. It not only is responsive but also adds to better user experience.
  • Loading branch information
@devikaharshey
devikaharshey committed Nov 10, 2024
1 parent 1bdb1bc commit ca64a9c
Showing 1 changed file with 137 additions and 174 deletions.
311 changes: 137 additions & 174 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6854,193 +6854,156 @@ <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>
<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>
<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>
<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>
<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>
<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>
</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 id="quicklinks">
<a href="#home" onclick="lenis.scrollTo('#home')">
<div class="quicklink-item">
<i class="fas fa-home"></i>
<h4 class="flinks">Home</h4>
</div>
</a>
<a href="#benefits" onclick="lenis.scrollTo('#benefits')">
<div class="quicklink-item">
<i class="fas fa-book"></i>
<h4 class="flinks">Benefits</h4>
</div>
</a>
<a href="#pricing" onclick="lenis.scrollTo('#pricing')">
<div class="quicklink-item">
<i class="fas fa-dollar-sign"></i>
<h4 class="flinks">Pricing</h4>
</div>
</a>
<a href="#contact" onclick="lenis.scrollTo('#contact')">
<div class="quicklink-item">
<i class="fas fa-envelope"></i>
<h4 class="flinks">Contact</h4>
</div>
</a>
<a href="#chapters" onclick="lenis.scrollTo('#chapters')">
<div class="quicklink-item">
<i class="fas fa-globe"></i>
<h4 class="flinks">Literary</h4>
</div>
</a>
<a href="#faqq" onclick="lenis.scrollTo('#faqq')">
<div class="quicklink-item">
<i class="fas fa-question-circle"></i>
<h4 class="flinks">FAQ</h4>
</div>
</a>
<a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">
<div class="quicklink-item">
<i class="fas fa-exchange-alt"></i>
<h4 class="flinks">Swap</h4>
</div>
</a>
<a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')">
<div class="quicklink-item">
<i class="fas fa-file-pdf"></i>
<h4 class="flinks">E-Book</h4>
</div>
</a>
<a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')">
<div class="quicklink-item">
<i class="fas fa-info-circle"></i>
<h4 class="flinks">About</h4>
</div>
</a>
<a href="./assets/html/book_recommend.html" onclick="lenis.scrollTo('#contact')">
<div class="quicklink-item">
<i class="fas fa-bookmark"></i>
<h4 class="flinks">Recommend</h4>
</div>
</a>
<a href="/sitemap.html" onclick="lenis.scrollTo('#contact')">
<div class="quicklink-item">
<i class="fa-solid fa-sitemap"></i>
<h4 class="flinks">Site Map</h4>
</div>
</a>
<a href="./terms&cond.html">
<div class="quicklink-item">
<i class="fas fa-file-alt"></i>
<h4 class="flinks">T & C</h4>
</div>
</a>
<a href="/chatt.html">
<div class="quicklink-item">
<i class="fa-solid fa-message"></i>
<h4 class="flinks">Community Chat</h4>
</div>
</a>
<a href="assets/html/read_later.html">
<div class="quicklink-item">
<i class="fa-solid fa-book-open-reader"></i>
<h4 class="flinks">Read Later</h4>
</div>
</a>
<a href="assets/html/ConnReader.html">
<div class="quicklink-item">
<i class="fa-solid fa-users"></i>
<h4 class="flinks">Reader Connection</h4>
</div>
</a>
<a href="assets/html/blog.html">
<div class="quicklink-item">
<i class="fas fa-book"></i>
<h4 class="flinks">Blogs</h4>
</div>
</a>
</div>

</div>
</div>

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

.quicklink-item {
display: flex;
justify-content: flex-start;
gap:20px;
flex-direction: row;
align-items: center;
padding: 6px 10px;
border: 2px solid #e0e0e0;
border-radius: 8px;
background-color: #b42555;
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: #ff1074;
}

.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: 16px;
color: #ffffff;
margin-right: 6px;
}

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

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

/* for small screen */

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

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

0 comments on commit ca64a9c

Please sign in to comment.