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

Thomas B 160

@TomBirbeck

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

Mirjax2000 680

@Mirjax2000

Posted

Hi i checked your code. in css you have declaration *{ box-sizing:border-box; font-family:<code>; padding:0; margin:0 } that means for every element on the page, for img,for input,for forms, for ul, for lists ... that is lot of work for browser and it takes some calculations for browser to mark every element and give them this atributes. It slows browser down. if you are using *{box-sizing:border-box} you have to advanced that statement for pseudo elements as well.

  • ::after,* ::before {box-sizing:border-box}

that white icon-clock.svg should be on the top of everything. You can use here pseudoelements or html elements but they have to position absolute and sort them with z-index values.

rest is good by me, but you are reliaing to static values too much, everything has fix width and height. In responzive time try to use more percentage and limit it with max or min values, keep rest on the browser itself.

thank you, keep up good work.

Marked as helpful

0

Thomas B 160

@TomBirbeck

Posted

@Mirjax2000 Thank you for the feedback, I will definitely have to look into things like psuedoelements and alternative ways of sizing.

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