console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<h2 style="text-align:center">用户信息卡片</h2>
<div class="card">
<img src="https://static.runoob.com/images/mix/img_avatar.png" alt="John" style="width:100%">
<div class="container">
<h1>John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<div style="margin: 24px 0;">
<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>
</div>
<p><button>Contact</button></p>
</div>
</div>
</body>
</html>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.container {
padding: 0 16px;
}
.container::after {
content: "";
clear: both;
display: table;
}