A user profile card with avatar, user-details and socials links

Community feedback

• 

  P

  RogeanCosta•150

  @RogeanCostaPosted 2 months ago

  Hi! Congratulation for the result! 👏

  By the way, it seems that Inter is not being applied. Another sans serif is being used instead. I suggest trying to understand why this is happening and perhaps using the font files provided through @font-face. Using @font-face, you just need use this:

  @font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter-VariableFont_slnt_wght.ttf);
  }
  

  The image also appears to be larger in your result than in the design. It is not common to insert the image dimensions through attributes in the img itself; the recommended method is to inform the dimensions through CSS. In fact, a good code practice is to not insert img elements directly into the HTML, but rather to insert them inside a specific div. Then, with this div, you can limit, restrict the image dimensions. Something like this:

  <div class="img-container">
      <img
        class="img"
        src="assets/images/avatar-jessica.jpeg"
        alt="Avatar"
      />
  </div>
  

  .img-container {
    width: 5.5rem;
  }
  
  .img {
    display: block;
    max-width: 100%;
    border-radius: 50%;
  }
  

  Don't give up, continue your studies, always improving your skills! 😁👋

  Marked as helpful

  0

  ---

  

  Gopal Adhikari•90

  @gopaladhikariPosted 2 months ago

  @RogeanCosta Thank you so much !!

  0