Vanila HTML CSS profile card component

Community feedback

• 

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  Hello there 👋

  Congratulation on completing the challenge

  HTML 📄

  • replace <div class="profile-card"> with <main> tag, And <div class="attribution"> with <footer> to fix accessibility issues.

  • Always provide <img> tag with meaningful and humnaly readable text about what the image is about in alt attribute

  CSS 🎨

  • Use relative units like rem or em for margin, padding, width, and height. most preferably rem for font size. avoid using px since it is an absolute unit.

  -To exactyl center the card component to the center of the screen. make these following chnages.

  1. From .profile-card remove margin: 15vh auto;
  2. Add these following lines of code to body element

  body {
         display: flex;
         flex-direction: column;
         justify-content: center;
        align-items: center;
        min-height: 100vh;
  }
  

  I hope this was helpful 😊

  HAPPY CODING

  Marked as helpful

  0

  ---

  

  Kristian Epa Froditus Santoso•320

  @kristiansntsPosted almost 2 years ago

  @Mr-jaw thank you for the advice, it's very helpful :)

  0