Workit landing page

Hello 👋,

I am submitting another solution I had been working on in last week and half. It was a solid challenge which took me a bit longer than I had originally planned. But it was a big fun.

What did you find difficult while building the project

I think the biggest challenge was to implement the special shapes in a way specified in the design. I wanted to use pseudo-elements ::before and ::after exclusively (to avoid cluttering the template), but it took a bit of time to make sure all the extra elements are handled well.

I chose vanilla CSS too with a decent amount of CSS variables. It was fun and I learned a lot, but due to some extra repetition, I feel that for projects of this size is probably always better to use preprocessors. But I am still proud of the result.

CSS Filter generator

What could be extra useful for others is this CSS filter generator. I had always tweaked these values manually as most of the hover colors are similar. But it was quite neat to use this tool to get the exact color that was specified by the design.

So if somebody struggles to get the desired color filter for social media hover effect, I would definitely recommend to use this generator.