Skip to content
Submitted over 2 years ago

NFT Preview Card

Josh•100
@j-likes-spicy
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

Good Evening Everyone,

I recently submitted my solution to this challenge; the most difficult task was getting the image overlay hover effect to work. Now that I've set this up (thanks to a W3Schools example), I have an idea on how it's done and can use it in the future! Also, I have a feeling that I could be slightly off on the mobile design, but it's hard to say. I'm always open to feedback (good or bad), thanks for viewing!

Community feedback

  • Marcell Mihály•750
    @mihalymarcell86Posted over 2 years ago

    Hey Josh,

    your solution looks pretty close to the design. The only thing that breaks the layout is the margin you added on the .container class. Without that, flexbox would be doing the centering just fine. That said, for vertical centering, you must set the flex container to be as high as the viewport (100vh).

    Marked as helpful
    1
    Josh•100
    @j-likes-spicyPosted over 2 years ago

    @mihalymarcell86 Thanks Marcell, I went ahead and updated the .container class and confirmed it now works. I'll remember that from now on.

    0
  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey Josh!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="container"> instead of <div class="container">.
    • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
    • The Horizontal rule hrare not allowed to be nested in a figure element

    This should fix most of your accessibility issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    Marked as helpful
    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