Course landing pageexamples you can open.

Six complete pages, not six colour schemes. Each one is a real route in the repository — open it, resize it, read the source, check what it weighs. Nothing here is a screenshot of a page that does not exist.

6
Full page demos
32
Components
0
Runtime dependencies
1 day
To live, realistically

All six

A webinar page and a coaching page want different things

So they are built differently — different hero, different proof, different ask, different length. The note under each card is what to look at when you open it.

Online course

Flagship

The long-form flagship: hero, curriculum accordion, bonus stack, two-tier pricing and an enrolment deadline.

View demo

Watch what the page does with a $349 price: bonus values stated, a deadline that is real, and the refund promise sitting directly under the pricing rather than in the footer.

More detail: online course landing page template

Cohort programme

Live

Live, dated, capped. Week-by-week schedule, seats remaining, and a dark editorial treatment.

View demo

Nothing is collapsed. The week-by-week schedule is the commitment being sold, so hiding it behind an accordion would hide the product.

More detail: cohort course template

Webinar

Short

One job: registrations. Split hero, countdown, three-field form, and nothing else to click.

View demo

Count the links. There is one thing to do, the form is above the fold, and the page closes on the same form instead of a button that scrolls back up.

More detail: webinar landing page template

Coaching

1:1

Application-led rather than checkout-led. Process steps, a real portrait, and a booking CTA.

View demo

The "not for you if" list is as long as the "for you if" list. On a service capped at three clients a quarter, a wrong-fit enquiry costs more than a lost one.

More detail: coaching website template

Newsletter

Email

Subscriber count, past issues, one email field. The whole page fits in two screens.

View demo

It converts in two screens: field, then archive. The archive is the proof, and it asks for nothing to see it.

More detail: newsletter landing page template

Ebook

Download

A one-time digital product: cover mock, chapter list, sample spread, single price.

View demo

A real spread, set the way the book is set. For a product nobody can flick through, that section does the work that holding it would.

More detail: ebook landing page template

What they share

One design system underneath all six

Same tokens, same type scale, same motion layer. That is why you can take the countdown off the webinar page, drop it on the cohort page, and not have to adjust a single value.

CSS-only motion
Reveals, marquees, the progress bar and the condensing header are scroll-driven CSS animations. Zero kilobytes of JavaScript on the scroll path.
Static export
next build writes a plain out/ folder. No server, no runtime dependencies, hostable anywhere that serves files.
Self-hosted fonts
No Google Fonts request, so the pages load properly on restricted networks and stay GDPR-clean.
Accessible by construction
Native details accordions, real focus rings, reduced-motion fallbacks, 4.5:1 body contrast on every surface.

Why not build it

The difference between shipping and redesigning

Building it yourself

  • You spend three weekends on a landing page instead of the course.
  • The page works, but it looks like a page built by someone who codes.
  • Every conversion block — countdown, accordion, bonus stack — is a new evening of work.
  • Google Fonts, a chart library, an animation library, 400KB before your first word.

With the kit

  • You edit one content file and deploy the same afternoon.
  • Typography, spacing and motion were decided by someone who does this for a living.
  • All of them are already in the box, and they all match.
  • Self-hosted fonts, CSS-only animation, static HTML. No runtime dependencies at all.

By search term

Looking for something specific

Open one, thenread its source.

The flagship demo and the whole design system are free on GitHub. If that gets your course live and you never buy the kit, that is a fine outcome for both of us.