Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card Component

#bem#sass/scss

@garcialexco

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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β€’ 760

@Tux3er-Isma

Posted

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

@garcialexco

Posted

@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 GitHub
Discord logo

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