Home » How To » Cara Membuat Column Card Pada Sebuah Website

Cara Membuat Column Card Pada Sebuah Website

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat kartu kolom responsif dengan CSS.

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

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Letakkan empat kolom secara berdampingan */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Hapus margin kiri dan kanan ekstra, karena ada padding */
.row {margin: 0 -5px;}

/* Hapus float setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style untuk counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Responsive Column Cards</h2>
<p>Ubah ukuran jendela browser untuk melihat efeknya.</p>

<div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 3</h3>
     <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 4</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
</div>

</body>
</html>

Cara Membuat Column Card

Langkah 1) Tambahkan HTML:
Contoh

<div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 3</h3>
     <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 4</h3>
      <p>teks 1</p>
      <p>teks 2</p>
    </div>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Letakkan empat kolom secara berdampingan */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Hapus margin kiri dan kanan ekstra, karena ada padding */
.row {margin: 0 -5px;}

/* Hapus float setelah columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style untuk counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}

You may also like