NFT preview card component challenge hub

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Ganesh,

  You've got all the elements there but I think your design does need some work!

  • This box-shadow generator might help get a closer match to the design
  • It doesn't look like you've used Flexbox or CSS Grid two modern ways to create responsive designs, I'd really encourage you to research them as they'll make responsive design a lot easier:

  Here are some really useful resources:

  • A Complete Guide to Flexbox - css tricks
  • Learn Flexbox for free - Scrimba
  • A Complete Guide to Grid - css tricks
  • Responsive Web Design - freeCodeCamp

  Good work and keep coding!

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @Ganesh-Rathor ~

  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.

  1. About hovering image, you can add overlay element and position it using position:absolute, after that use opacity for showing on and off.
  2. You can use media query for responsiveness - means on smaller devices.
  3. Try display: flex for aligning items inside card.

  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 ~

  0