All solutions

Any feedback on the css? For some reason I wasn't able to give 100% concentration to following a strict flex box dev, so I ended up just hacking the css. Overall I was able to complete this in under an hour, however I just realised that I forgot to add the background circle elements. The positioning of the image wasted a lot of my time and I ended up forgetting about the background elements while I was trying to complete the challenge for time.

Im not sure why there is the big white space at the bottom of the card. I have a feeling it is because I shifted the profile image upwards, however I haven't been able to get rid of the white space, any ideas to solve this?

Also is it possible to use flex box and have the profile image in the position that it is? I was not able to achieve this so I ended up butchering my css. Hopefully another shot down the line and I can improve this and not forget the background circles :).

I managed to finish this in under an hour, however for some reason I feel like I have missed something since I was able to finish this quickly. From my initial estimate, I did think I would finish in less than 1 hour, but gave myself a bit of extra time in case. I forgot to put the animation for the button (which was next to nothing) in the estimate so I have to learn to look at the individual elements more closely as things like this could take more time depending on complexity.

For some reason I couldn't get the font for the h1 to show on the site, either I have missed something or I have something overwriting it in the css. With practice I want to get faster at creating such components, however I also want to write cleaner code as well.

Looking forward to any feedback.

I think the purple colour on the overlay does not match that of the design which seems to be much more vibrant, not sure why. Also I had issues with the responsiveness on the desktop version - whenever the width of the page was sized smaller, it would add padding at the top and bottom of the image instead of letting the image fill the whole height of the component. So what I did was set the breakpoint to show the mobile version just before that issue occurs. Any ideas how to fix this so that it is actually responsive?

I am abit confused with the accessibility issues I have regarding "landmarks". Im not entirely sure what they are, and even after some googling I have no idea how to solve this. Granted I have made use of divs instead of the semantic names like article (I never really got around to grasping the semantic names and have been using divs everywhere), etc, so im inclined to think the issue lies there, but im not sure what to do to solve this. Any help regarding the solution as well as the importance of this would mean a lot!

Otherwise, this is my first frontend mentor challenge. This took longer than I was anticipating. Im sure there are simpler ways to achieve what I did and probably with less code and more elegence, however I am surprised at how much of a learning experience this has been and look forward to more challenges.

I realised that the order in which you tackle the challenge can go a long way in maintaining your sanity - too much jumping back and forth made it confusing for me to fix some css issues, so in the end I started again and tried do things in a logical order as opposed to randomly targeting elements on the design.

Looking forward to some feedback from the community as well as seeing how everyone else has come up with their solutions!