profile-card-component using flexbox and CSS custom properties

👋 Hello Christ Kevin , Your solution looks nice & your code looks clean as well. I particularly liked the fact that you described in alt that Victor is in vacation with his family & what he is wearing so that users who can not see the picture can understand, Well Done 😅. However I think if you try below mentioned opinions your solution can become perfect .

• instead of background-size use background-position with values like this right calc(50vw - 5%) bottom 50vh , left calc(50vw - 5%) top 50vh (I actually played with those values until I got the right result )
• use the background-image & its related properties on body instead of html
• reduce the font-size of article h1 to make it look nicer

Other than those your solution is good & Please keep up with this nice solutions 👍

Hi, @Christ-Kevin ~

Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

Here are some of the tips I like to provide.

• On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
• Please try BEM for naming element classes. It will help you a lot on bigger projects.

https://www.frontendmentor.io/solutions/profile-card-solution-m-cH4D2Lp

Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

Cheers ~