Order Summary card using HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello @Kashyxp-patel!

  Your project looks great!

  If your trying to reduce code lines, I have a suggestion that may interest you:

  • Since you set display:flex; to the div.container, you can use the property gap to separate the items instead of using margins.

  You can use gap on a flex container to create an equally sized space between elements inside of it.

  • Like this:

  .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      >> gap: 10px; <<
      padding: 1.25rem;
  }
  

  • Also, you can replace your div.card with a main.card tag. It won't change anything visually, but it makes your HTML more semantic.

  I hope it helps!

  Other than that, great job!

  0