Skip to content
Submitted almost 3 years ago

NFT preview card ( Css + Image-Overlay-Icon and Hover Effects)

accessibility, bootstrap, cube-css, styled-components, jquery
Achinta Haldar•140
@FSwebdeveloper
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, Frontend Mentor Coding community. This is my old solution of NFT preview card component and I have little changes on this solution. I have using jQuery for Overlay-Icon on previous solution. Now I am applied for active states using on Css and Leave me take your own opinion !

  • All Feedback is Well Come.
Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾Hello Achinta, Congratulations on completing this challenge!

    Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

    You’ve used px as the unit for sizes but the problem with pixels is that its not optimized for multiple devices and screens. So a good fit its to use rem or em that have a better performance and make your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
  • Hyron•5,870
    @hyrongennike

    Hi,

    Nice job on the second attempt looks good Just a small tip add the font-family on the body instead of the .card-body because the .card-footer is not in there so it won't get that font that's why the footer font is a different font.

    Marked as helpful

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