NFT-card solution using flexbox

Hello!

According to your questions:

1. For bg shadow you use box-shadow property box-shadow
2. Resizing elements for smaller screens can be done in a flexible way e.g. with clamp() function. You can resize containers, as well as fonts. clamp method You can also use media-queries to switch between different screen sizes media queries

Other things:

• it's good to use semantic elements like <header> <main> <footer> in your html semantic elements

• it's better to use rem units than px in CSS => rem units

• you missed hover effects in your solution, use pseudo-classes for it pseudo-classes

• don't use fixed dimensions like you did for margin-top in .box selector, because it doesn't look good for smaller screens, use flexbox instead and place the element in the center of the screen. guide to flexbox

Keep good work and good luck with the next challenges!

Hi Hardik, great work on this challenge! 😉

Here are a few tips for improve your code:

• add main tag and wrap the card for improve the Accessibility
• You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
• using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
• remove all margin from box class
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• instead of using px use relative units of measurement like rem -> read here
• you can add background shadow using shadows css property

Overall you did well 😁 Hope this help!