Nft Preview Card solution

Hi Tanguy,

Congratulation on completing another frontend mentor challenge. I have some suggestions regarding your solution, if you don't mind:

• Page should contain <h1>. In this challenge, you may use<h1> visually hidden with class=”sr-only”. You can find it here

• For any decorative svgs, each svg tag should have aria-hidden="true" and focusable=”false” attributes to make all web assistive technologies such as screen reader ignore those svgs

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

• 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. You can read more in mdn

• 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.

• The icon view svg does not really need to be in the HTML. You can use CSS for it.

• line-height: 1.6rem;Use a unitless line-height value to Avoid unexpected results. You can read more in mdn

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

Overall, Excellent work! Hopefully this feedback helps.