Jak utworzyć: strona "Przedstawienie zespołu"

Jak utworzyć stronę "Przedstawienie zespołu"

Krok 1 - Dodaj 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>Niektóry tekst opisujący mnie lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Kontakt</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">Kierownik projektów graficznych</p>
        <p>Niektóry tekst opisujący mnie lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Kontakt</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="szerokość:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Designer</p>
        <p>Niektóry tekst opisujący mnie lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Kontakt</button></p>
      </div>
    </div>
  </div>
</div>

Krok 2 - Dodaj CSS:

/* Trzy równoległe kolumny */
.column {
  pływ: lewy;
  szerokość: 33.3%;
  margines dolny: 16px;
  wysokość wewnętrzna: 0 8px;
}
/* Na małych ekranach, wyświetlaj kolumny wertykalnie zamiast poziomo */
@media screen and (max-width: 650px) {
  .column {
    szerokość: 100%;
    wyświetlanie: blok;
  }
}
/* Dodanie pewnego cienia, aby stworzyć efekt karty */
.card {
  cień: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Niektóre lewe i prawe wewnętrzne marginesy wewnątrz kontenera */
.container {
  wysokość wewnętrzna: 0 16px;
}
/* Wyczyszczenie飘浮ającego */
.container::after, .row::after {
  zawartość: "";
  wyczyszczenie: oba;
  wyświetlanie: tabela;
}
.title {
  kolor: szary;
}
.button {
  granica: brak;
  kontur: 0;
  wyświetlanie: blok wewnętrzny;
  wysokość wewnętrzna: 8px;
  kolor: biały;
  kolor tła: #000;
  wyjustowanie tekstu: środek;
  kursor: wskaźnik;
  szerokość: 100%;
}
.button:hover {
  background-color: #555;
}

Spróbuj sam