Submitted about 1 month ago

Super responsive NFT card component

Alex 🤸🏻‍♂️• 700

@sksksk2024

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I understand now what are pseudo elements and how to use them, so is a big big win!

What specific areas of your project would you like help with?

Everything was easy until I've got to make the hover effect of the nft image. Tried using content, pseudo elements, the transition of the hover with background-image and z-index, but nothing really work. I even transformed the svg into jpg to see if the image works properly. It's a problem that I don't know how to resolve, even though I searched for info. Appreciated in advanced!!

Community feedback

Konrad• 370

@konradbaczyk

Posted 17 days ago

Generally looks not that bad, nice smooth hover effects :) I have some feedback:

I have to use my mouse to move on site - component not accessible for only-keyboard users.
card isn't responsive, layout looks squeezed on 375px (mobile view).

Marked as helpful

Alex 🤸🏻‍♂️• 700

@sksksk2024

Posted 17 days ago

Hey, @konradbaczyk !!

I took a fast look at your project. I didn't get it what you mean, in this case, to make my project keyboard users friendly. Thanks for your suggestions! :)

Konrad• 370

@konradbaczyk

Posted 17 days ago

@sksksk2024 I meant its so important to make websites accessible for users with disabilities, e.g. not every single user can use mouse. Read more about web accessibility if u are interested in :)

Please log in to post a comment

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