Screenshot from Httpster, saved 2026-10-24
How it’s built
- Layout
- Full-frame sports image of swimmer in cap/goggles, golden backlight and spray. Athlete occupies left/center; water/reflections fill frame. Translucent gray strip at right holds pause glyph and tiny slide marks. Lower-left category label and larger name sit over dark water; faint mark top-left.
- Type
- Small thin uppercase category above much larger light sans name; tiny brand/slide numerals peripheral. Font details unknown.
- Color and surface
- Gold-white backlight, deep teal water and dark subject; translucent pale-gray side strip. No image border or card.
- Components
- Full-frame media, category/name, faint mark and right pause/index rail. Pause does not prove playback.
What makes it work
- Let action photo dominate
- Place title over calmer/darker image area
- Keep media cues at edge
On a new subjectFor an urban tree-care education site, lead with a close original photograph of work in progress and retain a narrow peripheral orientation rail. Pair one small category label with a larger but still subordinate subject name near a calm image edge. Preserve dramatic photographic depth and sparse overlays; athlete identity, swim imagery and any implied video are incidental.
Prompts
Create an original website image for {{website_name}} in {{industry}}, serving {{audience}}, presenting {{content}} and making {{functionality}} apparent.
INVARIANTS: Make one close cinematic subject fill most of the opening, with small edge identity, attribution and progress-like marks; the image carries the narrative.
TYPOGRAPHY: Small plain pale sans overlays, with the largest caption still far below hero-headline scale.
COLORS AND SURFACES: Backlit warm/dark photographic contrast with restrained pale labels; exact amber/teal palette is variable.
IMAGERY: Use an original close action or process image with texture and directional light; swimmer, spray, sponsor and progress marks are optional subject details.
VARIABLES: Supply original identity, writing, imagery, accent hues and tasks for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}.
PROHIBITIONS: Do not copy source branding, wording, photographs or signature artwork. Do not turn privacy notices, submission frames or cut-off essential text into style rules. Avoid generic card stacks, extra decorative panels or an unrelated large hero heading when they erase the specified hierarchy.
CONTINUATION: Translate the same relative type scale, alignment and image treatment into the next real content section; give that section a clear purpose rather than duplicating the hero.
RESPONSIVE PROPOSAL: Use a focal crop preserving the action and place edge labels in quiet image areas; provide a caption below if necessary rather than adding an opaque hero panel. Render clear, readable original text and subject-appropriate controls with consistent spacing. These proportions are visual reproduction targets, not common measured CSS. The selected still does not establish source fonts, technology, motion, hover or responsive behavior. Preserve those evidence limits; this prompt remains unvalidated.
Build a functioning responsive website for {{website_name}} in {{industry}} for {{audience}}, using {{content}} and working {{functionality}}.
INVARIANTS: Make one close cinematic subject fill most of the opening, with small edge identity, attribution and progress-like marks; the image carries the narrative.
TYPOGRAPHY: Small plain pale sans overlays, with the largest caption still far below hero-headline scale.
COLORS AND SURFACES: Backlit warm/dark photographic contrast with restrained pale labels; exact amber/teal palette is variable.
IMAGERY: Use an original close action or process image with texture and directional light; swimmer, spray, sponsor and progress marks are optional subject details.
VARIABLES: Supply original identity, writing, imagery, accent hues and tasks for {{website_name}}, {{industry}}, {{audience}}, {{content}} and {{functionality}}.
PROHIBITIONS: Do not copy source branding, wording, photographs or signature artwork. Do not turn privacy notices, submission frames or cut-off essential text into style rules. Avoid generic card stacks, extra decorative panels or an unrelated large hero heading when they erase the specified hierarchy.
CONTINUATION: Carry the relative type scale, alignment and image treatment into appropriate content sections without repeating the hero or inventing irrelevant features.
RESPONSIVE PROPOSAL: Use a focal crop preserving the action and place edge labels in quiet image areas; provide a caption below if necessary rather than adding an opaque hero panel. Use semantic reading order, meaningful image descriptions, keyboard-operable controls and visible focus. Check display text bounds after the chosen fonts load at desktop and phone widths; keep complete essential text inside its container. Verify the actual requested actions rather than styling inert controls. Respect reduced-motion preferences if new motion is added. These proportions are visual reproduction targets, not common measured CSS. The selected still does not establish source fonts, technology, motion, hover or responsive behavior. Preserve those evidence limits; this prompt remains unvalidated.
Live behavior
- Today
- No current-site visual state was captured. The original URL attempt did not render in the dated pass; see evidence_gap and the directly bound zero-state log.
- Responsive
- Not assessed: the original URL did not render from this capture environment on 2026-11-02.
- Scroll
- Not assessed: no current-site scroll state was captured.
