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="cta-wrap">
  <div class="cta">
    <h2>Ready to build something great?</h2>
    <p>Join 12,000+ developers who ship faster every week.</p>
    <form class="signup" onsubmit="return false">
      <label class="sr-only" for="email">Email address</label>
      <input id="email" type="email" placeholder="you@example.com" required />
      <button type="submit">Get early access</button>
    </form>
    <small>Free for 14 days. Cancel any time.</small>
  </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 call-to-action banner section with an email signup form in plain HTML and CSS.

Content:
- Heading "Ready to build something great?", supporting line "Join 12,000+ developers who ship faster every week."
- An inline email form: one email input and an orange "Get early access" button, inside a single white pill-shaped container.
- Small reassurance text: "Free for 14 days. Cancel any time."

Styling:
- Outer section #f7f7f7, banner centred, max-width 1000px, 28px radius.
- Banner background: navy #002057 with two radial-gradient glows layered on top (orange in the top-right, indigo in the bottom-left).
- Form: flex row, white pill, 6px inner padding; the input has no border or outline; the button is an orange pill. Show a soft orange focus ring around the whole pill using :focus-within.
- Below 480px the form stacks vertically.

Accessibility:
- Include a visually hidden <label> for the email input (an .sr-only class).

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Create the banner as a rounded block and layer two radial-gradients over a solid colour for depth.

2. 2

   Wrap the input and button in one pill-shaped flex container so they look like a single control.

3. 3

   Remove the input's own border and outline, then restore a visible focus state on the wrapper with :focus-within.

4. 4

   Add a visually hidden label so the field is announced correctly by screen readers.

5. 5

   Stack the form on small screens with a media query.

Customisation tips

• Connect the form to a Server Action or API route to actually collect emails.
• Use one clear action per banner; competing buttons reduce conversions.
• Repeat this banner at the end of long pages, where interested readers finish.

More sections