Results Summary Component

Community feedback

• 

  Renan Rodrigues•960

  @irenanrodriguesPosted 12 months ago

  Oi @v1fonseca911, tudo bem? Parabéns por completar o desafio. Tenho algumas sugestões que você pode estar usando.

  Comece a desenvolver seus projetos usado HTML semântico. Assim você melhorar a acessibilidade e a organização da sua página, deixando ele um pouco mais limpo, sem o uso de muitas tags divs.

  Para deixar seu projeto no centro, faça assim:

  body {
    display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  Nas classes .container-left e .container-right, você pode deixar elas com width: 100%;, como você em .container, deixou a largura máxima, elas vão se ajustar por igual.

  .container-right, você usou flexbox, use a propriedade gap: 1rem;, para adicionar o espaçamento entre os card e e padding: 2rem;, para espaçamento no .container-right todo

  Nos mini-card, você repediu muita propriedade. Você pode fazer da seguinte forma.

  HTML

  <div class="mini-card card-reaction">
    restante do código.....
  </div> 
  

  CSS

  .mini-card {
     display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0.75rem;
      border-radius: 0.75rem;
  }
  .card-reaction {
      background: var(--red-95-white);
      color: #F55;
  
  

  Se ficou com alguma dúvida das sugestões, pode perguntar =)

  Marked as helpful

  0

  ---

  

  P

  Vitoria Fonseca•230

  @vitorianfonsecaPosted 12 months ago

  Olá @irenanrodrigues! Quero agradecer o feedback e o tempinho que tirou para me ajudar. Já modifiquei o código seguindo as suas dicas, obrigado :)

  0