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

@BeshoyMaherr

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


Tell me how can i improve my self

Community feedback

IryDev 1,580

@IryDev

Posted

Hey, well done for completed this challenge😁

I have some suggestions to help you to improve your solution :

  • Put the main content of your website into the <main>tag in order to improve accessibility
  • Another alternative to center in your card :
  • Give the body a min-height of 100vh
  • Add the property , display: flex; justify-content: center; align-items: center; to make the card center on the vertical axis and horizontal axis

HTML :

<body>
      <main>
            The main content of your website
      </main>
</body>

CSS :

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

I hope you'll find this helpful, and your solution is really good 😄

Marked as helpful

0

@BeshoyMaherr

Posted

@IryCode Thanks a lot, I appreciate that

0
IryDev 1,580

@IryDev

Posted

@BeshoyMaherr You're welcome 😄

0

@SoulOfMo

Posted

Nice work man. You can set the height of the body to 100vh to stop it from overflowing. Also you can use the main tag instead of <div class="parent">. Your site is responsive which is very good.

0

@BeshoyMaherr

Posted

Thanks @SoulOfMo

0

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