Skip to content
Submitted 2 months ago

NFT preview card component, CSS AND HTML

Matthew Sheldon•310
@MatthewNgabirano
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am glad I completed this challenge though some areas challenged me to figure out. I am planning to rebuild this challenge again to be the same as the original next time.

What challenges did you encounter, and how did you overcome them?

I couldn't align the center of the Icon to the center to match the original one. For the media queries, I tried to figure out some of the desktop size and the mobile size. But if I made errors, I welcome the feedback.

What specific areas of your project would you like help with?

I would like help with media queries to be able to come out with quality device responses.

Community feedback

  • Tarek Islam•220
    @tarekulPosted 2 months ago

    Great job getting the project going and mentioning future development on the project. Some insights and tips I am including below:

    • Use padding on the header-container to align the contents consistently away from the borders of the container.
    • Looks like you have a set width on the header-container. You can set the div class='image' to width: 100% to take up the fill width of the card minus the padding.
    • The avatar image can be made smaller but I think you have the intent on redoing this project so I won't comment too much here.
    • For the media query you can use use a bigger width than 30% for smaller screens
    0

Please log in to post a comment

Log in with GitHub

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