Template demos

Architecture design templates

Homepages, project catalogs, and detail pages — static HTML/CSS/JS mockups for live preview and client review.

Local server: run project-catalog/serve.ps1 or serve.bat, then open this page at http://localhost:8080/. Catalogs and detail pages need the server (ES modules).

Full site flows

Strand Aure — refined / wow

Homepage

Cinematic hero, champagne gold, scroll reveals.

Strand Aure

Catalog

Dark hero band, portrait overlay grid, pill tabs.

Strand Aure

Project detail

85vh hero, glass facts, dark quote block.

Strand Aure

Strand — unified favorites

Homepage

Atelier hero + Nordic body + ember accent.

Strand

Catalog

Editorial category-nav with overlay cards.

Strand

Project detail

Havn layout, sticky facts sidebar.

Strand

Architecture homepages

Atelier Nord

Warm editorial, full-bleed hero, bronze palette.

Editorial

AXIS

Brutalist neo-Swiss, chartreuse, full-bleed hero.

Brutalist

Havn

Cool Nordic calm, soft rounds, full-bleed hero.

Scandinavian

Norð Arkitektur

Cool Nordic body with #e94e1b ember accent.

Nordic ember

Strand Atelier

Unified theme — your favorites combined.

Unified

Strand Aure

Refined luxury edition, cinematic motion.

Premium

Project catalogs

All catalogs hub →

Category nav — Aure

Refined overlay grid, 400 projects, filter drawer.

Premium

Category nav — Strand

Editorial pills, grid/list toggle, load more.

Unified

Category nav — Editorial

Atelier Nord style, overlay cards, list rows.

Editorial

Category nav — Scandinavian

Havn style tabs and detailed list view.

Scandinavian

Category nav — Brutalist

AXIS indexed rows, dark register layout.

Brutalist

Sidebar filter

Left sidebar filters, pagination, grid/list.

Desktop-first

Map + list

Leaflet map synced to scrollable project list.

Geographic

Project detail pages

All detail hub →

Strand Aure

Cinematic hero, glass facts, gallery zoom.

Premium

Strand Atelier

Sticky facts, overview/challenge/outcome blocks.

Unified

Havn

Scandinavian detail, full-bleed hero caption.

Scandinavian

Atelier Nord

Editorial serif, pull quote, credits.

Editorial

AXIS

Brutalist spec-sheet, indexed layout.

Brutalist

Detail URLs accept any project ID, e.g. ?id=p-0042

Nodo Arkitekter examples

Nodo hub →

Nodo — Three directions

Hub for three visual direction homepages plus projects list and detail.

Start here

Direction A — Editorial Journal

Magazine-inspired serif layout, asymmetric grids, warm paper palette.

Homepage

Direction B — Architectural Document

Drawing-set aesthetic, monospace labels, technical plate captions.

Homepage

Direction C — Quiet Gallery

Full-bleed photography, minimal UI, gallery-first navigation.

Homepage

Nodo — Projects list

Filterable portfolio grid with editorial project rows (Danish).

Projects

Nodo — Project detail

Single project page: hero, narrative, specs, gallery, related work.

Detail