Skip to content

Commit

Permalink
Merge pull request #548 from Srujitha-Raghava/newsletter
Browse files Browse the repository at this point in the history 
newsletter is added in footer
  • Loading branch information
@Suchitra-Sahoo
Suchitra-Sahoo authored May 29, 2024
2 parents 69fb252 + ba8c19c commit 9e65f0f
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 107 deletions.
97 changes: 45 additions & 52 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,64 +348,57 @@ <h2>Rate us:</h2>

<footer class="footer">
<div class="footer-grid">
<div class="footer-title">
<h2>AgriLearnNetwork</h2>
<div class="quick-links">
<h2>Quick Links</h2>
<ul>
<li><a href="#home"><p>Home</p></a></li>
<li><a href="#about"><p>About Us</p></a></li>
<li><a href="blogpage.html"><p>Blogs</p></a></li>
<li><a href="#Resource Library"><p>Resource Library</p></a></li>
<li><a href="#contact"><p>Contact Us</p></a></li>
</ul>
</div>
<div class="footer-icons">
<p><b>Follow us on our socials:</b></p>
<div>
<div class="socialIcons">
<a
href="mailto:[email protected]"
class="email-link"
data-tooltip="[email protected]"
><i class="fas fa-envelope"></i
></a>
<a
href="https://www.instagram.com/your_username_here"
target="_blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://twitter.com/your_username_here" target="_blank"
><i class="fa-brands fa-x-twitter"></i
></a>
<a
href="https://www.facebook.com/your_page_or_profile_here"
target="_blank"
><i class="fab fa-facebook"></i
></a>
<a href="mailto:[email protected]" class="email-link" data-tooltip="[email protected]">
<i class="fas fa-envelope"></i>
</a>
<a href="https://www.instagram.com/your_username_here" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://twitter.com/your_username_here" target="_blank">
<i class="fa-brands fa-x-twitter"></i>
</a>
<a href="https://www.facebook.com/your_page_or_profile_here" target="_blank">
<i class="fab fa-facebook"></i>
</a>
</div>

<div class="footer-text">
<p style="font-weight: 600; font-size: 15px">
Copyright &copy;
<script>document.write(new Date().getFullYear());</script>
by AgriLearnNetwork | All Rights Reserved.
</p>
</div>
</div>
</div>
<div class="quick-links">
<h2>Quick Links</h2>
<ul>
<li>
<a href="#home"><p>Home</p></a>
</li>
<li>
<a href="#about"><p>About Us</p></a>
</li>
<li>
<a href="blogpage.html"><p>Blogs</p></a>
</li>
<li>
<a href="#Resource Library"><p>Resource Library</p></a>
</li>
<li>
<a href="#contact"><p>Contact Us</p></a>
</li>
</ul>
</div>
<div class="footer-text footer-right">
<p style="font-weight: 600; font-size: 15px">
Copyright &copy;
<script>
document.write(new Date().getFullYear());
</script>
by AgriLearnNetwork | All Rights Reserved.
</p>
<div class="newsletter">
<h2 style="font-size: 16px;" >Subscribe to Our Newsletter</h2>
<form id="newsletter-form">
<input type="email" placeholder="Enter Email" required />
<button type="submit" class="subscribe-btn" align="right">Subscribe</button>
</form>
<p id="thank-you-message" style="display:none; font-size: 12px;">
Thanks for subscribing!
</p>
<p style="font-size: 13px;">
You'll get an email about once a month.
</p>
</div>
</div>
</footer>


<div id="backtoTop">
<a href="#home"><i class="bx bx-up-arrow-alt"></i></a>
</div>
Expand Down
16 changes: 16 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,22 @@ form.addEventListener('submit', (event) => {

}
});

document.getElementById('subscribe-btn').addEventListener('click', function() {
var email = document.getElementById('email').value;
if(validateEmail(email)) {
// Here you would typically send the email to your server
alert('Thank you for subscribing!');
} else {
alert('Please enter a valid email address.');
}
});

