Modern Footer

About this module

A complete four-column footer with brand, link groups, social icons and a bottom bar.

Installation

1. 1

   Create the files

   Create `index.html` and `style.css` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the section markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <footer class="mh-footer">
     <div class="mh-container mh-footer-grid">
       <div class="mh-brand-col">
         <span class="mh-brand">✦ ModuleHarbor</span>
         <p>Your harbor for production-ready developer modules. Built for developers, by developers.</p>
       </div>
       <div class="mh-col"><b>Explore</b><a href="#">Components</a><a href="#">Sections</a><a href="#">Animations</a><a href="#">Shopify</a></div>
       <div class="mh-col"><b>Resources</b><a href="#">Docs</a><a href="#">API</a><a href="#">Changelog</a><a href="#">Roadmap</a></div>
       <div class="mh-col"><b>Company</b><a href="#">About</a><a href="#">Submit module</a><a href="#">Contact</a><a href="#">GitHub</a></div>
     </div>
     <div class="mh-container mh-bottom">
       <span>© 2026 ModuleHarbor. MIT licensed.</span>
       <span class="mh-social"><a href="#" aria-label="GitHub">GH</a><a href="#" aria-label="X">X</a><a href="#" aria-label="Discord">DC</a></span>
     </div>
   </footer>