NFT Preview Card

Hi, @Hyuuga81 ~

Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

Here are some of the tips I like to provide.

1. I hope you to add transition effects on hoverable elements like image, heading and creator name.
2. Some font-sizes, spacings and alignments aren't the same with the design. As a frontend developer we need to be pixel-perfect and responsiveness.

https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

Cheers ~

hello Hyuuga81 , I have some suggestion:

• For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. And alt in the avatar img shouldn't be empty . read more about alt for informative or decorative images..

• Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image and Equilibrium #3429 , Jules Wyvern.(in this challenge is an anchor tag <a>) .

• The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

• It's best not to leave some code commented .

• You can use unordered list <ul> to wrap <div class="countdown">and in each list item would have <img > and <p>.

Hopefully this feedback helps.

Hi Jay,

To get the container to turn blue on hover, I wrapped the image in a container and set the background color to blue

background: #00fff8;

Then I targeted the image inside the container itself with the following...

  mix-blend-mode: normal;
  opacity: 0.5;
  border-radius: 8px;
  transition: linear 0.25s;
}

The transition isn't necessary, but it looks cool so I used it!

Great job completing this challenge!