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

yanyan_alienβ€’ 170

@yanyan-alien

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


Hi i would like to get feedback on this code, thank you!

Community feedback

Aakash Vermaβ€’ 6,690

@skyv26

Posted

Hi! Yanyan, I just checked you work and I would say your did it good, even you also added hover effects and all. Here are some suggestion to make your work more better.

  1. Your Etherium price and time left strings are bigger than required give your font-size 0.75rem; to make little bit smaller.

  2. After resolving above issue, you will see your icons are not aligned with your text and I found reason why you haven't set your font-size to that much, because you used the icon as a background image, It is ok that you completed this task but approach like this will not make you consistent in long run. So instead of using background-image, use img tag in your card to place those icons and with the help of flexbox, you can easily align your card.

  3. Use transform: translate(0, 25%); to make your card align to center horizontally.

I hope you understand, above suggestions/tip might be helpful to you.

Best Of Luck

0
Anosha Ahmedβ€’ 9,300

@anoshaahmed

Posted

To avoid accessibility issues in the future:

  • wrap everything in your body in <main>
  • start your headings with h1 and move up by one level each time
  • use CSS for styling

Good job! You can adding margin on the top to move the card down or use flex:)

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