Profile Card Component using HTML and CSS

Community feedback

• 

  Sean•175

  @sean-b765Posted over 3 years ago

  Hey man good design! Noticed some things you might want to look into

  • You specify the height of the card, but when you have height: auto; you'll notice your card will fit all of its inner content, and when content is added it will expand. This is much preferred over specifying a value in px, and you can use padding to put whitespace between the content and the edge of your card.
  • Avoid using top to move elements upwards. You did this at profile-pic, and I used to do this too. But you could use position: absolute; on the img, then use transform: translateY(-50%); to place it in the 50% above where it usually would be. Then it's just a matter of horizontally centering the image.

  Have a good one :)

  Marked as helpful

  1