Skip to content
Submitted almost 3 years ago

NFT Preiview Card Component

Slim•145
@SlimBloodworth
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

Hi Everyone! I finished the challenge and I'm really happy with how it came out. I'm looking for any feed back you might think would be helpful, and I'm very interested in your input on the code itself concerning legibility, organization, content structure, as well as drying up the code. Is there some place where I could have condensed it better? Is there a way I can make it more reusable if someone wanted to make changes, updates, or any other adjustments? Are there any accessibly additions or changes that would benefit the program? Are there any questions you have for me on why I chose to do something the way I did? I always appreciate your feedback and so far it has always been very helpful and educational! Thanks in advance y'all! -Slim

Community feedback

  • Amon•2,560
    @A-amonPosted almost 3 years ago

    Hello! Awesome job~ 😀

    I've got a few suggestions:

    • Set position:relative; on .image-container so that the eye icon/image 👁 is center of this parent container.
    • The clock icon 🕑 isn't vertically aligned with the '3 days left'. You can fix this by setting
    display:flex;
align-items:center;
    • Set the alt attribute on your images. I noticed some of them don't have it. You can leave the value empty like this: alt="". 😉
    • This might just be me but, the cursor:pointer; and color change on hover makes the text in .creator-container looks like a link so, maybe just change the p tag to an a tag instead since it's possible for it to be a link. 🔗
    Marked as helpful
    1
    Slim•145
    @SlimBloodworthPosted almost 3 years ago

    @A-amon Thank you! I was having a really hard time getting that eye icon to center! I chased it around every corner of its container! This is really helpful!

    0
    Amon•2,560
    @A-amonPosted almost 3 years ago

    @SlimBloodworth Glad to help~

    Marked as helpful
    1

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