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

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!