Skip to content
Submitted over 3 years ago

NFT Preview Card - HTML/CSS/

Dizzy_Sloth•50
@TotallySly
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I really struggled in producing the Overlay. I had to look at a lot of different solutions in order to figure out how this worked. After completion, I am now wondering if the hover elements should have been placed within Anchor tags.....

I need to improve my knowledge of accessibility and aria-labels. Position: Relative and Absolute.

I have not used it on a responsive challenge yet, but I am wondering if using 'Max-Width' helps responsiveness? To my ignorant self, it feels like that should limit the amount of Media Queries. But I know nothing.

Thank you

Code

Please log in to post a comment

Log in

Community feedback

  • notabhishekrai•180
    @notabhishekrai

    Great Job! But you should wrap all the code inside a <main> </main> (replacing div class = "container" with main class="container" should do) and use atleast 1 H1 tag. These two should solve your accessibility issues.

    for the hover effect, you can just use position relative to the parent and position absolute to child with top and left 0.

    max-width does help in responsive design. If you use max-width of 200px for an image, it will resize when you decrease the screen size but it wont resize(stays the same) when you increase the screen size (to whatever size). Unlike the normal width property.

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Good job completing this challenge.

    Keep up the good work

    Your solution looks great however I think that the user avatar does not need a border around it

    In terms of your accessibility issues simply wrap all your content between main tags

    I hope this helps

    Cheers Happy coding 👍

    Marked as helpful
  • Dizzy_Sloth•50
    @TotallySly

    Thank you for the feedback, both of you. I keep forgetting about semantic HTML.... that is a massive error on my part. Something I need to change.

    And I am glad my thinking was correct behind the max-width property! I look forward to taking it onto the next challenge

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