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, basic css and html

Paweł 1,030

@Pawel-Gnat

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


Hardest part was placing svg eye icon inside image div and make proper bg-color with hover. It took me 2 hours to get it. I find hard positioning divs inside other ones. I think I still need more practice doing it.

Community feedback

Mebo David 130

@meistens

Posted

Hey there, Not bad with the design, though to be honest, your code was kinda hard to read. Here's some tips though

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: hsl(217, 54%, 11%);
}

Once you got the body sorted out, apply these to your container and fiddle about with the height and width values as you fit.

.container{
  background: hsl(216, 50%, 16%);
  width: 15rem;
  height: auto;
  border-radius:1rem  ;
}

For centering the eye icon and the background color, use the ::before and ::after pseudo elements, should make things easier for you

1

Paweł 1,030

@Pawel-Gnat

Posted

@meistens Wow, your comment really means a lot for me. Thanks, you are so helpful! I was looking for this kind of answers :)

0
Mebo David 130

@meistens

Posted

@Pawel-Gnat glad I could help

0

@naif-sameer

Posted

Amazing Job 👍

1

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