About this template
Velora Hero Section is a travel hero section built from one written brief, and this page documents that brief. It leads with “Rent Your Dream Luxury Car Today” and gives that line the frame rather than shrinking it into a card. The palette runs black #0A0A0B underneath and white #FFFFFF for the type, and the type is Archivo. Delivery is one self-contained HTML file — one page, no plugin, no build tooling between you and the design. The brief spends its motion budget on a looping video bed. Borrow the structure and not the subject: the hero section and its numbers move to your brand unchanged.
Designed for
- Made for a designer joining a project that already ships one self-contained HTML file and only needs the copy replaced.
- Hand one self-contained HTML file to the engineer with the 1500x1080 crop attached, then let them rebuild it.
- If the build starts from one self-contained HTML file, lift 100vh sections and 56px spacing steps first and leave the palette alone until the grid settles.
What's included
- Top row: wordmark, links, one action. Navigation is a single row with no second level under it. The bar sits over the 1500x1080 composition without a background of its own, so the media runs edge to edge underneath it.
- Sizes fixed in the brief. The brief names the numbers: 100vh sections and 56px spacing steps. That is why the composition holds together, because there is no invented spacing step between the type and the frame. Because the values are fixed, a substitution changes the look without changing the rhythm.
- Figures as typography. The figures are set in Archivo at a size closer to the headline than to the body copy. The label step is quoted in the brief, so it stays below the figures after a substitution. Do not box the numbers.
- Links before the action. The mobile menu is part of the brief, so the collapsed state is designed rather than improvised. Copy this pattern when you need navigation that survives a loud first screen.
Motion & interaction
Hover, but sparingly
Every interactive element does one thing (hover states on the buttons and links rather than on every card), which is what keeps the states predictable. Press states are specified as well as hover, so a tap gives the same confirmation as a click.
A loop, not a timeline
The background clip runs 4.9s at 1500x1080 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. Nothing else on the page animates continuously, so the media is the only thing asking for attention.
Making the hero section yours
A template asks you to accept its layout; this reference asks you to keep it and change everything inside. The difference is that 100vh sections and 56px spacing steps stay fixed while the subject moves. Your accent has to survive the same contrast test as the reference accent.
Reading Velora Hero Section as a spec
Most references show the result and keep the numbers. This one reverses that: 100vh sections and 56px spacing steps are published beside the page, so the result can be reproduced instead of approximated. Nothing in this hero section depends on a default.
The order behind the hero section
When a travel reader lands on a single screen, they scan before they read. The layout answers that: navigation, the headline, the stats row and the background clip are sized to be scanned, with 100vh sections and 56px spacing steps keeping each stop distinct. A travel reader gets the offer before the options.
Frequently asked questions
Do I need one self-contained HTML file to rebuild Velora Hero Section?
Velora Hero Section was built in one self-contained HTML file, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
What can I do with the Velora Hero Section brief once I have it?
Everything quoted on the page comes from the captured 3,216-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Is the Velora Hero Section prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 1500x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
