Popshot

A Pop Art drink brand template.

Popshot is a brand and shop site for a snack or drink in the Pop Art style: comic panels with heavy black keylines, Ben-Day dots, caption boxes, speech balloons, starbursts and flat print primaries (red, yellow, blue). The cans are drawn in code from each flavour's colours. The sample brand is invented: flavours, prices, nutrition figures and quotes are sample content.

For: Snack / drink brand
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.

Screens from the template

Popshot home page, light theme, at 1440 pixels wide — Home

Popshot home page, dark theme, at 1440 pixels wide — Home, dark theme

Popshot on a phone, 390 pixels wide — Home on a phone

Popshot: flavour page, dark theme — Flavour page, dark theme

The 3D moment

POW: the starburst punches in, the drawn can jumps and shakes in its comic panel and keeps fizzing; a flavour picker squashes the can into new colours.

What you get

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

Home (index.html): comic hero (headline panel and can panel with a POW burst, a speech balloon and a flavour picker); three flavour panels; a four-panel "how it's made" strip; quotes as speech balloons; three crates with "Add to basket" and a live basket count; a sign-up panel with a working form state; footer.
Flavour (flavour.html): product page with the can, price, quantity stepper, add to basket, a nutrition table and ingredients, plus the other flavours.
404 (404.html).
Light (newsprint) and dark (black stock) themes, phone to desktop.
Signature motion: POW. The burst punches in, the can jumps and shakes, the balloon pops, and bubbles keep fizzing out of the can while it is on screen. The flavour picker squashes the can into new colours; the basket count jumps when you add a crate.
Reduced motion: no fizz and no travel; everything in its final place.

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.