→ Anonymous
→ Dark Horizontal Footer with Brand Logo a...

Dark Horizontal Footer with Brand Logo and Social Links

A horizontal footer with dark color scheme featuring a brand logo, navigation links, and social media icons for website completion.

This Example is contributed by Anonymous, on 11-May-2025. It is responsive.

Footer Social Media Navigation Dark Mode

Author Anonymous

Fork Fullscreen

<footer class="footer">
  <div class="footer-container">
    <div class="footer-brand">
      <a href="#" class="footer-logo">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <rect width="40" height="40" rx="8" fill="#4F46E5"/>
          <path d="M20 10L28 18L20 26L12 18L20 10Z" fill="white"/>
        </svg>
        <span>BrandName</span>
      </a>
      <p class="copyright">© 2023 BrandName. All rights reserved.</p>
    </div>
    
    <nav class="footer-nav">
      <div class="nav-group">
        <h3>Company</h3>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">News</a></li>
        </ul>
      </div>
      
      <div class="nav-group">
        <h3>Resources</h3>
        <ul>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Documentation</a></li>
          <li><a href="#">Help Center</a></li>
        </ul>
      </div>
      
      <div class="nav-group">
        <h3>Legal</h3>
        <ul>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Cookie Policy</a></li>
        </ul>
      </div>
    </nav>
    
    <div class="social-links">
      <h3>Connect with us</h3>
      <div class="social-icons">
        <a href="#" aria-label="Facebook">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
        </a>
        <a href="#" aria-label="Twitter">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
        </a>
        <a href="#" aria-label="Instagram">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
        </a>
        <a href="#" aria-label="LinkedIn">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Related Examples

Dark Mode Four Column Footer
A dark-themed footer component featuring four columns, sitemap links, brand logo, and social media icons. Ideal for modern websites.

Author:
Anika

5 months ago
Footer with App Download Buttons and Branding
A professional website footer featuring app download buttons, brand logo, sitemap links, and social media connections for enhanced user engagement.

Author:
Janna Pineda

4 months ago
Dark Footer with Newsletter Subscription
A sleek dark-themed footer component featuring a newsletter subscription form, brand logo, and essential site links. Perfect for engaging users and capturing leads.

Author:
M. Johnson

5 months ago
Responsive Social Media Footer for Websites

Author:
Melissa Chen

2 months ago
Minimalist Modern Footer Design

Author:
Anonymous

4 months ago
Basic Footer with Social media Icons
A clean, light-themed horizontal footer featuring a brand logo, sitemap links, and social media icons. Ideal for any modern website.

Author:
Anonymous

5 months ago
Simple Modern Footer with Call-to-Action Button
A lightweight, responsive footer with a prominent call-to-action button, perfect for enhancing conversion rates on any website.

Author:
Julian Parker

4 months ago
Responsive Footer with Social Media Links
A fully responsive footer design that adapts beautifully to all screen sizes, featuring multiple columns of content, social media links, and a newsletter signup form.

Author:
Morgan Reynolds

4 months ago
Modern Multi-Column Responsive Website Footer
A fully responsive footer component with multi-column layout featuring company information, navigation links, subscription form, and social media integration.

Author:
Bishnu Thapa

4 months ago
Modern eCommerce Footer with Multiple Sections

Author:
Alex Morgan

4 months ago
Footer Subscription Form with Contact Details

Author:
Alisha Patel

4 months ago
Website Footer with Rich Background Design

Author:
Anonymous

3 months ago

Didn't find component you were looking for?

Search from 500+ components