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

Responsive page with css and html.

@ssantos-lucas

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


Hello everyone, i have two questions. I hope someone can help me with them.

  1. I couldn't put the "eye" icon when hovering in the cube image.
  2. align-items: center didn't worked in the name section even though it worked in the price and date section and it's basically the same code.

Community feedback

Atif Iqbal 3,200

@atif-dev

Posted

Hi Lucas Santos, congrats🎉 on completing the challenge.

  • You can learn image overlay from here or check out code of this solution
  • For proper centering the container(whole card) vertically and horizontally you can use code as:
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

Or you can learn centering from here.

Hope you will find this Feedback Helpful.

Marked as helpful

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