Шаблон лендинга HTML Bootstrap 4

50+ примеров секций лендинга с кодом на Bootstrap

См. также: Типовые стили Falcon Space Шаблоны бесплатных лендов

Стартовый раздел

Старт 0

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem laborum exercitationem perferendis explicabo quisquam eos officiis consectetur natus pariatur placeat! Aliquid esse illo perspiciatis suscipit dicta nisi! Quasi, numquam ipsam!

Up header

Старт 1

Some subtitle with description

Button 1 Button 2
Some little desctiption for image

Up header

Старт 2

Some subtitle with description

Button 1 Button 2

Up header

Старт 3

Some subtitle with description

Старт 4

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero modi qui dolor quisquam cupiditate rem, quaerat, ex voluptatum voluptatibus ab optio dicta voluptates repudiandae labore excepturi aut velit, saepe distinctio.

Старт 5

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto sint quo modi quia

Запишитесь на бесплатное занятие

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Картинки и текст

Вертикальный список картинок с описанием

Some details text ....

Title 1

Desc 1

Title 1

Desc 1

Слайдер больших картинок

Some description...

Горизонтальный список картинок

Some details text ....

Title 1

Desc 1

Title 1

Desc 1

Title 1

Desc 1

Up header

Большая картинка и текст справа

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Вертикальная картинка и колонки текста по краям

Lorem ipsum

  • List title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptates, a dolor ea labore ipsam rerum harum necessitatibus repellat?

  • List title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptates, a dolor ea labore ipsam rerum harum necessitatibus repellat?

  • List title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptates, a dolor ea labore ipsam rerum harum necessitatibus repellat?

  • List title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptates, a dolor ea labore ipsam rerum harum necessitatibus repellat?

  • List title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptates, a dolor ea labore ipsam rerum harum necessitatibus repellat?

  • List title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptates, a dolor ea labore ipsam rerum harum necessitatibus repellat?

Картинки с тектом с переменой позиций

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat sequi neque vitae sapiente corrupti dolorum ab voluptatum quae! Voluptates non eius deserunt temporibus aperiam, quidem nostrum? Itaque, facere. Labore, provident?

  • Subtitle

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem quidem perspiciatis fugit ipsum velit, accusantium commodi ducimus deserunt ipsa dolorum! Tempore voluptas, quaerat doloremque aperiam fugit sed expedita id minus!

  • Subtitle

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem quidem perspiciatis fugit ipsum velit, accusantium commodi ducimus deserunt ipsa dolorum! Tempore voluptas, quaerat doloremque aperiam fugit sed expedita id minus!

  • Subtitle

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem quidem perspiciatis fugit ipsum velit, accusantium commodi ducimus deserunt ipsa dolorum! Tempore voluptas, quaerat doloremque aperiam fugit sed expedita id minus!

Крупные картинки с текстом шахматкой

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Subtitle

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis repellendus eligendi assumenda delectus ex rerum error dolorum autem, pariatur quidem quo tempore laborum, molestias sequi tempora esse, possimus quasi repellat.

  • Subtitle

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis repellendus eligendi assumenda delectus ex rerum error dolorum autem, pariatur quidem quo tempore laborum, molestias sequi tempora esse, possimus quasi repellat.

Картинки и 3 элемента

Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Заголовок карточки

Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

Картинка с формой внизу

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia placeat corporis deleniti vitae quia dolore facere accusamus velit eum expedita assumenda veritatis neque, minima voluptatibus nobis error alias ab enim.

Main title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia placeat corporis deleniti vitae quia dolore facere accusamus velit eum expedita assumenda veritatis neque, minima voluptatibus nobis error alias ab enim.

Картинки плиткой в колонках

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit placeat eum nostrum perspiciatis alias ut praesentium rem inventore dolore!

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.Some quick example text to build on the card title and make up the bulk of the card's content.

Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Картинки плиткой во вкладках

Список картинок без текста (бренды)

Слайдер с карточками по 3 шт.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Некие числа и картинка

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste nobis omnis soluta obcaecati labore assumenda a ut commodi quae exercitationem

  • Text

    8%

  • Text

    65+

  • Text

    500 000

...

Картинки с расстановкой 6 3 3

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Заголовок карточки

Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.

...
Мозаика 3 картинок и текста

Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.

...
Заголовок карточки

Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.

3 карточки в ряд

Some details text ....

Subtext

Title 1

Desc 1

Subtext

Title 1

Desc 1

Subtext

Title 1

Desc 1

Слайдер с картинками справа

