Skip to content

Commit 61fd836

Browse files
akofficial10akofficial10
committed
Add Newsletter with toast
1 parent 5c7c625 commit 61fd836

File tree

1 file changed

+170
-108
lines changed

1 file changed

+170
-108
lines changed

‎index.html‎

Lines changed: 170 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -910,6 +910,76 @@
910910
}
911911
}
912912

913+
/* Newsletter Section */
914+
.newsletter-text {
915+
font-size: 0.95rem;
916+
margin-bottom: 8px;
917+
color: #333;
918+
}
919+
920+
.newsletter-form {
921+
display: flex;
922+
gap: 8px;
923+
align-items: center;
924+
margin-bottom: 0; /* remove extra spacing */
925+
}
926+
927+
.newsletter-input {
928+
flex: 1;
929+
padding: 10px 12px;
930+
border: 1px solid #ccc;
931+
border-radius: 8px;
932+
font-size: 0.9rem;
933+
outline: none;
934+
transition: border 0.3s ease;
935+
}
936+
937+
.newsletter-input:focus {
938+
border-color: #007bff;
939+
}
940+
941+
.newsletter-btn {
942+
padding: 10px 18px;
943+
background: #007bff;
944+
border: none;
945+
border-radius: 8px;
946+
color: #fff;
947+
font-size: 0.9rem;
948+
font-weight: 500;
949+
cursor: pointer;
950+
transition: all 0.3s ease;
951+
}
952+
953+
.newsletter-btn:hover {
954+
background: #0056b3;
955+
transform: translateY(-2px);
956+
}
957+
958+
/* Toast Message */
959+
.toast-msg {
960+
visibility: hidden;
961+
min-width: 220px;
962+
background: #28a745;
963+
color: #fff;
964+
text-align: center;
965+
border-radius: 8px;
966+
padding: 12px;
967+
position: fixed;
968+
bottom: 30px;
969+
right: 30px;
970+
z-index: 9999;
971+
font-size: 0.9rem;
972+
opacity: 0;
973+
transition: opacity 0.5s ease, bottom 0.5s ease;
974+
}
975+
976+
.toast-msg.show {
977+
visibility: visible;
978+
opacity: 1;
979+
bottom: 50px;
980+
}
981+
982+
913983
/*Dark Mode*/
914984

915985
/* Dark Mode Navbar Overrides */
@@ -2002,127 +2072,119 @@ <h2 class="feedback-title text-center mb-3">Feedback & Reviews</h2>
20022072
</div>
20032073
</section>
20042074
<!-- Feedback & Reviews section ends here -->
2005-
<!-- Professional Footer -->
2006-
<footer class="professional-footer">
2007-
<div class="container">
2008-
2009-
<div class="row g-4 py-4">
2010-
<!-- Footer Columns -->
2011-
<div class="col-lg-4 col-md-6">
2012-
<div class="footer-brand">
2013-
<img src="images/Logo.png" alt="GrowCraft Logo" class="footer-logo mb-3">
2014-
<h4 class="brand-name">GrowCraft</h4>
2015-
<p class="brand-description">Empowering businesses with
2016-
innovative digital solutions and creative excellence.</p>
2017-
<div class="quick-stats">
2018-
<div class="stat-item">
2019-
<span class="stat-number">500+</span>
2020-
<span class="stat-label">Projects</span>
2021-
</div>
2022-
<div class="stat-item">
2023-
<span class="stat-number">150+</span>
2024-
<span class="stat-label">Clients</span>
2025-
</div>
2026-
<div class="stat-item">
2027-
<span class="stat-number">5+</span>
2028-
<span class="stat-label">Years</span>
2029-
</div>
2030-
2075+
2076+
<!-- Professional Footer -->
2077+
<footer class="professional-footer">
2078+
<div class="container">
2079+
2080+
<div class="row g-4 py-4">
2081+
<!-- Footer Columns -->
2082+
<div class="col-lg-4 col-md-6">
2083+
<div class="footer-brand">
2084+
<img src="images/Logo.png" alt="GrowCraft Logo" class="footer-logo mb-3">
2085+
<h4 class="brand-name">GrowCraft</h4>
2086+
<p class="brand-description">Empowering businesses with
2087+
innovative digital solutions and creative excellence.</p>
2088+
<div class="quick-stats">
2089+
<div class="stat-item">
2090+
<span class="stat-number">500+</span>
2091+
<span class="stat-label">Projects</span>
2092+
</div>
2093+
<div class="stat-item">
2094+
<span class="stat-number">150+</span>
2095+
<span class="stat-label">Clients</span>
2096+
</div>
2097+
<div class="stat-item">
2098+
<span class="stat-number">5+</span>
2099+
<span class="stat-label">Years</span>
20312100
</div>
20322101
</div>
20332102
</div>
2103+
</div>
20342104

