Design comparison
Solution retrospective
Here is my completed NFT Preview Card Project. I did have a hard time getting the hover state set for the main image, and I struggled lining up the icons with the wording to the right. Any suggestions on improving my code are welcome. Thank you!
Community feedback
- @denieldenPosted over 2 years ago
Hi Jill, great work on this challenge! 😉
Here are a few tips for improve your code:
- remove all unnecessary code, the less you write the better as well as being clearer: for example the comments
- to make it look as close to the design as possible reduce the size of eye image
- remove all
margin
from.card-container
class - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
use relative units of measurement likerem
-> read here
Overall you did well 😁 Hope this help!
Marked as helpful0@jill-spencerPosted over 2 years ago@denielden Thank you so much for your feedback- it was very helpful!
1 - @Jorgus1710Posted over 2 years ago
This is excellent!
I'm trying to do this challenge myself, and can't quite understand how the before & after pseudo elements come into play here to make the hover state work on the main image. If you have a source, would you mind recommending me a YouTube video which describes what's at play here? I've been digging for 2 days now and although I feel like I'm on the cusp of understanding how exactly its working, I just cant quite put it together in my mind yet. Its driving me nuts!
0@jill-spencerPosted over 2 years ago@Jorgus1710 - the before and after pseudo elements are really tricky. I'm still learning about them. This is a pretty good video series on that topic. This guys seems to explain it pretty well. Hopefully it's helpful for you. Before and After Pseudo Elements
0
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