nft_preview_card_component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hey Hafsa, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • to make it look as close to the design as possible add opacity: 1 to equilibrium:hover .img-active class and use rgba for the cyan background in the .img-active class
  • remove all margin from card class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁

  Marked as helpful

  2

  ---

  

  hafsa•10

  @hafsabnPosted over 2 years ago

  @denielden I really appreciate the reviews you gave, thank you

  1
• 

  Terremoto BCN•60

  @terremotoBCNPosted over 2 years ago

  well done, I help you with some tips:

  The first thing is to place the card component in the center with the body height settings and the flex box css layout:

  body {
      background-color:hsl(217, 54%, 11%);
      margin: auto; /* eliminate body margins */
      min-height: 100vh; /* set 100% height to the viewport */
      display: flex; /* set flex box to center the card*/
  }
  

  About your question, the best way to "position the text in the same line with images" is skip to use floats, use it only to fluid the text body arround an image.

  The best way to align text is to use vertical-align css property and set it in the middle, :

  /* For SVG icons */
  svg, .card-icon {
    vertical-align: middle; /* Set vertical align in middle */
  }
  
  /* For the Avatar image - quit float property */
  .avatar {
      width: 12%;
      border: 1.5px solid white;
      border-radius: 50%;
  /*     float: left; */ /* Dont use FLOAT */
      vertical-align: middle; /* Set vertical align in middle */
  }
  

  I hope this helps you to improve

  I propose U to practice the Flex Box layout with : flexboxfroggy

  Marked as helpful

  1

  ---

  

  hafsa•10

  @hafsabnPosted over 2 years ago

  @terremotoBCN thank you for all your feedbacks it's really soo helpful

  0

  

  Terremoto BCN•60

  @terremotoBCNPosted over 2 years ago

  @hafsabn U R Welcome!! Are you ready for new challenges?

  0

  

  hafsa•10

  @hafsabnPosted over 2 years ago

  @terremotoBCN of coourse ^^

  0
• 

  Marius•190

  @MariusHorPosted over 2 years ago

  Hi,

  I would suggest that you start learning about Flexbox and Grid in order to gain some knowledge on how to position certain elements where you want them. You can check you Kevin Powell videos on this subject as they are beginner friendly and very easy to follow. I would also advise against using text-align: justify because it will make the spacing between words look off.

  Happy learning! 😉

  Marked as helpful

  1

  ---

  

  hafsa•10

  @hafsabnPosted over 2 years ago

  @MariusHor thank you ^^

  0
• 

  steevencode•120

  @steeven509Posted over 2 years ago

  Hi, I have not checked your source code yet but the report indicates that you have a lot of accessibility problem, if this feedback has helped you mark it as util thanks you

  0