Skip to content
Submitted almost 3 years ago

Nft card component using CSS Flexbox

Juan David Prieto•50
@jdprietom03
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I am a beginner, do I need to improve something?

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello jdprietom03, Congratulation on completing your second project, your solution looks good. To get rid of the accessibility issues shown in your Report, I would suggest to:

    • Wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more

    • Add a one level heading <h1>, replace the div tag by <h1> <div class="card-title"> Equilibrium #3429 </div>

    • Don't over use the div tag.

    Hope this feedback helps, Happy coding.

    1
  • Dani Feelshot•370
    @FeelshotPosted almost 3 years ago

    Very good work. I would only recommend adjusting the size of the fonts to get a little closer to the final result of the exercise. Also do not forget to use the <h1> and <p> tags for the texts, as well as <figure> for the images. Another recommendation for the pseudo-class: hover would be to use transition: 0.5s; This will help you have a 0.5 second transition and make the animation more fluid. Keep it up, and much success in future jobs.

    1

Please log in to post a comment

Log in with GitHub

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