1. Centered — classic marketing hero with eyebrow + big headline + CTA row

New · Version 2.0

Build your portfolio in an afternoon

Everything you need — templates, components, and live examples — ready to remix into your own site.

<section class="hero">
  <div class="eyebrow">New · Version 2.0</div>
  <h1>Build your portfolio in an afternoon</h1>
  <p>Everything you need — templates, components, and live examples — ready to remix into your own site.</p>
  <div class="row">
    <a class="btn" href="#">Get started</a>
    <a class="btn ghost" href="#">Watch demo</a>
  </div>
</section>
.hero {
  padding: 90px 20px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fdf2f8;
  color: #ec4899;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

2. Split Hero — text left, image right (classic 50/50)

Design systems
for humans

Built by designers who ship — not committees. Every component works out of the box.

Explore the system

<section class="split">
  <div class="text">
    <h1>Design systems<br>for humans</h1>
    <p>Built by designers who ship — not committees. Every component works out of the box.</p>
    <a class="btn" href="#">Explore the system</a>
  </div>
  <div class="image"></div>
</section>
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
}

.image {
  background: url('photo.jpg') center/cover;
}

/* Stack on mobile */
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
}

3. Video Background — autoplay-muted-loop for cinematic intros

Go somewhere new

Book a trip to a place you've only seen in daydreams — and leave the planning to us.

Plan your trip

<section class="video-hero">
  <video autoplay muted loop playsinline>
    <source src="bg.mp4" type="video/mp4">
  </video>

  <div class="content">
    <h1>Go somewhere new</h1>
    <p>Book a trip to a place you've only seen in daydreams — and leave the planning to us.</p>
    <a class="btn" href="#">Plan your trip</a>
  </div>
</section>
.video-hero { position: relative; overflow: hidden; }

video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay for text contrast */
.video-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

.content { position: relative; z-index: 1; }

4. Gradient Mesh — layered radial gradients for a colorful modern look

Software you'll actually enjoy
opening on Monday.

Tools shouldn't feel like chores. We sweat the details so your team can stop thinking about software.

Start free trial

<section class="mesh-hero">
  <h1>Software you'll <span>actually enjoy</span><br>opening on Monday.</h1>
  <p>Tools shouldn't feel like chores. We sweat the details so your team can stop thinking about software.</p>
  <a class="btn" href="#">Start free trial</a>
