Skip to content
Submitted almost 3 years ago

NFT Preview Challenge Solution

Vitor Pereira de Oliveira•100
@vitorpedeo
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

Apart from the spacing, I had problems to generate the card shadow. How can I generate the box shadow effect present in the design resources?

Community feedback

  • Anthony Weathersby•350
    @acweathersbyPosted almost 3 years ago

    Hey @vitorpedeo, good work.

    You just about have it with the box-shadow attribute, however the <blur-radius> value of the shadow is set to 0, which explains why the shadow edges look hard. Going from

    { box-shadow: 0 28px 0 16px rgb(0 0 0 / 8%) }

    to

    { box-shadow: 0 28px 16px 16px rgb(0 0 0 / 8%) }

    should move you closer to the result you're after. Check out MDN Box Shadow Values for details.

    Marked as helpful
    0
    Vitor Pereira de Oliveira•100
    @vitorpedeoPosted almost 3 years ago

    Hey @acweathersby, thanks for the help! I did what you suggest and now the final result is a lot closer to the challenge design. Once again, thanks!

    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