Nft Preview Card Using Css

Community feedback

• 

  P

  Robert McGovern•1,075

  @tarasis

  Posted over 2 years ago

  Hi congrats on finishing the challenge 🎊. You've defintely got the spirt of the challenge.

  Try and be more descriptive with your alt descriptions, for instance if a screenreader read out "equilibrium" it isn't going to tell the user anything about what the image is.

  For unimportant icons, like the ethereum logo or the clock, use something like aria-hidden=true and add aria-label if you feel that more description might be needed. For example "This image costs 0.041 ethereum", for the period you might add something as well.

  Also you have no alt for the overlay image. Either set it to aria-hidden, or add a label describing what is happening.

  In theory the image preview and the title are also links, like the creator name.

  I wouldn't recommend setting the font-size in the HTML selector. As then all of your use of rem are based off of 18px. Someone else reading your code may miss that and wonder why values aren't what they expect / you end up with odd fractions.

  If you have access to a measuring tool, check out the width of the card for both the mobile and desktop versions. Both are larger than 300px, but also different than each other.

  Best wishes for your next challenges.

  01
• 

  Faris Thibani•220

  @Faris-Thibani

  Posted over 2 years ago

  Are you looking to add a box-shadow rule to the container? You can use box-shadow to create shadows... Here is a link to some awesome box-shadow rules you can copy and paste from.. https://getcssscan.com/css-box-shadow-examples. Hope this helps. Reach out if this is what you want.

  01