Skip to content
Submitted over 2 years ago

NFT card preview - Only CSS

Peally•200
@Peallyz
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

An interesting challenge.

Nothing hard for me except that i never succeed to align the avatar with his name. I wasted a lot of time with the opacity transition on the img. I would have liked to do it with ::after but i don't know why it didn't work. My idea was to put a background in the front of the pictures with opacity 0 then opacity 0.3 on hover. So i had to builded it with a container div with a background colored and change the picture opacity.

Hope this comment will help others. Good luck and have fun.

Community feedback

  • Account deleted

    Hi Peally,

    Really good job. I think you want the following line to align img avatar and text.

    .card .create {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 300;
    color: hsl(215deg, 51%, 70%);
    display: flex;
    align-items: center;     /* Add this line */
}

    Hope this helps.

    Thank you.

    Marked as helpful
    0
    Peally•200
    @PeallyzPosted over 2 years ago

    @EthenPage I fixed it !! That wasn't vertical align or align items the good way to do it. In my previous challenge my html was awful, without section or h1/h2/p etc.

    <p> have a defaut margin top and bottom value at 1em and i just had to reset it to fixe it.

    Thank you for the help anyway !

    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