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

archis 260

@archisvaze

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


Learned a lot about Hover states in CSS and using flexbox!

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Archis with respect to the design and effects you have been perfect.

I will give you recommendations on how to improve your presentation in a more professional way.

For example, to the links and buttons you can add the attribute transition: all 400ms; this will make them go from their natural state to :hover, :active, :focus, etc. I realize it by means of a transition giving a smoothing that is quite aesthetic. Use it for the NFT name, the user and the overlay.

On the subject of accessibility I think you already corrected the errors but if or if you change <h4 class="title">Equilibrium #3429</h4> by <h1 class="title">Equilibrium #3429</h1> since you should always have at least one per project.

By the way, do not try to use only <div> for text there are tags like <span>, <strong>, <p>, <em> tags that serve this purpose as well.

Try those changes and generate a new report to see if all the errors are eliminated.

I hope my comments are helpful.

Marked as helpful

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