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 card preview using HTML and CSS

@ClaudiuSonica

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


Any feedback or tips to improve my HTML and CSS are welcomed

Community feedback

@dimar-hanung

Posted

Hello! 🖐️ Well done on completing the challenge

I have some interest and feedback with your code

That i like:

  1. I appreciate the similarity of your results with the design, a bit different in font color and shadow but still good
  2. html is pretty good, not too nested 👍
  3. Responsive until galaxy fold screen size 👌
  4. CSS Naming is also good, represent what is it for, like <div class="details"> for details section

My Feedback:

  • I suggest you use html semantic convention, for example <div class="container__ext"> to <main class="container__ext">, it will make it clearer, and will improve seo if you want to submit your website to google, but you place h1 and p correctly 👌, i recomended this article: here
  • You can set font color #8BACD9 for class : .text .second__p .third__p
  • Shadow is too bold, you can use this to make it more smooth box-shadow: 0 25px 50px #00000018

anyways overall is good, nice solution, hope it's helpful 🙌

Marked as helpful

0

@ClaudiuSonica

Posted

@dimar-hanung thank you for the feedback, to be honest i forgot about the other phone types and made it for 375px and 700px+ and the shadow personally i liked better that way lol :)). But thanks for the heads up

0

@dimar-hanung

Posted

@ClaudiuSonica

you're welcome!, yes no problem, everyone has different preferences

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