Отзывы 1

MONICA ANDERSON

CEO, co-founder

a short story about the CEO of a company. What makes your business different from every other company in the industry? Explain why working with you is the best solution for the client. A short, simple explanation in one or two sentences.

MONICA ANDERSON

CEO, co-founder

a short story about the CEO of a company. What makes your business different from every other company in the industry? Explain why working with you is the best solution for the client. A short, simple explanation in one or two sentences.

Отзывы 2

Довольные клиенты делятся впечатлениями

Отличный выбор десертов для мероприятий

Предстоял корпоратив, долго не могла найти хорошую кондитерскую, да такую, чтобы цены не кусались. И нашла! Десерты невероятные, вся команда осталась довольна!
Маргарита Иванова

Отличный выбор десертов для мероприятий

Предстоял корпоратив, долго не могла найти хорошую кондитерскую, да такую, чтобы цены не кусались. И нашла! Десерты невероятные, вся команда осталась довольна!
Маргарита Иванова

Отличный выбор десертов для мероприятий

Предстоял корпоратив, долго не могла найти хорошую кондитерскую, да такую, чтобы цены не кусались. И нашла! Десерты невероятные, вся команда осталась довольна!
Маргарита Иванова

Отзывы 3 со слайдером

Some description...

Карточки с деталями по 2 в ряд

На курсе ждет много полезной информации

Распределение доходов и еще про страховку
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Распределение доходов и еще про страховку
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Распределение доходов и еще про страховку
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Распределение доходов и еще про страховку
  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Карточки в ряд с фоном фото

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit officiis, quas quam pariatur minima praesentium fuga reiciendis sunt deserunt odio aspernatur veniam laboriosam tenetur eum recusandae, quod animi iusto perferendis!

...
...
...
...

Мозаика из 3 картинок

от 55000

Подробнее >

Горящий тур на остров Крит

от 30000

Подробнее >

Номера категории люкс

от 5000

Подробнее >

Буллиты

4 буллита с иконками

Some description

Point 1

Some details...

Point 1

Some details...

Point 1

Some details...

Point 1

Some details...

По 3 буллита в ряд

Come on, go, get up your ass!

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

Bullet 1

Description for bullet 1

4 ключевых числа

Some description

5300


Some description

4


Some description

123


Some description

31


Some description

6 буллитов и цитата справа

  • 01

    Lorem ipsum dolor sit

  • 02

    Lorem ipsum dolor sit

  • 03

    Lorem ipsum dolor sit

  • 04

    Lorem ipsum dolor sit

  • 05

    Lorem ipsum dolor sit

  • 06

    Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto minus, eos corporis distinctio itaque mollitia debitis maiores eum soluta.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto minus, eos corporis distinctio itaque mollitia debitis maiores eum soluta.

Name

Text

Заголовок и 6 элементов справа

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

...

Name Surname

Developer

...

Name Surname

Developer

...

Name Surname

Developer

...

Name Surname

Developer

...

Name Surname

Developer

...

Name Surname

Developer

4 буллита с иконками и текст справа

Гарантия на двигатели 120 дней

2400 деталей в наличии

Доставка от 7 дней

Безопасная сделка

Низкие цены за счет прямых контрактов с поставщиками

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Призывы к действию

Призыв 1

Come on, go, get up your ass!

Button 1 Button 2

Простейший призыв. Call to action 2. Come on, go, get up!

Завершающий призыв с фоновой картинкой

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est doloremque eius asperiores adipisci et facilis odio alias. Veniam exercitationem harum ea, facilis, officia ullam et aliquid quisquam qui quis corrupti?

...
Привыз для звонка на телефон

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+ 00 000 000 00

Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Выбор из 2 вариантов

Come on, go, get up your ass!

Way 1

Sed ut perspiciatis, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia no

Button 1

Way 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Button 2

Выбор из 3 вариантов

MONTHLY

Access to any studio

10 individual sessions

Evening classes after 6 p.m.

5 guest visits

$250/person

SEMIANNUAL

Access to any studio

10 individual sessions

All-day classes

15 guest visits

$400/person

ANNUAL

Access to any studio

10 individual sessions

All-day classes

20 guest visits

$600/person

Тексты

FAQ с раскрыванием вопросов

Some description...

First Question 1
Some answer 1
First Question 2
Some answer 2
First Question 3
Some answer 3

Если вы не нашли ответа на свой вопрос, напишите нам в чат.

Вкладки с содержимым в 2 колонки и кнопками действия

