Skip to content
Submitted over 2 years ago

A Simple NFT Card Component.

Afan Khan•70
@justmrkhan
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

  1. Do you think I used any outdated parts or layouts in this simple card component?

  2. Is there any other way/path I could have used to make this layout? Otherwise, any other practices I should have followed?

  3. As a developer, I believe my code must be clear to understand. Do you think it is complicated somewhere?

Community feedback

  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="container"> instead of <div class="container">.

    This should fix most of your accessibility issues

    • You should also use flexbox to center your container both horizontally and vertically.

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    Marked as helpful
    1
    Afan Khan•70
    @justmrkhanPosted over 2 years ago

    @Samadeen Hello, thank you for leaving a feedback. However, how can I center it with flexbox? I centered it horizontally with flexbox using justify-content because it has space to move horizontally.

    The container doesn't have space vertically unless I had some margin on the top and that is how I centered it.

    Also, if you can help me, I'd like to connect with you. Let me know how to fix this as I'm still learning flexbox.

    0

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