NFT preview card component

Hello Reza Jaber, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

To improve the responsiveness of the project, we can do this:

.container {
    max-width: 350px;
    height: auto;
}
.image {
    width: 100%;
    height: auto;
}

The remainder is excellent.

I hope it's useful. 👍

Hey Reza :) , you realy did a great job keep going if you want to creat this blue color when you hover over <div class="equilibrium"> <div class="hover-effect"><img src="images/icon-view.svg" alt=""></div> </div> this is the html for it and then make you'r picture a background picture for equilibrium div for you'r hover effect div use background-color: rgba(0, 255, 247, 0.441) ; opacity: 0; the last trick you write this line .hover-effect:hover{ opacity: 1; }

Hello @rezajaber. First of all, congratulations on finishing this challenge!

Here are some few suggestion I can give:

1. For the hover effect you can add an additional overlay in front of the image and change the opacity during hover. I use a <div> containing the eye icon for the overlay. You can see how I implement the styles here in the /* Hover Effect */ section
2. The index.html structure is clean. The card content could be wrap in an <article> tag to create a cleaner structure but the current structure is already good.
3. The layout is good. Although I prefer using flexbox for 1 dimension layout, grid is also a good solution.
4. There are no 'unusual sightings' in your code. At least in the index.html and styles.css file so it's fine in my opinion.

I hope it's helpful and happy coding!