Submitted almost 3 years ago

NFT-preview-card challenge solution using HTML and CSS

Olokodana Abdulkabir. O• 290

@Olokoburnfire

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

Hello, I'd really appreciate it if anyone can suggest a better way to make the equilibrium image on the page include a background and another image when the mouse is hovering over it.

Also the positioning of that eye{view} image which is to come up when the mouse is on the equilibrium image really gave me a though time, Although I am still not convinced i got the position right. It will be helpful if you all can suggest a better way to position it.

Community feedback

Account Deleted

First look review.

transform: translate(-50%, -50%);, missing comma between values
"Equilibrium" and "Jules Wyvern" must be links. The user can't access that with his keyboard, press Tab and see it for yourself.
Card isn't in the centre. Add that style to your main.

display:flex; 
align-items:center;
 justify-content:center; 
min-height:100vh

(use min-height, instead of height. if your content isn't fit fullscreen size, your main block will expand) I made that codepen for demonstration -> link

In general, work on your accessibility, use links there it must be. Thanks for reading.

Marked as helpful

Olokodana Abdulkabir. O• 290

@Olokoburnfire

Posted almost 3 years ago

@jenbefishy Thanks I'd update the solution

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