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

Dβ€’ 30

@Noc662

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@garcialexco

Posted

Hello! Great job completing the challenge! πŸ”₯

There's a couple parts of your code that I might be able to help with:

  • You can center your main by:
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  • Also, make sure to use semantic HTML wherever possible and use div sparingly. For example, you can avoid using <div class="card"> and just put a class on main like: `<main class="main">'

Hope this helps, and keep up the great work! πŸ‘ Happy Coding!

Marked as helpful

1
Hassia Issahβ€’ 50,810

@Hassiai

Posted

Replace the <h2> with <h1> and add the alt attribute alt=" " to the img tag contain the icon view to fix the error and accessibility.

Remove the padding value in the body, its not needed. Check the width and height values of .hover because its not covering the entire width and height of the image

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

1

Dβ€’ 30

@Noc662

Posted

@Hassiai Thanks for the feedback. For some reason my .hover is transferring over to the mobile version. I am still trying to understand the whole responsive aspect of coding in css.

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