Skip to content
Submitted over 1 year ago

NFT Preview Card Solution using CSS Flexbox

Khent Alba•440
@Lemon1903
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

I have one problem which is how to do the box shadowing in the design into code. Also, I am not sure if the background overlay when hovering the NFT image is an efficient way of doing it. Any feeback is appreciated!

Community feedback

  • Gio Cura•650
    @GioCuraPosted over 1 year ago

    Hi! 👋 The shadow in this challenge seems to be two layers on top of one another. So, in my solution, I input two sets of values separated by commas for my box-shadow, like so:

    box-shadow: rgb(0 0 0 / 3%) 0px 36px 15px 17px, 
rgb(0 0 0 / 5%) 0px 30px 20px 45px;

    Hope this helps!

    Marked as helpful
    1
    Khent Alba•440
    @Lemon1903Posted over 1 year ago

    @GioCura Ohhh I didn't know you could do that with box-shadow. I'll try it myself too, thank you!

    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