类型：Site模板 · 收录：2026-11-05 01:12:34 · 源码：会员可见
# Prompt: yondering. travel hero
Build a single-file, one-screen **travel landing hero** for a fictional travel brand, **yondering.**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is a full-bleed painterly halftone illustration of Santorini at noon. Whitewashed houses with blue-domed churches and magenta bougainvillea tumble down the cliff on the left, and the sparkling deep-blue Aegean sea and caldera cliffs sit on the right, under a clean ultramarine sky. Over it are a cream serif headline, cream pill buttons and a slim footer bar.
## Media
- **Illustration:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/bff3182e-4cad-477e-829b-15bc572e9e95.jpg` (1672×946). Painterly with a visible halftone dot texture. The top half is a clean deep ultramarine sky (`#0021A1`), with a few small clouds at the far edges only. It covers the stage, centred.
- **Motion:** a muted 4s loop of the same illustration, laid over it with identical cover rules: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/1295289d-4fae-4083-bd8e-93b14f065039.mp4`.
- The sea shimmers, the sailboat glides, the clouds drift, the bougainvillea sways, and the camera drifts gently.
- The last second crossfades into the first, so it never plays in reverse.
- Fade it in (0.8s) when ready.
- **Rule:** nothing in the scene is drawn or animated in code.
- **Readability:** a soft fade to black rises 243u from the bottom behind the footer bar.
## Type and colour
- **Fraunces** (variable) for the logo and headline.
- **Inter** (variable) for everything else.
- **Colours:** cream buttons `#FEEED5` with ink text `#070707`; cream UI text `#FEF8DC`; sky `#0021A1`.
## Layout (1139×643 comp, `--u = min(100vw, 100dvh*1139/643)/1139`)
- **Nav:**
- "yondering." in Fraunces at the top-left.
- Centre: PLACES. · JOURNEYS. · EXPERIENCES. · JOURNAL.
- Right: a cream pill "PLAN YOUR ESCAPE ↗" and a round outline burger.
- **Hero, centred:**
- eyebrow "A DIFFERENT KIND OF GETAWAY" (letter-spaced)
- headline "Get Lost. / Feel Found." in heavy Fraunces
- two-line subline: "For the places you've never seen, the moments / you've never felt, and the stories you'll never forget."
- a cream pill "FIND YOUR YONDER ↗" and an underlined "EXPLORE THE COLLECTION →"
- **Footer bar:**
- a pin icon with "SANTORINI / 36°26′ N · 25°22′ E", a hairline, then "THE AEGEAN / COLLECTION"
- centre: "SCROLL TO WANDER ↓"
- right: "01 / 04" with previous and next arrows
## Motion (UI)
- **Entrance:** one Web Animations sequence. The logo, links and buttons fade in, each headline line rises, then the subline, the CTAs, and the footer bar.
- **Reduced motion:** no entrance and no video.
## Phones
- The illustration covers the screen, focused on the village.
- The menu becomes the burger.
- The headline and buttons stack centred, and the footer bar keeps the location and arrows.
## Acceptance check (1440×960)
- The painterly Santorini scene fills the page, with the clean blue sky behind "Get Lost. Feel Found."
- The sea sparkles and the boat moves in the loop.
- **Content:** no real brands.