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="stats-wrap">
  <div class="stats">
    <div><strong>20+</strong><span>Projects delivered</span></div>
    <div><strong>5 yrs</strong><span>Experience</span></div>
    <div><strong>98%</strong><span>Client satisfaction</span></div>
    <div><strong>24h</strong><span>Average response</span></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 "stats strip" section in plain HTML and CSS.

Content: four statistics - "20+ Projects delivered", "5 yrs Experience", "98% Client satisfaction", "24h Average response".

Styling:
- A rounded (20px) navy #002057 bar, max-width 1040px, centred on a #f7f7f7 section.
- Four equal columns using CSS grid; each cell has 40px vertical padding, centred text and a thin 1px translucent white divider on its left (none on the first cell).
- The number is large (clamp(2rem, 4.5vw, 3rem)), extra bold, white, with its first character coloured orange #ff7b00 using ::first-letter. The label is smaller and 70% white.
- Below 720px it becomes a 2x2 grid with dividers between rows and columns only.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Use a four-column grid inside a rounded container with overflow: hidden so the dividers respect the rounded corners.

2. 2

   Add dividers with border-left on each cell and remove it from the first cell.

3. 3

   Size the numbers with clamp() so they scale between mobile and desktop.

4. 4

   Accent the first character of each number with the ::first-letter pseudo-element instead of extra markup.

5. 5

   Switch to two columns on small screens and adjust which borders are shown using nth-child selectors.

Customisation tips

• Use real, verifiable numbers. Rounded figures like '20+' are fine; invented precision is not.
• Animate the numbers counting up with a small IntersectionObserver script when the strip scrolls into view.
• Three stats often read better than four on narrow layouts.

More sections