Cara Membuat Desain Profile Card Dengan HTML CSS

Pada kesempatan kali ini saya akan membahas tentang tampilan profile card, dalam desain Website Company tentu akan akan menampilkan beberapa profile orang yang memiliki pengaruh, contohnya CEO, Director, Manager, dll. dalam kasus kali ini saya akan membuat desain profile card dengan html css.

Bagaimana cara pembuatannya sahabat bisa ikuti langkah-langkah dalam dalam desainnya berikut ini:

Langkah pertama buat file html seperti bawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Custome Profile UI</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<body>
	<div class="container mt-5">
		<div class="row">
			<div class="col-md-3 col-sm-6">
				<div class="our-team">
					<div class="pic">
						<img src="img-1.jpg" alt="">
					</div>
					<div class="team-content">
						<h3 class="title">Shafa Alinka</h3>
						<span class="post">Design Graphic</span>
					</div>
					<ul class="social">

						<li><a href="" class="fab fa-facebook-f"></a></li>
						<li><a href="" class="fab fa-instagram"></a></li>
						<li><a href="" class="fab fa-linkedin-in"></a></li>
						<li><a href="" class="fab fa-twitter"></a></li>

					</ul>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="our-team">
					<div class="pic">
						<img src="img-3.jpg" alt="">
					</div>
					<div class="team-content">
						<h3 class="title">Shafa Alinka</h3>
						<span class="post">Design Graphic</span>
					</div>
					<ul class="social">

						<li><a href="" class="fab fa-facebook-f"></a></li>
						<li><a href="" class="fab fa-instagram"></a></li>
						<li><a href="" class="fab fa-linkedin-in"></a></li>
						<li><a href="" class="fab fa-twitter"></a></li>

					</ul>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="our-team">
					<div class="pic">
						<img src="img-2.jpg" alt="">
					</div>
					<div class="team-content">
						<h3 class="title">Shafa Alinka</h3>
						<span class="post">Design Graphic</span>
					</div>
					<ul class="social">

						<li><a href="" class="fab fa-facebook-f"></a></li>
						<li><a href="" class="fab fa-instagram"></a></li>
						<li><a href="" class="fab fa-linkedin-in"></a></li>
						<li><a href="" class="fab fa-twitter"></a></li>

					</ul>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="our-team">
					<div class="pic">
						<img src="img-4.jpg" alt="">
					</div>
					<div class="team-content">
						<h3 class="title">Shafa Alinka</h3>
						<span class="post">Design Graphic</span>
					</div>
					<ul class="social">

						<li><a href="" class="fab fa-facebook-f"></a></li>
						<li><a href="" class="fab fa-instagram"></a></li>
						<li><a href="" class="fab fa-linkedin-in"></a></li>
						<li><a href="" class="fab fa-twitter"></a></li>

					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

pada file html diatas saya menggunakan library bootstrap agar terlihat rapih ,dan saya menggunakan fontawesome untuk membuat icon yang dibutuhkan. disini saya akan menampilkan 4 profil saja,jadi hanya buth 4 image yang dipakai,nanti bisa sahabat ganti saja image yang dipakai.

ALngkah selanjutnya berikan style css untuk memberikan tampilanya yang cantik lagi, ketikkan code dibawah ini:

<style>
		body{
			background:#227788;
		}

		.our-team{
			padding: 30px 0 40px;
			background: #fff;
			text-align: center;
			overflow: hidden;
			position: relative;
		}

		.our-team .pic{
			display: inline-block;
			width: 130px;
			height: 130px;
			margin-bottom: 50px;
			/*background:#ff00ac;*/
			position: relative;
			z-index: 1;
		}

		.our-team .pic:before
		{
			content: "";
			width: 100%;
			background: #ff00ac;
			position: absolute;
			bottom: 135%;
			right: 0;
			left: 0; 
			transform: scale(3);
			transition: all 0.3s linear 0s;
		}

		.our-team:hover .pic:before
		{
			height: 100%;
		}

		.our-team .pic:after
		{
			content: "";
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: #ff00ac;
			position: absolute;
			top: 0;
			left: 0; 
			z-index: -1;
		}

		.our-team .pic img{
			width: 100%;
			height: auto;
			border-radius: 50%;
			transform: scale(1);
			transition: all 0.9s ease 0s;
		}

		.our-team:hover .pic img
		{
			box-shadow: 0 0 0 14px #ff00ac;
			transform: scale(0.7);
		}

		.our-team .team-content
		{
			margin-bottom: 30px;
		}
		
		.our-team .title{
			font-size: 22px;
			font-weight: 700;
			color:#4e5052;
			letter-spacing: 1px;
			text-transform: capitalize;
			margin-bottom: 5px;
		}

		.our-team .post{
			display: block;
			font-size: 15px;
			color:#4e5052;
			text-transform: capitalize;
		}

		.our-team .social{
			width: 100%;
			padding:0;
			margin:0;
			background: #eb1768;
			position: absolute;
			bottom: -100px;
			left:0;
			transition: all 0.5 ease 0s;
		}

		.our-team:hover .social{
			bottom:0;
		}

		.our-team .social li{
			display: inline-block;
		}

		.our-team .social li a{
			display: block;
			padding:10px;
			font-size: 17px;
			color:#fff;
			transition: all 0.3s ease 0s;
		}

		.our-team .social li a:hover{
			color:#eb1768;
			background: #f7f5ec;
			text-decoration: none;
			
		}

	</style>

Jika kedua file diatas sudah diketikan coba buka ke sebuah browser maka apakah sudah seperti berikut tampilannya:

Sekarang coba mouse didekatkan ke salah satu profile maka akan seperti dibawah ini:

Demikian pembahasan artikel kali ini tentang cara membuat desain profile card dengan html css, semoga bermanfaat dan selamat mencoba.

terima kasih