NFT Preview Card Component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted about 3 years ago

  👾Hello Dicskson Owusu, congratulations for your new solution!

  🎉 Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you don’t mind I’ve some tips for you:

  1.Add transitions to make smoother the interaction while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

  2.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  3.The correct value for this shadow is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

  4.You can create a media query to save space in the author section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .author {
      color: var(--Softblue);
      display: flex;
      font-size: 15px;
      align-items: center;
      justify-content: left;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  10

  Marked as helpful
• 

  romila•3,550

  @romila2003

  Posted about 3 years ago

  Hi @ondickson,

  Congratulations 🎉 for completing this challenge, your card looks great, and you have used the right semantics. Also you have no accessibility and HTML issues which is great too.

  1. The only thing I would suggest is to you use min-height property to center the card in the middle e.g. min-height: 100vh;
  2. Also, in the design, the word 'Equilibrium' and the profile's name has a hover effect which are shown in the design provided. I would suggest you wrap it within the a tag since if this was a functional NFT card, those texts would redirect you to external/internal websites.

  Overall, great attempt and wish you the best for your future projects so keep coding 👍

  10

  Marked as helpful
• 

  Dicskson Owusu Nyantakyi•270

  @ondickson

  Posted about 3 years ago

  Thank you very much for the feedback. I will fix these issues right away.

  Edit: I noticed all the minor details. got really excited and totally missed them all but I've fixed everything. I want to hear your feedback once again. That was very helpful.

  00