Grainhall — Photography Portfolio HTML Template

Grainhall is a premium HTML template for photographers, photographic studios and visual artists. It ships five genuinely different homepage layouts — not one layout in five colours — so the composition can match the work you actually have to show.

Five homepage layouts

• Frame — a viewport-locked film strip. The page never scrolls vertically; the strip moves sideways with the wheel, a drag, the arrow keys or the panel buttons.
• Vault — a dark stage. One photograph fills the screen while a sticky index tracks your position through the series.
• Contact Sheet — the whole archive at once on a 1px grid, selects circled and rejects struck through, with no hero image at all.
• Reel — full-height plates that stack over one another as you scroll, like prints piling up on a table.
• Poster — one ultramarine screen, one photograph, a short list of links.

Ten inner pages

• Work — a filterable index of fourteen series
• Grid — every frame in a masonry layout, with the lightbox
• Series — one body of work in a mixed gallery
• Series (wide) — one frame to a screen with sheet notes running beside it
• Studio, Commissions with pricing, Journal, a Journal article, Contact and 404

What makes it worth paying for

• A working contact form. A single PHP file with server-side validation, a honeypot, a time trap, a per-IP rate limit and mail-header-injection guards. Change one line to set the recipient.
• A lightbox with no library. Focus is trapped, Escape closes, arrow keys step, and focus returns to the thumbnail you came from. Without JavaScript the thumbnails simply link to the full-size image.
• One token file. Every colour, size, space and duration lives in tokens.css. Changing the accent colour is one line.
• Accessible by construction. Skip link, one h1 per page, landmark elements, visible focus rings, keyboard-operable galleries and prefers-reduced-motion honoured throughout.
• No layout shift. Every image carries explicit width and height, and every image request is pinned to the box the markup declares.
• Full buyer documentation as a styled HTML site, not a README.

Built plainly

Fifteen hand-written HTML files, eight stylesheets and one 13 KB JavaScript file. No framework, no build step, no jQuery, no slider plugin and no icon font. Open index.html by double-clicking it.

Design

A warm plaster ground rather than paper white — a gallery wall — with true-black ink and ultramarine used as a field: whole section grounds, the lightbox scrim and the poster homepage, rather than as buttons and underlines. Type is Anybody, whose variable width axis is used as the signature, with Mona Sans and Kode Mono. Thumbnails sit slightly desaturated and resolve to full colour on hover, so a mixed body of work reads as one exhibition.

Demo photographs are from Unsplash and are not included in the licence. Every one is traced to its source in assets/img/CREDITS.md.