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

Simple solution for NFT Preview Card

Archer 90

@Archerking47

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


The difficult part was the active / hover states it needs imagination it took me time to figure it out but nevertheless I got it.

I just used opacity and display none for it.

Community feedback

Macdeesh 610

@macdeesh

Posted

Hello Archerking47,

That looks pretty good except for a few things:

1- Move the styling of attribution to your CSS file.

2- What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. That is essential to fix. So you should wrap the Equilibrium image and the other elements with an anchor tag.

3- I would do the hover effect using pseudo-elements rather than adding extra in the HTML, but that's not essential. Also, for the other icons you can use pseudo-elements like ::before or ::after, to put the SVGs inside your CSS as the icons are all decorative.

Marked as helpful

0

Archer 90

@Archerking47

Posted

@macdeesh Thank you for the feedback. I appreciate it very much

  1. yeah, you're right, actually I didn't notice it until I've published my code.

  2. I agree, It must be clickable, not just hover. when user clicked the image it should go somewhere or there must be some kind of action. and there must be an <a><a/> tag there. :)

  3. I think that's the solution, that I want the ::before or ::after pseudo-element.

I will incorporate it on my solution. :)

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