nftshowcase landing page

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  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!

  1
• 

  Abdelrhman Kamal•450

  @AbdelrhmanX7Posted over 2 years ago

  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)

  1