Как добавить блок с преимуществами на сайт

В современном веб-дизайне блоки с преимуществами являются популярным элементом, который помогает пользователям быстро оценить особенности и преимущества продукта или услуги. В этой статье мы рассмотрим, как добавить блок с преимуществами на ваш сайт с помощью HTML, CSS и JavaScript.

HTML структура

Для начала создадим структуру блока с преимуществами с помощью HTML. Мы будем использовать теги <section>, <div> и <h3>.

<section class="advantages">
  <div class="advantage">
    <h3>Быстрота</h3>
    <p>Наши услуги предоставляются быстро и качественно.</p>
  </div>
  <div class="advantage">
    <h3>Профессионализм</h3>
    <p>У нас работают профессионалы, имеющие опыт в своей сфере.</p>
  </div>
  <div class="advantage">
    <h3>Надежность</h3>
    <p>Мы всегда готовы помочь и предоставить гарантию на свои услуги.</p>
  </div>
</section>

CSS стилизация

Теперь давайте добавим стилизацию нашему блоку с преимуществами с помощью CSS.

.advantages {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
}

.advantage {
  flex: 1;
  padding: 1rem;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.advantage h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

😉 Это базовая стилизация, но вы всегда можете добавить свои стили и настроить блок с преимуществами в соответствии с дизайном вашего сайта.

JavaScript анимация (опционально)

Чтобы сделать ваш блок с преимуществами более интересным, вы можете добавить анимацию при прокрутке страницы. Мы будем использовать библиотеку AOS (Animate On Scroll).

1. Подключите библиотеку AOS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" />
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>

2. Добавьте атрибут data-aos в блоки преимуществ:

<div class="advantage" data-aos="fade-up">
  ...
</div>

3. Инициализируйте AOS:

document.addEventListener("DOMContentLoaded", function() {
  AOS.init();
});

Теперь ваш блок с преимуществами будет плавно появляться при прокрутке страницы. Вы можете настроить анимацию, используя различные параметры, доступные в документации AOS.

В заключение, мы рассмотрели, как добавить блок с преимуществами на сайт с использованием HTML, CSS и JavaScript. Не забывайте экспериментировать и настраивать стили и анимацию, чтобы сделать ваш блок уникальным и привлекательным для пользователей.