Como criar: avaliações de clientes

Saiba como usar CSS para criar avaliações de clientes responsivas.

As avaliações de clientes são frequentemente usadas para que as pessoas saibam o que outros pensam sobre você ou seu produto.

Avatar

Chris Fox. CEO na Mighty Schools.

John Doe nos salvou de um desastre na web.

Avatar

Rebecca Flex. CEO na Empresa.

Ninguém é melhor do que John Doe.

Avatar

Julia Roberts. Ator.

Simplesmente ame Johnny Boy.

Experimente você mesmo

Como definir o estilo de avaliações de clientes

Primeiro passo - Adicionar HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO na Mighty Schools.</p>
  <p>Bill Gates nos salvou de um desastre na web.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO na Empresa.</p>
  <p>Ninguém é melhor do que Bill Gates.</p>
</div>

Segundo passo - Adicionar CSS:

/* Usar bordas arredondadas, fundo cinza e algumas margens internas e externas para definir o estilo do contêiner */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Limpar a flutuação após o contêiner */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Fazer a imagem dentro do contêiner flutuar para a esquerda. Adicionar margem direita externa e definir o estilo da imagem como circular */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Aumentar o tamanho da fonte do elemento span */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Adicionar consulta de mídia para implementar o layout responsivo. Isso fará com que o texto e as imagens fiquem centralizados dentro do contêiner */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Experimente você mesmo