Profile Card Component using Flexbox

Hello there 👋. Good job on completing the challenge !

Here are some suggestions regarding your code that may be of interest to you.

HTML 🔤:

To clear the Accessibility report:

• Use an h1 tag for the main text in the design given and always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

Hi there @generieyyc,

Good job with completing the challenge.

With regards to how you could do it better:

1. Reduce the height of the bottom half of the card (the white section)
2. You can separate the top pattern on bottom white card, with the profile avatar being placed on either of the two, then make use of slight negative margin to have an overlay.

I am aware negative margins are not always the solution, but if it does not heavily affect the design with regards to responsive design, then I do not personally think it is a problem.

I hope this helpful. Happy coding ✌️