2105+
<!-- Services Links -->
2106+
<div class="col-lg-2 col-md-3 col-6">
2107+
<h5 class="footer-title">Services</h5>
2108+
<ul class="footer-links">
2109+
<li><a href="learn/webdev.html">Web Development</a></li>
2110+
<li><a href="learn/graphic.html">Graphic Design</a></li>
2111+
<li><a href="src/digital-marketing.html">Digital Marketing</a></li>
2112+
<li><a href="learn/contentwriting.html">Content Writing</a></li>
2113+
<li><a href="learn/socialmedia.html">Social Media</a></li>
2114+
<li><a href="learn/cyberanalyst.html">Cyber Analyst</a></li>
2115+
</ul>
2116+
</div>
20352117

2036-
<!-- Services Links -->
2037-
<div class="col-lg-2 col-md-3 col-6">
2038-
<h5 class="footer-title">Services</h5>
2039-
<ul class="footer-links">
2040-
<li><a href="learn/webdev.html">Web Development</a></li>
2041-
<li><a href="learn/graphic.html">Graphic Design</a></li>
2042-
<li><a href="src/digital-marketing.html">Digital Marketing</a></li>
2043-
<li><a href="learn/contentwriting.html">Content Writing</a></li>
2044-
<li><a href="learn/socialmedia.html">Social Media</a></li>
2045-
<li><a href="learn/cyberanalyst.html">Cyber Analyst</a></li>
2046-
</ul>
2047-
</div>
2048-
2049-
<!-- Quick Links -->
2050-
<div class="col-lg-2 col-md-3 col-6">
2051-
<h5 class="footer-title">Quick Links</h5>
2052-
<ul class="footer-links">
2053-
<li><a href="about.html">About Us</a></li>
2054-
<li><a href="#work">Portfolio</a></li>
2055-
<li><a href="src/contact.html">Contact</a></li>
2056-
<li><a href="#careers">Careers</a></li>
2057-
<li><a href="blogListing.html">Blog</a></li>
2058-
</ul>
2059-
</div>
2060-
2061-
<!-- Contact -->
2062-
<div class="col-lg-4 col-md-6">
2063-
<h5 class="footer-title">Get In Touch</h5>
2064-
<div class="contact-info mb-3">
2065-
<div class="contact-item">
2066-
<i class="fas fa-envelope"></i>
2067-
<a href="mailto:info@growcraft.com">info@growcraft.com</a>
2068-
</div>
2069-
<div class="contact-item">
2070-
<i class="fas fa-phone"></i>
2071-
<a href="tel:+919999999999">+91 999 999 999</a>
2072-
</div>
2073-
<div class="contact-item">
2074-
<i class="fas fa-map-marker-alt"></i>
2075-
<span>ABC Street, XYZ City, India</span>
2076-
</div>
2077-
</div>
2078-
<div class="social-section">
2079-
<h6 class="social-title">Follow Us</h6>
2080-
<div class="social-links">
2081-
<a target="_blank" href="https://facebook.com" class="social-link" aria-label="Facebook">
2082-
<i class="fab fa-facebook-f"></i>
2083-
</a>
2084-
<a target="_blank" href="https://instagram.com" class="social-link" aria-label="Instagram">
2085-
<i class="fab fa-instagram"></i>
2086-
</a>
2087-
<a target="_blank" href="https://linkedin.com" class="social-link" aria-label="LinkedIn">
2088-
<i class="fab fa-linkedin-in"></i>
2089-
</a>
2090-
<a target="_blank" href="https://github.com" class="social-link" aria-label="GitHub">
2091-
<i class="fab fa-github"></i>
2092-
</a>
2093-
<a target="_blank" href="https://twitter.com" class="social-link" aria-label="Twitter">
2094-
<i class="fab fa-twitter"></i>
2095-
</a>
2118+
<!-- Quick Links -->
2119+
<div class="col-lg-2 col-md-3 col-6">
2120+
<h5 class="footer-title">Quick Links</h5>
2121+
<ul class="footer-links">
2122+
<li><a href="about.html">About Us</a></li>
2123+
<li><a href="#work">Portfolio</a></li>
2124+
<li><a href="src/contact.html">Contact</a></li>
2125+
<li><a href="#careers">Careers</a></li>
2126+
<li><a href="blogListing.html">Blog</a></li>
2127+
</ul>
2128+
</div>
20962129

