页面的head部分，远程调用font-awesome图标字体库，并引入本地CSS样式文件，代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了多个div容器的嵌套，代码如下：

<div class="card-container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="card">
    <div class="front">
      <div class="cover"></div>
      <div class="photo">
        <img src="https://jy.tp.yuanmeng.life/other/avatar/dir/905.jpg">
      </div>
      <h3 class="name">richer</h3>
      <p class="role">html+css+javascript</p>
      <div class="supporting_text">
        <span>php+mysql</span>
      </div>
      <div class="mdl-card__actions mdl-card--border mdl-typography--text-center">
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">联系方式</button>
      </div>
    </div>
    <div class="back">
      <ul class="icons">
        <li><i class="mdi fa fa-qq"><span>QQ</span></i></li>
        <li><i class="mdi fa fa-wechat"><span>微信</span></i></li>
        <li><i class="mdi fa fa-weibo"><span>微博</span></i></li>
        <li><i class="mdi fa fa-envelope-o"><span>邮箱</span></i></li>
      </ul>
    </div>
  </div>
</div>