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

Responsive NFT Previev Card Component

@Latth

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


Shadowing was kinda hard but i still tried some shadow.

Community feedback

P
David Turner 4,110

@brodiewebdt

Posted

Everything looks good on this. Just like the design. Change the Equilibrium text to an H1. Every page should have an H1 for accessibility reasons. You may not have to re-style it because you used a class name. The box shadow is a little heavy. In the Figma file the box shadow is this:

box-shadow: 0 25px 50px hsla(0, 0%, 0%, .1);

Hope this helps.

Marked as helpful

1
P

@Miculino

Posted

Good job on completing the challenge, @Latth!

Your solution came out looking nice. Just a few suggestions:

  • Try separating your CSS into another file. For this project, it might not be that big of an issue since it's only a component, but you'll need a solid folder/file structure for bigger projects

  • Look into BEM methodology for leveling up your HTML game

  • A best practice is to use *, *::before, *::after for a global reset on margin and padding to 0 and set box-sizing: border-box

  • Use relative units such as rem / em instead of px

Overall, you've done a great job!

0

@Latth

Posted

@Remus432 Thank you, i am usually using rem but it was my first challange i was kinda confused. Others will be better. Also yeah about CSS i wanted to do like that but i thought it is wrong to create a new file. Others will be better.

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