Responsive NFT Preview Card Component

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted about 2 years ago

  Hi Prince Adimado, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  • to improve the design of the page, you can do this:

  body {
      background-color: hsl(217, 54%, 11%);
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0
• 

  Mordekai•270

  @inlumioPosted about 2 years ago

  Hello, Friend)

  Nice work!!!!

  Try to add min-height: 100vh for body tag, so page will cover at least full height of your device

  About hover effect for image. Try to wrap image with some sort of container and add sibling div for image, which will be the overlay for image. Make it position: absolute (don't forget to add position: relative for the image container. And finally, make it transparent by default(opacity: 0) and opaque on hover (opacity: 100).

  If I don't explain it clearly, You can check my solution

  Hope, this will help You.

  Good luck, buddy-coder😉

  Marked as helpful

  0