当青训营遇上码上掘金
主题1：
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
介绍
名片（Business card），是一种载有关于公司或个人的联系信息的卡片，常用于商务往来场合之中，作为一种便利和记忆辅助工具的共享。
对于前端程序员来说，使用代码制作一张名片最直观地介绍自己给别人的方式就是通过使用 HTML、CSS、JS 绘制一个Web网页，向人展示自己，下面就使用CSS来制作一个简单的个人名片。
实现
- 创建一个外部容器用来封装名片内部各个元素
<div class="card">
</div>
- 创建名片内部的元素
<div class="card">
<section>
<h2>张点心<span>前端设计师</span> </h2>
<ul>
<li>电话：19510201944</li>
<li>邮箱：2681699943@qq.com</li>
<li>地址：巴拿马</li>
</ul>
</section>
</div>
- 基础样式（用css实现）
* {
margin: 0;
padding: 0
}
.card {
width: 800px;
height: 460px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -230px;
margin-left: -400px;
background: #efe6f1;
overflow: hidden;
border-radius: 10px;
}
.card:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
border-radius: 100%;
background: linear-gradient(45deg, #8ee1b7 8%, transparent, #f1efe6);
bottom: -53px;
left: -87px;
}
.card:after {
content: "";
position: absolute;
width: 700px;
height: 700px;
border-radius: 100%;
background: radial-gradient(#afefbf, #c8f2e2, transparent 60%, #f1f0e6);
top: -123px;
right: -352px;
}
.card section {
width: 600px;
position: absolute;
left: 100px;
top: 80px;
z-index: 9;
}
.card section h2 {
font-size: 50px;
letter-spacing: .1em;
margin-bottom: 66px;
}
.card section span {
font-size: 28px;
font-weight: normal;
margin-left: 50px;
letter-spacing: normal;
}
.card img {
float: right;
width: 140px
}
.card section ul {
border-left: #222 3px solid;
padding-left: 28px;
}
.card section ul li {
list-style: none;
line-height: 38px;
font-size: 18px;
}
