Free coworking website template

Live demo GitHub Download ZIP Use this template

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

Isoline template: first screen on a phone

About this template

Isoline is a coworking website template for a workspace whose floors differ by noise, from a roof for calls to booths where phones stay in lockers. It suits any coworking space with zones or levels, and it already handles day passes, memberships and tour requests.

A one-page site for an invented members' workspace in Leeds with three floors, from a talkative roof down to silent study carrels. Big colour fields of nested stepped bands, like contour lines, mark each floor's depth in orange, blue and violet; on the first scroll you fall into the blue field, prints drop on their wires and the bands fill and open as you read on.

Good for:

Coworking space or shared officeQuiet study space, library or writers' roomMembers' club with day passes and membershipsAny venue with floors, zones or levels to explain

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

How to use the coworking website template

With an AI coding agent

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

curl -LO https://raw.githubusercontent.com/8bsite/coworking-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/coworking-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/coworking-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/coworking-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 coworking space or workspace: name, city, floors or zones, opening hours, prices, events, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices, dates, member names, 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/coworking-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.

Coworking website design and motion

Palette

#eceeef page background#14171b text, buttons, print clips, footer#4a5059 secondary text#fbfcfc members and plans grounds, prints, badges#155386 deep blue Flow fields, second hero screen, event rows#93d9e4 aqua rim of blue fields, hover rings#e2580e orange core of Shallow fields#f6d88c pale yellow rim of orange fields#8b3887 plum core of Deep fields, fading to lilac

Fonts

Funnel Display: headings, times, prices: large, medium weight, tight
Host Grotesk: body, labels, buttons, badges

Colour fields of nested stepped bands, pale at the rim and dark at the core, carry the page, with cut-out figures on their edges. Photos hang as prints from two black clips on thin wires, and rooms step further right as they go down.

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

What is on the page

Navigation
Top bar: wordmark, section links, Book a day button; phone menu overlay
Work at your own depth.
Two screens: headline over a huge colour field with a figure on its edge, then a statement and three anchors on the field's colour
Smooth scrolling runs page-wide. The bands breathe on a loop; on scroll they swell until deep blue fills the screen, the figure shrinking into the field.
Three depths. Pick one each morning.
Three hanging posters, one per zone or level, each with its own colour field, photo and caption (demo: the three floors)
Section headings rise line by line throughout. Tied to scroll, the three posters lower on their wires and swing as their bands appear.
The building has a day of its own.
Daily schedule beside a sticky colour dial (demo: a weekday from 7:30 to 21:00)
As you read the schedule, the sticky dial's bands shift by depth and turn orange, blue, violet, then orange; other rows dim.
Rooms, in order of descent.
List of rooms indented by level, each with a small hanging photo
Each small print swings on its clips and settles with an elastic bounce as it scrolls into view.
Three rules, posted at the stairs.
Three short house rules inside a V-shaped cross-section of bands
Tied to scroll, nine coloured bands close in from both sides, row after row, forming the V around the rules.
Who works down here.
Four members with photo, name, job and a quote, each under a small colour field
Each member's small colour field ripples open from its core outward as the portrait scrolls into view.
Surfacing, on Thursday evenings.
List of upcoming events with date, time, title, speaker, place and a Save a seat link (demo: Thursday talks)
Each event row shifts from plum to blue to aqua as it crosses the screen, its date drifting up against it.
Finished at depth.
Table of works members finished, each with a small stepped colour swatch
The three-bar swatch beside each finished work steps up bar by bar as its row scrolls into view.
How deep a membership goes.
Three pricing plans as colour fields whose band count shows how much each includes
Each plan's field fills in band by band as you scroll; the deeper plans gather more bands.
Come down for a day.
Contact: address, hours, phone, email, a drawn contour map and a tour request form (placeholders)
The contour lines of the drawn map ripple in one after another as the map scrolls into view.
Footer
Tagline with address, links, wordmark, copyright and the Design: 8B credit, hours line

What is inside

Files: index.html (153 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Funnel Display and Host Grotesk from Google Fonts (SIL Open Font License)
Photos: 13 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers).
Replace before publishing: Social preview image, favicon, phone number, email address and contact form (sends nothing yet), 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.
Book a day (nav) and Book a day pass (opening) lead to #plans now; point them to your booking or day-pass URL (or keep #plans).
Plan buttons (Book a day, Become a member, Ask about a carrel) lead to #visit now; point them to the booking, checkout or membership sign-up URL of each plan.
Save a seat on each evening talk lead to #visit now; point them to the RSVP or ticket URL of each event.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
The map in visit is a drawing, not a real map: add a link to your map service if visitors need directions.
Faces that overlap the middle of a colour field take its tint (photos are printed with multiply).
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this coworking website template

Can I change the three levels and their colours?

Yes. Level names are plain HTML text, and each level's rim and core colours are two variables at the top of the file, so one change recolours its fields, badges and swatches.

Does the tour request form work?

It checks the name and email and shows a confirmation, but sends nothing until you connect a form service such as Formspree or Netlify Forms.