NFT - Preview Card

Solution retrospective
Had a lot of fun & a little bit frustration for achieving the background pixelated shadow. I've tried various combinations and finally settled down to one. Tried the background-blend property in hover state with multiple bg-imgs and bg-color. Overall this project helped me learn something new.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @christian-prasetya
Congratulations for your solution, it's very nice.
- I see you try to use BEM Method for the CSS styling, which is great, but I think there some area of improvement.
<div class="nftCard__author"> <img class="nftCard__author__avatar" src="./assets/images//image-avatar.png" alt="author image" /> <p class="nftCard__author__about"> Creation of <span class="nftCard__author__name">Jules Wyvern</span> </p> </div>
I think it will be better and will be more easy if you write like this:
<div class="nftCard__author"> <img class="nftCard__author-avatar" src="./assets/images//image-avatar.png" alt="author image" /> <p class="nftCard__author-about"> Creation of <span class="nftCard__author-about-name">Jules Wyvern</span> </p> </div>
especially when you use scss, it will make your life easier, so basically you can use nesting selector from Scss like this:
.nftCard__author { &-avatar {} &-about {} }
which will make your life easier when writing the scss code.
- I appreciate you try to use Scss, but I think you can improve by folder structuring your scss partial file (it will be very helpful), and create component-like scss file.
- Try broadening your scss file with @mixins, function, and many more, to unlock the potential of your scss/sass skill. Sass - Guide
Hope this will help, and I'm sorry if my english little bit bad.
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