Skip to content
Submitted over 3 years ago

Flexbox, CSS variables

James Murphy•200
@jamgorilla
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was a great exercise. I don't have any specific questions but any feedback on layout would be appreciated. Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hay ! James Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Learn more on accessibility issues

    Keep up the good work!

    Marked as helpful
  • Rio Cantre•9,650
    @RioCantre

    Hello there! Nice work in completing this project. Viewing at your solution, I would suggest the following for you...

    • The open tag for the body is missing. Add it after the <div class="card-container">
    • Clean the whistespaces in the code
    • Wrap the content of card-container with specific tag like main and attribution with footer tag. Remove attribution if unused. Read more about HTML structures in Semantics
    • Add cursor:pointer for the hover state of the design
    • Modify the margin in #image-avatar with margin-right: 1rem;. Adjust the borders into border: 1px solid white; and border-radius: 50%;
    • Add padding: 1rem 0; in the .bottom_line_container rule set
    • Adjust the font size in .detail-row-container and h4 with font-size: 16px;. font-size: 22px; in h3

    Hope this helps and Keep up the good work!Cheers!

    Marked as helpful

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