Cara Membuat Product Card Pada Website

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

by Hanifah Nurbaeti February 16, 2021

Di bawah ini kita akan mempelajari cara membuat Product Card dengan CSS. Product Card biasa digunakan pada banyak website e-commerce untuk menjelaskan mengenai produknya. Di bawah ini ada contoh product card degan menggunakan html dan css :

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}
</style>
</head>
<body>

<h2 style="text-align:center">Product Card</h2>

<div class="card">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/pngtree-figure-in-a-hoodie-icon-isolated-png-image_1999186.jpg" alt="Denim Jeans" style="width:100%">
  <h1>Sweater Hoodie</h1>
  <p class="price">Rp. 199.000</p>
  <p>Hoodie ini sangat nyaman dipakai, bahan juga berkualitas. Soal Harga? Jangan tanya, sangat terjangkau!!!.</p>
  <p><button>Masukkan Keranjang</button></p>
</div>

</body>
</html>

Cara Membuat Kartu Produk

Langkah 1) Tambahkan HTML:
Contoh

<div class="card">
  <img src="https://dosenit.com/wp-content/uploads/2021/02/pngtree-figure-in-a-hoodie-icon-isolated-png-image_1999186.jpg" alt="Denim Jeans" style="width:100%">
  <h1>Sweater Hoodie</h1>
  <p class="price">Rp. 199.000</p>
  <p>Hoodie ini sangat nyaman dipakai, bahan juga berkualitas. Soal Harga? Jangan tanya, sangat terjangkau!!!.</p>
  <p><button>Masukkan Keranjang</button></p>
</div>

Langkah 2) Tambahkan CSS:
Contoh

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}