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

Animated card

@Wlmserick

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


I am excited with the creation I did. I however did struggle with the placement of the nft creators name and clock icon. They seem off to me, any help would be appreciated.

Community feedback

@MaximilianoDanielGarcia

Posted

Hi Erick! Good job!

I've have visited your live site and here some suggestions:

  • Center the card. For this, you can use either Flex Box or CSS Grid.

With CSS Grid

body {
    display: grid;
    place-items: center;
    height: 100vh;
}

With Flex Box

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
  • Add padding on card
  • Delete margin-top on main image and change the hover effect
  • For your .creator only delete the margin-right: 15px and that it's.

Let me know if these was helpful.

Marked as helpful

0

@Wlmserick

Posted

@MaximilianoDanielGarcia thank you very much for your help. I appreciate it.I'll make the necessary changes now

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