NFT PREVIEW CARD COMPONENT

Community feedback

• 

  Remus D. Buhaianu•3,125

  @remusbuhaianu

  Posted over 3 years ago

  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!

  10

  Marked as helpful
• 

  Abhik•4,820

  @abhik-b

  Posted over 3 years ago

  👋 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 👍

  01

  Marked as helpful
• 

  PerfectPixl•20

  @PerfectPixl

  Posted over 3 years ago

  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!

  21