NFT preview component

Community feedback

• 

  Aakash Verma•9,500

  @skyv26

  Posted over 3 years ago

  Hi! Dharmik, you checked you design and design responsivess and I have noticed some issues.

  1. First of all, the most important work you left undone is, image hover effect. I would suggest you to implement the hover effect code, because it is the challenge's requirement, so always stick with the requirement.

  2. You can clearly see that your small icon, etherium 0.041ETH text and time left text are not aligned with their respective icon. It seems perfect if we see it from really far distance or small laptop screen, but not on big screen or closer look.

  Tip

  Update your CSS rule

  .nft__price {
      color: hsl(var(--clr-cyan));
      font-weight: 700;
      display: flex;
      align-items: center;
  }
  
  .nft__time {
      font-weight: 400;
      display: flex;
      align-items: center;
  }
  

  3. As I figured out while checking your 2. issue and I found that you have used font-awesome icon rather that than images provided by FEM. It is totally ok, that you have just completed your work with ease but you also missed , great learning opportunity too. You can still work on this and change your code and use that images instead of Font-Awesome icons.

  Overall Really nice work, your design is responsive too. I hope you you will soon update your code.

  Best Wishes

  01

  Marked as helpful
• 

  Anosha Ahmed•9,300

  @anoshaahmed

  Posted over 3 years ago

  Hey good job on the challenge! In the future, to avoid accessibility issues, include at least one <h1> in your code. Also, remember that <section> usually needs a heading, so if you don't need a heading in it, use some other element such as <div> :)

  01