NFT Preview Card using HTML and CSS

Hi, Taylor! 👋

You should create the active state styling based on the design. I recommend giving it a try to practice your CSS skill.

You should wrap the Equilibrium image with an anchor tag. It has interactivity so it should be wrapped by an interactive element.

Swap the <h4 class="title"> with <h1>. Heading should start from <h1>.

The Ethereum and clock icons are decorative images. You should leave the alternative text empty.

For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

Alternative text for the avatar should be the name of the creator, "Jules Wyvern".

Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.

Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell

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. Learn more — Why you should never use px to set font-size in CSS

I hope you find this useful. Have fun coding! 😄

Hey there,

Congrats on completing the challenge successfully! Your solution and design implementation looks great overall.

I noticed hover state for the image is missing. You can do it by adding an overlay container that contains the eye icon in the centre of it and set the overlay to opacity: 0 by default. When hover, the opacity can be set to 1.

Hope this was helpful!

Hello there 👋. Good job on completing the challenge !

Here are some suggestions regarding your code that may be of interest to you.

HTML 🏷️:

To clear the Accessibility report:

• Images should have alternate text.

• Wrap the page's whole main content in the <main> tag.

• Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

• Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections.

• Use ARIA landmarks such as <header role="banner"> and <footer role="contentinfo"> to provide additional information about the purpose of each section to assistive technologies.

Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.

I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!