Membuat Profile Card Yang Elegan Menggunakan CSS – Pada artikel ini akan membahas bagaimana membuat profile card yang elegan menggunakan CSS pada sebuah website. Kalian pasti sering melihat desain kartu profil (profile card) yang berbagai macam bentuk. Desain dari profile card yang sangat beragam dan tentunya sangat menarik untuk di lihat. Nah, Pada artikel kali ini kita akan belajar bagaimana Membuat Profile Card Yang Elegan Menggunakan CSS.

Daftar Isi

Membuat Profile Card Yang Elegan Menggunakan CSS

Kode CSS

Berikut ini kode css untuk membuat profile card yang elegan menggunakan css. Pada bagian ini kita akan sedikit bermain dengan efek sederhana agar desain kartu profil (card profile) terlihat lebih hidup yang mana efek yang digunakan menggunakan transisi cubic-bezier. Kemudian, siapkan file gambar yang ingin digunakan dalam menbuat profile card. Anda bisa menggunakan sintak CSS nya berikut ini.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 280px;
	height: 400px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	overflow: hidden;
}

.profile{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("image url") center/ cover;
	transition: .5s;
}

.text{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background: #fff;
	transform: translateY(230px);
	transition: .5s;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.text #name{
	margin-top: 10px;
	display: flex;
}

.content{
	text-align: center;
	font-size: .8rem;
	padding: 5px;
	color: #bfbfbf;
	opacity: 0;
	transition: .5s ease;
}

span{
	display: block;
	transition: .7s cubic-bezier(.75, -1, 0, 1.15);
	margin: 2px;
}

span:nth-child(1){
	transform: translateX(-240px);
}

span:nth-child(2){
	transform: translateX(240px);
}

.links{
	display: flex;
	margin-top: 20px;
}

.links a{
	text-decoration: none;
	display: block;
	margin: 5px;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	font-size: 1.2rem;
	color: #fff;
	transition: .7s cubic-bezier(.75, -1, 0, 1.15);
}

a:nth-child(1){
	background: #dd2a7b;
	transform: translateX(-200px);
}

a:nth-child(2){
	background: #26242e;
	transform: translateY(200px);
}

a:nth-child(3){
	background: #0077b5;
	transform: translateX(200px);
}

.container:hover .text{
	transform: translateY(0);
}

.container:hover .profile{
	transform: translateY(-70px) scale(1.1);
}

.container:hover #name span{
	transform: translateX(0);
	transition-delay: .5s;
}

.container:hover .content{
	opacity: 1;
	transition-delay: 1.5s;
}

.container:hover .links a{
	transform: translate(0,0);
	transition-delay: .5s;
}

Kode HTML

Berikut ini kode HTML untuk membuat kerangka desain profile card dengan kode HTML.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Profile Card</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="https://kit.fontawesome.com/e25b852c87.js" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container">
		<div class="profile"></div>
		<div class="text">
			<p id="name"><span>Inpows Profile</span></p>
			<p class="content">Android Developer/Mobile Developer/Blogger</p>
			<p class="content">Temukan kode-kode Java, Kotlin, Python dan bahasa pemrograman lainnya hanya di www.inpows.com. Kontak: editor@inpows.com</p>
			<div class="links">
				<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
				<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
				<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
			</div>
		</div>
	</div>
</body>
</html>

Hasil yang diperoleh

Hasil yang diperoleh dari kode HTML dan CSS diatas adalah sebagai berikut.

Temukan source code menarik lainnya hanya di inpows.

Gambar yang digunakan pada video menggunakan Photo by Martin Sanchez on Unsplash.