Skip to content

Commit

Permalink
Merge pull request #3272 from Rahul-AkaVector/bug/footer-community-se…
Browse files Browse the repository at this point in the history 
…ction

Footer Section in Community Spotlight Redesigned Properly
  • Loading branch information
@sailaja-adapa
sailaja-adapa authored Oct 12, 2024
2 parents 7f91ac7 + 4cdc79b commit 10148bb
Showing 1 changed file with 100 additions and 77 deletions.
177 changes: 100 additions & 77 deletions comsp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

}
Expand All @@ -942,20 +972,20 @@ <h2>Quick Links</h2>
{
margin-left: 0;
text-align: center;
font-size: 18px;
font-size: 1.8rem;
}
}
</style>
<style>
#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;
}
Expand All @@ -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() {
Expand All @@ -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;
}
Expand All @@ -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>
Expand All @@ -1104,10 +1131,6 @@ <h2>Quick Links</h2>
</div>
</div>





</footer>


Expand Down

0 comments on commit 10148bb

Please sign in to comment.