类型：Site模板 · 收录：2026-10-26 23:38:24 · 源码：会员可见
# Prompt: Find Your Stay roommate-rental hero ("Coastal Blue")
Build a single-file, one-screen **landing hero for an AI-powered home-rental and roommate-matching service** called "Find Your Stay". Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is light, calm and coastal: a sky-blue band across the top, a warm cream page below it, a big serif-and-sans headline on the left, and a fanned deck of three tilted, rounded listing cards on the right. Each card holds a tall building photo cut out on a plain card colour.
## Scale
- **Units:** a 1414×1001 reference composition with `--u = min(100vw/1414, max(100svh/1001, .55px))`. Extra viewport height is shared out between the gaps so the page always fills the screen.
- **Bands:** the blue band and the cream ground run full-bleed, and the composition stays centred.
## Colour and type
- **Colours:**
- band `#C1E2F6`, cream `#FEFAEF`
- navy `#0A2737`, ink `#0A2330`
- card colours: peach `#F6E5C5`, aqua `#C9E2DD`, pale blue `#C5E1EC`
- pill grey `#EEEBE4`, line `#CDCBBF`
- **Fonts:**
- **Young Serif** for "Match With the Right" and the card titles
- **Inter** (variable) for everything else
## Header
- **Left:** a navy building-block logo mark (two towers with light window bars).
- **Centre:** a navy pill nav (324×51u) with "Home · Explore · Blog · Contact" in white Inter 500.
- **Right:** two round cream icon buttons, chat and profile, plus a burger on phones.
## Hero copy (left, about 330u from the top)
- **Headline:** "Find Your Stay" (Inter, light), then "**Match With the Right**" (Young Serif, heavy), then "Roommate." (Inter, light), at about 64u.
- **Lede:** "AI-powered home rental and shared-room / matching for modern travelers." (20u).
- **Search pill:** 391×61u, light grey, with a round navy search button on the left and the placeholder "Search homes or roommates...".
- **Stats card:** at the bottom left, a 478×94u card with a thin border and three columns:
- "100%" / Reply Rate
- "4.89" with five navy stars
- "120" / Reviews
## Card deck (right, three tilted rounded cards)
1. **Back card**, peach, tilted about 14°:
- "Oceanview Studio / Manhattan Beach", "$165/night", "Los Angeles, CA"
- a round navy arrow button
- a sand-stucco high-rise with blue-glass balconies
2. **Middle card**, aqua, tilted about −14°:
- "Cozy Loft — / Downtown Malibu", "$102/night", "Malibu, CA"
- a slim white loft tower
3. **Front card**, pale blue, upright:
- "Modern Seaside / Apartment", "$139/night", "Santa Monica, CA"
- a white seaside apartment block with glass balconies and two palm trees
**Photos:** each building is a **cut-out PNG on a transparent background**, bottom-aligned in the card, with `mix-blend-mode: luminosity`, so it takes on the card's own tint. That gives a soft, transparent, plain-background look rather than a full photo scene.
## Motion
- **Entrance:** one Web Animations timeline.
- The logo, nav and actions fade in.
- The three headline lines wipe up one after another.
- The lede, search and stats rise in turn.
- The cards unclip from the bottom in turn.
- **Hover:**
- The deck fans out slightly: the back card moves up and right, the middle card up and left.
- The arrow buttons scale up.
- **Phone:** the menu opens a panel; Escape and tapping outside close it.
- **Reduced motion:** no animation.
## Responsive
- **Tablet and phone:** the card deck moves above the copy and the stats card goes full width. Everything stays one column.
## Acceptance check (1440×960)
- The sky-blue band sits across the top over the cream page.
- The serif and sans headline is on the left, with search and stats below it.
- Three tilted coastal listing cards on the right each hold a tinted building cut-out on a plain colour.
- **Content:** no real brands.