NFT Preview Card made with HTML and CSS only

Hi, André! 👋

Here are some suggestions for improvements.

• Wrap the Equilibrium image with an anchor tag. Then, add a hover effect on the anchor tag. The image should have a hover effect (see the active states design image).
• <img> must have alt attribute. If it is a decorative image, you should leave the alternative text empty (alt="").
• Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (<img>) so the screen reader will pronounce it as an image.
• The better alternative text for the avatar is "Jules Wyvern" (the name of the person) without "avatar icon of".
• Use flexbox or grid to place the card in the center of the page. These modern techniques are more robust than absolute positioning and have less code to write.
• Remove height: 420px; from the main styling. Usually, it is best to not specify a height to an element. Let the content controls the height of it.
• Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

I hope my feedback helps. 🙂

Hi @@zeppelisama,

Nice implementation! However, I feel you might need a better file structure for better file management. e.g saving all your styling in a CSS folder and all images in a img folder or something like that.

On the code, I see you are trying to use the transform property to centre the card on the page, but I think using flexbox will do a better job.