NFT Preview Card Component

if this your first time then you did it great but i have some comments on your project First: you can use body in css file second: if you want to make your main in center of page (https://blog.hubspot.com/website/center-div-css) visit this website to know all ways to center your main element Third: you have problem with position you can find all things about positions (https://www.w3schools.com/css/css_positioning.asp) fourth: you must learn about flex and grid

Before solving these challenges, you need to be familiar with both flexbox and grids. I suggest that you learn flexbox using Flexbox Froggy and then maybe use flex for centering stuff in your pages.

You can also learn about girds (the people behind Froggy have a grids tutorial, too), which are, in my opinion, essential to designing any webpage.

Hi Twoicedstone, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

• add main tag and wrap the card for Accessibility
• img element must have an alt attribute, it's very important!
• 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
• remove margin, position, left and top properties from main class
• try to use flexbox to the body for 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

Overall you did well 😉

Hope this help and happy coding!