Free architecture website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/architecture-website-template · Live demo: 8bsite.github.io/architecture-website-template/ · MIT license

Midblock template: first screen on a phone

About this template

Midblock is an architecture website template for a small office building on narrow city plots. It doubles as an architect portfolio, with projects walked sideways, a method, a plot register, a team and an enquiry form. It suits housing studios and small developers who like flat pastel colour.

A one-page site for a small architecture office that builds on narrow city plots, with its buildings, method, a register of plots, team and an enquiry form. Flat pastel blocks and street photos that start as streaks of smeared colour and come into focus as you scroll; the projects pass sideways like a walk along a street.

Good for:

Architecture or design officeArchitect's portfolioUrban planning or housing studioConstruction or development companyAny studio showing projects one by one plus a team

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, parallax website templates.

How to use the architecture website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/architecture-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your architecture office or studio: what you design, where, your projects with photos, your team, how to get in touch>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, project data, the register table, team, address, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/architecture-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Architecture website design and motion

Palette

#d9e4f0 page background, pale sky#1a2430 text, buttons, dark sections#ffffff register and team sections#e7a36a sand accent on dark#e6dad8 plaster pink blocks#b9471f brick red stripes, hovers#3f6964 door green badges#26419b tram blue band#d22630 red scan line

Fonts

Mozilla Headline: headings: condensed, semi-bold, tight lines
Mozilla Text: body text and spaced uppercase labels

Square-cornered blocks of flat colour stand on a pale sky, stepped like facades along a street. Photos are cut into vertical slabs or sized by each plot's real width above a striped pavement. Colour bands, 2px rules and portraits at stepped heights carry the street idea down the page.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Top bar: wordmark, four section links, Bring us a plot button; phone menu overlay
We build in the gaps a city leaves.
First screen: headline on stepped blocks between slabs of a street photo, then a manifesto and three short facts
Smooth scrolling throughout. The first screen holds while street-photo slabs grow and squeeze from streaks of colour into focus, and the headline blocks drift up.
Five buildings, none wider than a bus
Projects walked sideways: five buildings at their relative plot widths, each with a plate
Pinned, the five buildings pass sideways as you scroll; each photo sharpens from a smear and shifts inside its frame.
We read a street for a whole day
Method in four steps beside a photo crossed by a red scan line
Scrolling the four steps sends a red line across the photo, leaving a smeared copy behind and lighting each time label.
The gap register
Table of entries with status badges (demo: a public list of plots)
In view, three colour stripes grow from hairlines and the heading, text and button slide in from alternating sides.
Borrowed colours
Six full-width colour bands, each with a name, a sentence and where it is used
Tied to scroll, the six bands unroll downwards one by one, each label wiping in from the left.
What the neighbours said
Three testimonials on blocks at stepped heights, with one photo
In view, the three quotes slide in from alternating sides and the photo squeezes from a streak into focus.
9 Ropewalk, floor by floor
One project floor by floor: a building photo cut into seven slices beside a list of seven levels
Reading down the seven levels shifts the photo's slices left and right; only the current floor's slice stays aligned.
Five people, one long table
Team: five portraits at stepped heights with names and roles
Tied to scroll, the five portraits rise or drop into their stepped row, each sharpening from a streak.
Questions we hear on site
Questions and answers (native <details>)
The heading and its intro slide in from opposite sides as the questions come into view.
Bring us a plot
Enquiry form between two street-photo slabs, then address, phone, email and hours
Tied to scroll, two street-photo slabs slide in from the edges towards the form and sharpen from streaks.
Pages
Colour bands, width-filling MIDBLOCK wordmark, links, address, copyright and the Design: 8B credit
As the footer comes into view, four colour stripes grow from hairlines above the full-width wordmark.

What is inside

Files: index.html (93 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Mozilla Headline and Mozilla Text from Google Fonts (SIL Open Font License)
Photos: 14 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 108+, Safari 15.4+, Firefox 101+ (it uses cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, contact form (sends nothing yet), phone number and email address, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Bring us a plot (nav, first screen, footer) and Add a plot (register) lead to #contact now; point them to your booking or enquiry URL, or leave them on the form.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
On phones the opening's second screen (manifesto and facts) is taller than the viewport, so the climbing bands are mostly seen behind and around it, and just before the buildings walk starts the top of its frame is empty for a moment.
The floors photo has a white sky: when the slices slide apart, their white ends read as white blocks on the navy ground.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this architecture website template

Does the enquiry form send anything?

Not yet. It checks that a name, email and plot address are filled in and shows a thank-you line. Connect a form service such as Formspree or Netlify Forms to receive enquiries.

Can the plot register list projects instead?

Yes. It is a plain HTML table with five columns and a status badge, so rows can be projects, sites or listings. On phones each row folds into a labelled card.