Как сверстать такой блок?

Question

[hypero]

Всем привет.
Как сверстать такой блок?
Отдельный фон и картинка девушки или как сверстали бы вы?

Comments

[Алексей Яковлев]

Прочитай про z-index: 999; и position: absolute;

Answer 1

[Икотий Айтишевич]

<section id="banner">
    <div class="banner-content">
        <img src="#" id="woman-photo" alt="">
        <div class="banner-text-content">
            <h2>Лето 2021</h2>
            <a href="#">Узнать подробнее</a>
        </div>
    </div>
</section>

По CSS:

• #banner – это фон баннера;
  
• .banner-content – это блок в котором весь контент с указанным width и margin: 0 auto;;
  
• #woman-photo – фотография девушки;
  
• .banner-text-content – это всё текстовое содержимое с фоном 20 21;
  
• стили для текста и кнопки как в макете.
  

Comments

[Одиночка Айс]

хороший троллинг)

[Дмитрий Пыркин]

.banner-text-content – это всё текстовое содержимое с фоном 20 21;

можно сюда вместо бг сделать псевдо элеменеты 20 и 21

[hypero]

Кстати, интересно.
Как сверстать текстовое содержимое?

[Икотий Айтишевич]

hypero, Как в коде ниже, чтобы Вам проще было. А по стилям, то просто классу задать прозрачное изображение с цифрами 20 21 и стилизовать по макету заголовок и кнопку.

<div class="banner-text-content">
            <h2>Лето 2021</h2>
            <a href="#">Узнать подробнее</a>
        </div>

Либо определить шрифт этих букв и сверстать самому, а поверх наложить блок с заголовком и кнопкой.

Answer 2

[Тимур Худиев]

Если это сезонный баннер, то сделайте просто большую картинку ссылкой и все. Скорее всего тексты на нем меняться не будут и контент менеджеру просто будет поменять его осенью на другую картинку. Тем более блоки с такими стилями как "banner", "banner-text" на ура блокируются всякими блокировщиками рекламы. Никакого толку этот баннер ни сео, ни семантике не даст.