@hypero

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

Всем привет.
Как сверстать такой блок?
Отдельный фон и картинка девушки или как сверстали бы вы?
6123db0ddf10e541754330.png
  • Вопрос задан
  • 402 просмотра
Пригласить эксперта
Ответы на вопрос 2
@ikoit
Web Developer
<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;
  • стили для текста и кнопки как в макете.
Ответ написан
Если это сезонный баннер, то сделайте просто большую картинку ссылкой и все. Скорее всего тексты на нем меняться не будут и контент менеджеру просто будет поменять его осенью на другую картинку. Тем более блоки с такими стилями как "banner", "banner-text" на ура блокируются всякими блокировщиками рекламы. Никакого толку этот баннер ни сео, ни семантике не даст.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы