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="split">
  <div class="copy">
    <span class="eyebrow">Analytics, simplified</span>
    <h1>Understand your users in minutes, not weeks</h1>
    <p>Connect your data once and get dashboards your team will actually open.</p>
    <a class="btn" href="#">Get started free</a>
    <small>No credit card required</small>
  </div>
  <div class="window" aria-hidden="true">
    <div class="bar"><i></i><i></i><i></i></div>
    <div class="body">
      <div class="chart">
        <span style="height: 40%"></span><span style="height: 65%"></span>
        <span style="height: 50%"></span><span style="height: 85%"></span>
        <span style="height: 70%"></span><span style="height: 95%"></span>
      </div>
      <div class="rows"><b></b><b></b><b></b></div>
    </div>
  </div>
</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 two-column dark hero section in plain HTML and CSS.

Left column:
- Small uppercase orange eyebrow label "Analytics, simplified".
- Headline "Understand your users in minutes, not weeks" in white, clamp(2rem, 4.6vw, 3.6rem).
- A grey-white supporting sentence, max 46ch.
- A white pill button "Get started free" (navy text) that turns orange with white text on hover.
- Small note beneath: "No credit card required".

Right column:
- A CSS-only "app window" mockup (no images): rounded dark panel with a title bar containing three dots, a bar chart of six bars with different heights filled with an orange-to-indigo gradient, and three skeleton text rows of decreasing width.

Styling:
- Section background navy #002057, min-height 100vh, padding 80px 6vw.
- CSS grid with columns 1.1fr 0.9fr, 56px gap, vertically centred; collapses to one column below 860px.
- The mockup has a large soft shadow and a 1px translucent border.

Return a single HTML file with a <style> block.

How to build it, step by step

1. 1

   Create a two-column CSS grid and centre the items vertically with align-items: center.

2. 2

   Build the copy column: eyebrow, headline, paragraph, button and a small reassurance line.

3. 3

   Draw the mockup with nested divs instead of an image: a title bar with three dots, then a body.

4. 4

   Make the bar chart with a flex row and align-items: flex-end. Each bar's height is an inline percentage, so it is easy to change.

5. 5

   Add skeleton rows (plain rounded rectangles of different widths) to suggest content.

6. 6

   Add one media query that switches the grid to a single column on small screens.

Customisation tips

• Swap the mockup for a real screenshot using an img with the same border-radius and shadow.
• Add aria-hidden='true' to decorative mockups, as done here, so screen readers skip them.
• Reverse the columns on desktop by giving the mockup order: -1.

More sections