Оглавление

Собираем лендинг

Лендинг — одностраничный сайт, который рассказывает о продукте и подводит к одному действию: зарегистрироваться. Соберём лендинг сервиса Tasko только из того, что было в курсе, без единой строки своего CSS. Вся разметка лежит в index.html проекта из первого урока, между <body> и скриптом Bootstrap.

План страницы

Секция	Из чего собрана
Шапка	`navbar` с кнопкой-бургером
Первый экран	Заголовок `display-*`, `lead`, две кнопки
Возможности	Сетка `row-cols-*`, иконки
Тарифы	Карточки `h-100` с `card-header` и `card-footer`
Подвал	`list-inline`, `text-body-secondary`

Каждая секция — свой <section> с id, чтобы ссылки меню вели к ней, и с отступами py-5.

Страница целиком

<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="Открыть меню">
      <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">Возможности</a></li>
        <li class="nav-item"><a class="nav-link" href="#pricing">Цены</a></li>
      </ul>
      <a class="btn btn-outline-primary btn-sm" href="#pricing">Войти</a>
    </div>
  </div>
</nav>
 
<section id="top" class="py-5 text-center">
  <div class="container">
    <h1 class="display-5 fw-bold">Задачи команды под контролем</h1>
    <p class="lead text-body-secondary mx-auto" style="max-width: 36rem">
      Tasko собирает задачи, сроки и обсуждения в одном месте, чтобы никто не спрашивал «а кто это делает?».
    </p>
    <div class="d-flex flex-column flex-sm-row justify-content-center gap-2">
      <a class="btn btn-primary btn-lg" href="#pricing">Начать бесплатно</a>
      <a class="btn btn-outline-secondary btn-lg" href="#features">Узнать больше</a>
    </div>
  </div>
</section>
 
<section id="features" class="py-5 bg-body-tertiary">
  <div class="container">
    <h2 class="text-center mb-4">Возможности</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">Общие списки</h3>
        <p class="text-body-secondary">Вся команда видит одни и те же задачи.</p>
      </div>
      <div class="col">
        <i class="bi bi-alarm fs-1 text-primary" aria-hidden="true"></i>
        <h3 class="h5 mt-2">Дедлайны</h3>
        <p class="text-body-secondary">Напоминание за день до срока.</p>
      </div>
      <div class="col">
        <i class="bi bi-graph-up fs-1 text-primary" aria-hidden="true"></i>
        <h3 class="h5 mt-2">Отчёты</h3>
        <p class="text-body-secondary">Кто и сколько сделал за неделю.</p>
      </div>
    </div>
  </div>
</section>
 
<section id="pricing" class="py-5">
  <div class="container">
    <h2 class="text-center mb-4">Цены</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">Бесплатный</div>
          <div class="card-body">
            <p class="display-6">$0</p>
            <p class="text-body-secondary">До 3 участников</p>
          </div>
          <div class="card-footer"><a class="btn btn-outline-primary w-100" href="#top">Начать</a></div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 text-center border-primary">
          <div class="card-header text-bg-primary">Командный</div>
          <div class="card-body">
            <p class="display-6">$9</p>
            <p class="text-body-secondary">За участника в месяц</p>
          </div>
          <div class="card-footer"><a class="btn btn-primary w-100" href="#top">Попробовать 14 дней</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">Возможности</a></li>
      <li class="list-inline-item"><a class="link-secondary" href="#pricing">Цены</a></li>
    </ul>
  </div>
</footer>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Прокрутите превью: шапка остаётся наверху благодаря sticky-top, ссылки меню прокручивают к своим секциям, на узком экране меню свёрнуто в бургер. Главный тариф выделен синей рамкой и шапкой.

Что улучшить дальше

Добавьте под тарифами аккордеон с вопросами из урока о сворачивании, а над подвалом — карусель отзывов. Чтобы лендинг отличался от тысяч других на Bootstrap, задайте свой $primary и шрифт через Sass.

Частая ошибка

Пропустить container внутри цветной секции и поставить его снаружи. Если обернуть <section class="bg-body-tertiary"> в контейнер, серый фон обрежется по ширине контейнера и не дойдёт до краёв экрана. Правильно наоборот: секция с фоном на всю ширину, а container — внутри неё.