Product Preview Card Component using HTML, CSS

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello JC, congratulations for your new solution!

  You've a great solution here, there are some minor details to fix, but the big part you've already done. Congrats.

  I've some tips for you:

  The heading and paragraph sizes are a little bit off and you can have all this sizes in the file style-guide.md. For example, the main heading is about 32px and the paragraph around 18px.

  To give it a better alignment you can see the code below, I add flex and min-height: 100vh to the body to give the body sizing and alignment and removed from card the margins.

  I add also the proper size for the card that is 900px see the changes below:

  body {
      min-height: 100vh;
      display: flex;
      background-color: var(--cream);
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  
  .card {
      background-color: var(--white);
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      /* margin-left: auto; */
      /* margin-right: auto; */
      max-width: 900px;
      height: fit-content;
  }
  
  

  👋 I hope this helps you and happy coding!

  11

  Marked as helpful