All solutions

I'm just wondering if there's a more efficient way to write the code, as I manually changed each component in CSS.

Also, I used rem values based on feedback for previous challenges.

The gradient circle also looks quite big compared to the actual design. Would appreciate solutions on how it can be closer to the design.

I opted for a mobile first workflow and used display:flex for the desktop version.

I'm not too familiar with CSS Grid and therefore did not implement it in the final solution.

I used a filter to get the purple overlay over the image, but it looks a little different from the design.

Also for the desktop version of the design(600px and more), the image is responsive to the browser size, but the text field remains the same, and its size doesn't change.

I struggled a little with padding, as there is a bigger white space from the bottom paragraph which differs from the padding on the other sides.

I don't think I got the font-sizes correct, compared to the design.

Also, I tried using root values for the colours, but in the end I had to use the hsl values as the values were not recognised.

Would love your feedback!

I am not sure how images from my code can be seen on Github. The image is currently missing in the website. Would appreciate to know more about this!

There is a small gap below the main picture,which makes the text component a little longer than the picture. I'm not sure how to make both components to be of the same size.

For the mobile view, the image has been resized, but it looks awkwardly stretched,and there is (again) a small gap between the picture and the text component.