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
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.
