NFT PREVIEW CARD COMPONENT

Hey @wisdompython , good job on completing this challenge!

I had a look at your final solution and I have a few suggestions that I hope will be useful to you:

• Don't use a fixed height on your card element, especially not with an absolute unit such as px. Your layout should be built around the available content.

• Set min-height: 100vh on your body element if you want to center vertically and horizontally everything inside it.

• Wrap your card inside a <main></main> element to remove some of the errors from your report

• Add the alt attribute to your img element - if the img is just for decorative purposes, then you can simply write alt=""

• The 2 text hover effects and the image overlay hover effect are missing from your solution. Consider implementing them using the :hover pseudo-class https://www.w3schools.com/cssref/sel_hover.asp

• You don't need an hr to create that line. You can set a border-top property on your footer and then also add a padding-top to push the line away from the content

Hope my suggestions will be useful to you. Keep up the good work!

👋 Hello Wisdom , Your solution is nice & I liked it . However I have some suggestions that might make this solution even nicer :

• body should have min-height : 100vh; so that the card is in the center of screen
• using px values as border-radius can make the card a perfect rounded corner rectangle
• removing border-style:solid; in card-body make it look better
• you can play with the box shadow values of card-body to produce a nicer shadow

box-shadow: 0px 0px 10px hsl(217deg 78% 5%), 0px 10px 10px hsl(216deg 50% 16%), 0px 20px 20px hsl(217deg 78% 5%), 0px 0px 10px hsl(220deg 55% 22%);

Other than those your solution is good enough , Please keep up with this good work 👍

Hey @wisdompython! Great job! Keep coding! Improve your web developer skills. What about h1:hover {color: anothercolor;} ? Please see design files of your challange. Wish you happy coding!