Верстка секции ‘Трендовые игры’ на HTML/CSS

Создание секции «Трендовые игры»

Создадим секцию с трендовыми играми, доработав существующие секции. Начнём с HTML, затем перейдём к стилям. Всё будет внутри тега <wrapper>, так как добавим задний фон.

Создаём новый div с классами container и trending:

<div class="container trending">
  <h3><span>Трендовые игры</span> <a class="c-all" href="#">C All</a></h3>
  <div class="games">
    <div class="block">
      <img src="img/game1.png" alt="Game 1">
      <span>
        <img src="img/fire.svg" alt="Fire">
        <p>40 followers</p>
      </span>
    </div>
    <!-- Дублируем этот блок ещё три раза -->
  </div>
</div>

Изображения добавляются из макета, размещаются в папке img и переименовываются (например, game1.png, fire.svg). Код дублируется для создания четырёх одинаковых секций. В HTML больше ничего добавлять не нужно.

Стилизация секции «Трендовые игры»

/* Секция трендовых игр */
.trending h3 {
  font-weight: 600;
  font-size: 31px;
}

.trending .c-all {
  color: white;
  background-color: #градиент; /* Замените #градиент на ваш код градиента */
  border-radius: 5px;
  padding: 12px 23px;
  float: right;
  display: block;
}

.trending {
  padding-top: 50px;
}

.trending .c-all:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

Для корректного отображения ссылки <a class="c-all" …> должна располагаться перед <h3>.

Верстка блоков с играми (CSS — Flexbox)

Для расположения блоков игр используем Flexbox:

.trending .games {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 50px 0;
}

.trending .games span {
  display: block;
  text-align: center;
  margin-top: 20px;
}

.trending .games span img {
  position: relative;
  top: -5px;
  margin-right: 7px;
}

Текстовый блок

Создадим новый блок с текстом:

<div class="container big-text">
  <p>Текст...</p>
</div>

Стили:

.big-text {
  padding: 50px 0;
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  width: 800px;
}

Баннерная секция

Создаём баннерную секцию:

<div class="container banner">
  <h3>Заголовок</h3>
  <p>Текст...</p>
  <img src="img/banner.png" alt="Banner">
</div>

Стили:

.banner {
  padding: 80px 0;
}

.banner h3 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
}

.banner p {
  line-height: 170%;
  margin-bottom: 30px;
  width: 550px;
}

.banner img {
  width: 100%;
  margin-bottom: 30px;
}

В результате мы получили интересный веб-сайт.