Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card

Josh• 100

@j-likes-spicy

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

NFT preview card component
  • HTML
  • CSS
1newbie
View challenge

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

P
Marcell Mihály• 750

@mihalymarcell86

Posted

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-spicy

Posted

@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

@Samadeen

Posted

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
Discord logo

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