Kuinka luoda: "tiimiesittely"-sivu

Opi, kuinka luoda vastaanottavaista "tiimiesittely"-sivua CSS:n avulla.

"Tiimiesittely"-sivu tai -osio käytetään yleensä luetteloon yrityksen työntekijöistä ja tarjoamaan erityisiä yhteystietoja:

Bill
Bill Gates

CEO & Founder

Joitakin tekstiä, joka kuvaa minua lorem ipsum ipsum lorem.

[email protected]

Mike
Elon Musk

Taiteellinen johtaja

Joitakin tekstiä, joka kuvaa minua lorem ipsum ipsum lorem.

[email protected]

John
Steve Jobs

Suunnittelija

Joitakin tekstiä, joka kuvaa minua lorem ipsum ipsum lorem.

[email protected]

Kokeile itse

Kuinka luoda "tiimiesittely"-sivu

Vaihe 1 - Lisää 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>Joitakin tekstejä, jotka kuvailivat minua lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Yhteydenotto</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">Taiteenjohtaja</p>
        <p>Joitakin tekstejä, jotka kuvailivat minua lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Yhteydenotto</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="leveys:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Suunnittelija</p>
        <p>Joitakin tekstejä, jotka kuvailivat minua lorem ipsum ipsum lorem.</p>
        <p>[email protected]</p>
        <p><button class="button">Yhteydenotto</button></p>
      </div>
    </div>
  </div>
</div>

Toinen vaihe - Lisää CSS:ää:

/* Rinnakkaiset kolme saraketta */
.column {
  pyörittely: vasen;
  leveys: 33.3%;
  alaleveys: 16px;
  työväli: 0 8px;
}
/* Pienissä näytöissä, näytä sarakkeet ylös-alaspäin eikä rinnakkain */
@media screen and (max-width: 650px) {
  .column {
    leveys: 100%;
    näyttö: kappale;
  }
}
/* Lisää joitakin varjoja luodaksesi kortti-efektin */
.card {
  varjo: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Konttorin sisäiset vasen-oikea sisennykset */
.container {
  työväli: 0 16px;
}
/* Tyhjennä pyörteet */
.container::after, .row::after {
  sisältö: "";
  tyhjennä: molemmat;
  näyttö: taulukko;
}
.title {
  väri: harmaa;
}
.button {
  reuna: ei mitään;
  konttori: 0;
  näyttö: sisäinen-kappale;
  työväli: 8px;
  väri: valkoinen;
  takabackgrund: #000;
  tekstiasento: keskitetty;
  kursori: sormi;
  leveys: 100%;
}
.button:hover {
  background-color: #555;
}

Kokeile itse