# softlife, a free community website template

> Community and members' club website for a women's social house. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/).

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.

- Page: https://8b.com/templates/softlife/
- Live demo: https://8bsite.github.io/community-website-template/
- Repository (GitHub template): https://github.com/8bsite/community-website-template
- Download ZIP: https://github.com/8bsite/community-website-template/archive/refs/heads/main.zip
- Size: 132 KB, 24 photos (Unsplash), fonts: Kalnia, Onest and Playwrite US Trad
- Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.11 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/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:

```text
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.
```

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/community-website-template my-site`.

## Design

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.

- 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.

## Sections and motion

- **Navigation** (navigation): top bar: wordmark, section links, Join button; phone menu overlay
- **softlife l ı fe** (hero): first screen: width-filling two-weight wordmark, tagline, intro, two buttons, portrait, a row of palette chips. Motion: 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** (manifesto): statement on an oxblood ground: the principle in two weights, a founding note and a link. Motion: Tied to scroll, the oxblood ground widens, then the statement thickens word by word and its key phrases turn pink.
- **A week, softly** (week): weekly programme: seven days as seven arch photos, one colour per day. Motion: 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** (clubs): four tiles with a giant initial each: the clubs or programmes (demo: morning, supper, reading, office hours). Motion: 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** (board): moodboard collage of twelve tiles: photos, type posters, gingham and stripes. Motion: Pinned while you scroll, twelve tiles piled small and tilted in the centre deal out one by one into the collage.
- **The soft edit** (edit): small shop: four products with photo, details, price and Add to bag. Motion: 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** (journal): blog: a tall pink poster of two words beside three article entries. Motion: Tied to scroll, the two words on the tall pink poster slide together to the middle, then apart.
- **Dear you,** (letter): founder's letter with a handwritten signature and an arch portrait. Motion: The founder's signature inks in from left to right, and the big motto beneath slides away to the right.
- **Join the club** (membership): three membership tiers on cards that turn over (demo: day pass, member, founding circle). Motion: Tied to scroll, the heading slides in from the left and the three tier cards turn over one after another.
- **Good questions** (faq): questions and answers (native <details>) beside a heading and an email link
- **Come over** (contact): address, hours, email, phone and a contact form beside an arch photo of the front door. Motion: Two oxblood door leaves over the front-door photo slide open as you scroll, and the photo settles.
- **Visit** (footer): width-filling softlife wordmark, address, hours, contacts, links, copyright and the Design: 8B credit

## Good for

- members' club or social house
- women's network or community
- wellness or lifestyle collective
- co-working space with events
- community with a weekly programme and paid tiers

## Questions

**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.

## Before publishing

Replace: 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).

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.