Building a landing page
A landing page is a one-page site that presents a product and leads to one action: signing up. Let us build the Tasko landing page only from what the course covered, without a single line of our own CSS. All the markup lives in the index.html of the project from the first lesson, between <body> and the Bootstrap script.
Page plan
| Section | Built from |
|---|---|
| Header | A navbar with a hamburger button |
| Hero | A display-* heading, lead, two buttons |
| Features | A row-cols-* grid, icons |
| Pricing | h-100 cards with card-header and card-footer |
| Footer | list-inline, text-body-secondary |
Each section is its own <section> with an id, so menu links lead to it, and with py-5 padding.
The whole page
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<nav class="navbar navbar-expand-md bg-body-tertiary sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#top">Tasko</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#landingMenu"
aria-controls="landingMenu" aria-expanded="false" aria-label="Open menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="landingMenu">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
<a class="btn btn-outline-primary btn-sm" href="#pricing">Sign in</a>
</div>
</div>
</nav>
<section id="top" class="py-5 text-center">
<div class="container">
<h1 class="display-5 fw-bold">Your team's tasks under control</h1>
<p class="lead text-body-secondary mx-auto" style="max-width: 36rem">
Tasko keeps tasks, deadlines and discussions in one place, so nobody has to ask "who is doing this?".
</p>
<div class="d-flex flex-column flex-sm-row justify-content-center gap-2">
<a class="btn btn-primary btn-lg" href="#pricing">Start for free</a>
<a class="btn btn-outline-secondary btn-lg" href="#features">Learn more</a>
</div>
</div>
</section>
<section id="features" class="py-5 bg-body-tertiary">
<div class="container">
<h2 class="text-center mb-4">Features</h2>
<div class="row row-cols-1 row-cols-md-3 g-4 text-center">
<div class="col">
<i class="bi bi-list-check fs-1 text-primary" aria-hidden="true"></i>
<h3 class="h5 mt-2">Shared lists</h3>
<p class="text-body-secondary">The whole team sees the same tasks.</p>
</div>
<div class="col">
<i class="bi bi-alarm fs-1 text-primary" aria-hidden="true"></i>
<h3 class="h5 mt-2">Deadlines</h3>
<p class="text-body-secondary">A reminder one day before the due date.</p>
</div>
<div class="col">
<i class="bi bi-graph-up fs-1 text-primary" aria-hidden="true"></i>
<h3 class="h5 mt-2">Reports</h3>
<p class="text-body-secondary">Who did how much this week.</p>
</div>
</div>
</div>
</section>
<section id="pricing" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Pricing</h2>
<div class="row row-cols-1 row-cols-md-2 g-4 mx-auto" style="max-width: 44rem">
<div class="col">
<div class="card h-100 text-center">
<div class="card-header">Free</div>
<div class="card-body">
<p class="display-6">$0</p>
<p class="text-body-secondary">Up to 3 members</p>
</div>
<div class="card-footer"><a class="btn btn-outline-primary w-100" href="#top">Start</a></div>
</div>
</div>
<div class="col">
<div class="card h-100 text-center border-primary">
<div class="card-header text-bg-primary">Team</div>
<div class="card-body">
<p class="display-6">$9</p>
<p class="text-body-secondary">Per member per month</p>
</div>
<div class="card-footer"><a class="btn btn-primary w-100" href="#top">Try for 14 days</a></div>
</div>
</div>
</div>
</div>
</section>
<footer class="py-4 border-top">
<div class="container d-flex flex-column flex-sm-row justify-content-between">
<span class="text-body-secondary">© 2026 Tasko</span>
<ul class="list-inline mb-0">
<li class="list-inline-item"><a class="link-secondary" href="#features">Features</a></li>
<li class="list-inline-item"><a class="link-secondary" href="#pricing">Pricing</a></li>
</ul>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Scroll the preview: the header stays on top thanks to sticky-top, menu links scroll to their sections, and on a narrow screen the menu collapses into a hamburger. The main plan is highlighted with a blue border and header.
What to improve next
Add the FAQ accordion from the collapse lesson below the pricing, and a carousel of reviews above the footer. To make the landing page differ from thousands of other Bootstrap sites, set your own $primary and font with Sass.
Common mistake
Putting the container outside a colored section instead of inside it. If you wrap <section class="bg-body-tertiary"> in a container, the gray background is cut to the container width and does not reach the screen edges. It is the other way round: the section with its background spans the full width, and the container goes inside it.