Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview card component

adilido99β€’ 90

@adilido99

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


all feedbacks are welcome !

Community feedback

Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

-> Don't use "p tag" inside the "span tag" instead use the "div tag" [span is a inline element ]

Keep up the good work!

Marked as helpful

1
Rio Cantreβ€’ 9,710

@RioCantre

Posted

Hello there! Nice work with this challenge. Viewing your solution, you did well on implementing the hover state of the Hero image. I think you should considered the following as well...

  • Add hover state for the font in the header with color: hsl(178, 100%, 50%); and cursor: pointer;
  • Remove the inline style inside the span and create a new rule set of .card-footer span, add color:white and hover state with color: hsl(178, 100%, 50%); and cursor: pointer;
  • Import the attribution style in the CSS folder and remove style tag
  • Add description to alt in the img, don't leave it blank

Hope this helps and Keep up the good work!

Marked as helpful

0

adilido99β€’ 90

@adilido99

Posted

@RioCantre thank you so much for your help, next time i work with all of this tips, hope you like my work

1

Please log in to post a comment

Log in with GitHub
Discord logo

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