Design comparison
Solution retrospective
Beginner
Community feedback
- @zeerobitPosted almost 3 years ago
Well done completing this challenge.. check the link to your github repo i think it's broken i can't open it.. Few points i'd like to share
-wrap the nft image, the title and the creator name in an anchor tag since they're supposed to be interactive elements
-
under the nft image, add another div with the class name "overlay" add the eye image inside of it then use position absolute to place it on top of the nft-img , change the background color from hsl to rgb so you can add the opacity value to get the transparent effect , it should be like this
background-color: rgb(0, 255, 247, 0.4);
-
use more html semantics to wrap your content, example you could use the main tag for ".container" and figure/figcaption tag for ".avatar-container"
Hope this helps, happy coding!!!
Marked as helpful0 -
- @elisavet12Posted almost 3 years ago
Hello!!
This will help you to fix hover states for interactive elements: https://www.w3schools.com/howto/howto_css_image_overlay.asp
Nice work! :)
Marked as helpful0 - Account deleted
Hello there! 👋
Congratulations on finishing your challenge! 🎉
I have some feedback on this solution:
- Always Use Semantic HTML instead of
div
like<main>
<header>
, etc for more info.
if my solution has helped you do not forget to mark this as helpful!
Marked as helpful0 - Always Use Semantic HTML instead of
Please log in to post a comment
Log in with GitHubJoin 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