Cómo crear: página de "introducción al equipo"

Cómo crear una página de "introducción al equipo"

Paso 1 - Añadir 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>Algunos textos que me describen lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Contacto</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">Director de Arte</p>
        <p>Algunos textos que me describen lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Contacto</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="ancho:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Diseñador</p>
        <p>Algunos textos que me describen lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Contacto</button></p>
      </div>
    </div>
  </div>
</div>

Segundo paso - Añadir CSS:

/* Tres columnas en paralelo */
.column {
  flotar: izquierda;
  ancho: 33.3%;
  margen inferior: 16px;
  rejilla: 0 8px;
}
/* En pantallas pequeñas, mostrar las columnas verticalmente en lugar de en paralelo */
@media pantalla and (ancho máx: 650px) {
  .column {
    ancho: 100%;
    mostrar: bloque;
  }
}
/* Añadir algunas sombras para crear el efecto de tarjeta */
.card {
  sombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Algunos márgenes internos laterales en el contenedor */
.container {
  rejilla: 0 16px;
}
/* Limpiar flotación */
.container::after, .row::after {
  contenido: "";
  limpiar: ambos;
  mostrar: tabla;
}
.title {
  color: gris;
}
.button {
  borde: none;
  contorno: 0;
  mostrar: inline-block;
  rejilla: 8px;
  color: blanco;
  color de fondo: #000;
  alineación de texto: centro;
  cursor: puntero;
  ancho: 100%;
}
.button:hover {
  background-color: #555;
}

Prueba personalmente