ORDER SUMARRY COMPONENT WITH FLEXBOX

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Gaston, You have done a good work! 😁

  Some little tips to improve your code:

  • To fix the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • section tag go inside of main tag and not viceversa
  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • use min-height: 100vh instead of height, otherwise the content is cut off when the browser height is less than the content

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @GastonSKL, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  The background wave image is missing and here’s the step-by-step to add it.First of all add the image as a background inside the body this is the code for that: background-image: url(../images/pattern-background-desktop.svg);

  Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%, Here’s the code with the modification and the image applied as background:

  body {
      background-size: contain;
      background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      font-family: 'Red Hat Display', sans-serif;
      font-size: 16px;
      background-color: var(--aleblue);
  }
  

  ✌️ I hope this helps you and happy coding!

  0