07-3-column-preview-card-component-main

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  E aí @eric-suzuki-dev!

  Belo projeto! Ficou show!

  Tenho apenas 2 sugestões:

  • Crie classes auxiliares pra elementos que tem o mesmo estilo. Por exemplo, vi que os seus 3 cards compartilham essas propriedades:

      height: 25.625rem;
      width: 13rem;
      padding: 2.8125rem 2.8125rem;
  

  Você pode criar uma classe auxiliar, colocar essas propriedades nessa nova classe e adicionar essa nova classe aos 3 cards. Dessa forma você evita repetição de código.

  • A segunda sugestão é envolver os seus cards dentro da tag main, indicando que esse é o conteúdo principal. Além de tornar seu HTML mais semântico, você consegue resolver o problema da border-radius. Ao invés de adicioná-la a cada card separado, você pode adicionar a borda ao main container. Mais uma coisa que irá reduzir seu código.

  Fora esses pequenos detalhes, seu projeto ficou excelente!

  Espero que ajude! 😁

  0

  ---

  

  Eric Yuji Suzuki•270

  @eric-suzuki-devPosted 11 months ago

  Ola @danielmrz-dev, Obrigado pelo feedback

  1
• 

  Renan Rodrigues•960

  @irenanrodriguesPosted 11 months ago

  Fala @eric-suzuki-dev, tudo bem? Parabéns por mais um projeto concluído. Tenho algumas sugestões para você.

  Na media query, recomendo deixar um tamanho de min-width: 920px. A pessoa que não tiver um monitor grande, só vai conseguir visualizar a versão mobile do seu projeto.

  Na parte de cada modelo dos carros, você repediu as propriedades css para os 3 modelos, você pode estruturar assim:

  HTML

   <section class="container  orange">  restante do código....</section> 
   <section class="container  cyan">  restante do código....</section>
   <section class="container  green">  restante do código....</section> 
  

  CSS

  .container {
      height: 21.625rem;
      width: 14.0625rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border-radius: 0 0 10px 10px;
      padding: 3rem 3.1875rem;
  }
  
  .orange { background: var(--bright-orange); }
  .cyan { background: var(--dark-cyan); }
  .green { background: var(--very-dark-cyan); }
  

  0

  ---

  

  Eric Yuji Suzuki•270

  @eric-suzuki-devPosted 11 months ago

  Ola, @irenanrodrigues agradece pelo seu Feedback.

  0