← Back to library
atlas-footer.html
Open full screen ↗ This is the actual page the prompt produces — scroll and click inside it.

About this one

The footer most sites need but skip. Scales to twenty links without redesigning, and handles the legal row properly.

The prompt

Build a site footer.

LAYOUT
A grid with template columns 1.4fr followed by repeat(auto-fit, minmax(150px, 1fr)), 2rem gap. The wide first column holds the logo, a one-sentence description capped at 34 characters per line, and a row of social links. The remaining columns are link groups, each with a bold 0.9rem heading and links at 0.9rem in the muted colour, going to full ink on hover.

Links are display block with 0.22rem vertical padding so the tap targets stay comfortable on mobile without extra markup.

BASE ROW
Separated by a 1px top border at 8% ink opacity, with 1.5rem padding above. A flex row, space-between, wrapping: copyright on the left, and on the right either a locale switcher or a credit line.

MOBILE
Below 860px the grid collapses to two columns, then one below 520px. Add padding-bottom: calc(2rem + env(safe-area-inset-bottom)) so the footer clears the home indicator on iOS, and extra bottom margin if the site has a fixed bottom tab bar.

RULES
No newsletter form in the footer unless it is the only place one exists. No back-to-top button — the browser already has one.
Install 3D Website Full screen, opens straight from your home screen.