CSS Box model, responsive nft-preview-card-component

Community feedback

• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @Alex-Korir ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • I suggest you to try transition on hoverable elements like image, heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  0

  ---

  

  Alex Kipkorir•110

  @Alex-KorirPosted almost 3 years ago

  @tymren608 Thanks for the feedback. I really appreciate Kindly ellaborate on BEM...

  0
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Awesome work with this one. Viewing your solution, you did well with the design and I think you should considered the following as well...

  • Add the border in the .avatar into this...

  .avatar {
    display: flex;
    border-top: 1px solid hsl(215, 51%, 70%);
    padding: 0.8rem 0;
  }
  
  

  • Add cursor: pointer to the hover state of the fonts
  • Include font weight in the .avatar p span rule set into 400
  • Add font-weight: 400; to .img2 > h4
  • Wrap the content container with specific tag like main for readability
  • Uncomment/Remove the attribution section. Add your name and links for you work/portfolio

  Hope this helps and Keep up the good work!

  1