2097-
</div>
2098-
</div>
2130+
<!-- Newsletter (Right Side) -->
2131+
<div class="col-lg-4 col-md-6 d-flex flex-column justify-content-between">
2132+
<div>
2133+
<h5 class="footer-title">Newsletter</h5>
2134+
<p class="newsletter-text">Subscribe to our newsletter for the latest updates.</p>
2135+
<form class="newsletter-form" onsubmit="showToast(event)">
2136+
<input type="email" id="newsletterEmail" class="newsletter-input" placeholder="Enter your email" required>
2137+
<button type="submit" class="newsletter-btn">Subscribe</button>
2138+
</form>
20992139
</div>
2140+
<!-- Toast -->
2141+
<div id="newsletterToast" class="toast-msg">✅ Subscribed Successfully!</div>
21002142
</div>
2101-
<!-- End Footer Main Container -->
2102-
<!-- End Footer -->
2103-
2104-
<!-- Footer Bottom -->
2105-
<div class="footer-bottom">
2106-
<div class="container">
2107-
<div class="row align-items-center py-3">
2108-
<div class="col-md-6">
2109-
<p class="copyright mb-0">© <span id="currentYear"></span>
2110-
<strong>GrowCraft</strong>. All rights reserved.
2111-
</p>
2112-
</div>
2113-
<div class="col-md-6">
2114-
<div class="footer-nav">
2115-
<a href="#privacy">Privacy</a>
2116-
<a href="#terms">Terms</a>
2117-
<a href="#sitemap">Sitemap</a>
2118-
</div>
2143+
</div>
2144+
<!-- End Footer Main Container -->
2145+
2146+
<!-- Footer Bottom -->
2147+
<div class="footer-bottom">
2148+
<div class="container">
2149+
<div class="row align-items-center py-3">
2150+
<div class="col-md-6">
2151+
<p class="copyright mb-0">© <span id="currentYear"></span>
2152+
<strong>GrowCraft</strong>. All rights reserved.
2153+
</p>
2154+
</div>
2155+
<div class="col-md-6">
2156+
<div class="footer-nav">
2157+
<a href="#privacy">Privacy</a>
2158+
<a href="#terms">Terms</a>
2159+
<a href="#sitemap">Sitemap</a>
21192160
</div>
21202161
</div>
21212162
</div>
21222163
</div>
21232164
</div>
2124-
</footer>
2125-
<!-- Professional Footer ends -->
2165+
</div>
2166+
</footer>
2167+
<!-- Professional Footer ends -->
2168+
2169+
<script>
2170+
function showToast(event) {
2171+
event.preventDefault();
2172+
const emailInput = document.getElementById("newsletterEmail");
2173+
if (!emailInput.value) return; // just in case
2174+
2175+
const toast = document.getElementById("newsletterToast");
2176+
toast.classList.add("show");
2177+
2178+
// clear the email field
2179+
emailInput.value = "";
2180+
2181+
setTimeout(() => {
2182+
toast.classList.remove("show");
2183+
}, 3000);
2184+
}
2185+
</script>
2186+
2187+
21262188

21272189
<!-- Enhanced Scroll to Top Button -->
21282190
<button id="backToTop" title="Go to top" type="button">

0 commit comments

Comments
 (0)