NFT Design

Hello there,

I think you did a great job with this challenge. I just have some notes that might find helpful:

• You need to increase spacing between elements a little bit as, right now, your elements are crushed into small space.

• Your solution lacks some features when it comes to accessibility. You should wrap the whole card in an article element as it seems like a standalone element (it gives meaning on its own).

• In a real-world application, the text "Equilibrium #3429" won't be your h1. Therefor, I suggest using an h2 or h3 for that.

• When presenting the price and the days left, you can use a dl element whereas hiding the terms using a .visually-hidden class, so that it makes sense for disabled users. It should be something like that:

  <dl>
    <dt class='visually-hidden'>Product price</dt>
    <dd>0.041ETH</dd>
    <dt class='visually-hidden'>days left</dt>
    <dd>3 days left</dd>
  </dl>
  

  You can find more about the dl element here. You can also read about the .visually-hidden class here

Hello @SheikBazith!

Your project looks great!

It's quite a challenge to add that hover effect with the image overlay properly. But 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!