HTML Hero Section Templates

Announcement pill, centred headline, two buttons, social proof and a product window below. The classic SaaS hero.

Headline, checklist and buttons on the left; a large image with a floating review card on the right.

Full-bleed moving background (swap in your own video), headline bottom-left, play/pause control and stats.

Benefits and a short testimonial on the left, a complete sign-up card with social login on the right.

A seasonal sale banner with product art, price and discount sticker, plus three category tiles underneath.

An oversized headline with image capsules set between the words. Built for agencies and studios.

A live countdown to your launch date with a notify-me form. Set the date in one data attribute.

App headline, store badges and rating beside a CSS phone with a live-looking app screen and floating cards.

Three full-width slides with arrows, dots, autoplay that pauses on hover or focus, and swipe on touch.

Dark hero with glossy CSS spheres, glass card and gradient headline. No images needed.

For trades, clinics and salons: rating, call button, trust points and a quick booking card with date picks.

For APIs and dev tools: install command with copy button, code window with tabs and a short feature row.

Headline and email capture on the left; on the right a tilted stack of product cards (balance, spending chart, payment) floating in 3D. Good for fintech and SaaS.

A real-estate hero over an illustrated skyline: Buy, Rent and Sell tabs with location, price and bedroom fields, popular area chips and live listing counts.

An education hero: course title, rating and student count, illustrated instructor portrait with credentials, and a curriculum preview card with price and Enrol button.

A dark, warm restaurant hero: big serif headline, opening times, Book a table and Menu buttons, and a large slowly turning plate illustration with dish labels.

A non-profit hero with a mosaic of illustrated volunteers, an appeal headline, a donation box with amount chips, monthly/one-off switch, a goal progress bar and impact line.

A centred hero whose headline cycles through audiences (“for designers… founders… marketers”) with a smooth slide, a dual CTA, a trust row of fictional logos and floating feature chips.

A high-energy fitness hero: diagonal dark/neon split, giant condensed headline, today's classes with spaces left, and a 7-day free pass form with goal chips.

A travel hero on an illustrated sunset landscape: destination, date range and guests (with a working stepper) in one glass search bar, plus trending destination cards with prices.

An e-commerce launch hero: giant product illustration that changes colour with the swatches, name, price, rating, size chips and Add to bag, on a backdrop that matches the chosen colour.

A podcast hero: show art, latest episode title and guest, a working play button that moves along a waveform with elapsed time, speed control, and listen-on buttons.

The hero as a bento grid: a large headline tile with CTA, plus tiles for a live metric, an AI prompt demo, customer avatars, an integrations cluster and a security badge. For AI and SaaS products.

A pre-launch hero: join the waitlist, then see your place in line, a referral link with copy and share, and how many places each invite moves you up. Includes a small leaderboard.

A calm split hero for an architecture practice: large project image on the left with a thumbnail switcher, statement headline and awards on the right.

An online GP hero: promise and wait-time headline, symptom chips, a "next appointment" button, and a video call mock with an illustrated doctor, self-view and call controls.

A romantic venue hero: floral corner art, script and serif headline, and a "Is your date free?" checker that answers instantly with price band and alternatives.

A speciality coffee hero: a roast-level slider recolours the illustrated bag and updates tasting notes, origin and brew suggestion, with a subscribe button that reflects the choice.

A bright after-school coding hero: age-group chips that change the recommended course card, a block-code illustration with a little robot, and a free taster session button for parents.

A dark EV hero with a large car illustration and a miles-per-day slider that works out weekly charging cost at home versus petrol, plus range and charge-time chips and a test drive button.

A florist hero where you tick flowers to build a bouquet: the illustration fills with blooms as you choose, the price updates, and next-day delivery cut-off is shown.

A fintech hero for cross-border payments: dotted world map with live transaction pings that pop up in turn, headline with currency count, and a mini FX quote card.

A calm wellness hero with an interactive breathing circle: press Start to follow a guided 4-4-6 breath, with gentle gradients, class times for today and an intro offer.

An independent cinema hero: a film poster, rating and runtime, a short review pull-quote, day tabs with showtime buttons (sold-out and low-seat states) and a trailer button.

An author’s new-book hero: a 3D book cover that tilts toward the pointer, format switcher (hardback, ebook, audiobook) updating price and delivery, an opening-line excerpt and endorsements.

A personal-brand hero: big illustrated portrait with hand-drawn style annotations ("ex-chef", "3 kids"), friendly headline, newsletter signup with subscriber count and a row of recent topics.