→ Bishnu Thapa
→ Responsive Footer with Multi-Column Layo...

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.

This Example is contributed by Bishnu Thapa, on 20-Mar-2025. It is responsive.

Footer Contact Form

Author Bishnu Thapa

Fork Fullscreen

<footer class="footer-container">
  <div class="footer-content">
    <div class="footer-section about">
      <h2 class="footer-title">About Us</h2>
      <p>We are a company dedicated to providing exceptional products and services to our customers worldwide.</p>
      <div class="contact">
        <span><i class="fas fa-map-marker-alt"></i> 123 Street, City, Country</span>
        <span><i class="fas fa-envelope"></i> info@example.com</span>
        <span><i class="fas fa-phone"></i> +1 234 567 8900</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 class="footer-title">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 class="footer-title">Contact Us</h2>
      <form action="#" method="post">
        <input type="email" name="email" class="contact-input" placeholder="Your email address...">
        <textarea name="message" class="contact-input" placeholder="Your message..."></textarea>
        <button type="submit" class="btn">Send</button>
      </form>
    </div>
  </div>
  
  <div class="footer-bottom">
    <p>&copy; 2023 Company Name. All rights reserved.</p>
  </div>
</footer>

Related Examples