From 4cdc79b8371ad697713a1aa87762f3aed7593cb0 Mon Sep 17 00:00:00 2001
From: Rahul-AkaVector <rahulpathania160404@gmail.com>
Date: Fri, 11 Oct 2024 23:47:40 +0530
Subject: [PATCH] Footer Community Section Redesigned Properly

---
 comsp.html | 177 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 100 insertions(+), 77 deletions(-)

diff --git a/comsp.html b/comsp.html
index 30019d5a..eaa5512b 100644
--- a/comsp.html
+++ b/comsp.html
@@ -873,65 +873,95 @@ <h4 style="color: maroon;">Mark Brown</h4>
         </section>  
 
     </main>
+
     <footer class="ff">
       <div class="foot-top">
         <div class="foot-left">
   
           <div class="desc">
-  
             <div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
             <div>
-              <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
-                lovers
-                seeking to swap and
-  
-                discover new literary gems.
+              <p style="text-align: justify; color: black;" class="description">
+                SwapReads.com is the ultimate destination for book lovers seeking to swap and discover new literary gems.
                 Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
-                the
-                world of literature—all on one convenient platform. Join us and dive into a universe of endless
-                possibilities!
+                the world of literature—all on one convenient platform. Join us and dive into a universe of endless possibilities!
               </p>
             </div>
+            
   
           </div>
         </div>
         <div class="foot-middle">
-          <h2>Quick Links</h2>
-          <div id="quicklinks" class="row">
-            <div class="col-md-6">
-              <ul>
-                <li class="foot-quick" style="color: white;"><a href="#home" onclick="lenis.scrollTo('#home')"><p class="flinks">Home</p></a></li>
-                <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')"> <p class="flinks">Benefits</p></a></li>
-                <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')"><p class="flinks">Literary</p></a></li>
-                <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')"><p class="flinks">Pricing</p> </a></li>
-                <li class="foot-quick"><a href="./assets/html/bookrecommend.html" onclick="lenis.scrollTo('#contact')"><p class="flinks">Recommend</p></a></li>
+          <h2 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
+          <div id="quicklinks" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem;">
+            <div>
+              <ul style="list-style: none; padding: 0;">
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-home" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./index.html#home" style="color: #374151; text-decoration: none;">Home</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-book" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./index.html#benefits" style="color: #374151; text-decoration: none;">Benefits</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-globe" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./index.html#chapters" style="color: #374151; text-decoration: none;">Literary</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-dollar-sign" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./index.html#pricing" style="color: #374151; text-decoration: none;">Pricing</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-bookmark" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./assets/html/bookrecommend.html" style="color: #374151; text-decoration: none;">Recommend</a>
+                </li>
               </ul>
             </div>
-            <div class="col-md-6">
-              <ul>
-                <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')"><p class="flinks">Swap</p> </a></li>
-                <li class="foot-quick"><a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')"> <p class="flinks">E-Book</p></a></li>
-                <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')"> <p class="flinks">About</p></a></li>
-                <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')"><p class="flinks">Contact</p> </a></li>
-                <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')"> <p class="flinks">FAQ</p></a></li>
+            <div>
+              <ul style="list-style: none; padding: 0;">
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-exchange-alt" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./assets/html/booklistswap.html" style="color: #374151; text-decoration: none;">Swap</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-file-pdf" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./assets/html/freeBooks.html" style="color: #374151; text-decoration: none;">E-Book</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-info-circle" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./assets/html/about.html" style="color: #374151; text-decoration: none;">About</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-envelope" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./index.html#contact" style="color: #374151; text-decoration: none;">Contact</a>
+                </li>
+                <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
+                  <i class="fas fa-question-circle" style="color: #374151; margin-right: 4px;"></i>
+                  <a href="./index.html#faqq" style="color: #374151; text-decoration: none;">FAQ</a>
+                </li>
               </ul>
             </div>
           </div>
         </div>
         
+        
+        
+        
+        
   
           <style>
             .social-icons input[type="email"] 
             {
-                border: 2px solid #ccc; /* Gray border */
-                border-radius: 4px; /* Rounded corners */
-                padding: 10px; /* Inner padding */
-                font-size: 16px; /* Font size */
+                border: 0.2rem solid #ccc; /* Gray border */
+                border-radius: 0.4rem; /* Rounded corners */
+                padding: 1rem; /* Inner padding */
+                font-size: 1.6rem; /* Font size */
             }
             #confirmationMessage
             {
-              margin-left: 50px;
-              font-size: 23px;
+              margin-left: 5rem;
+              font-size: 2.3rem;
               color: green;
   
             }
