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 card, vanilla css

P
Fluffy Kas 7,735

@FluffyKas

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey guys,

I found this was an overall pretty easy challenge, I completed it in an hour or two. Most of this time I've spent on trying to figure out the background shadows (ended up using a mix of box-shadow and pseudo-element) and pondering what would be the best solution for the image overlay from an accessibility point of view. I went with having a link and an image side by side in a container (was wondering if it would be a better solution to wrap the image inside the link?) and used ::before for the overlay. I'm not sure if this is the prettiest solution, as I had to use fixed width&height to achieve what I wanted. If anyone can recommend something nicer, I'd really appreciate it!

If you have any feedback on other parts of my solution, I'd be very happy to hear that as well!

Have a great day everyone!

Community feedback

P
hardy 3,660

@hardy333

Posted

Hi, nice solution but why don't you just insert image element in to the <a></a> ? It would be the easiest way I guess(if I understand correctly what you are trying to do), if user wants to click it, that activates hover effect anyways. And also you can add :focus state on <a> tag and that will be same as hover state, in case someone only uses keyboard and not mouse/cursor.

Marked as helpful

1

P
Fluffy Kas 7,735

@FluffyKas

Posted

@hardy333 Yeah, I was wondering if I should do that, just wasn't sure if that's the correct way of doing it. I'll change it ^^ And thanks for reminding me of focus, I completely forgot, though I usually like to add different styles for focused elements :)

1

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