Skip to content

Commit

Permalink
Merge pull request #3572 from shriyadindi/footer-section
Browse files Browse the repository at this point in the history 
Changed the UI of the footer
  • Loading branch information
@sailaja-adapa
sailaja-adapa authored Oct 16, 2024
2 parents 9750e0b + 9923e48 commit 386b95a
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 109 deletions.
144 changes: 70 additions & 74 deletions footer1.css
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,71 @@
.swapreads-container {
display: flex;
justify-content: space-between;
background-color: #f28b82;
padding: 40px;
border-radius: 15px;
max-width: 1000px;
margin: 0 auto;
font-family: Arial, sans-serif;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.swapreads-content {
flex: 2;
padding-right: 30px;
}

.swapreads-content h1 {
font-size: 2.5em;
font-weight: bold;
color: #000;
}

.swapreads-content p {
font-size: 1.2em;
line-height: 1.8;
color: #4a4a4a;
text-align: justify;
}

.quick-links {
flex: 1;
padding-left: 20px;
}

.quick-links h3 {
font-size: 1.6em;
font-weight: bold;
color: #000;
}

.quick-links ul {
list-style: none;
padding: 0;
}

.quick-links ul li {
margin-bottom: 15px;
}

.quick-links ul li a {
text-decoration: none;
color: #4a4a4a;
font-size: 1.1em;
display: flex;
align-items: center;
}

.quick-links ul li a i {
margin-right: 10px;
font-size: 1.3em;
color: #8b0000;
}

.quick-links ul li a:hover {
color: #b22222;
}




display: flex;
justify-content: space-between;
background-color: linear-gradient(135deg,#cf9aff,#95c0ff);
padding: 40px;
border-radius: 15px;
max-width: 1000px;
margin: 0 auto;
font-family: Arial, sans-serif;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.swapreads-content {
flex: 2;
padding-right: 30px;
}

.swapreads-content h1 {
font-size: 2.5em;
font-weight: bold;
color: #000;
}

.swapreads-content p {
font-size: 1.2em;
line-height: 1.8;
color: #4a4a4a;
text-align: justify;
}

.quick-links {
flex: 1;
padding-left: 20px;
}

.quick-links h3 {
font-size: 1.6em;
font-weight: bold;
color: #000;
}

.quick-links ul {
list-style: none;
padding: 0;
}

.quick-links ul li {
margin-bottom: 15px;
}

.quick-links ul li a {
text-decoration: none;
color: #4a4a4a;
font-size: 1.1em;
display: flex;
align-items: center;
}

.quick-links ul li a i {
margin-right: 10px;
font-size: 1.3em;
color: #8b0000;
}

.quick-links ul li a:hover {
color: #b22222;
}
5 changes: 5 additions & 0 deletions footer1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ <h3>Quick Links</h3>
</div>
</div>
</div>
<style>
.swapreads-container{
background-color: linear-gradient(135deg,#cf9aff,#95c0ff);;
}
</style>
<script>
// Coordinates for the cursor
const coords = { x: 0, y: 0 };
Expand Down
85 changes: 50 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,12 +179,13 @@

}#quicklinks {
display: flex;
justify-content: space-between; /* Ensures columns are evenly spaced */
justify-content:space-between; /* Ensures columns are evenly spaced */
padding-right: 8px;
}

#quicklinks .col-md-6 ul {
#quicklinks .col-md-2 ul {
list-style-type: none;
padding: 0;
padding: 2px;
}

#quicklinks .foot-quick {
Expand Down Expand Up @@ -1572,9 +1573,11 @@
width: 4rem;
height: 15rem;

}#quicklinks {
}
#quicklinks {
display: flex;
justify-content: space-between; /* Ensures columns are evenly spaced */
justify-content: space-between;
/* Ensures columns are evenly spaced */
}

#quicklinks .col-md-6 ul {
Expand All @@ -1585,7 +1588,8 @@
#quicklinks .foot-quick {
display: flex;
align-items: center;
margin-bottom: 1rem; /* Adjust spacing between list items */
margin-bottom: 0rem;
/* Adjust spacing between list items */
}

#quicklinks .foot-quick a {
Expand Down Expand Up @@ -5785,7 +5789,7 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
- #FOOTER
-->

<footer class="ff">
<footer class="ff" style="background-color: #f0c8c1;">
<div class="foot-top">
<div class="foot-left">

Expand All @@ -5807,49 +5811,60 @@ <h4>How do I ensure the safety and security of my personal information on SwapRe
"https://translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit">
</script>
<div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
<div class="SwapReads" style="margin-right: 120px;"><a href="#" class="logo">SwapReads</a></div>
<div>
<p style="text-align: justify;margin-left: 30px; " 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
<p style="text-align: justify;" 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!
</p>
</div>

</div>
</div>
<div class="foot-middle">
<h2 style="margin-left: 0rem; margin-top: 2.75rem;">Quick Links</h2>
<div class="foot-middle">
<h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
<div id="quicklinks" class="row">
<div class="col-md-6">
<div class="col-md-2">
<ul>
<li class="foot-quick" style="color: white;"><a href="#home" onclick="lenis.scrollTo('#home')"><i class="fas fa-home"></i><p class="flinks">Home</p></a></li>
<li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')"><i class="fas fa-book"></i> <p class="flinks">Benefits</p></a></li>
<li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')"><i class="fas fa-globe"></i> <p class="flinks">Literary</p></a></li>
<li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')"><i class="fas fa-dollar-sign"></i><p class="flinks">Pricing</p> </a></li>
<li class="foot-quick"><a href="./assets/html/bookrecommend.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-bookmark"></i><p class="flinks">Recommend</p></a></li>
<li class="foot-quick"><a href="/terms&cond.html"> <i class="fas fa-file-alt"></i><p class="flinks">Terms and Conditions</p></a></li>
<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-6">
<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><p class="flinks">Swap</p> </a></li>
<li class="foot-quick"><a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-file-pdf"></i> <p class="flinks">E-Book</p></a></li>
<li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-info-circle"></i> <p class="flinks">About</p></a></li>
<li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')"><i class="fas fa-envelope"></i><p class="flinks">Contact</p> </a></li>
<li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')"><i class="fas fa-question-circle"></i> <p class="flinks">FAQ</p></a></li>
<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/bookrecommend.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="/terms&cond.html"> <i class="fas fa-file-alt"></i><h4 class="flinks">Terms and<br>Conditions</h4></a></li>
</ul>
</div>
</div>
</div>

</div>

</div>
</div>
<style>
#quicklinks:hover{
text-decoration: none;
}
.social-icons input[type="email"]
{
border: 0.2rem solid #ccc; /* Gray border */
Expand Down

0 comments on commit 386b95a

Please sign in to comment.