Simple Fixed Footer

INFORMATION & CODE

Simple Fixed Footer

What It Does

The provided code creates a fixed, modern, and responsive website footer that "floats" at the bottom of the screen as the user scrolls. It acts as a comprehensive site-navigation and branding panel, packed with standard footer elements including internal links (Home, Contact, Menu), legal links (Terms & Conditions, Privacy Policy, Cookie Policy), social media share buttons powered by FontAwesome, a copyright notice, and a company logo. Additionally, the CSS includes responsive media queries so that the layout gracefully adapts and rearranges itself for smaller mobile screens.

How It Works

The code is divided into two main parts: the structural HTML markup and the styling/layout CSS.

HTML Structure: The HTML document loads essential external resources in the <head>, including Google Fonts and external libraries for jQuery and FontAwesome (which provides the icons for the social media buttons). Inside the <body>, a semantic <footer> element wraps all the footer contents. This container is split into an inner grid (.footer-inner) containing navigation links and social buttons, followed by a copyright span and a hosted company logo image.
CSS Styling & Layout:

Fixed Positioning: The <footer> uses position:fixed combined with bottom: 40px and a high z-index: 9999. This ensures the footer floats 40 pixels above the bottom of the browser window and stays on top of all other page content.
Grid System: The .footer-inner container utilizes CSS Grid (display: grid) with three columns (1fr 1fr 2fr) to organize the navigation boxes and social media sharing box neatly side-by-side.
Interactivity: The social media buttons (.share-btn) feature hover and active pseudo-classes (:hover and :active). When hovered, they display a soft shadow, and when clicked, they simulate a physical button press by shifting downward (transform: translatey(+4px)).
Responsiveness: A @media query triggers when the screen width drops to 780 pixels or less. It dynamically adjusts font sizes, tightens margins, shrinks the logo, and repositions the logo to the horizontal center of the footer to prevent overlapping on mobile devices.

How to Use It

To use this code on your own website, follow these steps:

Combine the Code: Create an HTML file (e.g., index.html) and paste the HTML snippet inside the <body> tags. Make sure to include the <head> contents in your document's <head> section so that the FontAwesome icons and jQuery load correctly.
Add the CSS: Wrap the provided CSS code inside <style> ... </style> tags within your HTML's <head>, or paste it directly into an external stylesheet (e.g., style.css) and link it to your HTML file using <link rel="stylesheet" href="style.css">.
Customize the Content:

Replace the # in the href="#" attributes with your actual webpage URLs (e.g., href="contact.html").
Change the image source (src="...") in the <img> tag to point to your own company logo.

Test the Layout: Open the HTML file in any web browser. Scroll up and down to see the fixed floating footer in action, and resize your browser window to test the responsive mobile layout.

HTML


                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Fixed Banner</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Molle&family=Oleo+Script&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/9c37986c06.js" crossorigin="anonymous"></script>
  
  </head>
  <body>
    <footer>
      <div class="footer-inner">
        <div class="navBox">
          <a href="#">Home</a>
          <a href="#">Contact</a>
          <a href="#">Menu</a>
        </div>
        <div class="byLaw">
          <a href="#">Terms & conditions</a>
          <a href="#">Privacy Policy</a>
          <a href="#">Cookie Policy</a>
        </div>
        <div class="share-box">
          <button class="share-btn"><i class="fab fa-twitter"></i></button>
          <button class="share-btn"><i class="fab fa-facebook"></i></button>
          <button class="share-btn"><i class="fab fa-pinterest"></i></button>
          <button class="share-btn"><i class="fab fa-snapchat"></i></button>
          <button class="share-btn"><i class="fab fa-linkedin"></i></button>
        </div>
      </div>
      <span>© example co September 2022</span>
      <img src ="https://e-nash.net/e-nash-images/fake_logo.png" class="footer-logo" width="80"> 
    </footer>
  </body>
</html>

CSS


                      * {
        box-sizing: border-box;
        font-family: "Press Start 2P", VT323, cursive;
      }

      body {
        height: 98.5vh;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-color);
        font-size: 16px;
        line-height: 1.5;
      } 
                  
      footer {
        position: fixed;
        bottom: 40px;
        width: calc(100% - 40px);
        max-width: 650px;
        height: 130px;
        background-color: #000;
        border-top: 2px solid #0a0;
        z-index: 9999
      }
      
      .footer-inner {
        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        gap: 15px;
      }
      
      .navBox a,
      .byLaw a {
        display: block;
        margin: 5px 0 0 30px;
        color: #0a0;
        font-family: "Courier New", monospace;
        font-size: 12px;
      }
      
      .share-box {
        display: block;
        width: 100%;
        margin: 60px 0 0 70px;
      }
      
      .share-btn {
        display: inline-block;
        width: 24px;
        height: 24px;
        padding: 4px 4px;
        margin: 10px 5px 0;
        background-color: transparent;
        border: 0;
        border-radius: 50%;
        color: #37f;
        font-size: 16px;
        transition-duration: 0.2s;
      }
      
      .share-btn:nth-child(1) {
        color: #58f;
      }
      
      .share-btn:nth-child(3) {
        color: #d00;
      }
      
      .share-btn:nth-child(4) {
        color: #e0ee49;
      }
      
      .share-btn:hover {
        box-shadow: 0 5px 5px #aaaaaa, 0 0 2px #aaaaaa;
      }
      
      .share-btn:active {
        box-shadow: 0 0 1px #000000;
        transform: translatey(+4px);
      }
      
      .span {
        color: #fff;
        font-family: "Courier New", monospace;
        font-size: 12px;
        text-align: center;
      }
      
      .footer-logo {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 50px;
        border-radius: 50%;
      }

      @media(max-width: 780px) {
        .navBox a,
        .byLaw a {
          margin: 10px 0 0 7px;
          font-size: 12px
        }
        
        .share-box {
          width: 216px;
          margin: 10px 10px;
        }
        
        .share-btn {
          width: 30px;
          height: 30px;
          font-size: 24px;
          margin:  0 5px;
        }
        
        .span {
          font-size: 10px
        }
        
        .footer-logo {
          top: 10px;
          right: 50%;
          transform: translatex(+50%);
          width: 40px;
        }
      }

MENU

INFORMATION & CODE