Responsive Fixed Footer with Social Media Icons

Explore this responsive fixed footer design with social media icons, perfect for any modern website. Built with HTML, CSS, and JavaScript, this footer stays fixed at the bottom of the page and adapts seamlessly to all screen sizes.

Wednesday, August 21, 2024
Responsive Fixed Footer with Social Media Icons

Responsive Fixed Footer with Social Media Icons


Introduction:

In this post, I’m excited to share a practical and stylish responsive footer design that I created using HTML, CSS, and JavaScript. This footer is fixed at the bottom of the page, ensuring it’s always visible, no matter the content above it. Additionally, it includes sleek social media icons for easy integration with your brand’s online presence. Whether you’re building a personal blog or a corporate website, this footer is both functional and aesthetically pleasing.

Key Features:

  • Fixed Position: The footer remains anchored at the bottom of the screen, regardless of page scroll.
  • Responsive Design: Adapts to different screen sizes, ensuring a consistent user experience across devices.
  • Dynamic Year Display: Automatically updates the copyright year using JavaScript.
  • Integrated Social Media Icons: Includes FontAwesome icons for popular social platforms, making it easy for users to connect.

Code Breakdown:

This footer is built with clean, semantic HTML, enhanced by flexible CSS for layout and design, and a touch of JavaScript to keep it dynamic. Below is the source code, which you can easily customize to match your project’s branding and requirements.

HTML Code

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Exampletitle>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
head>
<body>
  

  
  <footer>
    <div class="footer-container">
      <div class="footer-left">
        <h2>Company Nameh2>
        <p>1234 Street Name, City, Countryp>
        <p>Email: info@company.com | Phone: +123-456-7890p>
      div>
      <div class="footer-center">
        <ul>
          <li><a href="#">About Usa>li>
          <li><a href="#">Servicesa>li>
          <li><a href="#">Privacy Policya>li>
          <li><a href="#">Terms & Conditionsa>li>
        ul>
      div>
      <div class="footer-right">
        <h3>Follow Ush3>
        <div class="social-icons">
          <a href="#"><i class="fab fa-facebook-f">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-in">i>a>
        div>
      div>
    div>
    <div class="footer-bottom">
      <p>© <span id="year">span> Company Name. All rights reserved.p>
    div>
  footer>

  <script src="script.js">script>
body>
html>

CSS Code

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  
  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 20px;
    flex-wrap: wrap;
  }
  
  .footer-left, .footer-center, .footer-right {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
  }
  
  .footer-left h2, .footer-right h3 {
    margin-bottom: 10px;
  }
  
  .footer-left p {
    margin: 5px 0;
  }
  
  .footer-center ul {
    list-style-type: none;
    padding: 0;
  }
  
  .footer-center ul li {
    margin: 8px 0;
  }
  
  .footer-center ul li a {
    color: #fff;
    text-decoration: none;
  }
  
  .footer-center ul li a:hover {
    text-decoration: underline;
  }
  
  .social-icons a {
    display: inline-block;
    margin: 0 10px;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
  }
  
  .footer-bottom {
    text-align: center;
    padding: 10px 0;
    background-color: #222;
  }
  
  .footer-bottom p {
    margin: 0;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .footer-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .footer-left, .footer-center, .footer-right {
      margin-bottom: 20px;
    }
  }
  
  @media (max-width: 480px) {
    .social-icons a {
      margin: 0 5px;
      font-size: 18px;
    }
  }
 

JavaScript Code

// Set the current year dynamically
document.getElementById("year").textContent = new Date().getFullYear();

PHP Code

No need

Conclusion:

This responsive, fixed footer is a small but essential element that enhances the professionalism and usability of any website. It’s built to be simple to integrate and easy to customize, making it a valuable addition to your web development toolkit. Feel free to download the source code and use it in your projects.

Call to Action:

If you found this helpful, check out my other projects and posts where I explore more ways to improve website design and functionality. Don’t hesitate to reach out if you have any questions or need custom solutions!

Leave a Comment: