<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">

<h2 style="text-align:center">用户信息卡片</h2>

​

<div class="card">

  <img src="https://static.runcodex.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>

.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;

}