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

Adham-16 30

@Adham-16

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


This is my Second task, I will be very happy for your helpful comments.

Community feedback

Don 380

@eldon6219

Posted

hello adham !

congrats on finishing your secound challenge here in frontend mentor where you will get better challenge after challenge :D

i like your solution and i think i can help you to update it and more helpful

  • HTML

1- instead of using <div class='container> try to use the HTML semantic elements more in this situation you should use <main> that should include all your codes and for better accessibility

-CSS

1- try to use the CSS reset look it up it will help to reset all the properties in the code

2- make sure to use min-height:100dvh so that the element get to the center of the page and using 'dvh' so that it's more responsive

3- NEVER EVER use width:300px as the px insead use rem or em to make it more responsive same with the padding and the margin

4- in box shadow we are trying to make it as realistic as possible so i think you should lower it a bit of something like this box-shadow:0 0 12px 24px rgba(0,0,0,0.15)

other than that you did a good job and keep going never quit you will get it eventually and you will become 1% better day after day i hope you find this helpful HAPPY CODING

Marked as helpful

0

Adham-16 30

@Adham-16

Posted

@eldon6219 Thank you, my friend, for this advice. It helped me a lot

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