Free community website template

Live demo GitHub Download ZIP Use this template

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

softlife template: first screen on a phone

About this template

softlife is a community website template for a members' house, with the week's programme, four clubs, a shop, a journal and three paid tiers. It suits a membership club, a women's network or a wellness collective with events; the look is soft, pink and serif-led.

A one-page site for a London members' house for ambitious women, with a weekly programme, clubs, a small shop, a journal and three membership tiers. Warm pinks, oxblood and powder blue, a two-weight serif and arch-shaped photos; as you scroll, a pink-and-red palette row swells into the next section, seven colour arches turn into the week's photos, a moodboard deals itself out of a pile and membership cards turn over.

Good for:

Members' club or social houseWomen's network or communityWellness or lifestyle collectiveCo-working space with eventsCommunity with a weekly programme and paid tiers

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 community website template

With an AI coding agent

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

curl -LO https://raw.githubusercontent.com/8bsite/community-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/community-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/community-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/community-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 a community or members' club for <your community: who it is for, where it meets, what happens each week, membership prices, how to join>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, programme, prices, 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/community-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.

Community website design and motion

Palette

#fcf8f3 cream page background#720808 text, oxblood ground#a10728 crimson headings and buttons#fec6d3 pink panels and footer#f6e6e5 blush panels#bad4ed powder blue tiles, gingham#dae9f7 pale blue stripes#efe4d8 linen behind arch photos

Fonts

Kalnia: headings: serif mixing hairline and bold
Onest: light body text, spaced capital labels
Playwrite US Trad: handwritten signature and script accent

Photos sit in arches rounded only at the top, panels have large soft corners, and the name fills the full width. Headings pair a thin phrase with a bold one. The moodboard is a six-column collage of photos, type posters, gingham and stripes.

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, Join button; phone menu overlay
softlife l ı fe
First screen: width-filling two-weight wordmark, tagline, intro, two buttons, portrait, a row of palette chips
Smooth scrolling throughout. Scrolling away, the oxblood arch among the colour chips swells into a full-width dome as the name parts.
The softlife principle
Statement on an oxblood ground: the principle in two weights, a founding note and a link
Tied to scroll, the oxblood ground widens, then the statement thickens word by word and its key phrases turn pink.
A week, softly
Weekly programme: seven days as seven arch photos, one colour per day
Pinned on desktop, the seven arches rise one by one, their colour drops away and each photo settles from a zoom.
Four clubs, one house
Four tiles with a giant initial each: the clubs or programmes (demo: morning, supper, reading, office hours)
Bold words in several headings thicken from hairline as they appear; each club tile drops in tilted and settles straight.
Things we're soft on
Moodboard collage of twelve tiles: photos, type posters, gingham and stripes
Pinned while you scroll, twelve tiles piled small and tilted in the centre deal out one by one into the collage.
The soft edit
Small shop: four products with photo, details, price and Add to bag
On wide screens a photo frame stays beside the list, and each product's coloured panel and arch photo wipe up into it.
Notes from the reading room
Blog: a tall pink poster of two words beside three article entries
Tied to scroll, the two words on the tall pink poster slide together to the middle, then apart.
Dear you,
Founder's letter with a handwritten signature and an arch portrait
The founder's signature inks in from left to right, and the big motto beneath slides away to the right.
Join the club
Three membership tiers on cards that turn over (demo: day pass, member, founding circle)
Tied to scroll, the heading slides in from the left and the three tier cards turn over one after another.
Good questions
Questions and answers (native <details>) beside a heading and an email link
Come over
Address, hours, email, phone and a contact form beside an arch photo of the front door
Two oxblood door leaves over the front-door photo slide open as you scroll, and the photo settles.
Visit
Width-filling softlife wordmark, address, hours, contacts, links, copyright and the Design: 8B credit

What is inside

Files: index.html (132 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.11 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Kalnia, Onest and Playwrite US Trad from Google Fonts (SIL Open Font License)
Photos: 24 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 121+ (it uses color-mix(), container query units, :has(), cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links, 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.
Join / Become a member buttons in the nav, the hero and the phone menu lead to #membership now; point them to your sign-up or application page, or keep the anchor.
Book a day / Become a member / Apply buttons on the membership cards lead to #contact now; point them to the sign-up, booking or payment URL of each tier.
Add to bag buttons in the shop (edit) lead to nowhere (plain buttons) now; point them to your shop's product or checkout pages (as links), or remove the shop section.
All notes and Read the note links in journal lead to #journal now; point them to your blog index and the article URLs.
Newsletter link in the footer lead to #contact now; point them to your newsletter sign-up URL.
Privacy and Terms links in the footer lead to #footer now; point them to your privacy policy and terms pages.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
The shop's sticky stage runs only from 1024 px wide; smaller screens show a static mosaic and list.
The Add to bag buttons and the journal links go nowhere: connect them to a shop and to articles, or remove them.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this community website template

Does the Join button sign people up?

No. Join and the tier buttons lead to the contact form, which sends nothing until connected to a form service such as Formspree or Netlify Forms; there is no payment step.

Can the shop take orders?

Not as it is: each product has a photo, details, a price in pounds and an Add to bag button that needs linking to a cart or checkout.