NFT Preview Card Component
Design comparison
Solution retrospective
Hello! This is my solution for this challenge. π
Help:
This is my second project built using Sass and BEM, any improvements on technique are welcome! I had a little trouble with vertically centering the icons with text below the description. This was a very fun project, I learned a lot!
Built Using:
Sass, BEM, Responsive Design
Any ideas on how to improve in any way are greatly appreciated! Much thanks. π
Community feedback
- @Tux3er-IsmaPosted almost 2 years ago
Hi Garcielexo!!!
Congrats for completing this challenge, it looks awesome ππ»π
I have reviewed your code and I will give you some tips π‘:
-
In hover states try to use
cursor: pointer;
to get a better user experience. -
I think you forget to put the hover states in the img. You can do this adding a new
<div class="img-hover-state"></div>
. Then you put.img-hover-state{ background-color: var(--the-background-color); opacity: 0;
and finally you put an animation with ```@keyframes puttin the opacity in 1. -
You can also use
transition
to get cooler hover states. -
If your are using reset states, I recomend you the normalize.css π.
-
An advatage of SCSS is that you can put child into a parent and don't do it separated the parent element. I recomend you this video πΉ.
-
The best way to center elements is with css Flexbox.
min-height: 100vh; display: flex; justify-content: center; align-items: center;
That's all, I hope this comment will help you in the future!!!
You do it very well so continue coding πβ¨οΈ
Marked as helpful1@garcialexcoPosted almost 2 years ago@Tux3er-Isma thank you very much for your insight! I just realized I completely forgot about the hoverstates π
I'll definitely be studying up on them, as well as with flexbox. I'll be sure to incorporate hoverstates in my new projects! Thank you for all the tips and tricks, I'll check out those resources!
Thanks again for the very helpful comment! π
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