Streaming live at 10am (PST)

Complex design: What is the best way to make this S-Shaped design with icons on it?


I have a somewhat difficult problem which I can’t quite get it right so I am asking you guys if you could help me out:

So to be direct, I want this:

I made the S-Shape in illustrator and put it in webflow as a SVG. The problem is that it scales horribly when you preview it on a phone. So my plan is to make the S-Shape in different sizes for the tablet, phone landscape and portrait. I have already put the tablet size on the website. (These are very quickly made, these are not the final designs)

And there has to be Icons on the S-Shape like in the image above, where you can click on and you will get this:

Problem I am dealing with now is that the icons doesn’t stay on the S-Shape when you are narrowing your screen. But I don’t know if it’s better to make the S-Shape in webflow or like I did paste the S-Shape like an image.

Anyone knows a good/handy way to achieve what I want?! :S

@Mourik ~ Hello Mourik. There are more than one way to accomplish this and here’s one way I thought of: Webflow - Sandbox. The divs in this example are disorganized. Mainly the icons. This is just a quick mock-up.

The problem is adding the gradience to the border color which I believe could be done by adding a little javascript. Not sure. You would add those icons in their corresponding parents and absolute position them where you need them.

I’m still learning so I’d like to see what others come up with.