Challenge 2 || NFT card

Community feedback

• 

  Abdelrhman Kamal•450

  @AbdelrhmanX7Posted over 2 years ago

  Hi Sachin you can use width: 400px instead of 30% because he percentage value is change by body width change example if i have body width value 1000px and i use width 30% for main element now if body width change from 1000px to 500px the main element will change from 300 to 150px and sometimes that not be perfect to element on your website. you can use specific width value like 250px and this value will never change by body width value change

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Sachin, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add descriptive text in the alt attribute of the image
  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • to make it look as close to the design as possible set width:20rem to container class
  • remove all margin from .container class because with flex they are superfluous
  • add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Overall you did well 😉

  Hope this help and happy coding!

  Marked as helpful

  0
• 

  Mathanraj T•60

  @mathanraj0601Posted over 2 years ago

  Hi sachin, 1, you can use Flexbox to center the card. 2, you can create a color overlay by placing the image in separate div with display none and when hover make display to block. hope its helps you:)

  Marked as helpful

  0

  ---

  

  Sachin Mulgir•110

  @SachinMulgirPosted over 2 years ago

  Thankyou for the feedback. @mathanraj0601

  1