Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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 car

@Eshan01

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


What is the best possible way to align the eye-view pic in the middle of the equilibrium image? Which pseudo-class one should use to make hover type of effect in small screen size?

Community feedback

Eles 1,300

@eleswastaken

Posted

Good job!

On the design image you can see the pointer cursors, that means that those elements are interactable. And that usually means that element is either a button or a link. E.g. in this challenge when you try to click the image, you would expect it to take you somewhere so it is a link. Same is with the card title and author name.

For an alignment. A good practice is to put images in a wrapper(link, div, figure), and set a specified width and height. The eye is 48x48 px, so set the width to that. Then you could center align it using flexbox.

On small screen sizes there is no need to worry about hover effects(usually). You change an element using element:hover {}. You could just change the :active state to the :hover.

Good luck!

Marked as helpful

1

@Eshan01

Posted

Thank you! @eleswastaken for reviewing my project and clearing all of my doubts, now I'll update this project.

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