<!--
@type: Footer
@industry: Marketing
@style: Dark
@category: Page Section, Navigation, Contact
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.dark-footer {
background-color: var(--color-gray-900);
color: var(--color-white);
border-top: 1px solid var(--color-gray-800);
}
.footer-container {
max-width: 80rem;
margin: 0 auto;
padding: 3rem 1rem;
}
@media (min-width: 640px) {
.footer-container {
padding: 3rem 1.5rem;
}
}
@media (min-width: 1024px) {
.footer-container {
padding: 4rem 2rem;
}
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.company-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.company-title {
font-size: 1.25rem;
font-weight: 600;
}
.company-description {
color: var(--color-gray-300);
font-size: 0.875rem;
line-height: 1.625;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
color: var(--color-gray-400);
transition: color 0.2s;
}
.social-link:hover {
color: var(--color-white);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
}
.footer-section h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-link {
color: var(--color-gray-300);
font-size: 0.875rem;
text-decoration: none;
transition: color 0.2s;
}
.footer-link:hover {
color: var(--color-white);
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.newsletter-description {
color: var(--color-gray-300);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.email-input {
width: 100%;
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-600);
border-radius: 0.5rem;
padding: 0.75rem 1rem;
color: var(--color-white);
font-size: 0.875rem;
}
.email-input::placeholder {
color: var(--color-gray-400);
}
.email-input:focus {
outline: none;
border-color: var(--color-blue-500);
}
.subscribe-button {
width: 100%;
background-color: var(--color-blue-600);
color: var(--color-white);
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: background-color 0.2s;
font-size: 0.875rem;
}
.subscribe-button:hover {
background-color: var(--color-blue-700);
}
.subscribe-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-500), 0 0 0 4px var(--color-gray-900);
}
.bottom-bar {
border-top: 1px solid var(--color-gray-800);
}
.bottom-container {
max-width: 80rem;
margin: 0 auto;
padding: 1.5rem 1rem;
}
@media (min-width: 640px) {
.bottom-container {
padding: 1.5rem;
}
}
@media (min-width: 1024px) {
.bottom-container {
padding: 1.5rem 2rem;
}
}
.bottom-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.bottom-content {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0;
}
}
.copyright {
color: var(--color-gray-400);
font-size: 0.875rem;
}
.policy-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
.policy-link {
color: var(--color-gray-400);
font-size: 0.875rem;
text-decoration: none;
transition: color 0.2s;
}
.policy-link:hover {
color: var(--color-white);
}
</style>
<section class="dark-footer">
<!-- Main Footer -->
<div class="footer-container">
<div class="footer-grid">
<!-- Company Info -->
<div class="company-info">
<h2 class="company-title">MarketingPro</h2>
<p class="company-description">
Transforming businesses through innovative digital marketing strategies. We help brands grow and succeed in the digital age.
</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Visit our Facebook page">
<img src="https://landinggo.com/assets/img/stock/login/facebook.svg" alt="Facebook" class="social-icon">
</a>
<a href="#" class="social-link" aria-label="Follow us on Twitter">
<img src="https://landinggo.com/assets/img/stock/login/twitter.svg" alt="Twitter" class="social-icon">
</a>
<a href="#" class="social-link" aria-label="Connect with us on LinkedIn">
<img src="https://landinggo.com/assets/img/stock/login/linkedin.svg" alt="LinkedIn" class="social-icon">
</a>
</div>
</div>
<!-- Services -->
<div class="footer-section">
<h3>Services</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link">Digital Strategy</a></li>
<li><a href="#" class="footer-link">Content Marketing</a></li>
<li><a href="#" class="footer-link">SEO Optimization</a></li>
<li><a href="#" class="footer-link">Social Media</a></li>
<li><a href="#" class="footer-link">Analytics & Reports</a></li>
</ul>
</div>
<!-- Company -->
<div class="footer-section">
<h3>Company</h3>
<ul class="footer-links">
<li><a href="#" class="footer-link">About Us</a></li>
<li><a href="#" class="footer-link">Careers</a></li>
<li><a href="#" class="footer-link">Case Studies</a></li>
<li><a href="#" class="footer-link">Blog</a></li>
<li><a href="#" class="footer-link">Contact</a></li>
</ul>
</div>
<!-- Newsletter -->
<div class="footer-section">
<h3>Stay Updated</h3>
<p class="newsletter-description">Subscribe to our newsletter for the latest marketing insights.</p>
<form class="newsletter-form">
<div>
<input type="email" id="email" name="email" required
class="email-input"
placeholder="Enter your email">
</div>
<button type="submit" class="subscribe-button">
Subscribe
</button>
</form>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="bottom-bar">
<div class="bottom-container">
<div class="bottom-content">
<div class="copyright">
© 2025 MarketingPro. All rights reserved.
</div>
<div>
<ul class="policy-links">
<li><a href="#" class="policy-link">Privacy Policy</a></li>
<li><a href="#" class="policy-link">Terms of Service</a></li>
<li><a href="#" class="policy-link">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Footer
@industry: Marketing
@style: Dark
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 text-white border-t border-gray-800">
<!-- Main Footer -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
<!-- Company Info -->
<div class="space-y-6">
<h2 class="text-xl font-semibold">MarketingPro</h2>
<p class="text-gray-300 text-sm leading-relaxed">
Transforming businesses through innovative digital marketing strategies. We help brands grow and succeed in the digital age.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors" aria-label="Visit our Facebook page">
<img src="https://landinggo.com/assets/img/stock/login/facebook.svg" alt="Facebook" class="w-5 h-5">
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors" aria-label="Follow us on Twitter">
<img src="https://landinggo.com/assets/img/stock/login/twitter.svg" alt="Twitter" class="w-5 h-5">
</a>
<a href="#" class="text-gray-400 hover:text-white transition-colors" aria-label="Connect with us on LinkedIn">
<img src="https://landinggo.com/assets/img/stock/login/linkedin.svg" alt="LinkedIn" class="w-5 h-5">
</a>
</div>
</div>
<!-- Services -->
<div>
<h3 class="text-lg font-semibold mb-6">Services</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Digital Strategy</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Content Marketing</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">SEO Optimization</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Social Media</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Analytics & Reports</a></li>
</ul>
</div>
<!-- Company -->
<div>
<h3 class="text-lg font-semibold mb-6">Company</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">About Us</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Careers</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Case Studies</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Blog</a></li>
<li><a href="#" class="text-gray-300 hover:text-white transition-colors text-sm">Contact</a></li>
</ul>
</div>
<!-- Newsletter -->
<div>
<h3 class="text-lg font-semibold mb-6">Stay Updated</h3>
<p class="text-gray-300 text-sm mb-4">Subscribe to our newsletter for the latest marketing insights.</p>
<form class="space-y-4">
<div>
<label for="email" class="sr-only">Email address</label>
<input type="email" id="email" name="email" required
class="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 transition-colors"
placeholder="Enter your email">
</div>
<button type="submit"
class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900">
Subscribe
</button>
</form>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div class="md:flex md:items-center md:justify-between">
<div class="text-gray-400 text-sm">
© 2025 MarketingPro. All rights reserved.
</div>
<div class="mt-4 md:mt-0">
<ul class="flex space-x-6 text-sm text-gray-400">
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-white transition-colors">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
