主题创作1：我的名片
美观的名片可以给别人留下良好的第一印象，在求职中也可以用于介绍自己。因为自己是哆啦A梦的忠实粉丝，所以我选择给它制作一张名片。
前言
很高兴能有机会参加这次青训营，这段时间也收获了很多。我对这个创作主题也十分地感兴趣。制作名片对于我这种新手而言是个绝佳的练习机会，希望通过名片的制作熟悉下前端的基础知识。
创作
这张名片的代码主要分为card、imgbox、content三个部分：
card：我比较喜欢整体圆润简约的风格，所以我圆角矩形来作为名片的主体。整体以黄色为背景。为了使的整体效果炫酷一点，我添加了一个拉伸的动画效果。当鼠标移动过去的时候可以展示详情信息。
position: relative;
width: 350px;
height: 190px;
background: #fff;
border-radius: 20px;
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
transition: 0.5s;
}
height: 300px;
}
imgbox：其次是头像框容器的设计，能够放置二维码或者个人头像。
position: absolute;
left: 50%;
top: -70px;
transform: translateX(-50%);
width: 150px;
height: 150px;
background: #fff;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
overflow: hidden;
transition: 0.5s;
}
content：主要是个人联络方式，职务等介绍。
position: relative;
top: -100px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
成果
总结
我上网看了一些好看的名片，但是自己的有些技术还没法达到实现他们的要求。最后挑选了这个作为模版，用了简单html和js知识写出来。最后成功制作效果炫酷、简约美观的名片，希望在今后的学习中自己能够不断积累更多的实战经验，并不断地完善它。
