CatchCase

Build a landing page you can preview and edit

Describe your product and audience. Get a responsive landing page as one HTML file: preview it here, click any element to change it, then download it.

How to use it

  1. Describe the product What it is, who it is for, the one action you want visitors to take.
  2. Preview the page The result opens as a live preview. Switch to phone view to check mobile.
  3. Click an element to change it Press "Select element", click a heading or button, then say what to change. Download the .html when happy.

The prompt

You are a senior web designer and front-end developer. Build a landing page.

Brand name: [BRAND_NAME]

What it offers: [PRODUCT_DESCRIPTION]

Target audience: [AUDIENCE]

The one action visitors should take: [MAIN_GOAL]

Visual style (colours, mood): [VISUAL_STYLE]

Requirements: one complete self-contained HTML file with inline CSS (and JavaScript only if needed); responsive from 360 px up; sections for hero, benefits, how it works or pricing, and a closing call to action; real, specific copy instead of lorem ipsum; accessible contrast and semantic tags; no external fonts, images or libraries (use CSS shapes, gradients or emoji instead of photos).

Reply with the complete HTML in one code block and two lines on the choices you made. When I ask for changes, return the whole updated file.

Example result

Built as one responsive file: a warm cream-and-orange palette, serif headlines, a single call to action repeated in the hero and pricing, and emoji instead of photos so there are no external files.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hollow Roast — fresh coffee, every two weeks</title>
<style>
  :root { --ink:#2b1d14; --cream:#fbf5ec; --accent:#c4642d; --muted:#7a6a5d; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: Georgia, 'Times New Roman', serif; color:var(--ink); background:var(--cream); line-height:1.6; }
  header { display:flex; justify-content:space-between; align-items:center; padding:20px 6vw; }
  .logo { font-weight:700; font-size:22px; letter-spacing:.02em; }
  nav a { margin-left:24px; color:var(--ink); text-decoration:none; font-family:system-ui,sans-serif; font-size:15px; }
  .hero { padding:72px 6vw 88px; display:grid; gap:40px; grid-template-columns:1.1fr .9fr; align-items:center; }
  h1 { font-size:clamp(38px,6vw,64px); line-height:1.05; margin:0 0 18px; }
  .lead { font-size:19px; color:var(--muted); max-width:34em; }
  .btn { display:inline-block; background:var(--accent); color:#fff; padding:14px 26px; border-radius:999px; text-decoration:none; font-family:system-ui,sans-serif; font-weight:600; margin-top:12px; }
  .cup { aspect-ratio:1; border-radius:28px; background:radial-gradient(circle at 30% 30%, #e9a46a, #8a3f19); display:grid; place-items:center; font-size:110px; }
  .features { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0 6vw 72px; }
  .card { background:#fff; border-radius:20px; padding:28px; box-shadow:0 8px 30px rgba(43,29,20,.07); }
  .card h3 { margin:8px 0; }
  .pricing { background:var(--ink); color:var(--cream); padding:72px 6vw; text-align:center; }
  .plans { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
  .plan { background:#3a2a1f; border-radius:20px; padding:28px 32px; min-width:220px; }
  .plan strong { font-size:36px; display:block; margin:6px 0; }
  footer { padding:32px 6vw; color:var(--muted); font-family:system-ui,sans-serif; font-size:14px; }
  @media (max-width:760px){ .hero,.features{grid-template-columns:1fr} nav{display:none} }
</style>
</head>
<body>
<header><div class="logo">Hollow Roast</div><nav><a href="#how">How it works</a><a href="#plans">Plans</a><a href="#">Sign in</a></nav></header>
<section class="hero">
  <div>
    <h1>Coffee roasted this week, at your door in two.</h1>
    <p class="lead">Small-batch beans from three farms we visit ourselves. Roasted to order, never older than 10 days when it reaches you.</p>
    <a class="btn" href="#plans">Start with a tasting box</a>
  </div>
  <div class="cup" aria-hidden="true">☕</div>
</section>
<section class="features" id="how">
  <div class="card"><div>🌱</div><h3>Traceable</h3><p>Every bag names the farm, the altitude and the harvest date.</p></div>
  <div class="card"><div>🔥</div><h3>Roasted to order</h3><p>We roast on Monday and Thursday. Nothing sits on a shelf.</p></div>
  <div class="card"><div>⏸️</div><h3>Pause any time</h3><p>Skip a delivery or cancel with one click. No emails to write.</p></div>
</section>
<section class="pricing" id="plans">
  <h2>Pick your pace</h2>
  <div class="plans">
    <div class="plan">Tasting<strong>€14</strong>2 × 125 g, once</div>
    <div class="plan">Regular<strong>€26</strong>2 × 250 g, every 2 weeks</div>
    <div class="plan">Office<strong>€89</strong>2 kg, every 2 weeks</div>
  </div>
</section>
<footer>© Hollow Roast · Hamburg · [email protected]</footer>
</body>
</html>

Tip: press Select element, click the pricing cards and ask for a fourth plan, or pick the headline and ask for a shorter version.

Related cases