Вопросы и ответы без сворачивания

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque nulla ut iste rerum doloribus suscipit numquam impedit animi nisi nemo voluptatum fugit modi, libero mollitia minima consequatur laboriosam. Impedit, quaerat?

Вопрос Lorem ipsum dolor sit amet, consectetur adipisicing elit?
Ответ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero unde dolor at fuga! Adipisci, consectetur. Molestias rerum quod dolor magnam nesciunt odio facilis nostrum expedita iusto? Assumenda obcaecati neque aliquam.
Вопрос Lorem ipsum dolor sit amet, consectetur adipisicing elit?
Ответ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero unde dolor at fuga! Adipisci, consectetur. Molestias rerum quod dolor magnam nesciunt odio facilis nostrum expedita iusto? Assumenda obcaecati neque aliquam.
Вопрос Lorem ipsum dolor sit amet, consectetur adipisicing elit?
Ответ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero unde dolor at fuga! Adipisci, consectetur. Molestias rerum quod dolor magnam nesciunt odio facilis nostrum expedita iusto? Assumenda obcaecati neque aliquam.
Вопрос Lorem ipsum dolor sit amet, consectetur adipisicing elit?
Ответ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero unde dolor at fuga! Adipisci, consectetur. Molestias rerum quod dolor magnam nesciunt odio facilis nostrum expedita iusto? Assumenda obcaecati neque aliquam.
Вопрос Lorem ipsum dolor sit amet, consectetur adipisicing elit?
Ответ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero unde dolor at fuga! Adipisci, consectetur. Molestias rerum quod dolor magnam nesciunt odio facilis nostrum expedita iusto? Assumenda obcaecati neque aliquam.
Вопрос Lorem ipsum dolor sit amet, consectetur adipisicing elit?
Ответ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero unde dolor at fuga! Adipisci, consectetur. Molestias rerum quod dolor magnam nesciunt odio facilis nostrum expedita iusto? Assumenda obcaecati neque aliquam.

Отзывы в виде слайдера

Слайдер из таблиц

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Цитата человека

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

— Виктор Макеев

Процессы (шаги)

Вкладки с описанием процесса по шагам

Вертикальные вкладки

Home

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, eveniet earum. Sed accusantium eligendi molestiae quo hic velit nobis et, tempora placeat ratione rem blanditiis voluptates vel ipsam? Facilis, earum!

Profile

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, eveniet earum. Sed accusantium eligendi molestiae quo hic velit nobis et, tempora placeat ratione rem blanditiis voluptates vel ipsam? Facilis, earum!

Contact

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, eveniet earum. Sed accusantium eligendi molestiae quo hic velit nobis et, tempora placeat ratione rem blanditiis voluptates vel ipsam? Facilis, earum!

Переключение элементов с буллитами

Внимание! Важно добавить эти стили в CSS:

.tabSwitcher { background-color: #f8f9fa; }
.active .tabSwitcher { background-color: #007bff; }

Main subtitle1

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

Main subtitle2

  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.

Main subtitle3

  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • ...
    Lorem ipsum dolor sit amet consectetur adipisicing elit.

Картинка и описание процесса по пунктам

  • 01
    Заявка

    Оставляете заявку на сайте или звоните по телефону

  • 02
    Запись

    Оставляете заявку на сайте или звоните по телефону

  • 03
    Ремонт

    Оставляете заявку на сайте или звоните по телефону

  • 04
    Оплата

    Оставляете заявку на сайте или звоните по телефону

Формы

Уточните наличие деталей вашего автомобиля прямо сейчас.

Картинка и форма справа

При заказе свыше 10 000 руб. вы получите скидку 5%

Заказать запчасть

Нажимая на кнопку, вы принимаете Положение и Согласие на обработку персональных данных.

Горизонтальная форма

Оставьте заявку прямо сейчас и получите скидку 10%

Нажимая на кнопку, вы принимаете Положение и Согласие на обработку персональных данных.

Подвалы сайта / Контакты

Подвал сайта с контактами

Адрес
Москва, улица Юности, дом 5 строение 4, офис 2
Телефоны

+7 499 535-64-34

+7 495 005-05-44

Email
lg.cona@mail.ru по вопросам бронирования hotels.ln@mail.ru по вопросам трудоустройства
График
Понедельник-пятница, с 10:00 до 19:00

Компактный подвал с контактами в строку

+7 (900) 888 77 66

post@mail.ru

Москва, ул. Ленина, 9

Company © 2019 — 2023

Подвал с картинкой и кратким меню

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac

Subtitle

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
Подождите