Profile Card Component using Flexbox

Community feedback

• 

  Finney•3,030

  @Finney06Posted over 1 year ago

  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!

  Marked as helpful

  0

  ---

  

  generieyyc•160

  @generieyycPosted over 1 year ago

  @Finney06

  Good point here, thank you! I usually forget the hierarchy of headings.I'll put this is mind the next time. Cheers!

  0
• 

  P

  Luca Liebenberg•180

  @lucaliebenbergPosted over 1 year ago

  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 ✌️

  Marked as helpful

  0

  ---

  

  generieyyc•160

  @generieyycPosted over 1 year ago

  Hi @lucaliebenberg,

  Let me try your solution and see how it goes. i think I also need to optimize my margins here. It's interesting that it looks very simple but it's the hardest (so far) for me. Thanks again for the feedback!

  0

  

  P

  Luca Liebenberg•180

  @lucaliebenbergPosted over 1 year ago

  @generieyyc No problem. Shout if you have any other questions!

  0