@Gallows-bird

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

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

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

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

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

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

Благодарю за помощь.
  • Вопрос задан
  • 922 просмотра
Пригласить эксперта
Ответы на вопрос 1
Jackardios
@Jackardios
Фронтенд разработчик
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%;
  }
}
Ответ написан
Ваш ответ на вопрос

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

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