nftshowcase landing page

Hi Nischhal, great work on this challenge! 😉

Here are a few tips for improve your code:

• 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
• after, add transition on the element with hover effect
• add main tag and wrap the card for improve the Accessibility
• use div element not article tag because article tag have a semantic meaning
• remove all margin from container class because with flex they are superfluous
• add justify-content: center flexbox property to the body to center the card horizontally
• instead of using px or % use relative units of measurement like rem -> read here

Overall you did well 😁

Hope this help and happy coding!

hi Nischhal Bohara if you want to make an overlay effect (eye preview) first make a div in article after this make article position: relative; and in div you make position: absolute and make width: 32rem; height: 93%; top: 0px; margin: 15px 10px 5px 15px; background: aqua; z-index: -1; border-radius: 2%; after add this make hover on article and change z-index of div make it z-index: 2 article:hover div{ z-index: 2; }

to understand what just happened see this article to get better understand of positions (https://www.w3schools.com/css/css_positioning.asp)

and you must to know what is Selectors in css and how to use it you will find all things you need in this article (https://www.w3schools.com/cssref/css_selectors.asp)