NFT Card with Flexbox

Hello 👋Jackcheal Dang, congratulations on completing this challenge 🎉

I have some suggestions you might find interesting.

1 Remove the <div class= "attribution"> from the main and change it to <footer class="attribution"> And wrap it's text inside a p element. This improves accessibility and SEO since it is much more semantic.

2 About your questions regarding css best practices.

a) You used width: 310px; On the .card This is okay but in case a screen is less than 310px wide then the card overflows the view port. You can make it more responsive by using max-width:min(90%,310px) This means it is 310px but on smaller screens it only covers 90% of the width.

b) In order center your card on any screen,add

min-height:100vh;

To the css for body and then remove the margin properties from .card.

You can learn some best practices from this site https://fedmentor.dev/

I hope this helps 🙃

Your solution is awesome 👏

Happy coding bro✌️

Hello @jackchealdang!

Your project looks great!

It's quite a challenge to add that hover effect properly. Here's how you can do it:

HTML

<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic">
  <div class="icon">
    <img src="images/icon-view.svg" alt="icon-view" class="icon-view">
  </div>

CSS

.pic {
   width: 300px;
   background: url('images/icon-view.svg') center center no-repeat;
   background-color: $Cyan-hover;
   background-size: cover;
   margin: auto;
   border-radius: 10px;
}
.icon {
   display: grid;
   justify-content: center;
   align-items: center;
   position: absolute;
   opacity: 0;
   background-color: $Cyan-hover;
   width: 300px;
   height: 300px;
   border-radius: 10px;
}
icon:hover {
   opacity: .5;
   cursor: pointer;
}

Just don't forget to change the class names to match yours.

I hope it helps!

Other than that, you did an excelent job!