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

P
Shane Pinderβ€’ 190

@ShanePinderDev

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


Here's my solution using CSS Flexbox as well as absolute position to position the icon-view svg in the active state.

Please let me have any suggestions you have for improving my code.

Community feedback

Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

Hello Shane Pinder ! Congo πŸ‘ on completing this challenge

Just one thing:

  • Consider using h2-h6 elements to add identifying headings to all sections.

happy CodingπŸ˜€

Marked as helpful

0

P
Shane Pinderβ€’ 190

@ShanePinderDev

Posted

@Crazimonk Thanks for the feedback!

1

@msuryaditriputraR

Posted

Hi There πŸ‘‹

I wanna congrats you for success to finish this challenge πŸ˜ŽπŸŽ‰

but I have some feedback for your codes βš’

  1. I think you don't need to use sections tag, use div instead.
  2. Use box-shadow for adding shadow on your card, not border.

I hope this helps and can improve your code πŸ™Œ

Happy Coding β˜• Danbo

Marked as helpful

0

P
Shane Pinderβ€’ 190

@ShanePinderDev

Posted

@msuryaditriputraR Thanks very much for your feedback!

0
Shashree Samuelβ€’ 9,260

@shashreesamuel

Posted

Hey ShanePinderDev, good job for completing this challenge. Keep up the good work.

Your solution looks great, however the height of the card is supposed to be a bit bigger to match the design.

In terms of the validation errors simply wrap all your content within <main> tags to get rid of validation errors.

I hope this helps

Cheers, Happy coding πŸ‘

0

P
Shane Pinderβ€’ 190

@ShanePinderDev

Posted

@TheCoderGuru Thanks for the feedback!

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