.png)
Get this beautiful footer design. Fully responsive. Free for now. Made by Maclister.com. languages used - HTML, CSS, JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
}
#menu-btn {
transition: transform 0.3s ease-in-out;
}
#menu-btn.open {
transform: rotate(90deg);
}
/* Footer Style */
footer {
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
footer.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="bg-gray-100">
<!-- Your Page Content -->
<!-- Footer Section -->
<footer class="bg-gray-900 text-white py-10">
<div class="max-w-7xl mx-auto px-4 grid md:grid-cols-4 gap-8">
<div>
<h2 class="text-2xl font-bold text-blue-400">Alexis</h2>
<p class="mt-2 text-gray-400">Your one-stop solution for web solutions.</p>
</div>
<div>
<h3 class="text-lg font-semibold text-blue-400">Quick Links</h3>
<ul class="mt-2 space-y-2">
<li><a href="#" class="hover:text-blue-400 transition">Home</a></li>
<li><a href="#" class="hover:text-blue-400 transition">About</a></li>
<li><a href="#" class="hover:text-blue-400 transition">Services</a></li>
<li><a href="#" class="hover:text-blue-400 transition">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-blue-400">Contact</h3>
<ul class="mt-2 space-y-2">
<li><span class="text-gray-400">Email:</span> support@alexis.com</li>
<li><span class="text-gray-400">Phone:</span> +123 456 7890</li>
<li><span class="text-gray-400">Address:</span> 123 Street, City</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-blue-400">Follow Us</h3>
<div class="flex space-x-4 mt-3">
<a href="#" class="text-gray-400 hover:text-blue-400 transition">FB</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition">TW</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition">LN</a>
</div>
</div>
</div>
<div class="mt-8 border-t border-gray-700 text-center pt-4 text-gray-500">
© 2025 Alexis. All rights reserved.
</div>
</footer>
<script>
// Intersection Observer to detect when the footer is visible
document.addEventListener("DOMContentLoaded", function () {
const footer = document.querySelector('footer');
const observerOptions = {
root: null, // observing relative to the viewport
threshold: 0.1 // trigger when 10% of the footer is visible
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
footer.classList.add('visible');
}
});
}, observerOptions);
observer.observe(footer);
});
// Menu Button (if you have a mobile menu)
document.addEventListener("DOMContentLoaded", function () {
const menuBtn = document.getElementById("menu-btn");
const mobileMenu = document.getElementById("mobile-menu");
menuBtn.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
menuBtn.classList.toggle("open");
});
});
</script>
</body>
</html>
.png)
.png)
.png)
.png)