Free
☁️ SaaS
Kresna Footer
Two-card SaaS footer: a looping blue video card with logo, tagline and dark social tiles, a light link card with a tilted 'Feeling lucky?' cube breaking its top edge, and a faded wordmark fitted edge to edge.
2.9k views 675 copies 1.9k Wörter
Der Prompt
# Kresna — Footer
Build a single-file HTML footer component called Kresna — a sales-automation SaaS brand. The deliverable is one self-contained .html file with inline `<style>` and inline `<script>`. Render it inside a `<section class="footer-section">` on a white page (`body { background: #ffffff; padding: 48px 24px; }`).
## Fonts
Load from Google Fonts in the `<head>`:
- **DM Sans** — weights 400, 500, 600, 700 (body, nav links, buttons, headings, watermark)
- **Caveat** — weights 500, 600, 700 (handwritten accents: "Stay in touch!", "Feeling lucky?", column titles "Navigation"/"Company")
Default body font: `'DM Sans', sans-serif`. Body color `#2d3148`.
Use `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }`.
## Layout structure
A `.footer-wrapper` with `max-width: 1150px`, centered, CSS grid `grid-template-columns: 350px 1fr`, `gap: 16px`, `align-items: stretch`. Two cards side by side:
### Left card — `.footer-left` (video background)
- Position relative, `min-height: 340px`, `border-radius: 28px`, `padding: 32px`, `overflow: hidden`
- Box shadow: `0 12px 40px rgba(21, 76, 189, 0.25)`
- Fallback background: `#1e4fc0`
- Flex column, `justify-content: space-between`
- Contains, in order:
1. A `<video class="footer-left-video" autoplay muted loop playsinline preload="auto">` with `<source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_104800_bc43ae09-f494-43e3-97d7-2f8c1692cfd7.mp4" type="video/mp4" />`. Style: `position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none;`. No overlays, no tints, no noise texture.
2. `.footer-logo` — flex row, `gap: 10px`, `position: relative; z-index: 1`. Contains:
- `.footer-logo-mark` — a 32×32 rounded square (`border-radius: 8px`), `background: rgba(255,255,255,0.15)`, `border: 1.5px solid rgba(255,255,255,0.85)`, centered bold "K" letter inside (DM Sans, 16px, weight 700, white, `letter-spacing: -0.02em`)
- `<span class="footer-logo-name">Kresna</span>` — DM Sans, 22px, weight 700, white, `letter-spacing: -0.02em`
3. `.footer-tagline-container` — `margin-top: auto; margin-bottom: 28px`, `z-index: 1`. Contains `.footer-tagline` (19px, weight 400, white, `line-height: 1.45`) with text:
```html
Smarter sales automation,<br>
<span>powered by AI.</span>
```
The inner `<span>` uses `color: rgba(255, 255, 255, 0.65)`.
4. `.footer-social-row` — flex row, `justify-content: space-between`, `align-items: center`, `gap: 12px`, `z-index: 1`. Contains:
- `.footer-social-label` — Caveat, 17px, weight 600, color `rgba(255,255,255,0.9)`, `letter-spacing: 0.3px`, text: "Stay in touch!"
- `.footer-social-icons` — flex row, `gap: 7px`. Four `.social-icon` divs, each 36×36, `border-radius: 9px`, `background: #0e1014`, centered 15×15 white SVG, box shadow `0 6px 18px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2)`. Hover: `background: #000`, `transform: translateY(-2px)`, deeper shadow, `transition: background 0.2s, transform 0.15s, box-shadow 0.2s`. Icons in order: Discord, X (Twitter), LinkedIn, GitHub — use the official brand path `d=` strings for each in a `<svg viewBox="0 0 24 24">`.
### Right card — `.footer-right` (light gray)
- `background: #f0f1f5`, `border-radius: 28px`, `padding: 40px`, `overflow: visible`, `box-shadow: 0 4px 20px rgba(0,0,0,0.04)`
- Flex column, `justify-content: space-between`, position relative
- Contains:
**Floating "Feeling lucky?" badge — `.footer-lucky-graphic`**
Absolutely positioned, `top: -36px; right: 40px`, `z-index: 10`, flex column, `align-items: flex-start`, `gap: 6px`. Overflows above the top edge of the card.
- `.lucky-cube` — 96×96, `border-radius: 22px`, `transform: rotate(-10deg)`, gradient `linear-gradient(135deg, #5b9ffb 0%, #1e5dd7 55%, #1448be 100%)`, layered shadows:
```css
inset 3px 3px 8px rgba(255,255,255,0.35),
inset -3px -3px 12px rgba(0,0,0,0.18),
8px 14px 28px rgba(20,72,200,0.35)
```
Inside, a `<span class="lucky-cube-mark">K</span>`: DM Sans, 42px, weight 700, white, `letter-spacing: -0.04em`, `transform: rotate(10deg)` (counter-rotates the cube), `text-shadow: 0 3px 6px rgba(0,0,0,0.25)`, `line-height: 1`.
- `.lucky-text-row` — flex row, `gap: 6px`, `align-items: center`, `transform: rotate(-4deg)`, `margin-top: 4px`. Contains:
- `.lucky-arrow` — 22×22 inline SVG, `color: #9ca3af`. SVG content: a curved hand-drawn arrow:
```html
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 20 C 6 14, 10 9, 18 5" />
<path d="M18 5 L 12 5" />
<path d="M18 5 L 18 11" />
</svg>
```
SVG paths: `stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round`.
- `.lucky-text` — Caveat, 20px, weight 600, color `#9ca3af`, `white-space: nowrap`, text: "Feeling lucky?"
**Top — `.footer-right-top` with `.footer-nav-cols`**
Flex row, `gap: 72px`, `padding-top: 8px`. Two `.footer-col` columns:
- Column titles (`.footer-col-title`): Caveat, 24px, weight 600, italic, color `#9ca3af`, `margin-bottom: 18px`
- Links (`.footer-col a`): block, DM Sans, 14px, weight 600, color `#111827`, `margin-bottom: 14px`, no underline, hover color `#1f65d6`, `transition: color 0.2s`
Column 1 — title "Navigation", links: How it works, Features, Pricing, Testimonials, FAQ
Column 2 — title "Company", links: Blog, About, Terms and Condition, Privacy Policy
**Bottom — `.footer-bottom`**
Flex row, `align-items: flex-end`, `justify-content: space-between`, `margin-top: 48px`. Contains:
- `.footer-copyright` — DM Sans, 12.5px, weight 500, color `#9ca3af`, text: "© 2025 Kresna. All rights reserved."
- `.footer-cta-mini` — flex column, `gap: 14px`, contains:
- `<h4>` — 15px, weight 400, color `#6b7280`, `line-height: 1.45`, with text:
```html
AI moves fast.<br><strong>Stay ahead with Kresna.</strong>
```
The `<strong>` is block-level, 19px, weight 700, color `#111827`.
- `.footer-subscribe-row` — flex row, `width: 310px`, `background: #fff`, `border: 1px solid #e5e7eb`, `border-radius: 12px`, `padding: 5px`, `box-shadow: 0 2px 10px rgba(0,0,0,0.04)`. Contains:
- `<input type="email" placeholder="Enter email address">` — flex 1, `padding: 11px 14px`, transparent, no border, DM Sans 13.5px, color `#111827`, placeholder `#9ca3af`
- `<button type="button">Subscribe</button>` — `padding: 11px 22px`, `background: #111214`, white text, DM Sans 13.5px weight 600, `border-radius: 8px`, shadow `0 6px 20px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.15)`. Hover: `background: #000`, deeper shadow, `transform: translateY(-1px)`, `transition: background 0.2s, box-shadow 0.2s, transform 0.15s`.
### Watermark — `.footer-watermark` (sits outside `.footer-wrapper` but inside the section)
A massive faded "Kresna" wordmark that scales fluidly to the full footer wrapper width with the visible glyph edges flush against the container edges.
CSS:
```css
.footer-watermark {
max-width: 1150px;
margin: -60px auto 0;
pointer-events: none;
user-select: none;
position: relative;
z-index: 0;
line-height: 0;
}
.footer-watermark svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.footer-watermark text {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
letter-spacing: -0.03em;
fill: rgba(0, 0, 0, 0.04);
}
```
HTML:
```html
<div class="footer-watermark" aria-hidden="true">
<svg id="watermarkSvg" viewBox="62 95 876 175" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<text id="watermarkText" x="500" y="240" text-anchor="middle" font-size="320">Kresna</text>
</svg>
</div>
```
Inline JS at the end of the section measures the rendered text bounding box with `getBBox()` and updates the SVG `viewBox` so the visible glyph edges sit flush against the container — runs after `document.fonts.ready` and on resize:
```html
<script>
function fitWatermark() {
const svg = document.getElementById('watermarkSvg');
const text = document.getElementById('watermarkText');
if (!svg || !text) return;
try {
const bbox = text.getBBox();
svg.setAttribute('viewBox',
`${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
} catch (e) {}
}
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(fitWatermark);
} else {
window.addEventListener('load', fitWatermark);
}
window.addEventListener('resize', fitWatermark);
</script>
```
## Responsive breakpoints
`@media (max-width: 860px)`:
- `.footer-wrapper` becomes `grid-template-columns: 1fr`
- `.footer-left` `min-height: auto`, `gap: 40px`
`@media (max-width: 560px)`:
- `.footer-right` `padding: 24px`
- `.footer-nav-cols` `gap: 40px`
- `.footer-bottom` `flex-direction: column`, `align-items: flex-start`, `gap: 24px`
- `.footer-subscribe-row` `width: 100%`
- `.footer-lucky-graphic` `right: 12px`, `top: -28px`
- `.lucky-cube` `width: 72px`, `height: 72px`
- `.lucky-cube-mark` scaled proportionally if needed
## Animations / transitions
No keyframe animations. All motion is hover-driven via CSS `transition`:
- Social icons: background, transform, box-shadow on hover
- Subscribe button: background, box-shadow, lift on hover
- Nav links: color shift on hover
The video on the left card autoplays, loops, muted, plays inline (no controls).
## Final markup order inside `<section class="footer-section">`
```html
<section class="footer-section">
<div class="footer-wrapper">
<div class="footer-left"> [video, logo, tagline, social row] </div>
<div class="footer-right"> [floating lucky badge, nav cols, bottom row] </div>
</div>
<div class="footer-watermark"> [SVG] </div>
<script> [fitWatermark] </script>
</section>
```
## Quality Bar
- **The desktop layout lands on its stated geometry.** Measured in headless Chromium at 1440×900: the wrapper is **1150px** wide and centered, the cards are **350** and **784** wide, and both stretch to **461px** tall, because the right card's content sets the row height. The rotated cube's bounding box is 111×111, 4px below the top of the viewport; the badge starts 36px above the right card and sits clear of both nav columns. The subscribe row is **310×51.5**. Only DM Sans 400/500/600/700 and Caveat 600 are loaded. There is no horizontal overflow at any tested width from 375 to 1440.
- **The unscrimmed video washes out the two dimmest lines.** Contrast was sampled across 48 frames of the loop, over the pixels under each text box (cover-mapped into the 350×461 card, with the text's alpha blended in). The bright flare comes into the bottom-left of the frame, right where **"Stay in touch!"** (90% white Caveat, 17px) sits. On average 71% of its pixels fall below 4.5:1, some frames push every pixel below that line, and the worst frame's median is **1.29:1**. **"powered by AI."** (65% white) averages 60% of pixels below 4.5:1, with a worst median of **1.37:1**. The first tagline line and the logo stay readable (median ≥ 9.5:1 in every frame). "No overlays, no tints" is fine for the top half of the card, but the bottom-left needs a local treatment or a different crop.
- **`getBBox()` fits the font box, not the glyphs.** The script sets the viewBox to the text's layout box, which includes the font's full ascent and descent. At 1440 the SVG is **466px** tall, but the ink of "Kresna" is only **255px** of that. There are **105px** of empty space above the cap height and **107px** below the baseline, and the letters sit 25px in from the left edge and 11px from the right. The empty band under the watermark is why the page is 963px tall and scrolls in a 900px viewport. For a truly flush fit, measure the ink instead (canvas `measureText().actualBoundingBox*`, or known cap-height/side-bearing ratios).
- **Below about 706px, the watermark tucks under the cards.** The `-60px` top margin is fixed, while the empty band above the glyphs scales with width (93.6 user units × width/1027.5). Once the wrapper is narrower than about 658px, the glyph tops slide behind the right card (`z-index` puts the wrapper on top). At 390px the band is 31px, so **29px of the 76px-tall word** is hidden and the word reads as cut off.
- **In the stacked layout, the badge runs into its neighbours.** At ≤860px the cards stack 16px apart, so `top:-36px` pushes the rotated cube **28px into the video card's bottom-right corner** (18px at ≤560px, where it shrinks to 72px). At ≤414px the "Feeling lucky?" row overlaps the "Company" column's box by 61–85px horizontally. At 390 the arrow lands on the tail of the column title.
- **At 320px the page scrolls sideways.** The email input keeps its default intrinsic width (`size=20`, about 169px). With the 110px button and the row padding, the CTA has a minimum width of **291px**, but the right card's content box is only 224px at 320px. The `1fr` grid track (`min-width:auto`) grows to **339px**, so both cards spill past a 272px wrapper, giving **42px** of horizontal scroll at 320 and 2px at 360. The fix is `min-width:0` on the grid items plus `min-width:0` on the input.
- **Caveat has no italic.** `.footer-col-title` asks for `font-style: italic`, so "Navigation" and "Company" come out as synthetic oblique. Caveat 500 and 700 are requested but never rendered; only 600 is used.
- **Several elements only look interactive.** The social tiles are `div`s with `cursor:pointer`: they can't be focused, have no link and no accessible name unless you add one. This build gives them `role="img"` plus `aria-label`. The Subscribe button is `type="button"`, has no handler and no `<form>`, and the email input has no label. The nav links point to `#`.
- **Choices this build makes where the spec is silent.** The clip is served from `./assets`. It was re-encoded from the 1920×1080 / 12.04s / 3.7MB source to 1280×720 H.264, with no audio track and `faststart`, which brings it to **265KB**. The gradient footage stays clean at that size. Fonts are self-hosted because the site's demo pages make no external requests: DM Sans uses the four latin-subset weights (about 14KB each, since the email field takes arbitrary input), and Caveat 600 is subset to the glyphs of its four phrases (11KB). Icon paths are Simple Icons' Discord, X, LinkedIn and GitHub marks. The cube's "K" drops to 32px at ≤560px, keeping the 42/96 ratio.
Das könnte dir auch gefallen
Free
Featured
Heritage Grove Footer
🛒 Ecommerce
Full-viewport footer laid straight onto a hand-drawn ink landscape loop — five columns on the paper sky, and below 1100px the clip leaves the background and becomes a flow item under the copy.
4.5k 562CursorClaude CodeLovable
Free
Signal
☁️ SaaS
Pixel-locked single-file login page: a looping peregrine-falcon dive beside a frosted card, with embedded fonts, a JS layout engine that switches between desktop, tablet-portrait and phone compositions, and a once-only WAAPI entrance.
2.1k 620CursorClaude CodeLovable
Free
LinkFlow
☁️ SaaS
Full-bleed hero whose clip is captured frame by frame and replayed forward-then-reverse on canvas, under a frosted pill nav, a two-tone green headline and a slide-in mobile drawer built entirely from CSS transitions.
2.8k 395CursorClaude CodeLovable
Free
Vesper.ai
☁️ SaaS
Single-viewport AI-infrastructure landing on pure black: a liquid-metal pill nav, a serif-italic mixed headline over a full-bleed hero still, and three stats locked to the bottom of one non-scrolling frame.
2.7k 379CursorClaude CodeLovable
