Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IMPROVEMENT IN FOOTER SECTION OF HOME PAGE #4673

Closed
wants to merge 2 commits into from
Closed

IMPROVEMENT IN FOOTER SECTION OF HOME PAGE #4673

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ca2709
improvement in footer section of home page
dinesh-2047 Nov 5, 2024
7646f7f
improvement in footer section of home page
dinesh-2047 Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
259 changes: 135 additions & 124 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6743,11 +6743,9 @@ <h4>What if I receive a damaged book?</h4>

<!-- FAQ section end -->

<!--
- #FOOTER
-->
<!-- #FOOTER -->

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

Expand Down Expand Up @@ -6806,7 +6804,7 @@ <h4 class="flinks">Contact</h4>
<ul>
<li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')"><i
class="fas fa-globe"></i>
<h4 class="flinks">Literary</h4>
<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>
Expand Down Expand Up @@ -6845,7 +6843,7 @@ <h4 class="flinks">Recommend</h4>
<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>
<h4 class="flinks">T&C</h4>
</a></li>
</ul>
</div>
Expand Down Expand Up @@ -6891,95 +6889,96 @@ <h4 class="flinks">Blogs</h4>
</div>
</div>
<style>
#quicklink{
display: flex;
justify-content: flex-start;
gap:20px;
}
/* Quick Links */

#quicklink {
display: flex;
justify-content: flex-start;
gap: 20px;
}

#quicklink ul {
list-style-type: none;
padding: 0;
}
#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 {
display: flex;
align-items: center;
margin-bottom: 0rem;
}

#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 {
display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
color: rgb(83, 74, 74);
}

#quicklink .foot-quick a i {
margin-right: 0.5rem;
/* Adjust spacing between icon and text */
}
#quicklink .foot-quick a i {
margin-right: 0.5rem;
}

#quicklink .foot-quick a p {
margin: 0;
/* Remove default margins from <p> */
}
#quicklink .foot-quick a p {
margin: 0;
}

.dark-mode #quicklink .foot-quick h4 {
color: #909dc2;
}
.dark-mode #quicklink .foot-quick h4 {
color: #5a7ad3;
}

/* Remove underline on hover for quick links */
#quicklink a:hover {
text-decoration: none;
}

/* Add hover effect for the links to improve interactivity */
#quicklink a:hover {
color: #007bff; /* Change color on hover (example: blue) */
transition: color 0.2s ease; /* Smooth color transition */
}

#quicklinks:hover {
text-decoration: none;
}

.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 */
}
/* Email Input */
.social-icons input[type="email"] {
border: 0.2rem solid #ccc;
border-radius: 0.4rem;
padding: 1rem;
font-size: 1.6rem;
}

#confirmationMessage {
margin-left: 5rem;
font-size: 2.3rem;
color: green;
/* Confirmation Message */
#confirmationMessage {
margin-left: 5rem;
font-size: 2.3rem;
color: green;
}

}
/* Responsive Design for Small Screens */
@media (max-width: 768px) {
#confirmationMessage {
margin-left: 0;
text-align: center;
font-size: 1.8rem;
}
}

/* Confirmation Message Style */
#confirmationmessage {
position: fixed;
top: 20rem; /* Adjusted for better visibility */
right: 1rem;
background-color: green;
color: white;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
z-index: 1000;
display: none;
transition: opacity 0.5s ease; /* Smooth fade-in effect */
}

/* for small screen */
@media (max-width: 768px) {
#confirmationMessage {
margin-left: 0;
text-align: center;
font-size: 1.8rem;
}
}
</style>
<style>
#confirmationmessage {
position: fixed;
top: 42rem;
right: 1rem;
background-color: green;
color: white;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
z-index: 1000;
display: none;
}
</style>


Expand All @@ -7003,36 +7002,48 @@ <h4 class="flinks">Blogs</h4>

</script>
<style>
.subscribe {
background-color: #A30F17;
color: white;
border: none;
padding: 1rem 2rem;
font-size: 1.6rem;
font-family: Arial, sans-serif;
border-radius: 0.5rem;
cursor: pointer;
margin-top: 5px;
}
<style>
.subscribe {
background-color: #A30F17; /* Primary button color */
color: white; /* Text color */
border: none; /* Remove default border */
padding: 1rem 2rem; /* Padding for button */
font-size: 1.6rem; /* Font size */
font-family: Arial, sans-serif; /* Font family */
border-radius: 0.5rem; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
margin-top: 5px; /* Margin at the top */
transition: background-color 0.3s ease, transform 0.1s ease; /* Smooth transitions */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.subscribe:hover {
background-color: #ff6f6f;
}
.subscribe:hover {
background-color: #ff6f6f; /* Lighten button color on hover */
}

.subscribe:active {
transform: scale(0.98);
}
.subscribe:active {
transform: scale(0.95); /* Slightly shrink on click */
}

.subscribe:focus {
outline: none;
}
.subscribe:focus {
outline: none; /* Remove default focus outline */
box-shadow: 0 0 0 4px rgba(255, 111, 111, 0.5); /* Custom focus outline for accessibility */
}

.success-message {
margin-top: 20px;
font-size: 18px;
color: #388e3c;
display: none;
}
.success-message {
margin-top: 20px; /* Space above the message */
font-size: 1.8rem; /* Slightly larger font size */
color: #388e3c; /* Success message color */
display: none; /* Hidden by default */
transition: opacity 0.5s ease; /* Smooth fade-in transition */
opacity: 0; /* Start invisible */
}

.success-message.show {
display: block; /* Show the message */
opacity: 1; /* Fully visible */
}


@media (max-width: 500px) {
.newsletter {
Expand All @@ -7043,24 +7054,24 @@ <h4 class="flinks">Blogs</h4>


<!--<script>
function showSuccessMessage()
{
// Show success message
const successMessage = document.getElementById('successMessage');
successMessage.innerHTML = "Thank you for subscribing!";
successMessage.style.display = 'block';

// Reset the form after 3 seconds
setTimeout(function()
{
document.getElementById('newsletterForm').reset();
successMessage.style.display = 'none';

}, 3000);

return false;
function showConfirmationMessage() {
const form = document.getElementById('newsform');
const confirmationMessage = document.getElementById('confirmationmessage');

confirmationMessage.style.display = 'block'; // Show the confirmation message
confirmationMessage.style.opacity = 1; // Set initial opacity

// Fade out effect after 3 seconds
setTimeout(function() {
confirmationMessage.style.opacity = 0; // Start fading out
setTimeout(function() {
confirmationMessage.style.display = 'none'; // Hide after fade
location.reload(); // Reload the page
}, 500); // Delay to allow fade-out to complete
}, 3000); // Duration before starting to fade out
}


function showSuccessMessage() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
Expand Down