# Midblock, a free architecture website template > Website for an architecture office, with projects, method, team and an enquiry form. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). 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. - Page: https://8b.com/templates/midblock/ - Live demo: https://8bsite.github.io/architecture-website-template/ - Repository (GitHub template): https://github.com/8bsite/architecture-website-template - Download ZIP: https://github.com/8bsite/architecture-website-template/archive/refs/heads/main.zip - Size: 93 KB, 14 photos (Unsplash), fonts: Mozilla Headline and Mozilla Text - Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash 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: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a site for . 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. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/architecture-website-template my-site`. ## Design 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. - 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. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, four section links, Bring us a plot button; phone menu overlay - **We build in the gaps a city leaves.** (opening): first screen: headline on stepped blocks between slabs of a street photo, then a manifesto and three short facts. Motion: 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** (buildings): projects walked sideways: five buildings at their relative plot widths, each with a plate. Motion: 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** (scan): method in four steps beside a photo crossed by a red scan line. Motion: Scrolling the four steps sends a red line across the photo, leaving a smeared copy behind and lighting each time label. - **The gap register** (register): table of entries with status badges (demo: a public list of plots). Motion: In view, three colour stripes grow from hairlines and the heading, text and button slide in from alternating sides. - **Borrowed colours** (colours): six full-width colour bands, each with a name, a sentence and where it is used. Motion: Tied to scroll, the six bands unroll downwards one by one, each label wiping in from the left. - **What the neighbours said** (neighbours): three testimonials on blocks at stepped heights, with one photo. Motion: In view, the three quotes slide in from alternating sides and the photo squeezes from a streak into focus. - **9 Ropewalk, floor by floor** (floors): one project floor by floor: a building photo cut into seven slices beside a list of seven levels. Motion: 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** (studio): team: five portraits at stepped heights with names and roles. Motion: Tied to scroll, the five portraits rise or drop into their stepped row, each sharpening from a streak. - **Questions we hear on site** (faq): questions and answers (native
). Motion: The heading and its intro slide in from opposite sides as the questions come into view. - **Bring us a plot** (contact): enquiry form between two street-photo slabs, then address, phone, email and hours. Motion: Tied to scroll, two street-photo slabs slide in from the edges towards the form and sharpen from streaks. - **Pages** (footer): colour bands, width-filling MIDBLOCK wordmark, links, address, copyright and the Design: 8B credit. Motion: As the footer comes into view, four colour stripes grow from hairlines above the full-width wordmark. ## Good for - architecture or design office - architect's portfolio - urban planning or housing studio - construction or development company - any studio showing projects one by one plus a team ## Questions **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. ## Before publishing Replace: social preview image, favicon, contact form (sends nothing yet), phone number and email address, plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.