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

Responsive Nft-card using flexbox

@Leskim

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 hover part of the top image .... The view image blends into the box image which is not as per the design. Its minor but any help on how I would have tackled that part better will be highly appreciated.

Thanks in advance 🤜🏽

Community feedback

Rafal 1,395

@grizhlieCodes

Posted

Hi Lesley!

Overall I think this is a great job. I could write a few pointers but I thought the best thing to do would be to show you how to best tackle this:

A video i actually posted yesterday covering this solution. The exact part you're interested in I think would be found in this timestamp.

Otherwise feel free to watch the whole thing and see if you get any ideas. I used SCSS but it's basically CSS with nesting, anything you're unsure about just let me know and i'll type up a juicy/detailed response!

Alternatively I created this codepen demo for you, it's the exact solution 'required' or one I would suggest anyway for this particular problem.

If you have any questions just let me know.

Marked as helpful

0

@Leskim

Posted

@grizhlieCodes Thanks Rafal ...much appreciated

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