Skip to content
Submitted almost 3 years ago

NFT Card using HTML and CSS

Ly Dinh Minh Man•260
@winprn
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I would really appreciate your feedback and also guidance on how to make the site works better. Thanks in advance!

Code

Please log in to post a comment

Log in

Community feedback

  • Kehinde•680
    @jonathan401

    Hey there @winprn 👋🏽 congrats on completing this challenge 🎉🎉🎉. You did really well. Just a few things from me 😄.

    1. This isn't really a feedback but you should consider checking out the report on your solution. This has help me a lot 💪🏿. For example, you should wrap your whole card in main element.
    2. You could consider changing the .card-title which is currently a p element to an h1 element. This is because it is required that every page contains at least one h1 element for easily navigation of the page by other users who may have some disabilities.
    3. When I checked out your solution on my mobile phone, the card was stretched over the screen. To fix this, instead of adding a definite to the card, you could consider giving a max-width style rule to the card instead of a width to the card. This will make sure that the card easily 'contracts' on mobile screens and then on larger screens you remove this max-width and adding a definite width of 37.5rem (which you defined in your CSS for larger screens). That is all from me 😄. Once again nice work 👏🏾. Happy Coding 🎉
    Marked as helpful
  • Ayomide Gidigbi•100
    @Draysongz

    Its a great design, but add cursor pointer style to the main nft image

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord