类型：Site模板 · 收录：2026-11-05 01:12:26 · 源码：会员可见
# Prompt: Seed Ark hemp-investment hero ("Golden Plains")
Build a single-file, one-screen **investment landing hero** for a fictional hemp-farming fund, **Seed Ark**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is cinematic and warm: a full-bleed photo of a vast golden-grass field at sunset, with a tall mirrored rectangular monolith standing in it. A giant black condensed headline sits at the top left, with small cream UI chips at the bottom.
## Media
- **Background:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/781de386-020e-4df7-909a-40f623c3f612.jpg` (2048×1360).
- **Scene:** a golden sunset sky with clouds, hazy mountains, a field of tall amber grass, the sun low on the right, and the mirrored monolith reflecting the field just right of centre.
- **Placement:** `object-fit: cover`, centred (43% on phones).
- **Readability:** a soft warm wash from the left keeps the black headline crisp.
- **Motion:** a muted, looping video of the same scene covers the photo with the same fit: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/93054b86-6165-4244-9a64-2ac98a428501.mp4` (1920×1276, 4s). The grass ripples in rolling waves, clouds move, the sun flare shimmers, and the camera glides slowly.
- The loop crossfades its last second into its first, so it never jumps or plays in reverse.
- It fades in (0.8s) once its first frame is ready and is hidden for reduced motion.
- Photo and video share the gentle 1.06 → 1 settle on load.
- **Rule:** nothing in the scene is drawn or animated in code. Only the UI animates.
## Scale
- **Unit:** `--u = max(min(100vw/1672, 100svh/941), min(.75px, 100svh/600, 100vw/1100))`, one design px of a 1672×941 reference.
- **Breakpoints:** phones in portrait (and anything under 640px wide) switch to a flowing column; small landscape screens get a burger menu.
## Type and colour
- **Headline:** Anton, uppercase.
- **UI:** Inter Tight 400/500/600/700.
- **Colours:** headline ink `#140D02`, amber accent `#F2A93B` (hover `#F7B95A`), leaf glyph `#C9861A`, cream surface `#FEFCF7`, nav ink `rgba(0,0,0,.46)`.
## Layout (design units)
- **Brand:** at (59, 26.5). A 40u amber disc holding a dark sprout-from-a-seed mark, then "SEED ARK" (Inter 700, 27.5u).
- **Nav:** centred, starting at 50% − 295u, with five lowercase links at 17.5u: "about us · how it works · why hemp · profits · global market".
- **Contact button:** "CONTACT US", an amber pill (184×54u, radius 27u) at the top right.
- **Headline:** at (59, 107), Anton 127u on a 120u line: "INVEST IN THE / FUTURE OF / HEMP (✱)". It ends with a bracketed hemp-leaf glyph, sized 1.18 × 0.83 em.
- **Pills:** at the bottom left, two cream pills (56u tall, radius 26u): "Stable and investment" and "Full control of the process".
- **Card:** at the bottom right (412×128u, radius 8u, cream).
- **Top row:** an amber leaf glyph, "Seed Ark" in muted text, and an amber badge "↑ 24% annual growth".
- **Divider:** a 1px rule.
- **Bottom row:** "start investing" (23u, semibold) with a ↙ arrow.
## Motion (UI)
- **Entrance:** CSS only.
- The brand settles.
- The headline lines wipe up at 0.3, 0.45 and 0.6s.
- The nav and contact button settle.
- The pills rise at about 0.95s, then the card rises with a slight scale.
- **Hover:** the card lifts 2u and its arrow nudges diagonally; links darken; the contact button lightens.
- **Reduced motion:** no animation and no background video.
## Phones
- **Header:** the brand with a round amber burger button that opens a frosted cream menu panel (links plus a full-width CONTACT US).
- **Headline:** fills the width.
- **Spacer:** a flexible gap so the pills and the full-width card sit at the bottom of the screen.
## Acceptance check (1440×960)
- The golden field and mirrored monolith fill the page, with the black headline top-left.
- The amber contact pill sits top-right, the two cream pills bottom-left and the investment card bottom-right.
- The nav reads "why hemp" and "profits" as separate links.
- **Content:** no real brands.