SaaS Landing Page — MarkupVerse Project

SaaS Landing Page — MarkupVerse Project: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.

8 min read Updated 8/18/2026

On this page

HTML Tutorial · Lesson 92 of 100

SaaS Landing Page

Basics ✓ → Forms & semantics ✓ → APIs & performance ✓ → Projects

Projects · 4 — MarkupVerse builds · ~10 min · HTML — Real-World Projects

What is this?

A SaaS landing skeleton sells one product with hero, features, pricing teaser, and signup CTA.

Why should you care?

MarkupVerse portfolio project 92 — B2B analytics SaaS first impression.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="MarkupVerse Analytics — cohort dashboards for SaaS teams.">
  <title>MarkupVerse Analytics — SaaS Metrics</title>
</head>
<body class="mv-portfolio mv-portfolio--saas">
  <header>
    <span class="mv-logo">MarkupVerse Analytics</span>
    <a href="#pricing">Pricing</a>
    <a href="/signup" class="mv-cta">Start free trial</a>
  </header>
  <main>
    <section aria-labelledby="saas-hero">
      <h1 id="saas-hero">Know your MRR before Monday's standup</h1>
      <p>Cohort charts, churn alerts, and Stripe sync in one dashboard.</p>
      <form action="/signup" method="get">
        <label>Work email <input type="email" name="email" required placeholder="you@company.com"></label>
        <button type="submit">Get demo access</button>
      </form>
    </section>
    <section id="pricing" aria-labelledby="plans-h">
      <h2 id="plans-h">Plans</h2>
      <ul>
        <li><strong>Growth</strong> — ₹2,999/mo · 5 seats</li>
        <li><strong>Scale</strong> — ₹9,999/mo · unlimited events</li>
      </ul>
    </section>
  </main>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="MarkupVerse Analytics — cohort dashboards for SaaS teams.">
  <title>MarkupVerse Analytics — SaaS Metrics</title>
</head>
<body class="mv-portfolio mv-portfolio--saas">
  <header>
    <span class="mv-logo">MarkupVerse Analytics</span>
    <a href="#pricing">Pricing</a>
    <a href="/signup" class="mv-cta">Start free trial</a>
  </header>
  <main>
    <section aria-labelledby="saas-hero">
      <h1 id="saas-hero">Know your MRR before Monday's standup</h1>
      <p>Cohort charts, churn alerts, and Stripe sync in one dashboard.</p>
      <form action="/signup" method="get">
        <label>Work email <input type="email" name="email" required placeholder="you@company.com"></label>
        <button type="submit">Get demo access</button>
      </form>
    </section>
    <section id="pricing" aria-labelledby="plans-h">
      <h2 id="plans-h">Plans</h2>
      <ul>
        <li><strong>Growth</strong> — ₹2,999/mo · 5 seats</li>
        <li><strong>Scale</strong> — ₹9,999/mo · unlimited events</li>
      </ul>
    </section>
  </main>
</body>
</html>

Result