Vessner — Architecture & Urbanism HTML Template

Vessner is a premium HTML template for architecture practices, design studios and urban designers. It ships five genuinely different homepage layouts — not one layout in five colours — so you can pick the composition that suits the work you have to show.

Five homepage layouts

• Sequence — full-bleed plates one after another, each captioned like a drawing.
• Drawing sheet — a hairline drafting grid, a title block, an inline SVG elevation and a project schedule. No hero photograph at all.
• Split — a fixed half-screen image that changes as the reader scrolls the other half.
• Track — the work reads side to side on a horizontal rail.
• Monolith — one enormous image and a quiet typeset index, for a practice that wants restraint.

Thirteen pages in total

Alongside the five homepages: a project index with working sector filters, a full project case study, a practice page with team and timeline, a services page with fee ranges and an accessible FAQ, a journal index, a single article, a contact page and a 404.

Designed like a drawing, not a brochure

The palette is deliberately material rather than branded — paper, concrete, graphite and a single raw-brass mark — so the photography carries the colour, the way an architecture practice actually presents itself. Small type is set as drawing-sheet metadata: reference number, sector, area, status.

A contact form that actually works

Vessner includes php/contact.php — a real handler with server-side validation, a honeypot, a submission time trap, per-visitor rate limiting and mail-header injection protection. It works with JavaScript enabled (submits without leaving the page) and disabled (renders its own confirmation). Four lines of configuration and it is live.

Documentation, not a README

A full HTML documentation site is included, covering the file map, choosing a homepage, editing text and images, the colour and type tokens, wiring the contact form and its common failure modes, a component reference, deployment, SEO and accessibility.

Built the boring, reliable way

• No framework, no build step, no npm — plain HTML, CSS and JavaScript.
• One design-token file drives every colour, size and timing.
• Verified at 360, 768, 1024, 1440 and 1920px with no horizontal overflow on any page.
• Motion limited to transform and opacity, and disabled entirely under prefers-reduced-motion.
• Semantic landmarks, a skip link, visible focus rings and labelled form fields throughout.
• No attribution link required.