Profile Card Component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace the h3 tag with h1 tag to fix the accessibility issues..

  Make bg-pattern-card.svg the background-image of profile-icon, there is no need for header-img. Give .profile-icon position: relative; give .icon position: absolute; bottom: -(half the height of .icon) and left: 40%; this should help.

  Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am Helpful Happy coding

  Marked as helpful

  1
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY NEMANJA!

  About your centering problem, what you will want to do is place this code

  <img class="header-img" src="images/bg-pattern-card.svg" alt="colorful header">
  

  inside this code

  <div class="profile-icon">
          <img class="icon" src="images/image-victor.jpg" alt="profile photo">
        </div>
  

  You will then give the .profile-icon a position of relative and the image of victor a position of absolute, you will then be able to precisely position it from there.

  IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)

  HAPPY CODING!

  Marked as helpful

  1

  ---

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @Nadine-Green

  I see that it is not vertically centered, a quick fix for this would be the give the body a height of 100vh height:100vh then a display of grid display: grid and then using the code place-items: center

  0

  

  Nemanja•130

  @Dayne2xPosted almost 2 years ago

  @Nadine-Green Hey Nadine!

  I altered the code as per your advice, and everything seems to be in order now. Thank you very much for your advice.

  0

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @Dayne2x

  Glad that i could be of help :)

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The profile card’s background is decorative, it does not add any value. So its Alt Tag should be left blank and have an aria-hidden=“true” to hides them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • For the profile images Alt Tag Description, it should never* include the following keywords; “image”, “photo”., “picture” and any variation of them.

  • The statistics are a list. They need be created using the Unordered List along with the List Element.

  More Info:📚

  MDN <ul>: The Unordered List element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0