类型：Site模板 · 收录：2026-10-17 12:02:08 · 源码：会员可见
# Prompt: Recreate the Driftbar Meadow Footer (exact spec)
Copy everything below the line into your AI coding tool.
---
Build a single-file `index.html` (inline CSS, no frameworks, no build step) that recreates the **Driftbar** footer **exactly** as specified. It is one full-viewport footer:
- a pale paper top holding a brand block and three link columns
- a looping video of a blue-hour meadow (lavender mist, fireflies, first stars) filling the lower half and fading into the paper
- a giant frosted-glass "Driftbar" wordmark sinking into lavender fog at the bottom
Follow every value literally.
## 1. Media (use these exact URLs)
```html
<div class="footer__stage" aria-hidden="true">
<video class="footer__video"
src="https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/4d01c727-d9c5-47c8-a778-35a451ffd39f.mp4"
poster="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261014_121838_c97d0940-f430-4304-8573-4f47ee44f447.png"
autoplay muted loop playsinline preload="auto"></video>
</div>
```
The video is 1920×1080 and loops seamlessly. It shows rolling grassy hills at blue hour: a grassy slope in the left foreground, misty hills receding to the right, a pink-violet horizon, a periwinkle sky with a few stars, and warm fireflies over the grass.
## 2. Font
**Inter** (variable, optical size 14–32, weight 400–700) for everything:
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap" rel="stylesheet" />
```
Stack: `"Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`, with antialiased font smoothing.
## 3. Head
`<title>Driftbar — Meadow Footer</title>` and `<meta name="viewport" content="width=device-width, initial-scale=1" />`.
## 4. Tokens and unit system
```css
:root {
--paper: #f1f1ee;
--ink: #0c0c0c;
--body: #6f6f6c;
--muted: #9c9c98;
--wordmark: #efefeb;
--mist: #e2e3f1; /* pale lavender the blue-hour meadow fades into */
--font: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
```
The footer is drawn on a **1440 × 672 canvas**. Every desktop size below is `calc(N * var(--u))`, written as `N u`:
```css
.footer {
--u: min(100vw / 1440, 100vh / 672);
--u: min(100vw / 1440, 100svh / 672);
position: relative; height: 100vh; height: 100svh;
background: var(--paper); overflow: hidden; isolation: isolate;
}
```
## 5. Structure (exact DOM order)
```
footer.footer
div.footer__stage[aria-hidden] > video.footer__video (section 1)
p.footer__wordmark[aria-hidden] "Driftbar"
div.footer__fog[aria-hidden]
div.footer__content
div.brand
a.brand__logo[href="#"][aria-label="Driftbar home"] > span.brand__mark + "Driftbar"
h2.brand__title "The calm bar for macOS"
p.brand__text "Driftbar gathers music, tasks, meetings, weather, search, focus timers, quick notes, and more handy widgets into one calm floating bar just above your Mac Dock."
a.brand__cta[href="#"] > Apple-logo svg + "Get Driftbar today"
p.brand__copy "© 2026 Driftbar Inc. - Made in Lisbon."
p.brand__by "Built with " span.brand__heart[aria-label="love"] "💙" " by " span.brand__author > (span.brand__avatar[aria-hidden] > svg) "Mira Okafor"
ul.brand__status (chips, below)
nav.col.col--menu[aria-label="Menu"] h3.col__title "Menu" ul.col__list: Tour, Showcase, Q&A, Licence, Journal
nav.col[aria-label="Essentials"] h3.col__title "Essentials" ul.col__list: Support, Up next, Privacy notice, Usage guidelines, Manage licences
nav.col[aria-label="From our team"] h3.col__title "From our team" ul.col__list: Clipnest.io, Tallyo.io, Pinwell.io, Glyfo.co, Shelfmark.app, Wireloom.com, Gridcraft.app
```
Every link is `<li><a href="#">…</a></li>`.
**Apple logo (CTA):**
```html
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path
d="M17.05 12.54c-.03-2.75 2.25-4.07 2.35-4.14-1.28-1.87-3.27-2.13-3.98-2.16-1.69-.17-3.3 1-4.16 1-.86 0-2.18-.97-3.59-.95-1.85.03-3.55 1.07-4.5 2.72-1.92 3.33-.49 8.25 1.38 10.95.91 1.32 2 2.8 3.43 2.75 1.38-.06 1.9-.89 3.56-.89 1.66 0 2.13.89 3.59.86 1.48-.03 2.42-1.34 3.33-2.67 1.05-1.53 1.48-3.02 1.5-3.1-.03-.01-2.88-1.1-2.91-4.37ZM14.31 4.46c.76-.92 1.27-2.2 1.13-3.46-1.09.04-2.41.73-3.19 1.64-.7.81-1.31 2.1-1.15 3.34 1.22.09 2.46-.62 3.21-1.52Z"
/>
</svg>
```
**Avatar:**
```html
<svg viewBox="0 0 24 24">
<rect width="24" height="24" fill="#e6e6e3" />
<circle cx="12" cy="9.2" r="4.4" fill="#1b1b1b" />
<path d="M3 25c0-6 4-9.4 9-9.4S21 19 21 25Z" fill="#1b1b1b" />
</svg>
```
**Status chips:**
```html
<ul class="brand__status" aria-label="Driftbar status">
<li class="chip"><span class="chip__dot" aria-hidden="true"></span>9,400 Macs in sync</li>
<li class="chip">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7" /><path d="M20 4v7h-7" /></svg>
v1.8 · Shipped today
</li>
<li class="chip">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 2.7 5.6 6.1.8-4.5 4.2 1.1 6-5.4-2.9-5.4 2.9 1.1-6L3.2 9.4l6.1-.8Z" /></svg>
Rated 4.8 avg
</li>
</ul>
```
## 6. Desktop styles
**Stage and video**
- `.footer__stage`: absolute, `inset:0`, z-index 0.
- `.footer__video`: block, 100% × 100%, `object-fit:cover; object-position:50% 100%; transform:translateY(9%)`.
- `.footer__stage::after` (a haze so the copy stays readable): absolute, `inset:0`, `linear-gradient(to bottom, var(--paper) 0%, rgb(241 241 238 / .96) 26%, rgb(241 241 238 / .72) 44%, rgb(241 241 238 / 0) 70%)`.
**Wordmark, frosted glass**
- Position: absolute, `left:50%; bottom:-2u; transform:translateX(-50%)`, z-index 1, margin 0.
- Type: `font-size:390u` (this makes "Driftbar" span about 1200u), weight 600, `line-height:.74`, `letter-spacing:-0.045em`, no wrap, `pointer-events:none; user-select:none`.
- Glass fill, clipped to the letters:
```css
color: rgb(232 234 250 / .4);
background: linear-gradient(to bottom, rgb(255 255 255 / .78), rgb(214 218 246 / .36) 48%, rgb(255 255 255 / .62));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 -1u 0 rgb(255 255 255 / .55)) drop-shadow(0 0 18u rgb(190 200 255 / .45));
```
Do **not** use `-webkit-text-stroke`. The letters overlap slightly, and a stroke would draw lines through the overlaps.
**Fog**
- `.footer__fog`: absolute at the bottom (`inset:auto 0 0`), z-index 2, `height:17%`, no pointer events.
- Background: `linear-gradient(to top, var(--mist) 0%, rgb(226 227 241 / .6) 30%, rgb(226 227 241 / 0) 100%)`.
**Content grid**
- `.footer__content`: relative, z-index 3.
- Grid columns `440u 240u 240u 1fr`, `align-items:start`.
- Width `1440u`, `margin:0 auto`, padding `86u 100u 0 160u`.
**Brand block**
- `.brand__logo`: inline-flex, centred, gap `10u`, `17u`, weight 500, letter-spacing −0.02em.
- `.brand__mark`: a `30u` square with radius `8u`.
- Background `linear-gradient(to bottom, #2b2b2b, #0a0a0a 55%)`, shadow `0 1u 2u rgb(0 0 0 / .25)`.
- `::after` is a white pill: left and right 13%, bottom 14%, height 19%, radius 999px.
- `.brand__title`: margin-top `19u`, `20u`, weight 600, line-height 1.2, −0.045em.
- `.brand__text`: max-width `412u`, margin-top `18u`, `--body` colour, `13.7u`, line-height 1.43, −0.012em.
- `.brand__cta`:
- Box: inline-flex, gap `6u`, height `32.5u`, margin-top `20u`, padding `0 16u 0 15u`, radius `7u`, black, white text.
- Type: `11.8u`, weight 500, −0.01em.
- Icon: the svg is `13u` with margin-top `−1.5u`.
- Hover: background `#262626` and `translateY(-1px)` (.2s).
- `.brand__copy`: margin-top `23u`, `--muted`, `12.2u`, letter-spacing .01em.
- `.brand__by`: flex, centred, gap `5u`, margin-top `21u`, `11.8u`, weight 500, −0.01em.
- `.brand__heart` is .95em. `.brand__author` is inline-flex with gap `6u` and margin-left `5u`.
- `.brand__avatar` is a `23u` circle on `#e3e3e0`.
- `.brand__status`: flex, wrap, gap `8u`, margin-top `16u`.
- `.chip`:
- Box: inline-flex, gap `6u`, height `25u`, padding `0 10u`, `1px solid rgb(12 12 12 / .12)`, radius 999px, `rgb(255 255 255 / .55)` background.
- Type: `10.8u`, weight 500, −0.01em, no wrap.
- Icons: the chip svg is `11u`, no fill, `stroke:currentColor`, stroke-width 2, round caps and joins.
- `.chip__dot`: a `6u` circle in `#2fb36a` with a ring `0 0 0 2.5u rgb(47 179 106 / .18)`.
**Link columns**
- `.col__title`: `16u`, weight 600, line-height 1, −0.045em.
- `.col__list`: grid, gap `20.5u`, margin-top `24u`, `13.7u`, line-height 1.24, letter-spacing .022em, colour `#161616`.
- The Menu column's list overrides that: gap `15u`, margin-top `21u`, weight 500, −0.025em, `--ink`.
- Links fade to opacity .55 on hover (.2s).
## 7. Tablet (768–1023px)
- `--u: min(100vw / 1040, 100svh / 672)`.
- Columns `400u 190u 210u 1fr`, width `1040u`, padding `64u 40u 0`.
- Brand text max-width `350u`.
- Wordmark `286u`, bottom `10u`.
## 8. Mobile (≤767px)
- **Footer:** `--u:1px`. It becomes a flex column, `height:auto; min-height:100svh`.
- **Haze:** `linear-gradient(to bottom, var(--paper) 0%, rgb(241 241 238 / .95) 50%, rgb(241 241 238 / .8) 68%, rgb(241 241 238 / 0) 90%)`. It runs further down than on desktop because the blue-hour hills are darker.
- **Content:**
- Grid columns `auto auto auto`, `justify-content:space-between`.
- Gaps: column 12px, row 36px.
- Width 100%, padding `40px 20px 0`, margin-bottom `max(34vw, 150px)`.
- `.brand` spans all columns.
- **Brand block sizes:**
- Title 21px. Text max-width 34em, 14px.
- CTA: height 38px, padding `0 18px 0 16px`, radius 8px, 13px, svg 14px.
- Copy and credit line 12.5px.
- Chips: height 28px, 12px.
- **Columns:**
- Column titles 15px.
- All lists: gap 14px, margin-top 20px, 13px, letter-spacing 0, no wrap.
- **Wordmark and fog:** wordmark `bottom:5vw; font-size:27vw`, fog height 7%.
- **Below 360px:** columns become `1fr 1fr`.
## 9. Motion
The only motion is the looping video and the hover transitions. Under `prefers-reduced-motion: reduce`, turn off the CTA and link transitions.
## 10. Acceptance check
At 1440×900 you should see:
- **Top left:** the black logo tile and "Driftbar".
- **Brand block:** "The calm bar for macOS", the three-line grey paragraph and the black "Get Driftbar today" button. Below them, the copyright, the "Built with 💙 by Mira Okafor" line and three chips.
- **Columns:** Menu, Essentials and From our team, starting at x≈600, 840 and 1080.
- **Lower half:** the blue-hour meadow with fireflies, fading into the paper above.
- **Wordmark:** a giant frosted-glass "Driftbar" spanning roughly x 140–1320, sinking into lavender fog at the bottom edge.