Hero sections
Cover Plate
One photograph across the whole screen under a scrim measured for readable text.
R740
Once. Yours to keep
The shape of it, not a screenshot
What it is
One photograph across the entire first screen with the text sitting on it. The work here is in the scrim: a two-stop gradient weighted toward the corner the text occupies, so the headline keeps its contrast without the picture turning into grey mud.
It includes a small script that samples the image behind the text box and reports the contrast ratio you are actually getting, so the scrim is set once per photograph instead of guessed at. Four text positions are provided: bottom left, bottom centre, dead centre, and a lower third on a slab. Art direction is built in through source elements, so portrait screens get their own crop rather than a wide landscape shot cropped down to sky.
This suits a hotel, a restaurant, a builder, anyone with a single photograph worth the whole screen. It is the wrong choice if your picture is busy across the middle, because no scrim rescues an image with detail everywhere. It is also wrong if your headline runs long. Past about eight words the text starts eating the photograph you paid for.
What you get
- Hero.astro with four text positions
- Two-stop gradient scrim with angle, stops and opacity as variables
- Contrast check script that samples the image under the text box
- Separate portrait and landscape crops through source elements
- picture element with WebP and JPEG at five widths
- Short notes on choosing and cropping the photograph
After you buy
- 01 You message me On WhatsApp. Tell me which one and where it is going.
- 02 I set it up for you Your words, your colours, your logo dropped in — or the raw files if you would rather do it yourself.
- 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
- 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.
You might also want
- Hero sections R880 Quiet Loop Muted video behind the headline, with a poster frame that holds if the video never loads.
- Hero sections R650 Drift Field A canvas of drifting dots behind the text. About 4 KB of JavaScript, no image files.
- Hero sections R560 Ticker Band A headline over a band of text that scrolls sideways and never stops.
Nothing to look at yet
This one is written up but not built, so there is no live version to show. Ask me and I will tell you honestly how long it would take.
Ask about it