Skip to content
Submitted over 2 years ago

NFT Preview Card Component

Hafeez Abdallah•90
@elfreeze
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'll appreciate any feedback most especially on accessibility and responsiveness.

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Good job Hafeez! Just to follow on what the other said, you actually are really close to centering the card since you already got flexbox on your body element; all you need to do is a height property. To do that, I suggest min-height instead, so try adding min-height: 100vh; and also decreasing some of the bottom padding on the footer, and see whether that helps to center your card.

    Once again, well done and keep coding!

    Marked as helpful
    1
  • Rafi Mahmud Rizvi•130
    @RafiiMahmudRiizviiPosted over 2 years ago

    Hi hafeez, almost perfect. you just need to increase the border-radius and center the card. Thank you.

    Marked as helpful
    1
    Hafeez Abdallah•90
    @elfreezePosted over 2 years ago

    @RafiiMahmudRiizvii Thanks for the feedback, Rafi! I've gone through my code and made corrections based on your suggestions. Please help me review the work again. I'll really appreciate it.

    Thanks once again.

    0
  • Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    To fix your accessibility issues, try to always wrap your whole content in a <main></main> or when you use a div, try to add a main role

    <body>
  <div role="main">
    ...
  </div>
</body>
    Marked as helpful
    1
    Hafeez Abdallah•90
    @elfreezePosted over 2 years ago

    @Femi-Bright Hi Bright, I've implemented your suggestion. Please do have a look at the work again.

    Thanks for your help.

    0
    Bright Adigwe•190
    @Femi-BrightPosted over 2 years ago

    @elfreeze It seems it worked as the solution does not have any accessibility issues. Nice one Hafeez, keep it up 👏

    0
  • Divine Obeten•2,415
    @Deevyn9Posted over 2 years ago

    Hi Hafeez, great solution, try centering the main containers.

    Happy coding 🎈

    Marked as helpful
    1
    Hafeez Abdallah•90
    @elfreezePosted over 2 years ago

    @Deevyn9 Hi Divine, I've done that. Thanks!

    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