Products Card atau biasa yang disebut dengan kartu produk ini adalah sebuah kartu yang biasa anda lihat di website - website penjualan. Products card ini digunakan sebagai kotak atau wadah yah untuk menyimpan tampilan suatu produk.
Selamat malam bagi yang ingin tidur dan selamat datang bagi yang berkunjung. Terima kasih karena sudah mau mampir kesini untuk membaca blog saya ini hehe. Projek yang ingin saya bagikan ini yaitu cara membuat products card ( kartu produk ) sederhana, gak ribet, dan simple hanya menggunakan html dan css saja.
Kali ini saya membuat dengan 3 varian rasa, yaitu merah, biru, dan kuning. Perlu diingat untuk nanti ketika anda sudah mendapatkan codingan. Jika kalian ingin merubah warna defaulnya menjadi warna merah dan kuning. Kalian perlu mengubah warna serta gambarnya saja. Untuk sekarang mari kita ke kodenya dulu, nanti saya jelaskan.
Kode html :
<!DOCTYPE html>
<!-- Products Card sederhana by Sicoding Turu -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Card | Sicoding Turu</title>
<link rel="stylesheet" href="ProductCard.css" type="text/css" media="all" />
<!-- ini favicon -->
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon" />
<!-- ini link font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Anton&family=Carter+One&family=Mochiy+Pop+One&family=Poppins:wght@600&family=Rubik+Mono+One&display=swap" rel="stylesheet">
<!-- link bootstrap-icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<div class="product-card">
<div class="product-links">
<a href=""><i class="bi bi-heart"></i></a>
<a href=""><i class="bi bi-share"></i></a>
</div>
<div class="product-tumb">
<img src="Image.png" alt=""> <!-- disini ganti dengan Image-2 atau Image-3 jika ingin diubah -->
</div>
<div class="product-details">
<h4><a href="">Sneakers Converse</a></h4>
<h3>$4.500</h3>
</div>
<div class="buy-btn">
<a href="#"><i class="bi bi-cart3"></i>Buy Now</a>
</div>
</div>
</body>
</html>
Kode css :
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.product-card {
width: 350px;
position: relative;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
margin: 50px auto;
background: #1235b0; /* ubah warna disini menjadi merah atau kuning. untuk warna merah :#BD0206; Untuk warna kuning :#DBA135; */
border-radius: 25px;
}
.product-tumb {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.product-tumb img {
width: 50vw;
}
.product-details {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-details h4 a {
font-weight: 500;
display: block;
text-transform: uppercase;
color: #fff;
text-decoration: none;
transition: 0.3s;
font-family: 'roboto';
}
.product-details h4 a:hover {
color: #fbb72c;
}
.product-details h3{
color: #fbb72c;
font-weight: 700;
font-size: 'Poppins';
}
.product-links {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px 0 25px;
}
.product-links a {
color: #fff;
transition: 0.3s;
font-size: 22px;
}
.product-links a:hover {
color: #fbb72c;
}
.buy-btn{
display: flex;
align-items: center;
justify-content: center;
}
.buy-btn a{
margin-bottom: 25px;
width: 90%;
padding: 12px 5px;
background: #fff;
color: #000000;
border-radius: 10px;
font-family: 'Poppins';
transition: all .3s ease;
}
.buy-btn a i{
font-size: 22px;
margin-right: 80px;
margin-left: 10px;
}
.buy-btn a:hover{
background: #fbb72c;
transform: scale(0.9);
}
@media (max-width: 900px){
.product-tumb img{
width: 80vw;
}
.product-card{
width: 320px;
}
}
Untuk previewnya bisa dilihat yah disini :
CATATAN PENTING : JIKA KALIAN INGIN MENGUBAH TAMPILAN WARNA MAUPUN GAMBAR, KALIAN HANYA PERLU MENGGANTI GAMBARNYA DITAG " .Product-thumb img" dan " background" yang berada di class product-card. Jika kalian masih bingung apa yang saya bicarakan, kalian bisa liat nanti dicodingannya saya sudah kasih komentar mana yang harus diganti okeh.
Seperti biasa saya akan menyertakan link lagi ini sudah jadi rutinitas sehari hari hihi. Tapi tidak apa apa , anggap aja sebagai jalan keluar misalnya kalian lagi kepepet kuota habis atau lagi diperjalanan .
Silahkan lihat untuk projects yang lainnya disini List Projectst
EmoticonEmoticon