vcard example

2:05 am, September 19, 2018

Code

html

<div class="medium-6 cell">
		<div class='vcard'>
			<img src='https://placehold.it/100x100' class='vcard-profile-image'>
			<div class='vcard-title'>VCard Title</div>
			<div class='vcard-position'>VCard Position</div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. </p>
			<a href='#' class='download-vcard'><i class="fas fa-download"></i> Download VCard</a>
		</div>
	</div>

<div class="medium-6 cell">
		<div class='vcard vcard-bg-2'>
			<img src='https://placehold.it/100x100' class='vcard-profile-image'>
			<div class='vcard-title'>VCard Title</div>
			<div class='vcard-position'>VCard Position</div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. </p>
			<a href='#' class='download-vcard'><i class="fas fa-download"></i> Download VCard</a>
			
		</div>
	</div>

</div>

css

.vcard {
	border-radius:10px;
	padding:20px;
	box-shadow:0px 5px 5px rgba(0,0,0,0.5);
	min-height:100px;
	margin-bottom:20px;
	position:relative;
	overflow:hidden;
	background:linear-gradient( rgba(255,255,255, 0.3), rgba(255,255,255, 1) ),url(https://kruxor.com/codepad/images/pexels-photo-999267-crop.jpg) right no-repeat;
	background-size:cover;
}
.vcard-bg-2 {
	background:linear-gradient( rgba(255,255,255, 0.3), rgba(255,255,255, 1) ),url(https://kruxor.com/codepad/images/bow-tie-fashion-man-person-crop.jpg) right no-repeat;
	background-size:cover;
}
.vcard-profile-image {
	float:right;
	display:none;
}
.vcard-title {
	font-weight:bold;
	font-size:18px;
	color:#444;
}
.vcard-position {
	font-size:16px;
	color:#666;
}
.vcard p {
	font-size:14px;
	color:#777;
	padding-right:150px;
}
a.download-vcard:hover {
	box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	text-decoration:none;
}
a.download-vcard {
	display:inline-block;
	padding:5px 10px;
	border-radius:30px;
	border:1px solid #CCC;
	font-size:14px;
	color:#666;
	margin-right:120px;
	background:rgba(255,255,255,0.5);
}

scripts

Download & Run

Download File Run Demo Re-load Preview