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>
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;
}