function validateEmail(email) {
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}




Expand Down
151 changes: 96 additions & 55 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1432,23 +1432,32 @@ input[type="number"]::-webkit-inner-spin-button {

.footer {
padding: 20px;
background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('./images/istockphoto-1465642013-170667a.webp');
background-size: cover; /* Ensure the background image covers the entire container */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Prevent the background image from repeating */
color: #fff;
background-color: #191c19;
color: #9aa1a3;
}

.footer-grid {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.quick-links, .newsletter, .footer-text {
flex: 1;
min-width: 200px;
}

.footer-grid {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.quick-links h2, .newsletter h2 {
font-size: 18px;
font-weight: bold;
}


.quick-links ul {
list-style: none;
padding: 0;
}
.footer-title,
.footer-icons,
.footer-iconTop {
Expand Down Expand Up @@ -1487,73 +1496,98 @@ background-color: #a48613;
#backtoTop a i {
font-size: 36px;
color: white;

}
.footer-iconTop a{
display: inline-block;
width: max-content;
padding: 0.8rem;
background: var(--main-color);
border-radius: 0.8rem;
transition: 0.5s ease;

.quick-links ul li {
margin: 10px 0;
}
.footer-iconTop a:hover {
box-shadow: 0 0 1rem var(--main-color);

.quick-links ul li a {
color: #eefcff;
text-decoration: none;
transition: color 0.3s;
}

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

.footer-iconTop a i {
font-size: 2.4rem;
color: var(--second-color);
.newsletter {
max-width: 275px;
margin-bottom: 40px;
margin-left: 75px; /* Existing margin */
margin-right: 60px; /* Added margin to push the section to the right */
font-size: 8px;
}
.socialIcons {

.newsletter form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
flex-direction: column;
margin: 10px 0;
}

.footer-text {
text-align: center;
margin-top: 10px;
.newsletter input[type="email"] {
width: 100%; /* Adjust the width as needed */
margin-bottom: 20px;
padding: 10px; /* Adjusted padding */
padding-left: 80px;
border: 2px solid #3fb547;
border-radius: 50px;
text-align: start;
outline: none;
}

.quick-links {
text-align: center;
width: 50vw;
padding: 20px;
p{
font-weight: bold;
.newsletter .subscribe-btn {
width: 100%; /* Adjust the width as needed */
padding: 10px;
padding-left: 10px;
background-color: #053314;
color: white;
border: 1px solid;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s;
}

.newsletter .subscribe-btn:hover {
background-color: #080808;
}

.newsletter p {
margin: 10px 0 0;
font-size: 10px;
max-width: 300px;
}

.quick-links h2 {
.socialIcons a {
margin: 0 10px;
font-size: 20px;
margin-bottom: 15px;
color: #ecf0f1;
transition: color 0.3s;
align-content: center;
margin-top: 40px;
}

.quick-links ul {
list-style-type: none;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
.socialIcons a:hover {
color: #3498db;
}

.quick-links li {
margin-bottom: 8px;
.footer-text {
text-align: center;
margin: 20px 0;
margin-top: 40px; /* Adds space above the footer text section */
}

.quick-links a {
text-decoration: none;
color: #fff;
transition: color 0.3s ease;
font-size: 1rem;
.footer-text p {
padding-top: 20px;
margin-top: 10px;
margin-right: auto;
}

.quick-links a:hover {
color: #f0f0f0; /* Change color on hover */
text-decoration: underline;
.container {
display: flex;
justify-content: space-between; /* Aligns the newsletter section to the right */
}

@media (max-width: 768px) {
Expand All @@ -1574,3 +1608,10 @@ font-size: 36px;
}
}

#thank-you-message {
color: #ffffff; /* Optional: Customize the color of the thank you message */
font-weight: bold;
padding-left: 75px;
}


0 comments on commit 9e65f0f

Please sign in to comment.