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

Всем привет! Есть макет с такой секцией. 2 блока с разным фоном, расположенные по всей ширине экрана, внутри этих блоков содержимое(заголовок, текст, картинка), важно, что контент этих блоков не должен выходить за рамки контейнера. Кто шарит как это реализовать?
5def3a39d80c5627109666.png
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега HTML
Нежно люблю верстку
background: linear-gradient(to right, yellow 50%, green 50%);

https://jsfiddle.net/tpacedmw/

Альтернативный вариант с псевдоэлементами https://jsfiddle.net/yz9k3pxc/
spoiler


<div class="wrapper">

  <div class="inner">
    <div class="col c1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nemo!</div>
    <div class="col c2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nemo!</div>
  </div>
  <div class="inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati saepe inventore ut, doloremque dolor consequatur, nesciunt voluptates quod nostrum accusamus hic minima quasi id labore error aliquid omnis perspiciatis. Et sint maiores accusamus rerum, quae enim asperiores a sed quasi repellendus, corrupti repellat eius quaerat quia cupiditate assumenda vel optio, nisi. Modi temporibus, eum aliquam optio quaerat doloremque expedita deleniti.
  </div>

</div>


* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  margin: 0;

}
.wrapper {
  overflow-x: hidden;
}
.inner {
  display: flex;
  width: 80%;
  margin: auto;
}
.col {
  position: relative;
  width: 50%;
  padding: 20px 0;
}
.c1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  background: yellow;
  z-index: -1;
}
.c2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100%;
  background: green;
  z-index: -1;
}


Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
SpiderPigAndCat
@SpiderPigAndCat
занимаюсь салообразованием
Ваш ответ на вопрос

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

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