NFT card component

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Jatin, good work :)

  For center the card remove the margin from .container class and add the height property with 100vh value because Flexbox aligns to the size of the parent container.

  Viewport Height handles the sizing of an element in relation to the height of the browser window.

  To make it look as close to the design as possible, fix the border-radius of .container class using different unit of measure (for example 1rem) and add this also to equilibrium-image class.

  In the end, for fix the position of :hover state of image you can add position: relative property to the parent container and modifly position of .eye-div with the property top:0: in this way it will absolutely position from top itself within the space of its parent container.

  I hope that helps ;)

  Marked as helpful

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @JatinSetti ~

  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.
  • Image overlay position is mismatching with design, and it doesn't look so good.

  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

  1

  ---

  

  Jatin•30

  @JatinSettiPosted almost 3 years ago

  @tymren608 Thank you for your feedback . I looked about the image overlay but i didn't get it , so it would mean a lot if you describe me about it .

  0
• 

  Jatin•30

  @JatinSettiPosted almost 3 years ago

  Hello!

  Thank you for your feedback , it helped a lot and I've updated the styles you told me . You can have a look at it .

  Cheers.

  1