Submitted over 2 years ago

CSS, Flexbox, positioning, hover

Tiago Costa Rebelo• 180

@tiagocostarebelo

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,

This is my solution for this challenge. Would love to have your feedback and useful tips to improve my code.

The active states requested in the challenge are all working, just couldn't get a proper screenshot of them, but if you follow the live solution link, you'll see them working on both mobile and desktop versions.

Also, both versions in the design had a box-shadow that I tried to replicate the best I could. I even feel the desktop one had a second shadow, but I didn't add that one.

Really looking forward to get your feedback, Thanks, Tiago

Community feedback

Rimka• 600

@karimfilali

Posted over 2 years ago

Hello Tiago,

you did a really good job on the card ! The recommanded sizes are respected. I have a couple of suggestions. First, wrap your div.attribution in the main. Every div or section must be in the header, footer or main. Also, every section must contain a title. Your section.card-stats can be a div.card-stats. Sections are a big part of a page. Finally, some transition and delay for the hover effect would be nice.

Hope this helps

Marked as helpful

Tiago Costa Rebelo• 180

@tiagocostarebelo

Posted over 2 years ago

@Rimka93 Thank you for your inputs and tips. Really appreciated.

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