Hvordan oprette: "Teamintroduktion"-side

Lær at bruge CSS til at oprette en responsiv "Teamintroduktion"-side.

En "Teamintroduktion"-side/parts bruges normalt til at liste virksomhedens ansatte og give specifik kontaktinformation:

Bill
Bill Gates

CEO & Founder

Nogle tekst, der beskriver mig lorem ipsum ipsum lorem.

example@example.com

Mike
Elon Musk

Kunstnerisk direktør

Nogle tekst, der beskriver mig lorem ipsum ipsum lorem.

example@example.com

John
Steve Jobs

Designer

Nogle tekst, der beskriver mig lorem ipsum ipsum lorem.

example@example.com

Prøv det selv

Hvordan oprette en "Teamintroduktion"-side

Første trin - Tilføj 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>Nogle tekst, der beskriver mig 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">Kunstnerisk direktør</p>
        <p>Nogle tekst, der beskriver mig 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="width:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Designer</p>
        <p>Nogle tekst, der beskriver mig lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Kontakt</button></p>
      </div>
    </div>
  </div>
</div>

Anden trin - Tilføj CSS:

/* Tredje kolonne ved siden af hinanden */
.column {
  flydende: venstre;
  bredde: 33.3%;
  margning-bund: 16px;
  margning: 0 8px;
}
/* På små skærme, vis kolonner lodret i stedet for ved siden af hinanden */
@media screen and (max-width: 650px) {
  .column {
    bredde: 100%;
    vis: blok;
  }
}
/* Tilføj nogle skygger for at skabe en kort effekt */
.card {
  skygge: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Nogle venstre og højre indre margner i beholderen */
.container {
  margning: 0 16px;
}
/* Ryd flydende */
.container::after, .row::after {
  indhold: "";
  ren: begge;
  vis: tabel;
}
.title {
  farve: grå;
}
.button {
  kanter: none;
  omrids: 0;
  vis: inline-block;
  margning: 8px;
  farve: hvid;
  baggrundsfarve: #000;
  tekstjustering: center;
  markør: pegefinger;
  bredde: 100%;
}
.button:hover {
  background-color: #555;
}

Prøv det selv