@Gallows-bird

Как реализовать такую верстку?

Подскажите новичку, как реализовать подобное в бутстрап и вообще имеет ли смысл его использование при подобном дизайне? 5d98a07a287b8951957038.png

С версткой обычных сайтов особых проблем не испытываю, где контент как бы потоком по контейнеру идет. Ввиду своей неопытности подобные решения дизайнера порой вводят в ступор на достаточно долгое время. Вот пример:

1. Часть контента за пределами контейнера. Тот же логотип и текст слева. Если через position absolute, то при уменьшении окна браузера до достижения определенного брейкпоинта этот контент будет урезаться, если использовать контейнер бутстрап. Можно флюид, но он тут вроде как ни к чему.

2. Интересует правый блок с зеленым фоном сверху и белым снизу. Его нужно оформить через псевдоэлемент например как я понял. Но как быть опять же с уменьшением окна браузера? И внутри этого блока я так понимаю тоже все на абсолютном позиционировании основано будет. Черный текст заходит на этот блок как минимум, плюс логотип внутри - половина в блоке с зеленым фоном, половина в блоке с белым фоном.

3. Вопрос не по данному макету - в каких случаях бутстрап будет лишним? Где его использование либо не оправданно, либо вообще будет помехой.

Благодарю за помощь.
  • Вопрос задан
  • 947 просмотров
Пригласить эксперта
Ответы на вопрос 1
1) Использовать отрицательный margin начиная с определенной ширины (+ обязательно поставьте overflow:hidden для контейнера, иначе будет горизонтальная полоса прокрутки)
Например
.header {
  overflow:hidden;
}
@media (min-width: 1300px) {
  .header-logo {
    margin-left: -100px;
  }
}


2) Сделать общий контейнер для фона и контента, при этом фон будет как position: absolute, а контент position: relative
<div class="hero-section">
  <div class="hero-section__bg">
    ...контент фона
  </div>
  <div class="hero-section__content">
    <div class="container">
      ...контент
    </div>
  </div>
</div>

.hero-section {
  position: relative;
}
.hero-section__content {
  position: relative;
  z-index: 1;
}
.hero-section__bg {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}
@media (min-width: 900px) {
  .hero-section__bg {
    width: 45%;
  }
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Лига А. Санкт-Петербург
от 50 000 до 70 000 ₽
Sellavi Москва
от 110 000 до 160 000 ₽
11 авг. 2020, в 10:34
1000 руб./за проект
11 авг. 2020, в 10:16
1000 руб./за проект
03 авг. 2020, в 08:33
100000 руб./за проект