Profile Card

Posted on : 25th April 2022 | Author : @ByDev24


						<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<div class="profile-card">
	<div class="profile-header"></div>
	<div class="profile-image">
		<img src="/uploads/code-snippts/profile-pic.jpg" alt="John Smith" title="John Smith">
	</div>
	<div class="profile-content">
		<h2>John <span>Smith</span></h2>
		<p>General Manager</p>
		<table align="center" cellpadding="5">
			<tbody><tr>
				<th>ID NO</th>
				<td>:</td>
				<td>0123456789</td>
			</tr>
			<tr>
				<th>Phone</th>
				<td>:</td>
				<td><a href="tel:+919999999999">+91-9999999999</a><a></a></td>
			</tr>
			<tr>
				<th>email</th>
				<td>:</td>
				<td><a href="mailto:name@email.com">name@email.com</a></td>
			</tr>
		</tbody></table>
		<div class="profile-barcode">
			<img src="/uploads/code-snippts/barcode.jpg" alt="barcode">
		</div>
	</div>
	<div class="profile-footer">Company Name</div>
</div>


						html{
	font-family: 'Poppins', sans-serif;
}
 .profile-card {width: 350px;margin: 0 auto;border-radius: 10px;overflow: hidden;box-shadow: 0px 0px 10px #00000017;}

.profile-header {background: #3e97f3;height: 100px;}

.profile-image {width: 120px;margin: -60px auto 0 auto;height: 120px;border-radius: 50%;overflow: hidden;}

.profile-image img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.profile-footer {background: #161616;color: #ffffff;text-align: center;font-size: 12px;padding: 5px 0;}
.profile-content {padding: 10px 10px 20px 10px;text-align: center;}

.profile-content h2 {margin: 0;color: #161616;font-size: 20px;}

.profile-content h2 span {color: #3e97f3;}

.profile-content p {margin: 0;font-size: 12px;color: #b1b1b1;}

.profile-content table { margin-top: 10px; text-align: left; color: #626262;font-size: 13px;}
.profile-content table a {text-decoration: none;color: #626262;}
.profile-barcode {width: 240px;margin: 20px auto 0 auto;}

.profile-barcode img {width: 100%;}