Component:

Footer Marketing Dark

Name: Footer Marketing Dark
Availability: InStock

Free

Tags: Footer Page Section Navigation Marketing Dark

Colors:

Description:

This carefully crafted Footer component is perfect for Marketing landing pages, featuring a Dark design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Footer Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions