Задать вопрос
@hypero

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

Всем привет.
Как сверстать такой блок?
Отдельный фон и картинка девушки или как сверстали бы вы?
6123db0ddf10e541754330.png
  • Вопрос задан
  • 416 просмотров
Подписаться 2 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 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" на ура блокируются всякими блокировщиками рекламы. Никакого толку этот баннер ни сео, ни семантике не даст.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы