Skip to content
Submitted almost 3 years ago

Profile Card Component - Responsive/Flexbox

burak.v•80
@vonaser
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone! I used z-index property for stacking the elements. What would you suggest instead of using z-index property?

Community feedback

  • Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    Hello there! Well done with this one. I think you did well on using the z-index property, other than that, I would use position . Looking at your solution, I would suggest the following for you.

    • Adjust the position of the left background image into left 35rem top 20rem; (desktop size)
    • Add a bottom border in the card-body rule set...
      border-bottom: 1px solid gray;(change the value of the color)
  padding-bottom: 1rem;
    • Adjust the margin in the card-footer into margin: 1rem 1rem 1.5rem auto;

    Overall you did well and Keep it up! Cheers!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord