nft preview card cimpinent

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Nice well done. Just a few pointer

  • The proportion between card size and fonts size is way off. Either you make the card smaller or make the font size larger.
  • You forgot to add the hover effect on the image.
  • To place the card in the middle of the screen you could have used flexbox on the body, see below

  body {
    font-size: 62.5%;
    background: hsl(217, 54%, 11%);
    font-family: "Outfit", sans-serif;
    /* flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  .container {
    background: hsl(216, 50%, 16%);
    width: 40vmin;
    padding: 1rem;
    border-radius: 10px;
  /*   margin: 0 auto; */ /* you can remove all these commented out lines, it's not necessary, flexbox on the body does the work */
    /* border: 5px solid magenta; */
  /*   position: absolute; */
  /*   transform: translate(-50%, -50%); */
  /*   top: 50%; */
  /*   left: 50%; */
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  

  0