# Isoline, a free coworking website template > Website for a coworking space or members' workspace, with day passes and memberships. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). 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. - Page: https://8b.com/templates/isoline/ - Live demo: https://8bsite.github.io/coworking-website-template/ - Repository (GitHub template): https://github.com/8bsite/coworking-website-template - Download ZIP: https://github.com/8bsite/coworking-website-template/archive/refs/heads/main.zip - Size: 153 KB, 13 photos (Unsplash), fonts: Funnel Display and Host Grotesk - Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); 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/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: ```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, prices, dates, member names, 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/coworking-website-template my-site`. ## Design 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. - 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. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, section links, Book a day button; phone menu overlay - **Work at your own depth.** (opening): 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. Motion: 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.** (depths): three hanging posters, one per zone or level, each with its own colour field, photo and caption (demo: the three floors). Motion: 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.** (day): daily schedule beside a sticky colour dial (demo: a weekday from 7:30 to 21:00). Motion: 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.** (rooms): list of rooms indented by level, each with a small hanging photo. Motion: Each small print swings on its clips and settles with an elastic bounce as it scrolls into view. - **Three rules, posted at the stairs.** (rules): three short house rules inside a V-shaped cross-section of bands. Motion: Tied to scroll, nine coloured bands close in from both sides, row after row, forming the V around the rules. - **Who works down here.** (members): four members with photo, name, job and a quote, each under a small colour field. Motion: Each member's small colour field ripples open from its core outward as the portrait scrolls into view. - **Surfacing, on Thursday evenings.** (evenings): list of upcoming events with date, time, title, speaker, place and a Save a seat link (demo: Thursday talks). Motion: Each event row shifts from plum to blue to aqua as it crosses the screen, its date drifting up against it. - **Finished at depth.** (made): table of works members finished, each with a small stepped colour swatch. Motion: The three-bar swatch beside each finished work steps up bar by bar as its row scrolls into view. - **How deep a membership goes.** (plans): three pricing plans as colour fields whose band count shows how much each includes. Motion: Each plan's field fills in band by band as you scroll; the deeper plans gather more bands. - **Come down for a day.** (visit): contact: address, hours, phone, email, a drawn contour map and a tour request form (placeholders). Motion: The contour lines of the drawn map ripple in one after another as the map scrolls into view. - **Footer** (footer): tagline with address, links, wordmark, copyright and the Design: 8B credit, hours line ## Good for - coworking space or shared office - quiet study space, library or writers' room - members' club with day passes and memberships - any venue with floors, zones or levels to explain ## Questions **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. ## Before publishing Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), 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.