NFT Preview Card Component

Community feedback

• 

  Tux3er•780

  @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 helpful

  1

  ---

  

  Alex Garcia 🦝 Garcialexco•440

  @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