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

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


I was not able to reduce the image of the eye (view) when passing. I would like your opinion and feedback. Thanks.

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hello Thiago Barboza Dos Santos, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

native HTML5 reference elements:

<body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

The remainder is excellent.

I hope it's useful. 👍

Marked as helpful

0

@thgsnake

Posted

@AdrianoEscarabote Thanks a lot for the excellent tips. I really liked the px->rem extension.

1

@dubervelez

Posted

Hi, great job!

I recommend you assign the styles to the images through a class, because you are assigning the same width to the two images through the img tag. You can assign a class to the image that you use in the hover and modify its dimensions, since in this case both are having a width of 250px and that is why it looks so big.

Marked as helpful

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