Order summary with html and Css

Community feedback

• 

  Cheosphere•1,040

  @Cheosphere

  Posted almost 3 years ago

  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.

  30

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾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!

  20

  Marked as helpful