nft-preview-card-component-main using HTML & CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Nour Wael, congratulations for your challenge solution!

  I'm looking your live site and everything seems fine, there's three points that you can consider to apply to your solution:

  1. Center the card components using flexbox. First you apply to the body display:flex; align-items:center ; justify-content: center ; height: 100vh; these properties will center the container and make the page display 100% of the viewport height. After that you apply flex also to the container in addition of flex-direction` to krep the elements flow column direction.

  2. Use max-width in the container to keep your element flexible in smaller screen like the mobile version. Use also rem over pixels for a better performance in multiple screens.

  3. Apply a proper box-shadow, the current shadow is too strong you need to play a little with rhe opacity. Truy a value like   box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1); or create your own box-shadow with an online tool like Box Shadow CSS Generator: https://html-css-js.com

  I hope it helps you, keep it up!

  Marked as helpful

  0