This is a figma design file. My question is how this could be developed in webflow? The buttons with lines, and the circle on top. Thank you for your help
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
HTML layouts work on a box-model.
There are a lot of ways to do this, and a lot of it depends on how you want it to work responsively all the way down to mobile portrait view.
Here’s one approach;
- Black div is a grid, 1 col
- Red div has a fixed height at desktop. Semicircle can be background art or SVG
- Green div is a grid, 4 col
- Each blue div is flex downward
- Yellow divs are pricing components each with a different class to control height and layout consistently across your 4 cols
Then e.g. on mobile landscape;
- Change the green div to 1 col so it flows vertically
- Adjust your background, font size, and height for the red div to fit
For your button lines, using borders on the button itself is simplest.
2 Likes