District — Free Streetwear Brand Website Template
District is a streetwear drop site built to sell out — a live countdown, a numbered product rack and a hazard-tape marquee do the shouting so you don't have to. It runs on an oversized Anton display face over an asphalt-and-chalk palette with signal-orange and cobalt accents, deliberately loud where a luxury lookbook would whisper. Every interaction is hand-written vanilla JavaScript with no jQuery, so it drops cleanly onto a strict-CSP host.
Features
- Live drop countdown that ticks in both the hero and the sticky header, and rolls forward so the demo never expires
- Numbered product rack with live category filtering (Outerwear / Tops / Bottoms / Footwear / Accessories) and sold-out states
- Add-to-cart micro-interaction that bumps the header cart count and confirms on the button
- Scrolling hazard-tape marquees between sections with full prefers-reduced-motion handling
- Asymmetric SS26 lookbook grid with hover captions
- Founder manifesto split with signature and brand stats, plus a collab-program capsule block
- Community #InTheDistrict UGC wall with hover handles and a "post your fit" call-to-action
- Newsletter block with real front-end email validation and status messaging
- Fixed header that turns solid on scroll, plus a full-screen mobile overlay menu
- IntersectionObserver scroll reveals, skip link, focus-visible rings and landmark structure throughout
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1 (single-page)
- Responsive: Yes
- Style: Loud streetwear, high-contrast, oversized condensed display + mono utility labels
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is District really a single page?
Yes. It's a long-scroll landing page covering the hero countdown, the drop rack, lookbook, brand manifesto, collab program, community wall, shipping/sizing notice and newsletter — everything a streetwear drop needs in one file. There's no separate secondary page to wire up.
Do I need a build step or npm?
No. Bootstrap's CSS and JS bundle are self-hosted in the template, fonts load from Google Fonts, and all behaviour lives in one plain `js/main.js`. Open `index.html` and it works.
How does the drop countdown work?
The target date lives in a single `data-drop` attribute in the hero. The script counts down to it in days/hours/minutes/seconds and, so the demo never shows a dead timer, automatically rolls the date forward in two-week steps once it passes. Point it at your real launch and delete the roll-forward line if you want a hard deadline.
Can I use it for a real store?
It's a front-end brand template, so the cart, add-to-bag and product links are demo interactions. Swap the images in `img/`, edit the copy in `index.html`, retune the palette via the CSS custom properties, and wire the product cards to your own backend (Shopify, WooCommerce, a headless API) to sell.
