Submitted almost 2 years ago
NFT preview card component using scss, grid, and flexbox
@Ago-oyu
Design comparison
SolutionDesign
Community feedback
- @rostyslav-nazarenkoPosted almost 2 years ago
Hi! Great code!
Just a few things to point out
picture
element can only contain oneimg
element and as many as you needsource
elements. Change it to generaldiv
- change color text in the footer and change
div
tofooter
- using Scss nesting creates problems with specificity
Both selectors target the same element but the first one is more specific which in the big project might create a problem. As I could guess it is your first time using SCSS or is it? Some solutions to this can be leavingbody main .preview-card .nft__info .flexbox-item .nft__time-left p {} .nft__time-left p {}
body
andmain
selectors alone and then renaming.preview-card
to.nft
so you can target elements by specifying the next part with&
Something like that
In the end, you will have just simple class selectors.nft { background-color: white; &__image {} &__info {} }
.nft
,nft__image
, andnft__info
I'm still learn SCSS but I hope my feedback is helpful
Have a excellent day!
1
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