Skip to content
Submitted over 3 years ago

HTML and CSS

Slideur•180
@Slideur
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I couldn't figure out how to make these shadows around the NFT. I tried with box-shadow but it didn't work. Do you know how to do it please ?

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi

    Lots of the same issues in this as your other card solution but this has lots more problems with the html I'm afraid.

    In addition to previous feedback

    • paragraphs are for whole sentences, you can't split what is read as one sentence into multiple paragraph tags
    • decorative images should have empty alt attributes
    • anything with a hover in the design must be an interactive element in the html. That is essential
    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey Slideur, good job with this challenge. Keep up the good work.

    Your solution looks close to the design however in order to get the box-shadow you can use the box-shadow property. I recommend reading up on it just to ensure that you are specifying the correct values.

    https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

    In terms of your accessibility issues, simply wrap all your content between <main> tags and the error should disappear.

    I hope this helps

    Cheers, Happy coding 👍

    Marked as helpful
  • Slideur•180
    @Slideur

    Hey,

    Thank you for your comment and your help. I will try to use the box-shadow with the explanation of the site that you indicated to me.

    Regards,

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