Cara Membuat Halaman”Meet The Team”

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan membuat cara membuat halaman “Meet The Team” yang responsif dengan CSS.

Halaman / bagian “Meet the team” sering kali digunakan untuk mencantumkan pemberi kerja di sebuah perusahaan, dengan informasi kontak yang ditentukan:

Meet The Team

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}
</style>
</head>
<body>

<h2>Responsive "Meet The Team" Section</h2>
<p> Ubah ukuran jendela browser untuk melihat efeknya. </p>
<br>

<div class="row">
  <div class="column">
    <div class="card">
      <img src="https://dosenit.com/wp-content/uploads/2021/01/hqdefault.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Captain</h2>
        <p class="title">CEO & Founder</p>
        <p>Kami adalah pemimpin TIM ini.</p>
        <p>CivilWar@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>George Si Monyet</h2>
        <p class="title">Art Director</p>
        <p>Aku adalah art director di sini.</p>
        <p>george@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="John" style="width:100%">
      <div class="container">
        <h2>Shinichi Kudou</h2>
        <p class="title">Detektif</p>
        <p>Aku adalah detektif SMA yang terkenal dan pandai memecahkan kasus.</p>
        <p>Conan@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Cara Membuat Halaman Meet The Team

Langkah 1) Tambahkan HTML:
Contoh

<div class="row">
  <div class="column">
    <div class="card">
      <img src="https://dosenit.com/wp-content/uploads/2021/01/hqdefault.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Captain</h2>
        <p class="title">CEO & Founder</p>
        <p>Kami adalah pemimpin TIM ini.</p>
        <p>CivilWar@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>George Si Monyet</h2>
        <p class="title">Art Director</p>
        <p>Aku adalah art director di sini.</p>
        <p>george@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="John" style="width:100%">
      <div class="container">
        <h2>Shinichi Kudou</h2>
        <p class="title">Detektif</p>
        <p>Aku adalah detektif SMA yang terkenal dan pandai memecahkan kasus.</p>
        <p>Conan@example.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Tiga kolom yang saling berdampingan */
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Tampilkan kolom di bawah satu sama lain alih-alih berdampingan di layar kecil */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

/* Tambahkan beberapa bayangan untuk membuat efek kartu */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/*Beberapa padding  kiri dan kanan di dalam containernya */
.container {
  padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}