Atrium
A website template for architecture studios and property developers.
Atrium is a seven-page site for an architecture practice that also sells homes. Its pictures are drawn, not stocked: a live three.js massing model where the project's building rises out of its city block, and plans, sections, facades and maps drawn in SVG from each project's own data. Add your photographs when you have them; until then every slot shows a finished drawing.
- For
- Architecture studio / real estate developer
- Built with
- HTML, CSS, ES modules, three.js (no build step)
- Pages
- 7 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A massing model of the city: the project's building rises out of its block, and the hero switches between three projects on the same plot.
What you get
Straight from the template's README, the same file you will find in the repository.
- Seven pages: Home, Projects (index), Project (one template for every project), Residences (homes for sale), Studio, Contact and 404.
- The massing model: on the home page the city rises, then the project's building rises from its plot in the accent colour. Three buttons put three different projects on the same plot. Each project page shows a smaller model of that project in its block.
- Drawings from data: for every project, a floor plan (walls, doors, windows, room areas, scale bar, north point), a section with levels, and a facade. Five home plans for the residences. A site plan, a wall detail at 1:5 and a drawn map for the contact page.
- Projects index: filter by sector and status, switch between grid and list, share the filtered view as a link, with an empty state.
- Residences: 35 homes in a table and on a drawing of the tower. Filter by bedrooms, price and availability, sort, then open any home in a drawer with its floor plan, specification and an enquiry form. A home can be linked directly (
residences.html?home=7.03). - Forms that behave: contact and enquiry forms with inline validation, an error summary, a sending state, a success state and a network error state. They post JSON to any endpoint you set, or run in demo mode.
- Light and dark following the visitor's system, with a toggle. Every drawing and the 3D model redraw in the current theme.
- Phone, tablet and desktop layouts, keyboard and screen reader support, visible focus, reduced motion respected, no layout shift, no trackers, no external requests.
- Works from disk: open
index.htmlstraight from your file browser and every page reads in full, with the drawn still in place of the live model.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Projects
- Project
- Residences
- Studio
- Contact
- 404
Stack
- HTML
- CSS
- ES modules
- three.js (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
