Рекомендации клиентов

  alexei 10/01/2022 - 10:23

Здесь вы узнаете, как сделать адаптивные отзывы/рекомендации клиентов при помощи CSS.


Отзывы клиентов часто используются, чтобы показать пользователям сайта, что думают люди о вас или вашем продукте.

Avatar

Крис Фокс. CEO в Крутой Школе.

Петр Федоров просто спас нас от сетевой катастрофы.

Avatar

Ребекка Флекс. CEO в Компании.

Петр Федоров лучше всех.

Avatar

Джулия Робертс. Актер.

Просто вас обожаю.


Как сделать отзывы клиентов

Шаг 1) Добавляем HTML:


<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Крис Фокс.</span> CEO в Крутой Школе.</p>
  <p>Петр Федоров просто спас нас от сетевой катастрофы.</p>
</div>

<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Ребекка Флекс.</span> CEO в Компании.</p>
  <p>Петр Федоров лучше всех.</p>
</div>

Шаг 2) Добавляем CSS:


/* Стили контейнера для отзыва */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}

/* Очистка обтекания за контейнерами */
.container::after {
  content: "";
  clear: both;
  display: table;
}

/* Обтекание изображений внутри контейнера. Добавляет отступ справа и делаем изображение круглым */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Увеличиваем размер шрифта для элемента span */
.container span {
  font-size: 20px;
  margin-right: 15px;
}

/* Добавляем медиа запрос для адаптивности. Это поместит текст и изображение в центр контейнера */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}