From fe337e839d233f12877a53caa6ddf56cb4884861 Mon Sep 17 00:00:00 2001
From: Devika Harshey <cse22_devikaharshey@ggct.co.in>
Date: Sun, 10 Nov 2024 14:57:30 +0530
Subject: [PATCH] Updated "Quick Links" again

I've updated "Quick Links" again according to the suggestions received and the section looks even better now. And it's responsive too!
---
 index.html | 161 ++++++++++++++++++++++++++---------------------------
 1 file changed, 80 insertions(+), 81 deletions(-)

diff --git a/index.html b/index.html
index f1581c8d..e855f0bf 100644
--- a/index.html
+++ b/index.html
@@ -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>
@@ -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>