<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Footer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<!-- Footer -->
<footer class="bg-gray-800 text-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Links Column -->
<div>
<h2 class="text-xl font-semibold">Quick Links</h2>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<!-- Form Column -->
<div>
<h2 class="text-xl font-semibold">Subscribe</h2>
<form class="mt-4">
<label for="email" class="block text-sm text-gray-400">Email:</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 mt-1 bg-gray-700 text-gray-100 border border-gray-600 rounded focus:outline-none focus:border-blue-500" placeholder="Enter your email">
<button type="submit" class="mt-3 w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Subscribe</button>
</form>
</div>
<!-- Image Cover Card Column -->
<div>
<h2 class="text-xl font-semibold">Featured Post</h2>
<div class="mt-4">
<div class="bg-cover bg-center h-48" style="background-image: url('https://via.placeholder.com/300');"></div>
<h3 class="mt-4 text-lg font-semibold">Amazing Blog Post</h3>
<p class="mt-2 text-gray-400">This is a summary of an amazing blog post that you should read.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:underline">Read more</a>
</div>
</div>
<!-- Social Icons Column -->
<div>
<h2 class="text-xl font-semibold">Follow Us</h2>
<div class="mt-4 flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="mt-8 border-t border-gray-700 pt-8 text-center">
<p class="text-gray-400">© 2024 Your Blog Name. All rights reserved.</p>
<p class="text-gray-400">Designed by Your Name.</p>
</div>
</div>
</footer>
<!-- FontAwesome for social icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>
Blog Footer Overview
Welcome to the footer section of our blog! This area is designed to enhance your browsing experience and provide you with essential information and features. Here’s what you can find:
Quick Links
Easily navigate through our site with the Quick Links section. It includes links to important pages such as:
- Home: Return to the main page.
- About: Learn more about our mission and team.
- Blog: Explore our latest articles and insights.
- Contact: Get in touch with us for any inquiries.
Subscribe
Stay updated with our latest content by subscribing to our newsletter! Enter your email address in the Subscribe form and click the button to receive updates directly in your inbox.
Featured Post
Check out our Featured Post! This section highlights an amazing blog post with a captivating image, a brief summary, and a link to read more. It’s a great way to discover popular content that you might have missed.
Follow Us
Connect with us on social media! The Follow Us section provides icons linking to our profiles on various platforms, including Facebook, Twitter, Instagram, and LinkedIn. Stay in touch and engage with our community.
Additional Information
At the bottom of the footer, you will find copyright information and design credits. This ensures that all content is properly attributed and gives a nod to the creative efforts behind the blog.
This structure ensures a clean and modern footer design for a blog, enhancing both functionality and aesthetics
We hope you find this footer informative and helpful as you explore our blog!