→ Morgan Reynolds
→ Responsive Footer with Social Media Link...

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.

This Example is contributed by Morgan Reynolds, on 25-Mar-2025. It is responsive.

Footer Social Media Contact Form Multi-column

Author Morgan Reynolds

Fork Fullscreen

<footer class="footer">
  <div class="footer-content">
    <div class="footer-section about">
      <h2 class="logo-text">Company Name</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit tristique, lobortis purus id, iaculis nibh.
      </p>
      <div class="contact">
        <span><i class="fas fa-phone"></i> &nbsp; 123-456-789</span>
        <span><i class="fas fa-envelope"></i> &nbsp; info@company.com</span>
      </div>
      <div class="socials">
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-linkedin"></i></a>
      </div>
    </div>

<div class="footer-section links">
      <h2>Quick Links</h2>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>

<div class="footer-section contact-form">
      <h2>Contact Us</h2>
      <form action="#" method="post">
        <input type="email" name="email" class="text-input contact-input" placeholder="Your email address...">
        <textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
        <button type="submit" class="btn btn-primary">Send</button>
      </form>
    </div>
  </div>

<div class="footer-bottom">
    <p>&copy; 2023 Company Name | All rights reserved</p>
  </div>
</footer>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Related Examples

Responsive Footer with Multi-Column Layout
A clean, responsive footer design with multiple columns for navigation, contact information, and social media links that adapts beautifully to all screen sizes.

Author:
Bishnu Thapa

3 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

3 months ago
Website Footer with Rich Background Design

Author:
Anonymous

2 months ago
Minimalist Modern Footer Design

Author:
Anonymous

3 months ago
Multi-Column Footer with Image Gallery and Social Links

Author:
Aiden Mercer

2 months ago
Responsive Social Media Footer for Websites

Author:
Melissa Chen

1 month 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

3 months ago
Footer Subscription Form with Contact Details

Author:
Alisha Patel

3 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

3 months ago
CSS footer

Author:
Anonymous

1 month 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

4 months ago
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.

Author:
Anonymous

1 month ago

Didn't find component you were looking for?

Search from 500+ components