NFT Preview Card Component – HTML & CSS Solution

Solution retrospective
I'm most proud of achieving the exact design with proper alignment and smooth hover effects. Next time, I would use semantic HTML tags for better accessibility.
What challenges did you encounter, and how did you overcome them?One challenge was aligning the icons and text properly in a single line with equal spacing. Another major challenge was creating the image overlay effect with the eye icon on hover. Initially, the overlay didn’t cover the image perfectly, and the eye icon wasn’t centered. I solved it by using position: absolute and proper z-index inside a relative container. After a few layout adjustments and testing, everything started working smoothly.
What specific areas of your project would you like help with?I'd like feedback on improving the image hover effect and making the layout more responsive. Also, suggestions on better semantic HTML structure or cleaner CSS practices would be helpful.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Md-Mubin
You can handle that border without using a extra div that you used class name "line". Use padding insted of margin in user classname and than use "border-top : 2px solid #(your color)" to get that line desgin.
Marked as helpful - @alaa-mekibes
Great work just a few points to fix:
- Use Only One <h1> Per Page
Maintain a proper heading structure, using <h1>, <h2>, and <h3> in a hierarchical manner. This improves both organization and SEO.
- Never Leave the alt Attribute Blank
Always provide a meaningful alt description for images. This improves accessibility and contributes to better SEO.
- Use semantic HTML elements for better structure and accessibility. For example:
<body> <main> <!-- Your code --> </main> </body>
- Use
min-height: 100vh
to get full-screen.
Impressive work, stay focused and keep excelling!
Marked as helpful
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