Skip to content
Submitted almost 3 years ago

opacity, max-width, max-height

William Hernandez•90
@WackLantern
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Thank you for taking the time to view my code. It was a challenge trying to get the image's opacity right so the cyan background with the eye image would appear like in the sample. But I managed to figure it out. Any type of feedback is welcome. Again, thank you for taking the time to check out my code.

Community feedback

  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To avoid accessibility issues in the future, give role="" to the direct children of your <body> ... Read more here

    Good job! :)

    0
  • Mark Cates•110
    @mscatesPosted almost 3 years ago

    one think to notice on your solution is the left part of the card all the way down. see how all the elements of the card design are lined up. the spacing between the left hand side of the card and the elements is the same. if you give the card itself a padding all the way around, this will resolve some of the issue.

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    Change your attribution div to a Footer and it 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.

    0
  • Dina Rocio•50
    @DinaRocioPosted almost 3 years ago

    Hi, I think you might need to add a general padding to the etherium card, because the paragraph is overflowing. Consider remove extra divs as well.

    Good job!!

    0

Please log in to post a comment

Log in with GitHub

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