Skip to content
Submitted over 3 years ago

Responsive NFT card

Paul•70
@Paul-Royce
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I would really appreciate if someone can give me some feedbacks about my solution. Especially about the css styles that i used, i would like to know if someone can suggest a shorter code that leads to the same outcome.

Code

Please log in to post a comment

Log in

Community feedback

  • bikeinman•1,080
    @BikeInMan

    Paul,

    I think you did a great job already. It took me 150 lines of css. Yours is only at 100. I guess, you are still working on the image hover requirement.

    Good Luck.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    Even small components use a lot of code. I wouldn't worry about it. I would try to stay away from floats. In responsive design they cause troubles because the elements are taken out of the flow of the document. Your hover is missing on the image. The alignment and spacing look good. Nice job.

    Wrap your card div in a Main tag and the attribution div in a Footer tag. Change the Equilibrium text to an H1. Every page should have an H1 for accessibility. You will have to re-style it to match the design.These things will clear the accessibility warnings.

    Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

    Hope this helps.

    Marked as helpful
  • Paul•70
    @Paul-Royce

    Thank you very much David! Your feedback was specific, and above all, constructive!

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