VELOURA.

Description

VELOURA is an editorial landing page for a fictional luxury fashion house presenting its Automne · Hiver 2025 collection. A split black-and-beige hero introduces “The New Edit”, followed by a running announcement bar with a cart counter, a new-arrivals product grid, and a quiet brand manifesto.

Background

This is an entry in my “One Day One Code” series of small, focused daily builds. The goal for the day was to capture a quiet-luxury, magazine-style fashion aesthetic in a single file, building all imagery from CSS and SVG rather than photographs.

Goal

Produce a self-contained editorial fashion landing page in a day that feels like a real luxury house, with strong serif typography, generous whitespace, and small storefront touches like an announcement bar and a cart badge, while keeping the whole thing dependency-free.

Features

• Announcement bar and navigation (Collections, New Arrivals, Lookbook, Our Story) with a search control and a cart badge counter.
• Split-screen editorial hero titled “The New Edit” with a lookbook-style mannequin illustration.
• New-arrivals product grid.
• A quiet-luxury brand manifesto section (Indonesian copy).
• All imagery built from CSS and SVG, with no external image assets.

Technologies

• HTML (single self-contained file)
• Inline CSS with CSS/SVG-based imagery
• Vanilla JavaScript
• Playfair Display, Montserrat, and Cormorant Garamond via Google Fonts

How to Run

Clone the one-day-one-code repository and open 09. fashion-brand/index.html directly in a browser; it is a self-contained single file. You can also serve the folder with a static server such as python3 -m http.server 8000. A live version is deployed at the demo URL above.

Technical Decisions

Everything sits in one index.html with inline CSS and vanilla JavaScript, no framework and no build step. Rather than sourcing product photography, I built all imagery from CSS and SVG so the page ships with zero external assets. Typography does most of the editorial work, combining Playfair Display, Montserrat, and Cormorant Garamond, with system-font fallbacks when the CDN is unavailable.

What I Learned

Recreating a luxury fashion feel without any photography made me rely on type pairing, spacing, and restraint to carry the mood. Sketching the mannequin and product visuals in SVG was a good reminder of how far pure markup and CSS can go before you actually need image files.

Notes

Part of the shared one-day-one-code repository. A preview image is included with the project. This is a small daily build rather than a full production site.