NFT card component using HTML, CSS and JavaScript

Hello Kristina, well done on this challenge 👏 I see you've written extremely clean code, thumbs up 👍

• about solution itself, as you said yourself, you don't need JS for hover stats, all you need is :

.card__image--container:hover .card__image--backdrop,
.card__image--container:hover .card__image--icon {
  display: block;
}

in your css and you'll achieve same functionality without any javascript.

• here there is another issue I found, you've used width: 35rem; and height: 59.6rem; on your card, so when device's width gets smaller your layout will break, it is not recommended to use static size for your elements and you must let the content specify the size, so what you can do is :

.card {
  width: 100%;
  max-width: 35rem;
  // rest of the code ...
}

.card__image {
  display: block;
  position: relative;
  /* let the content specify width */
  max-width: 100%;
  border-radius: 0.8rem;
}

and some padding on the body, will make sure that your layout won't break on small screens.

• use PRETTIER extension on your code editor to format your code.

• side issue about github 😄 : don't jam all your solutions on one branch, create separate branch for each solution, and as you are already using netlify for deployment, you can easily deploy each branch automatically using netlify, this way if you mess up one of your project, your whole repo won't go bananas and you can easily delete the corrupted branch.

I also opened a pull request to your repo which will fix the solution issues I mentioned, keep coding

Hi Kristina, great job! Congratulations on completing the challenge.

JavaScript in this case is not needed :) You can solve adding 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

Overall you did well :)

Hope this help and happy coding!

Nicely done. Keep it up

Hay ! Kristina225 Good Job on challenge