Order summary with html and Css

Hello Nayara, your solution looks great, you can add some properties in the background pattern of the body, for example:

body {
     background-image: url(./images/pattern-background-desktop.svg);
     background-repeat: no-repeat;
     background-position: top;
     background-size: 100vw 45vh;
     background-color: hsla(230, 81%, 94%, 0.993);
}

With background-position: top; you make sure that the pattern is always positioned at the top, and with background-size: 100vw 45vh; it will take 100% of the width of the device screen and 45% of the height of the device screen, so it will be more similar to the design.

👾Oi Nayara Freitas, tudo bem? Parabéns pela sua nova solução!

Pra fazer com que o background pegue a largura inteira da tela sem cortar use background-size: contain;

body {
    background-size: contain;
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-color: hsla(230, 81%, 94%, 0.993);
}

Uma boa prática seria usar unidades relativas como rem ou em em vez de px para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Pra fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.

👋 Espero que essas dicas te ajudem e que você continue no foco!