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

ilyasazer 100

@ilyasazer

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


Hello, Frontend Mentor community. This is my solution to NFT preview card component challenge.

Happy to hear feedback and advice!

Community feedback

Jo 110

@joana-trots

Posted

Good work! I see you’re having trouble centering <main> element, try to add Flex Box properties for body { height: 100vh; display: flex; justify-content: center; margin: 0; padding: 0; }, so for <main> block you don’t have to use margin-top property, and it’s beautifully centered!👌 You can also use Flex Box properties to place elements inside 'container' block (without using position: absolute). You can learn about flexboxes here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or anywhere else 😊 Hope it was helpful! 🤘

Marked as helpful

0

ilyasazer 100

@ilyasazer

Posted

@joana-trots thanks for your help, and i will work on it 😊

0

@saifion33

Posted

Hi ilyasazer.

You overall design is great .There is only one accessibility issue you should use atleast a level one heading

so use <h1> tag instead of <p> tag.

<h1 class="p1">Equilibrium #3429</h1>

Happy coding.

Marked as helpful

0

ilyasazer 100

@ilyasazer

Posted

@saifion33 Thanks for your advice, I will work on it 😊

1

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