The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="page">
  <footer class="footer">
    <div class="top">
      <div class="brand">
        <a class="logo" href="#"><span>R</span>avindra</a>
        <p>Full stack developer building fast, scalable web and mobile products.</p>
      </div>
      <nav aria-label="Product">
        <h4>Explore</h4>
        <a href="#">Projects</a><a href="#">Notes</a><a href="#">Templates</a>
      </nav>
      <nav aria-label="Company">
        <h4>About</h4>
        <a href="#">Experience</a><a href="#">Skills</a><a href="#">Contact</a>
      </nav>
      <nav aria-label="Legal">
        <h4>Legal</h4>
        <a href="#">Privacy</a><a href="#">Terms</a>
      </nav>
    </div>
    <div class="bottom">
      <small>&copy; 2026 Ravindra Nath Jha. All rights reserved.</small>
      <div class="social">
        <a href="#" aria-label="GitHub">GH</a>
        <a href="#" aria-label="LinkedIn">in</a>
        <a href="#" aria-label="Email">@</a>
      </div>
    </div>
  </footer>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.

Build a responsive website footer in plain HTML and CSS.

Content:
- Brand column: logo "Ravindra" (first letter orange) and a one-line description.
- Three link columns with uppercase headings: Explore (Projects, Notes, Templates), About (Experience, Skills, Contact), Legal (Privacy, Terms). Each column is a <nav> with an aria-label.
- Bottom bar: copyright text on the left, three circular social links on the right (GitHub, LinkedIn, Email) with aria-labels.

Styling:
- Footer background navy #002057, text 75% white, links turn orange #ff7b00 on hover.
- Top area: CSS grid with columns 1.6fr 1fr 1fr 1fr, 40px gap, max-width 1100px.
- Bottom bar separated by a 1px translucent top border, flex with space-between, wraps on small screens.
- Social links: 38px circles with a 1px translucent border that fill orange on hover.
- Below 760px: two columns, with the brand column spanning both.
- Wrap it in a full-height flex column page so the footer sits at the bottom.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Split the footer into a top area (brand plus link columns) and a bottom bar (copyright plus social links).

2. 2

   Lay out the top area with CSS grid, giving the brand column more space with a larger fr value.

3. 3

   Use nav elements with aria-labels for each link group so screen-reader users can jump between them.

4. 4

   Style links as block elements with vertical padding to make them easy to tap on mobile.

5. 5

   Collapse to two columns on small screens and let the brand column span both.

6. 6

   To pin a footer to the bottom of short pages, make the page a flex column with min-height: 100vh.

Customisation tips

• Replace the text social labels with inline SVG icons.
• Generate the year automatically in your framework so the copyright never goes stale.
• Link every important page from the footer; it helps both visitors and search engines.

More sections