The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<section class="hero">
  <a class="pill" href="#">New &middot; AI reports are here &rarr;</a>
  <h1>Ship your product <span>twice as fast</span></h1>
  <p>Plan, build and launch with one workspace your whole team actually enjoys using.</p>
  <div class="actions">
    <a class="btn primary" href="#">Start free trial</a>
    <a class="btn ghost" href="#">Watch demo</a>
  </div>
  <ul class="stats">
    <li><strong>12k+</strong><span>teams</span></li>
    <li><strong>4.9/5</strong><span>rating</span></li>
    <li><strong>99.9%</strong><span>uptime</span></li>
  </ul>
</section>

The AI prompt

Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.

Build a responsive SaaS landing-page hero section in plain HTML and CSS (no framework, no JavaScript).

Layout, top to bottom, all centred:
1. A small rounded "announcement pill" link: "New · AI reports are here →".
2. A large headline, max about 14 characters wide so it wraps onto two or three lines: "Ship your product twice as fast" with the last three words in orange (#ff7b00).
3. One sentence of supporting text in grey, max 52 characters wide.
4. Two pill-shaped buttons: a solid indigo (#2506ad) primary "Start free trial" with a soft shadow, and an outlined navy "Watch demo". Both lift 2px on hover.
5. A row of three trust stats (12k+ teams, 4.9/5 rating, 99.9% uptime), number in bold navy above a small grey label.

Styling:
- Section fills the viewport height, content vertically centred, 96px/24px padding.
- Background: radial-gradient from #eef2ff at the top centre to white.
- Headline uses clamp(2.4rem, 7vw, 4.5rem), line-height 1.05, tight letter-spacing, colour #002057.
- System font stack. Buttons and stats wrap on small screens.

Return one HTML file with the CSS in a <style> tag.

How to build it, step by step

1. 1

   Use a flex column with align-items and justify-content set to center, plus min-height: 100vh, to centre everything in the viewport.

2. 2

   Size the headline with clamp() so it scales smoothly from mobile to desktop without media queries.

3. 3

   Limit line length with max-width in ch units (14ch for the headline, 52ch for the paragraph). Short lines are easier to read and wrap more attractively.

4. 4

   Highlight part of the headline by wrapping it in a span with the accent colour.

5. 5

   Put the two buttons in a flex container with flex-wrap so they stack on narrow screens.

6. 6

   Build the stats as a list with flex and gap; each item has a strong number and a span label.

Customisation tips

• Replace the stats with customer logos for early-stage products that do not have numbers yet.
• Add a product screenshot below the stats with a large border-radius and shadow.
• Keep one primary action. The second button should be visually quieter, as the outline style is here.

More sections