Hero · HTML + CSS starter

A bold first impression

An editorial hero with a clear headline and a focused call to action.

Make it your own

Starter example. Replace the sample content and links before publishing. Paste into an HTML page, or adapt the markup and styles to your framework.

          <section class="pp-section" aria-labelledby="section-title">
  <p class="pp-label">A fresh perspective</p>
  <h2 id="section-title">Good ideas deserve a great website.</h2>
  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>
  <a class="pp-action" href="#next">Explore what’s possible ↗</a>
</section>
<style>
.pp-section{background:#FFE500;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}
</style>