Не получается сверстать блок с изображением и описанием и с фоном

Question

не получается сверстать точно такую же блок. То дизайнер плохой кажется, то и я сам плохой. Даже не знаю как сделать точно такую же.

изображение с размером 400х370

Answer 1

*в полном экране

p.s. на скорую руку, можно покруче сделать

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
}

.block {
  max-width: 1200px;
  margin: 0 auto;
}

.block__inner {
  display: flex;
  flex-flow: row wrap;
  background-color: #333;
  color: #fff;
}

.block__col:nth-child(1) {
  width: 400px;
}

.block__col:nth-child(2) {
  width: 800px;
}

.block-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-image>img {
  display: block;
  max-width: 100%;
  height: auto;
}

.block-description {
  height: 100%;
}

.block-description__inner {
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: inherit;
}

.block-description__author {
  font-size: 24px;
}

.block-description__title {
  margin-top: 30px;
  font-size: 48px;
  max-width: 350px;
}

<div class="block">
  <div class="block__inner">
    <div class="block__col">
      <div class="block-image">
        <img src="https://picsum.photos/400/370" alt="foo">
      </div>
    </div>

    <div class="block__col">
      <div class="block-description">
        <div class="block-description__inner">
          <div class="block-description__top">
            <div class="block-description__author">Mr. John Doe</div>

            <h2 class="block-description__title">The best way to wish your wife</h2>
          </div>

          <div class="block-description__more">Read More</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Вообщем примерно так, идея.

Вставляем картику <img style="position:relative" src="//url">
Добавляем div c position:absolute (который занимает полную высоту и ширину картинки) в котором есть еще 12 divs, если есть bootstrap то это col-lg-1
Делаем класс css в котором: background:#your_color; opacity: .5
Задаем класс каждому из 12 элементов и voila! Если bootstrap нету, то для каждого из элемента из пункта 2 нужно задать width: 8.33% и padding-left:15px padding-right:15px.

Но это только логика, зависит все от страницы, ссылок, анимаций и т.д

P.S. Mr.John Doe - you're cool! Мое мнение - в 2020 я бы сделал упор на анимации а не на усложненный дизан

БЛОГ НА HUSL

Не получается сверстать блок с изображением и описанием и с фоном

Ответы (2 шт):