Skip to content
Submitted over 2 years ago

NFT Preview Card Component Challenge Using HTML/CSS

riverCodes•300
@riverCodes
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

Any feedback regarding the accessibility and responsiveness of the webpage will be appreciated. I would also like to know whether my active states are correct!

Also, is my use of Label tags correct here? Or are they only supposed to be used in web-forms? Using label tags made it easy to attach text next to the icons.

Also, using <span> tag added a weird spacing between the text and i had to use negative margin to fix it. Any ideas on why that happened?

Community feedback

  • Bernardus•1,095
    @BernardusPHPosted over 2 years ago

    -Hey RIVERCODES. Yes the use of the label element is mostly/only used for forms like inputs or buttons. I looked at your code and out of curiosity, I changed the label element to a div and nothing happened, I assume because you used classes to attach and align everything, so try to replace the label with a div and see if it is still the same.

    -Also I recommend encapsulating the Creation of Jules Wyvern in a <p></p> bc when the screen size decrease, the words Creation of and the span separate.

    -Hope this helps

    Marked as helpful
    1
    riverCodes•300
    @riverCodesPosted over 2 years ago

    @Artosh-afr Wait haha you're right :P For some reason, it didn't cross my mind that divs could contain text just like labels (I had just learnt about labels when I made this)

    And thanks for the Creation of Jules Wyvern suggestion, I was wondering how to fix that as well! It worked :D

    1

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