Skip to content
Submitted 3 months ago

NFT preview card component

HovenWebdesign•20
@HovenWebdesign
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 tried to use modern css to create the card. I would like to get feedback on design, usage of html and css. If you have any other feedback, I would like to hear it too.

Community feedback

  • Sergei Borja•980
    @wonderlust101Posted 3 months ago

    Looks good but a little tip in the future if you decide to use a reset.css or normalize.css. You can use:

    width: min(xrem, 90%); //Where x = size of container

    What this does is choose the lowest value of the two. This means that on wide monitors it will be equal to:

    width: xrem; //Where x = size of container

    and on smaller monitors it will be like:

    max-width: 90%;

    While it only saves you from writing one line, its still pretty useful in other applications outside of container width. Its compatible all browser except IE but if you care about accessibility, I recommend not using it.

    Browser Support: https://caniuse.com/?search=min

    Source: Kevin Powell - Youtube

    Marked as helpful
    0
    HovenWebdesign•20
    @HovenWebdesignPosted 3 months ago

    @wonderlust101

    Thank you for the feedback I will look in to it!

    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