Submitted over 2 years ago

NFT Preiview Card Component

Slim• 145

@SlimBloodworth

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

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-amon

Posted over 2 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

Slim• 145

@SlimBloodworth

Posted over 2 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!

Amon• 2,560

@A-amon

Posted over 2 years ago

@SlimBloodworth Glad to help~

Marked as helpful

Please log in to post a comment

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