Membuat Team Section dengan CSS

Membuat Team Section dengan CSS

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat Team section yang elegan dengan menggunakan CSS untuk menampilkan tim atau anggota tim pada halaman web. Kode ini akan diterapkan pada sebuah form HTML.

css

CSS
.team-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.team-member {
  width: 300px;
  margin: 20px;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.team-member img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 10px;
}

.team-member h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.team-member p {
  font-size: 14px;
  color: #666;
}
CSS

Berikut adalah contoh kode HTML untuk form yang akan menggunakan CSS di atas:

HTML
<section class="team-section">
  <div class="team-member">
    <img src="member1.jpg" alt="Member 1">
    <h3>John Doe</h3>
    <p>Front-end Developer</p>
  </div>
  <div class="team-member">
    <img src="member2.jpg" alt="Member 2">
    <h3>Jane Smith</h3>
    <p>UI/UX Designer</p>
  </div>
  <div class="team-member">
    <img src="member3.jpg" alt="Member 3">
    <h3>David Johnson</h3>
    <p>Back-end Developer</p>
  </div>
</section>
HTML

See the Pen Team CSS by WebbizID (@De-Orchids) on CodePen.

Dengan menggunakan kode CSS di atas, Anda dapat membuat sebuah section yang elegan untuk menampilkan anggota tim pada halaman web Anda. Anda dapat mengubah gambar, nama, dan posisi anggota tim sesuai dengan kebutuhan Anda.

Baca juga:

Semoga contoh kode di atas dapat membantu Anda dalam membuat sebuah team section yang elegan dengan menggunakan CSS pada form HTML.

Artikel Terbaru ⭐