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 using flexbox and grid

Filip 110

@fica25

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

Dan 300

@dtp27

Posted

Hi Filip!

Great solution overall! Make sure you style your horizontal line in the component. If you're using HTML to make a <hr> component, you can do something like this in the css:

hr {
    border: 1px solid hsl(215, 32%, 27%);
}

Also, pay attention to the font-weight property for the different elements to make sure they are similar to the design.

Happy coding!

Dan

Marked as helpful

0

Filip 110

@fica25

Posted

@dtp27 Hey man thanks for feedback. I saw this code on your github profile actually and you inspired me to look on project on different way(i think its the right way). I know about font-weight but I was hurrying and also i have only jpg format and sometimes i cant make it like the original one. Hope you are doing good. Your projects are very nice ,and clear code as well.

Filip

1
Dan 300

@dtp27

Posted

@fica25 Hey thanks I appreciate it! Glad to be of help.

0

@cristinakellyt

Posted

Hi, Filip! Congratulations on your solution!

I have a suggestion for you, instead of using <hr> in HTML to create the line above the image-avatar, you could use border-top property, this way it is possible to custom better the line to stay more similar to the challenge example!

And seems like you forgot to put the icon-view when the image is on hover.

Hope it helps!

1

Filip 110

@fica25

Posted

@cristinakellyt Hi Cristina, thanks for feedback. It was helpful. Hope you're doing good.

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