Skip to content
arrie.dev Templates

Hero sections

Cover Plate

One photograph across the whole screen under a scrim measured for readable text.

R740

Once. Yours to keep

Get this template

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.

Included

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
How it works

After you buy

  1. 01 You message me On WhatsApp. Tell me which one and where it is going.
  2. 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.
  3. 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
  4. 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.