Learning how to create a static footer with CSS is the perfect final step in any HTML CSS website project — a well-designed footer provides essential navigation (home, about, contact), social proof (icons linking to profiles), legal info (copyright), and a polished finish that stays visible at the bottom of the viewport no matter how long the page scrolls. In this hands-on guide (Section 7 and final part of our full HTML CSS website project series), you’ll build the demonstration site’s sticky/static footer: fixed bottom bar with left-side menu links, right-side social media icons, hover effects, and responsive layout.

This tutorial completes your single-page portfolio/resume website — you now have a fully functional, professional-looking site built with only HTML and CSS.

Prerequisites

  • Your css-practice project folder from previous lessons (with all prior sections: header, about me, projects, experience, education/skills, quote already added)
    • index.html
    • css/styles.css
    • images/ folder
  • Three small social icons (recommended 40–60px):
    • Save them as github.jpeg, twitter.jpeg, email.jpeg in images/
  • Visual Studio Code with Live Server extension (highly recommended)
  • Modern browser (Chrome/Edge/Firefox)

1. Add Footer HTML Structure

Open index.html and add the following code just before the closing </body> tag (after your last section):

				
					<!-- Section 7: Footer -->
<footer class="footer">
    <div class="footer-container">
        <!-- Left: Menu Links -->
        <div class="footer-left">
            <a href="index.html" class="footer-menu">Home</a>
            <a href="#about" class="footer-menu">About</a>
            <a href="#projects" class="footer-menu">Projects</a>
            <a href="#experience" class="footer-menu">Experience</a>
            <a href="#contact" class="footer-menu">Contact</a>
        </div>

        <!-- Right: Social Icons -->
        <div class="footer-right">
            <a href="https://github.com/yourusername" target="_blank" rel="noopener">
                <img fetchpriority="high" loading="eager" decoding="async" src="https://www.progressiverobot.com/images/github.jpeg" alt="GitHub profile" class="footer-icon" title="How to Create Static Footer with CSS – Fixed Bottom Bar Tutorial 2025–2026 5">
            </a>
            <a href="https://twitter.com/yourusername" target="_blank" rel="noopener">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Twitter profile" class="footer-icon" title="How to Create Static Footer with CSS – Fixed Bottom Bar Tutorial 2025–2026 6" data-lazy-src="https://www.progressiverobot.com/images/twitter.jpeg"><noscript><img loading="lazy" decoding="async" src="https://www.progressiverobot.com/images/twitter.jpeg" alt="Twitter profile" class="footer-icon" title="How to Create Static Footer with CSS – Fixed Bottom Bar Tutorial 2025–2026 6"></noscript>
            </a>
            <a href="mailto:your@email.com">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Email contact" class="footer-icon" title="How to Create Static Footer with CSS – Fixed Bottom Bar Tutorial 2025–2026 7" data-lazy-src="https://www.progressiverobot.com/images/email.jpeg"><noscript><img loading="lazy" decoding="async" src="https://www.progressiverobot.com/images/email.jpeg" alt="Email contact" class="footer-icon" title="How to Create Static Footer with CSS – Fixed Bottom Bar Tutorial 2025–2026 7"></noscript>
            </a>
        </div>
    </div>

    <p class="footer-copyright">© 2026 Zain – Built with HTML & CSS</p>
</footer>

Notes for beginners:

  • <footer> — semantic tag for bottom content (accessibility & SEO)
  • .footer-container — flex wrapper for left/right alignment
  • .footer-left — menu links (personalise hrefs later)
  • .footer-right — social icons (update links & alt text)
  • .footer-copyright — simple centered copyright notice

2. Style Static Footer with CSS

Open css/styles.css and add these rules at the very bottom:

				
					/* === Footer – Static / Fixed Bottom Bar === */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #d0daee;      /* light blue from demo */
  padding: 20px 40px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* Flex container for left/right content */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* Left: Menu Links */
.footer-left a.footer-menu {
  color: #112d4e;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  margin-right: 35px;
  transition: color 0.3s ease;
}

.footer-left a.footer-menu:hover {
  color: #fe0;                    /* yellow hover from demo */
}

/* Right: Social Icons */
.footer-right {
  display: flex;
  align-items: center;
  gap: 25px;
}

.footer-icon {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.footer-icon:hover {
  transform: scale(1.15);
  background-color: #fe0;
  border-radius: 8px;
  padding: 5px;
}

/* Copyright Notice */
.footer-copyright {
  text-align: center;
  color: #666;
  font-size: 0.95rem;
  margin-top: 12px;
}

Save and refresh — you should now see:

  • Fixed light-blue footer bar at bottom of viewport
  • Left-side menu links (Home, About, Projects, etc.)
  • Right-side social icons with hover scale + yellow background
  • Centered copyright text

Scroll the page — footer stays fixed at bottom (static position).

3. Make It Responsive & Mobile-Friendly

Add media query for small screens:

				
					@media (max-width: 768px) {
  .footer {
    padding: 15px 20px;
  }

  .footer-container {
    flex-direction: column;
    gap: 15px;
  }

  .footer-left {
    text-align: center;
  }

  .footer-left a.footer-menu {
    margin: 0 15px;
    font-size: 1rem;
  }

  .footer-right {
    justify-content: center;
  }

  .footer-icon {
    width: 36px;
    height: 36px;
  }
}

Now footer stacks vertically on phones/tablets — clean and readable.

4. Best Practices & Modern Tips (2025–2026)

  • Use position: fixed for true sticky footer — always visible
  • Add z-index: 1000 so footer stays above other content
  • Use gap in flex containers — modern & clean spacing
  • Ensure icons have meaningful alt text (accessibility)
  • Add backdrop-filter: blur(8px) for glass effect (modern look):
 
				
					backdrop-filter: blur(8px);
background-color: rgba(208, 218, 238, 0.85);
  • Include privacy policy/contact link in footer for legal reasons

How to Create Static Footer with CSS – FAQ (2025–2026)

  1. How do I create static footer with CSS?
    position: fixed; bottom: 0; width: 100%; on .footer
  2. How do I make footer stay at bottom when content is short?
    position: fixed always keeps it at bottom; use Flexbox on body for content push-down on long pages.
  3. How do I add social icons in footer with CSS?
    <img> tags inside <a> with width: 40px; transition: transform 0.3s;
  4. How do I make footer responsive with CSS?
    Media query + flex-direction: column on mobile.
  5. What’s the best hover effect for footer icons with CSS?
    transform: scale(1.15); background-color: #fe0; border-radius: 8px;

Summary

You now know exactly how to create static footer with CSS: fixed bottom bar, left menu links, right social icons, hover effects, copyright notice, and responsive stacking.

Mastering how to create static footer with CSS completes your website with a polished, always-visible footer — essential for navigation, branding, and professionalism.

Congratulations! You’ve now built the full HTML CSS website project — header, about me, projects, experience, education/skills, quote, and sticky footer. Your site is complete and ready to customise or deploy.

Contact Us