NFT preview card component

Hello Evelyn, congratulations for your solution!

I've checked your code and the only reason thst your card is not responsive yet its because you've set width in the container, instead replace it with max-width to allow the container to be responsive.

Note that the difference between these two properties is that width is fixed, example, width: 320px is an container that doesn't get bigger or smaller than 320px but max-width: 320px have the maximum of 320px and can contract when the screen scales down and adjust its size.

Hope it helps, happy coding

Hey there, a pixel perfect solution, amazing work! Some suggestions:

• First of all, card already looks good for both desktop and mobile so you won't need responsive design for this specific challenge. You can remove min-width & max-width media queries and any styling inside them.
• In this case you'd need to center the card and you can do it easy with grid or flex:

body {
  ...
  display: grid;
  justify-content: center;
  align-items: center;
}

• For the best practice I'd suggest not giving height to parent elements unless you really need to. By limiting the container's height, if the content inside it changes it'll cause overflowing issues. It's safer approach to let the parent's height be defined by it's children by using margin,padding etc. You can replace it with padding-bottom to keep the design same:

.card {
  ...
  padding-bottom: 33px;
}

• For responsive design I'd suggest checking out Kevin Powell's channel. He's a CSS master and explains little details in an easy way. Great work again and happy coding :)

Hello Eyelin, congrats on finishing the challenge, its almost pixel perfect, good job!

Just a little suggestion, try centering your image using flex directly on your body, instead of adding position: absolute, you should always try to avoid using position absolute and transform to position your layout elements, if you want it to get working, remove all the position attributes and the transform from your .card class, and put your body like this:

body {
  background-color: hsl(217, 54%, 11%);
  color: #8bacd9;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

This will make your body center the component using flex, wich is 99% times better than using absolute values!

Hope my feedback helps you! try it by yourself and tell me how the results looks!

Hello Eyelin, congratulations for finishing this solution!

Great job here, it's completely identical

I just have a note about the box shadow, I think it should has more thickness

Have a good day and happy coding

Regards