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 PAGE

#accessibility#cube-css

@RAY-DEV67

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


WOULD APPRECIATE CORRECTIONS ON THIS SOLUTION IF ANY

Community feedback

Wendy 1,670

@wendyhamel

Posted

Hi, Good job on completing this challenge.

Some improvement for the design:

  • The header has a bolder font in the design than in your solution.
  • The ethereum and clock image should be horizontally aligned to center.
  • It is also better to only wrap text in a <p> tag. U can use the <div> tag instead and keep the text in a <p> or <span>.
  • The box shadow is a bit to black. You can add your own color and adjust the alpha channel. For example: `rgba(0, 0, 0, 0.4) is black but opaque.

I don't see the active states from the design. Did you leave them out on purpose?

Happy Coding!

0

@nurularifin83

Posted

For warning Images must have alternate text here my solution:

  • Do not forget tu put alt for every img, For example like this <img src="images/icon-clock.svg" alt="Icon clock">.

Here the solution for the warning Document should have one main landmark <html lang="en"> :

  • Put this code <main></main> below <body>, then between <main></main> put your div code.
0

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