Como criar: página de "introdução da equipe"

Como criar uma página de "introdução da equipe"

Primeiro passo - Adicionar HTML:

<div class="row">
  <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <p>Algum texto que descreve-me lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Contactar</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>Elon Musk</h2>
        <p class="title">Diretor de Arte</p>
        <p>Algum texto que descreve-me lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Contactar</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="largura:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Designer</p>
        <p>Algum texto que descreve-me lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Contactar</button></p>
      </div>
    </div>
  </div>
</div>

Segundo passo - Adicionar CSS:

/* Três colunas alinhadas */
.column {
  flutuante: esquerda;
  largura: 33.3%;
  margem inferior: 16px;
  preenchimento: 0 8px;
}
/* Na tela pequena, exibir colunas verticalmente em vez de lado a lado */
@media screen and (largura máxima: 650px) {
  .column {
    largura: 100%;
    exibir: bloco;
  }
}
/* Adicionar algumas sombras para criar efeito de cartão */
.card {
  sombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Alguns preenchimentos laterais internos no contêiner */
.container {
  preenchimento: 0 16px;
}
/* Limpar flutuante */
.container::after, .row::after {
  conteúdo: "";
  limpar: ambos;
  exibir: tabela;
}
.title {
  cor: cinzento;
}
.button {
  borda: none;
  contorno: 0;
  exibir: inline-block;
  preenchimento: 8px;
  cor: branco;
  cor de fundo: #000;
  alinhamento do texto: centro;
  cursor: ponteiro;
  largura: 100%;
}
.button:hover {
  background-color: #555;
}

Experimente você mesmo