NFT preview card component

Hello everything is fine? You did a good job on this project, but I have some tips on how to further improve the responsiveness of this project:

1- I noticed that you used a fixed measurement unit to adapt the layout on small screens, prefer to use relative measurement units, as they automatically adapt to any screen size:

I made some changes:

@media (max-width: 390px) { body { padding: 0 10px; } .container { width: 100%; } .icons { flex-wrap: wrap; } }

The rest is great! Hope it helps... 👍

Hi Amit Kumar,

Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:

HTML

• The most important part in this challenge interactive elements. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ..) for this imagine what would happen when you click on the image, there are two possible ways: 1: If clicking the image would show a popup where the user can see the full NFT, here you use <button>. 2:If clicking the image would navigate the user to another page to see the NFT, here you can use <a>.

For the same reason, you can use <a> to wrap Equilibrium #3429 .

• The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

• For any decorative images, each img tag should have empty alt="" and add aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in ( icon-ethereum, icon-clock ).

• Profile images like that avatar are valuable content. The alternate text of the avatar’s image should not be ** avatar**. You can use the creator's name Jules Wyvern. Read more how to write an alt text

• look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

• If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the <hr>, you can use border-top: to the avatar's part.

• There are so many ways to do the hover effect on the image, The one I would use is pseudo elements::before, ::after. You can use pseudo-elements to change the teal background color to hsla. Then the opacity can be changed from 0 to 1 on the pseudo element on the hover. Also using pseudo elements makes your HTML more cleaner as there's no need for extra clutter in the HTML.

• Add display: block to the image, as there's a little gap under it.

• Remember a css reset on every project that make all browsers display elements the same.

hopefully this feedback helps.