Loudmouth
A maximalist streetwear shop.
Loudmouth is a drop-based clothing shop in the Maximalism style: five solids that clash on purpose (chalk, ink, chrome yellow, tomato, lilac), 3px ink keylines and hard ink shadows on everything, huge tilted words, pattern fills, stickers and shapes that break the grid. The products are our own flat drawings in four colourways, so the shop looks finished before you have a single product photo. The sample label, Mudlark, and every product, price and date are invented sample content.
- For
- Streetwear shop
- 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
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
The colourway flip: pick a swatch and the hero repaints, a new ground wipes up, the drawn hoodie turns edge-on and springs back in the new colours, the words swap with a jolt.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a hero with the drop name in two tilted words, the drawn hoodie on a scalloped blob, a spinning ring badge, colourway swatches, a live countdown to the next Friday drop and two calls to action; the drop as a broken grid of six products with price tags, sizes (sold-out sizes struck through) and Add to bag; a manifesto with photo pills set between the words; a draggable lookbook cut into arch, circle, star and scallop shapes; a drop calendar of tilted tickets; a First dibs sign-up band; footer with stickers. - Product (
product.html): the hoodie with a size picker (a sold-out size, a "pick a size first" state), Add to bag, a size guide table and a location photo. - 404 (
404.html). - A bag count that persists in the browser and a sticker toast (front end only: connect your shop platform).
- Light, and an after-hours dark theme (follows the system, with a toggle that remembers the choice).
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Product
- 404
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.
