Fresh Coat

A graffiti youth club site.

Fresh Coat is a website for a youth club, community centre or after-school project, in the Graffiti style but in daylight: a freshly whitewashed wall with a faint texture, rollered paint bands with dry ragged edges, halftone paste-up posters held by tape, round stickers and painted court lines, with sections alternating whitewash and tarmac. League Gothic for headings, Caveat Brush for short marker notes only, Atkinson Hyperlegible Next for everything people read. The sample club, Open Wall, and every session, crew, time and phone number are invented sample content.

For: Youth club
Built with: HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
Pages: 3 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.

A short, silent scroll through Fresh Coat. Screens from the template are below.

At a glance

3 pages: Home, What's on, 404.
Light and dark themes, following the system, with a switch.
Laid out for phones from 390 pixels wide, and for tablet and desktop.
Signature moment: A paint roller sweeps a fresh yellow coat across a whitewashed wall and the headline is sprayed on letter by letter; below it a wall rota of twelve panels where painted ones are rollered in and free ones can be claimed.
Built with HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step).
5 Pixabay photos or videos as demo content (listed in the template, swap in your own); the rest is drawn in code.
Use it for client work. Build as many websites and web apps with it as you like, for yourself or for clients. The licence
If it is broken, we fix it within 14 days of your report, or refund you. Sales and refunds

Screens from the template

Fresh Coat home page, light theme, at 1440 pixels wide — Home

Fresh Coat home page, dark theme, at 1440 pixels wide — Home, dark theme

Fresh Coat on a phone, 390 pixels wide — Home on a phone

Fresh Coat: whats on page, dark theme — Whats on page, dark theme

The 3D moment

A paint roller sweeps a fresh yellow coat across a whitewashed wall and the headline is sprayed on letter by letter; below it a wall rota of twelve panels where painted ones are rollered in and free ones can be claimed.

What you get

Straight from the template's README, the same file you will find in the repository.

Home (index.html): a yellow roller band carrying the headline with a coral sticker and a paste-up poster showing how many wall panels are free; "Open tonight" built from the visitor's clock (on now, done, or the next open day); four rooms as paste-ups; the wall rota of twelve panels (painted, booked, free) with a claim form that books a free panel and remembers it in the browser; the week as five paper slips with an age switch and today marked; parents and carers facts with the duty desk; a join form for a young person or a parent with error, sending and pass states.
What's on (whats-on.html): every session, filtered by day, room and age, with on-now rows and an empty state.
404 (404.html): "This bit of wall got buffed", the 404 painted over and back again.
Light (daylight) and dark (after six, strip lights on) themes; follows the system, with a remembered toggle.

Pages and stack

Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.

Stack

HTML
CSS
ES modules
Motion 14.6.0
anime.js 4.5.0 (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.