Skip to content
Submitted about 2 years ago

NFT Preview Card

Antonio Santiago•90
@Ablueremote
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

Getting the hang of flexbox here. Any recommendations for grouping elements in css to condense code (<p> <h1> <h2>)? Any other recommendations also welcomed.

Thanks, you guys have already taught valuable info. This is my 3rd project and the first 2 took multiple days. This one was done in one sitting.

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @Ablueremote,

    *Congrats on completing the challenge, you did a good job

    The only changes I would make are the following.

    article {
    display: flex;
    flex-direction: column;
    background-color: hsl(216, 50%, 16%);
    padding: 1.2em; 
    max-width: 300px; 
    border-radius: 15px;
}

    it's just the max-width and the padding everything else looks fine. I would also suggest to look at the report above and fix those issues.

    The only other thing I didn't see was the hover effect on the image I know that one is a bit tricky you can check out my solution below to see how I did it.

    **my solution

    it's basically just using the pseudo element ::before and ::after to handle the overlay and the eye icon.

    Hope this is helpful.

    Marked as helpful
    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