'Difficulty to implement a section of a mockup in CSS

I've received a mockup and I'm struggling with a section which I have no idea how to "implement" in CSS.

The mockup is like this:

enter image description here

So in my files I have images 1,2,3 and 4. And I don't know how to put those images in order to fit like the mockup. Should I ask the webdesigner to send me images 1 2 and 3 in one image or it is possible to make it in CSS?

htmlcss


Solution 1:[1]

Let me try to give you some hints based on how I'd do your job. If the texts (images 4 and 3) are images then things are much easier for you. You need to work with flexbox creating two different rows.

<div class="row">
  <div class="textStyle">
  </div>
  <div class="image1">
  </div>
</div>

<div class="row">
  <div class="image4">
  </div>
  <div class="image2">
  </div>
  <div class="image3">
  </div>
  <div class="textStyle">
  </div>
</div>

css would look like

.row {display: flex; flex-direction: row;}

This is just an example to give you a hint to start. I hope it's what you were looking for.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GiovanniManetti11

Related Questions