页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，名片的正面和背面均使用了div作为容器，代码如下：

<div class='card-wrapper'>
  <div class='card' data-toggle-class='flipped'>
    <div class='card-front'>
      <div class='layer'>
        <h1>智慧小屋</h1>
        <div class='corner'></div>
        <div class='corner'></div>
        <div class='corner'></div>
        <div class='corner'></div>
      </div>
    </div>
    <div class='card-back'>
      <div class='layer'>
        <div class='top'>
          <h2>html+css+javascript+php+mysql</h2>
        </div>
        <div class='bottom'>
          <h3>
            昵称：
            <a href='#' target='_blank'>Richer</a>
          </h3>
          <h3>
            电话：
            <a href='tel:18888888888'>18888888888</a>
          </h3>
          <h3>
            邮箱：
            <a href='mailto:Richer@sucaihuo.com'>Richer@sucaihuo.com</a>
          </h3>
          <h3>
            网站：
            <a href='https://jy.tp.yuanmeng.life' target='_blank'>sucaihuo.com</a>
          </h3>
        </div>
      </div>
    </div>
  </div>
</div>

页面的底部，需引入一个JS文件，响应鼠标点击的事件等，代码如下：

<script type="text/javascript" src="js/index.js"></script>