Responsive order summary component Using HTML, CSS

Community feedback

• 

  Lucas 👾•104,200

  @correlucasPosted over 2 years ago

  👾Hi Raihan Noor, congrats on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  Your background is applied but its not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.

  body {
      font-family: "Red Hat Display", sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--pale-blue);
      background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-size: contain;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Raihan Noor Hasan•110

  @raihannoorhasanPosted over 2 years ago

  yes, got it. i have already fixed it. thanks dear @correlucas. take love!

  1
• 

  romila•3,550

  @romila2003Posted over 2 years ago

  Hi Raihan,

  Congratulations 🎉 for completing this challenge, the card component looks great and it is great that you used the flex property to center the card. There are some issues/suggestions I want to address:

  1. Even though it is great that you used the main tag to wrap the main content, you should also wrap the footer within the footer tag and nest it within the body but outside the main tag.
  2. I would suggest you wrap your image within the picture tag as the article tag requires a heading (any header between h2 to h6).
  3. When using headers, it should be reduced by 1 however you used the h2 tag and then used the h5 tag. An approach you could take, is use the h1 tag for the title and then the h2 tag for the 'Annual Plan' but change the font-size to be much smaller.
  4. Your buttons are missing the type attribute

  Overall, great work and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  1

  ---

  

  Raihan Noor Hasan•110

  @raihannoorhasanPosted over 2 years ago

  thank you very much for your great suggestion @romila2003.

  All of your suggestion warmly welcome & i will work on it. For demo purpose i didn't look at code so much that's why this mistake happens. Again, thanks & take love romila!

  1