How to achieve this effect


Can you help me solve the following problems? achieve the same effect.

1、How to make the middle block between the upper and lower templates

2、How to realize that the background image is only part of the image and starts from the edge

help me!!! thanks

Hi @jackmom,
There’s more than one way to do this.
If you only have the credit card picture as a jpeg, that could be a background image in a block and use margins/padding to position the 4 pale blue squares to the correct position.
As for the second part of your question, you could use another bloc and the blue background strip is positioned to the left edge of it.

Just experiment (and read the docs) and you’ll get there, but I think classes with margins and padding settings will be a great help to you on this.

1 Like