Cara Membuat Card Product Dengan HTML CSS dan Javascript

Dalam website E-Commerce tentu yang dilihat saat memilih suatu produk kita sebagai user atau konsumen pasti akan melihat foto produknya, selanjutnya akan melihat dari beberapa sudut pandang foto yang ditampilkan. Nah pada artikel ini saya akan membahas tentang bagaimana cara membuat card product dengan html css dan javascript agar terlihat menarik serta peminat pembeli.Baiklah yang pertama harus dipersiapkan text editor sahabat masing-masing untuk memulai ayo kita membuat file index.html ketikan code html seperti berikut

<!DOCTYPE html>
<html>
<head>
	<title>Tampilan Foto Produk</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="card">
		<div class="top-section">
			<img id="image-container" src="rog.jpg">
			<div class="nav">
				<img src="rog1.jpg">
				<img src="rog2.jpg">
				<img src="rog3.jpg">
			</div>
		</div>
                <div class="price">Rp.17.999.999</div>
		<div class="product-info">
			<div class="name">Asus Rog Strix GL503GE</div>
			<div class="dis">8th Gen Intel Core i7-8750H</div>
			<a class="btn" href="#">Add to Cart</a>
		</div>
	</div>
</div>
</body>
</html>

Sahabat jangan lupa persiapkan beberapa foto atau gambar product yang akan dipergunakan ,disini saya menampilkan 4 buah gambar product laptop,ooopss jangan disebutin merknya sahabat.

 

Gambar diatas tampilan yang tadi sudah diketikan pada file html ,oke langkah selanjutnya coba kita tambahkan CSS supaya lebih menarik… 

*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-family: 'Arial', sans-serif;
}
body{
	background: #ea3;
}
.card{
	width: 300px;
	/*height: 350px;*/
	background: #efe;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.top-section{
	height: 300px;
	overflow: hidden;
	background: #4ef;
	position: relative;
}
#image-container{
	width:300px;
	height: 230px;
}
.nav{
	text-align: center;
}
 .nav img{
	width: 80px;
	height: 50px;
	border:1px solid #ddd;
	margin: 8px 2px;
	cursor: pointer;
	transition: 0.3s;
}
.nav img:hover{
	border-color: #cea;
}
.price{
	position: absolute;
	top:10px;
	right: 15px;
	color:#f1a;
	font-size: 24px;
	font-weight: bold;
}
.product-info{
	padding: 24px;
	text-align: center;
}
.name{
	text-transform: uppercase;
	font-size: 18px;
	color: #333;
	margin-bottom: 5px;
}
.btn{
	display: block;
	background: #009999;
	text-align: center;
	color: #fff;
	padding: 10px;
	margin-top: 10px;
	transition: 0.3s;
}
.btn:hover{
	background: #ff9933;
}

Baiklah langkah selanjutnya kita akan menambahkan javascript pada bagian html berikut :

<div class="nav">
				<img src="rog1.jpg">
				<img src="rog2.jpg">
				<img src="rog3.jpg">
			</div>

<!-- Menjadi seperti dibawah ini--> 

<div class="nav">
				<img onclick="change_img(this)" src="rog1.jpg">
				<img onclick="change_img(this)" src="rog2.jpg">
				<img onclick="change_img(this)" src="rog3.jpg">
			</div>

Langkah berikutnya agar gambar saat di klik dapat berubah ke gambar selanjutnya menggunakan script dibawah ini yang disisipkan sebelum penutup </body>

<!-- fungsi onclick pada gambar -->

<script type="text/javascript">
		var container = document.getElementById("image-container");
		 function change_img(image){
		 	container.src = image.src;
		 }
	</script> 

Oke hasilnya silahkan sahabat jalankan pada browser masing-masing, dan saya kira cukup sampai disini pembahasan tentang cara membuat card product dengan html css dan javascript , semoga bermanfaat dan sampai jumpa lagi pada artikel selanjutnya.

terimakasih,