Live Code Editor Version 2.0

Hướng dẫn tạo Profile Card với CSS - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://freetuts.net/cnd/css/fontawesome/4.7.0/css/font-awesome.min.css">
        <style type="text/css">
			.container {
			    width: 80%;
			    border-radius: 5px;
			    background-color: #f2f2f2;
			    padding: 20px;
			    margin: auto;
			}
			h2 {
				text-align: center;
			}
			.card {
			  	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
			  	max-width: 300px;
			  	margin: auto;
			  	text-align: center;
			  	font-family: arial;
			  	padding: 20px;
			}

.main {
			  	padding: 0 16px;
			}

.main::after {
			  	color: #000;ontent: "";
			  	clear: both;
			  	display: table;
			}

.title {
			  	color: grey;
			  	font-size: 18px;
			}

button {
			  	border: none;
			  	outline: 0;
			  	display: inline-block;
			  	padding: 8px;
			  	color: white;
			  	background-color: #000;
			  	text-align: center;
			  	cursor: pointer;
			  	width: 100%;
			  	font-size: 18px;
			}

a {
			  	text-decoration: none;
			  	font-size: 22px;
			  	color: black;
			}

button:hover, a:hover {
			  	opacity: 0.7;
			}
        </style>
    </head>
    <body> 
		<div class="container">
			<h2>Freetuts.net hướng dẫn tạo Contact Card</h2>
		    <div class="card">
			  	<img src="https://freetuts.net/upload/tut_post/images/2017/08/09/992/demo.png" alt="John" style="width:100%">
			  	<div class="main">
			    <h1>Nguyễn Văn Cường</h1>
				    <p class="title">Tác giả, Người sáng lập Freetuts.net</p>
				    <p>Lập trình viên 7 năm kinh nghiệm</p>
				    <a href="#"><i class="fa fa-dribbble"></i></a> 
				    <a href="#"><i class="fa fa-twitter"></i></a> 
				    <a href="#"><i class="fa fa-linkedin"></i></a> 
				    <a href="#"><i class="fa fa-facebook"></i></a> 
				    <p><button>Contact</button></p>
			  	</div>
			</div>
		</div>
    </body>
</html>