State Preview Card Component

Community feedback

• 

  Suraj Mourya•170

  @mouryasurajPosted over 2 years ago

  Okay!! Thanks.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Suraj Mourya, congratulations for your new solution!

  I saw your preview site and I've some tips for you, for example, you can remove the background-color from the container and insert it to the body, give the container the right size thats max-width: 1110px, and the alignment with flexbox

  See the changes I did for your code here:

  body {
      background-color: hsl(233, 47%, 7%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .main-card {
      /* background-color: hsl(233, 47%, 7%); */
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      /* width: 100vw; */
      height: 100vh;
      max-width: 1110px;
  }
  
  .card {
      display: flex;
      /* max-width: 1110px; */
  }
  
  

  For the color purple overlay use mix-blend-mode: multiply

  👋 I hope this helps you and happy coding!

  0