</section>
/* Stack 4 radial gradients over a dark base */
.mesh-hero {
  background:
    radial-gradient(circle at 20% 20%, #ec4899, transparent 40%),
    radial-gradient(circle at 80% 30%, #8b5cf6, transparent 40%),
    radial-gradient(circle at 60% 80%, #06b6d4, transparent 40%),
    radial-gradient(circle at 30% 90%, #f59e0b, transparent 40%),
    #0f172a;
}

/* Bonus: gradient text for the accent word */
h1 span {
  background: linear-gradient(135deg, #fbcfe8, #ddd6fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

5. Asymmetric — giant title with italic accent, side stats column

Make things that matter.

A studio for brands who want to stop blending in. 12 years, 80+ launches, 0 templates.

See our work

80+Launches

12Years

98%Retention

<section class="asym">
  <div class="left"><h1>Make things that <em>matter.</em></h1></div>
  <div class="right">
    <p>A studio for brands who want to stop blending in. 12 years, 80+ launches, 0 templates.</p>
    <a class="btn" href="#">See our work</a>
    <div class="stat">
      <div><strong>80+</strong><span>Launches</span></div>
      <div><strong>12</strong><span>Years</span></div>
      <div><strong>98%</strong><span>Retention</span></div>
    </div>
  </div>
</section>
.asym {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  align-items: center;
  padding: 80px 50px;
}

h1 {
  font-size: 4.5rem;
  line-height: .95;
  letter-spacing: -0.04em;
}

/* Italic serif accent for the highlight word */
h1 em {
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  color: #ec4899;
}

6. Editorial — big serif headline, magazine-style layout

Volume 04 · Spring 2026

Quiet rooms, loud ideas.

A seasonal magazine on the craft behind the work you actually love using.

Read this issue

<section class="editorial">
  <div class="kicker">Volume 04 · Spring 2026</div>
  <h1>Quiet <em>rooms</em>, loud ideas.</h1>
  <p>A seasonal magazine on the craft behind the work you actually love using.</p>
  <a class="btn" href="#">Read this issue</a>
</section>
.editorial h1 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
}

.kicker {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b45309;
}

/* Italic subline for magazine voice */
.editorial p {
  font-family: Georgia, serif;
  font-style: italic;
}

7. Stats Hero — social proof numbers anchor the pitch

Trusted by teams building the future

From two-person studios to global newsrooms — 50,000+ people use our tools daily.

50k+Active users

120Countries

4.9★Avg. rating

99.98%Uptime

<section class="stats-hero">
  <h1>Trusted by teams building the future</h1>
  <p>From two-person studios to global newsrooms — 50,000+ people use our tools daily.</p>
  <div class="stats">
    <div><strong data-target="50000" data-suffix="+">0</strong><span>Active users</span></div>
    <div><strong data-target="120">0</strong><span>Countries</span></div>
    <div><strong>4.9★</strong><span>Avg. rating</span></div>
    <div><strong>99.98%</strong><span>Uptime</span></div>
  </div>
</section>
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 30px;
}

/* Giant gradient-filled numbers */
.stats strong {
  font-size: 2.4rem;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
// Count up each <strong data-target="..."> from 0 to its target.
// Add data-suffix="+" for "50k+" style endings.
function animate(el) {
  const target = parseFloat(el.dataset.target);
  const suffix = el.dataset.suffix || '';
  const duration = 1500;
  const start = performance.now();

  function step(now) {
    const p = Math.min((now - start) / duration, 1);
    const value = Math.floor(target * p);
    el.textContent = (value >= 1000 ? (value / 1000).toFixed(0) + 'k' : value) + suffix;
    if (p < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

// Trigger when the stats row scrolls into view
const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.querySelectorAll('strong[data-target]').forEach(animate);
      io.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });

document.querySelectorAll('.stats').forEach(s => io.observe(s));

8. Product Screenshot — pitch above, app mockup below in a browser frame

Your workspace, rethought.

The dashboard your team will actually open — instead of closing a browser tab on.

Try it free Book a demo

<section class="product-hero">
  <h1>Your workspace, rethought.</h1>
  <p>The dashboard your team will actually open — instead of closing a browser tab on.</p>
  <div class="row">
    <a class="btn" href="#">Try it free</a>
    <a class="btn ghost" href="#">Book a demo</a>
  </div>

  <!-- Browser-framed screenshot -->
  <div class="mock">
    <div class="mock-chrome">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="mock-body"></div>
  </div>
</section>
.mock {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.2);
  overflow: hidden;
}

.mock-chrome {
  padding: 10px 14px;
  background: #e5e7eb;
  display: flex;
  gap: 8px;
}

.mock-chrome .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d4d4d8;
}

9. Image Slideshow — 4 photos cross-fade via CSS-only keyframes (no JS)

Moments worth chasing

A curated library of travel photography from studios and contributors around the world.

Browse the library

<section class="slideshow">
  <!-- Each slide has its own bg image -->
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>

  <div class="content">
    <h1>Moments worth chasing</h1>
    <p>A curated library of travel photography from studios and contributors around the world.</p>
    <a class="btn" href="#">Browse the library</a>
  </div>

  <!-- One dot per slide -->
  <div class="dots"><span></span><span></span><span></span><span></span></div>
</section>
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slideFade 20s infinite;
}

/* Stagger each slide's delay by (total / count) */
.slide:nth-child(1) { background-image: url('1.jpg'); animation-delay: 0s; }
.slide:nth-child(2) { background-image: url('2.jpg'); animation-delay: 5s; }
.slide:nth-child(3) { background-image: url('3.jpg'); animation-delay: 10s; }
.slide:nth-child(4) { background-image: url('4.jpg'); animation-delay: 15s; }

/* Visible 0–22% of the loop, fading at each edge */
@keyframes slideFade {
  0%, 22%   { opacity: 1; }
  28%, 97%  { opacity: 0; }
  100%      { opacity: 1; }
}

10. Video Slideshow — multiple looping clips cross-fade (silent + autoplay)

Stories that move

Four atmospheres cycling every six seconds — a living hero that never stops.

Start watching

<section class="video-slideshow">
  <div class="vslide">
    <video autoplay muted loop playsinline>
      <source src="clip1.mp4" type="video/mp4">
    </video>
  </div>
  <div class="vslide">
    <video autoplay muted loop playsinline>
      <source src="clip2.mp4" type="video/mp4">
    </video>
  </div>
  <div class="vslide">
    <video autoplay muted loop playsinline>
      <source src="clip3.mp4" type="video/mp4">
    </video>
  </div>
  <div class="vslide">
    <video autoplay muted loop playsinline>
      <source src="clip4.mp4" type="video/mp4">
    </video>
  </div>

  <div class="content">
    <h1>Stories that move</h1>
    <p>Four atmospheres cycling every six seconds — a living hero that never stops.</p>
    <a class="btn" href="#">Start watching</a>
  </div>
</section>
.vslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: slideFade 24s infinite;
}
.vslide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same cross-fade pattern — adjust delays by (24s / 4 = 6s) */
.vslide:nth-child(1) { animation-delay: 0s; }
.vslide:nth-child(2) { animation-delay: 6s; }
.vslide:nth-child(3) { animation-delay: 12s; }
.vslide:nth-child(4) { animation-delay: 18s; }

11. Image + Video Combo — split layout: video on one side, image hero on the other

Where motion
meets stillness.

Your work, shown two ways — a moving clip on the left tells the story, a photo on the right sets the tone.

See the portfolio

<section class="combo">
  <div class="left">
    <video autoplay muted loop playsinline>
      <source src="clip.mp4" type="video/mp4">
    </video>
  </div>
  <div class="right">
    <div class="body">
      <h1>Where motion<br>meets stillness.</h1>
      <p>Your work, shown two ways — a moving clip on the left tells the story, a photo on the right sets the tone.</p>
      <a class="btn" href="#">See the portfolio</a>
    </div>
    <div class="grid-bg"><div></div><div></div><div></div><div></div></div>
  </div>
</section>
.combo {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Left: full-bleed looping video */
.left video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right: photo with gradient overlay + text */
.right {
  background:
    linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.6)),
    url('hero.jpg') center/cover;
  color: #fff;
}

/* Stack on mobile */
@media (max-width: 720px) {
  .combo { grid-template-columns: 1fr; }
}

12. Full Page — the whole thing as one copy-pasteable file, with a live preview

A complete, standalone HTML file built around the centered gradient-mesh hero — top bar, hero, and a little page content below. Save it as index.html, open it in a browser, and it just works — no libraries, no build step.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Launch &middot; My Product</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2433; background: #fff; line-height: 1.6; }

    /* ===== Top bar ===== */
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; }
    .topbar .logo { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
    .topbar nav a { color: #555; text-decoration: none; font-size: .9rem; margin-left: 22px; }
    .topbar nav a:hover { color: #111; }

    /* ===== Hero (the component) ===== */
    .hero {
      text-align: center;
      padding: 90px 24px 100px;
      color: #fff;
      background:
        radial-gradient(circle at 20% 20%, #ec4899, transparent 42%),
        radial-gradient(circle at 80% 25%, #8b5cf6, transparent 42%),
        radial-gradient(circle at 60% 85%, #06b6d4, transparent 42%),
        #0f172a;
    }
    .hero .eyebrow {
      display: inline-block;
      padding: 5px 14px; border-radius: 999px;
      background: rgba(255,255,255,.12); color: #f5d0fe;
      font-size: 12px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      margin-bottom: 20px;
    }
    .hero h1 {
      font-size: clamp(2.4rem, 6vw, 4rem);
      font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
      max-width: 820px; margin: 0 auto 18px;
    }
    .hero h1 span {
      background: linear-gradient(135deg, #fbcfe8, #ddd6fe);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero p { color: rgba(255,255,255,.82); max-width: 540px; margin: 0 auto 30px; font-size: 1.08rem; }
    .hero .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .btn {
      display: inline-block; padding: 13px 28px; border-radius: 999px;
      font-weight: 600; font-size: 14px; text-decoration: none;
      background: #fff; color: #111;
    }
    .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }

    /* ===== Below-the-fold content so it feels like a real page ===== */
    .features { max-width: 920px; margin: 0 auto; padding: 70px 24px; }
    .features h2 { text-align: center; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 36px; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
    .card { border: 1px solid #eee; border-radius: 14px; padding: 26px; }
    .card h3 { font-size: 1.05rem; margin-bottom: 8px; }
    .card p { color: #666; font-size: .92rem; }

    footer { text-align: center; padding: 40px 24px; color: #999; font-size: .85rem; border-top: 1px solid #eee; }
  </style>
</head>
<body>

  <header class="topbar">
    <div class="logo">Lumen</div>
    <nav>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Sign in</a>
    </nav>
  </header>

  <!-- The hero section -->
  <section class="hero">
    <div class="eyebrow">New &middot; Version 2.0</div>
    <h1>Build your portfolio <span>in an afternoon.</span></h1>
    <p>Everything you need &mdash; templates, components, and live examples &mdash; ready to remix into your own site.</p>
    <div class="row">
      <a class="btn" href="#">Get started free</a>
      <a class="btn ghost" href="#">Watch demo</a>
    </div>
  </section>

  <main class="features">
    <h2>Why people choose Lumen</h2>
    <div class="grid">
      <div class="card"><h3>Fast to ship</h3><p>Drop in a section and go. No build step, no config, no surprises.</p></div>
      <div class="card"><h3>Fully responsive</h3><p>Every layout collapses gracefully from desktop down to phone.</p></div>
      <div class="card"><h3>Yours to remix</h3><p>Plain HTML and CSS you actually own &mdash; rename, restyle, ship.</p></div>
    </div>
  </main>

  <footer>&copy; 2026 Lumen. A demo hero page.</footer>

</body>
</html>