当青训营遇上码上掘金
主题1：我的名片
展示
创作灵感
最近有个很感兴趣的角色——亚托莉，以下是角色背景
角色背景
亚托莉（英文：ATRI，日文：アトリ），出自ANIPLEX.EXE企划发行的由Front Wing和枕社联合制作的视觉小说《ATRI -My Dear Moments-》，是男主角斑鸠夏生从海底打捞起来的机器人少女，表情丰富（超绝无敌可爱）
世界观背景
在不远的未来，海平面原因不明地急速上升，导致了地表多数都沉入海中。
小时候因为事故而失去一条腿的少年[斑鸠夏生]，厌倦了都市的生活，移居到了海边的乡村小镇。曾经身为[海洋地质学]家的祖母留给他的、就只有船、[潜水艇]还有债务。
夏生为了取回“失去的未来”，与迷之讨债人[凯瑟琳]一起，潜海前往据说保存着祖母遗产的海底仓库。
在那里，他遇到了一位沉睡在如同棺材一般装置中不可思议的少女“[亚托莉]”。她是一位构造精密到与人类别无二致，而又丰富感情的[机器人]。
从海底被打捞起来的亚托莉如是说到。
“我想完成主人留给我的最后的命令。在此之前，我会成为夏生先生的腿！”
在一个逐渐沉入海中的平和小镇，少年和机器人少女的难忘夏日就这么开始了。
思路
既然使用代码做名片了，就加一点交互的东西。静态部分（HTML、CSS）主要完成填充内容、完成布局和样式的工作；交互部分是为了有趣和补充更多简介上无法展示的内容，所以头像部分加一个鼠标悬停时展示的动画，在姓名部分添加亚托莉百度百科的超链接
代码实现
html部分结构：
<div class="background">
<div class="picture-for-proof">
</div>
<div class="information">
<div class="name">
</div>
<p class="content">...</p>
<div class="title">
</div>
</div>
</div>
</div>
css部分
内容都需要额外加入padding，文字内容不同的部分需要添加不同的样式，图片需要设置宽度和高度
交互部分使用伪类设定新的样式，并且使用@keyframes设置对应的动画并使用