@@ -942,7 +972,7 @@ <h2>Quick Links</h2>
               {
                   margin-left: 0;
                   text-align: center;
-                  font-size: 18px;
+                  font-size: 1.8rem;
               }
           }
           </style>
@@ -950,12 +980,12 @@ <h2>Quick Links</h2>
             #confirmationmessage {
       position: fixed;
       top: 42rem;
-      right: 10px;
+      right: 1rem;
       background-color: green;
       color: white;
-      padding: 10px;
-      border-radius: 5px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      padding: 1rem;
+      border-radius: 0.5rem;
+      box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
       z-index: 1000;
       display: none;
   }
@@ -965,15 +995,6 @@ <h2>Quick Links</h2>
   
   
   
-       <div>
-        <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
-        <div class="row-flex display-flex">
-          <form action="#" class="subscribe-form" id="subscribeForm">
-            <input type="email" id="emailInput" placeholder="Email Address" class="finput" style="margin-bottom: 10px; margin-top: 10px;" required>
-            <button type="submit" id="subscribeButton" class="subscribe" class="b">SUBSCRIBE</button>
-          </form>
-        </div>
-      </div>
       
     <script>
     function showConfirmationMessage() {
@@ -1000,10 +1021,10 @@ <h2>Quick Links</h2>
     background-color: #A30F17;
     color: white; 
     border: none; 
-    padding: 10px 20px; 
-    font-size: 16px; 
+    padding: 1rem 2rem; 
+    font-size: 1.6rem; 
     font-family: Arial, sans-serif;
-    border-radius: 5px; 
+    border-radius: 0.5rem; 
     cursor: pointer; 
     transition: background-color 0.3s, transform 0.2s;
   }
@@ -1023,63 +1044,69 @@ <h2>Quick Links</h2>
   
   </style>
   
-  
+          <div class="foot-right">
+          <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem;">Stay Connected</h2>
+          <form id="newsform" onsubmit="return showConfirmationMessage();">
+              <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
+              <div class="row-flex display-flex">
+                  <input class="finput" type="email" id="new-email" name="email" placeholder="Email address"
+                        pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.com$"
+                        title="Please enter a valid email address that ends with '.com'" required>
+                  <input type="submit" value="Subscribe" name="subscribe" class="subscribe" id="subs">
+              </div>
+          </form>
+          <div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
           <div class="icons">
-
+            <!-- Discord icon -->
             <a href="https://www.discord.com/" target="_blank">
-             <div class="icon">
-                 <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+              <div class="icon">
+                <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
               </div>
             </a>
+          
+            <!-- LinkedIn icon -->
             <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
               <div class="icon">
-                <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+                <i class="fab fa-linkedin" title="LinkedIn" style="cursor: pointer;"></i>
               </div>
             </a>
-  
+          
+            <!-- Facebook icon -->
             <a href="https://www.facebook.com/" target="_blank">
               <div class="icon">
                 <i class="fab fa-facebook" title="Facebook" style="cursor: pointer;"></i>
               </div>
             </a>
-  
+          
+            <!-- X (formerly Twitter) icon -->
             <a href="https://x.com/anuragverma_108" target="_blank">
               <div class="icon">
-                <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
+                <i class="fab fa-twitter" title="X" style="cursor: pointer;"></i>
               </div>
             </a>
-  
+          
+            <!-- Instagram icon -->
             <a href="https://www.instagram.com/">
               <div class="icon" id="insta-icon">
-                <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
+                <i class="fab fa-instagram" title="Instagram" style="cursor: pointer;"></i>
               </div>
             </a>
-  
-  
+          
+            <!-- YouTube icon -->
             <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
               <div class="icon">
                 <i class="fab fa-youtube" style="cursor: pointer;"></i>
               </div>
             </a>
-  
-  
-  
+          
+            <!-- GitHub icon -->
             <a href="https://github.com/anuragverma108">
               <div class="icon">
-                <i class="fab fa-github" title="Github"></i>
+                <i class="fab fa-github" title="GitHub"></i>
               </div>
             </a>
-           
-  
           </div>
          </div>
-         <div>
-          <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
-            <button class="Btn">
-              <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
-            <p class="text">Back to Top</p>
-            </button>
-          </div>
         </div>
   
         </div>
@@ -1104,10 +1131,6 @@ <h2>Quick Links</h2>
       </div>
       </div>
   
-     
-  
-  
-  
     </footer>