nft-card

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job in completing this challenge. Looking at your solution, I would like to suggest the following for you...

  • In the .card, remove position: absolute;, top: 50%;, left: 50%; and transform: translate(-50%, -50%);. Adjust width into max-width: 320px; and border-radius: 0.5rem;. Add margin: 7rem auto;
  • Adjust width in .image-wrapper img into max-width: 290px; and border-radius: 0.5rem;
  • For the hover state of the Hero image, refer it with this example Overlay in images
  • The .cyan rule set should not have a hover state. Instead add color: var(--Cyan);
  • Remove the class cyan in h4 and span. Add color: white; and cursor:pointer, create a hover state with color: var(--Cyan);
  • Add border: 1px solid white;, border-radius: 50%; and margin-right: 1rem; in the .avatar img rule set
  • In .avatar rule set, modify the flexbox property into justify-content: start;
  • Instead of wrapping the whole content with section, use specific tag like main . For HTML structures, refer it with this one Semantics
  • Include description with the alt in img tags
  • Remove unnecessary code to keep it clean
  • Import attribution style in CSS file and remove style tag

  Above all, good job in completing this challenge. Hope this helps and Keep it going!

  Marked as helpful

  0
• Account deleted

  Hello there! 👋

  Congratulations on finishing your challenge! 🎉

  I have some feedback on this solution:

  the width is way bigger than the original design so

  • decrease the max-width to 32vh

  if my solution has helped you do not forget to mark this as helpful!

  Marked as helpful

  0