Create a design section

Hi all!

I’m trying to create the section you find attached,
do you have any advice on how to structure it?

Any hints are highly appreciated.


Hi! I really like your design! I would probably try a grid system to make it. The top section could span two columns of the grid, and it could have a flexbox applied with a vertical center/center. Then all of the text could be inside a div.

The next two sections would each make up one column of the grid, and one row. The dark green half could have a container in it for the text. Then the outer section would have flexbox vertical center/center applied to the inner div. The inner div would also have a vertical flexbox, but this time with left alignment and stretch.

Similarly, if the cup is an image without the light green background, you can apply the same flexbox/vertical/center-center to the light green section as well. Or you could just put an image that covers the whole column.

For the arrows, you could have two images with position absolute, and give either the green column, or the whole grid, a position of relative. Then, you could just roughly position them in the center where you wanted.

The green boxes at the bottom could make up another row of the grid. You could use four divs with different background colors (or whatever else you wanted to put there), and apply a horizontal flexbox with left alignment and stretch. Also, you might be able to use percentage units to get the sizing needed for each div.

I’m sure there is probably better ways to make this, but I’m working with what I know (: . I hope this helped!

Hi @design-tate ,

I quickly put this together in Webflow, here’s the preview link you can have a look at and copy aspects of: Webflow - design-tate

(Keep in mind this isn’t responsive - just an idea to get you started)

Hope this helps.

Hi Milan, sorry for the late reply. I went to the end with exactly your solution. Since it’s a bidimensional layout I preferred to use flexbox. Since I’m quite new with Webflow there’s now a new pain point, class hierarchy across breakpoints.

The image I’ve attached refers to the squared block on the right, that I used as a pattern at the bottom. Now I’m sure there’s a better way, but basically when on mobile I need to change the size of that squared div, which value it’s defined in the .square class, but since this is now a combo class, I cannot define just the .square class for the mobile breakpoints.

My question is, what’s the best way to organise classes that will make them editable also through various breakpoints?
What I mean is, should I follow a structure like: background-color first, then size, then other options (as you can see there’s a swap class when I need that children to be the last and not the first)? There’s any good guide or introduction to that?

Thanks in advance!

Screenshot 2022-05-26 at 17.26.15