All solutions

Probably took too many divs again in some situations :(

I'm unsure about my profile image positioning with position relative. Cause I use position relative on all the elements below again to restore the right space between the elements. Feels weird 😅 should I rather have taken position absolute?

First time using Sass for a Frontend Mentor project. That's why I'm unsure about my scss files structure and found it bit difficult to name my variables and wonder if there are any better naming best practices. Feel free to give me some tips.

This time I tried to take the mobile first approach, because some people mentioned it in previous submitted solutions.

The biggest problem for me was the positioning, sizing and responsiveness of the hero image for tablet and desktop view. I'm at least reasonably happy with the result but it was more trial and error with dev tools and cobble many tutorials stuff together than knowing what exactly I was doing to solve it.

I thought if I make the image width and height 100% it will automatically gets its original size and overflow his container, but it didn't. So it was always to small and I applied position absolute to his parent container and determined it's final position. But I don't know, it still feels totally wrong and I don't really like the variable positioning of the image when I scale the browser window. I'll definitely look into other solutions. Hoping to find great solutions for this.

Is there any workaround to make transition work with linear-gradient background? Cause transition only worked with my non linear-gradient button.