Submitted over 1 year ago

HTML CSS NFT preview responsive

Julia• 60

@juliavilbert

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, just changed some things (added <a>) but the hover icon at the main image isnt showing anymore

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year ago

Hello there 👋. Good job on completing the challenge !

The solution looks much better now, I just have a few small suggestions.

Use "./" before the file path of the image to display it.

‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎✅ Do: <img src="./images/image-equilibrium.jpg" alt="">.

‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎❌ Don't: <img src="/images/image-equilibrium.jpg" alt="">.

More information here.

You should wrap the image, title, and creator's name in an <a> tag, since an element has a :hover state and has a pointer cursor it is considered an interactive element (buttons, links, etc).

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

Julia• 60

@juliavilbert

Posted over 1 year ago

@MelvinAguilar Thank you I changed it and now it is working!

Bernard Rodrigues• 250

@bernard-rodrigues

Posted over 1 year ago

Hello, Julia!

Congratulations by your solution!

I'd like to give some feedback based on you Acessibility and HTML validation reports.

Acessibility Reports

Documents must have <title> element to aid in navigation: It is very important to use a <title> tag inside your <head> tag. The <title> tag will, as the name suggests, define a title for your website. This title will be showed in your website tab, in the browsers, besides its favicon.
Images must have alternate text: For acessibility reasons, it is very important to use the alt attribute in <img> tags. You can describe the image with this tag. This text will be showed to the users when the image URL were not available for some reason, and it will be read by readers, used by people with visual disabilities.

Example: <img src='logo.svg' alt='My website logo' />

HTML validation reports

It looks like your id's names aren't described as strings, between quotes (" or '). It is generating some HTML validation reports. Try to describe ids as follows:

<img id="id-name" src="image.png"  alt="image description" />

I hope it could help! Keep on with the good job!!

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord