All solutions

I have two questions:

1. How can I add that little circular space between the profile image and the card pattern? I tried using border around the image but didn't work

2. How can I cut the two circular background images?

Feedbacks are appreciated!

What is the best method of centering the whole page content? Feedbacks are welcome! Thanks.

What other method can one use to add color to images? The image-overlay method I used distort the card responsiveness somehow. I don't know if it's because of the height. Any feedback will be appreciated, thanks!.

I used relative units and somehow still don't get responsive display on tablets. A feedback on what I did wrong is welcome. Thank you.

Glad to announce that I can now build projects that appear on all screens. It's not a big win yet, but a baby step towards my success as a frontend developer. Thanks to all that gave reviews to my previous and first project, it really helped improving this one. However, my biggest challenge at this was placing all the elements at the center of the page. If you have any cheat code that can help, I will truly appreciate. Thanks.

My code isn't responsive on smaller screen. I've tried setting the height and width of the page to that of the viewport's, but no changes. Any feedback will be appreciated. Thanks..