当青训营遇上码上掘金|主题1：我的名片

任务：名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

名片是新朋友互相认识、自我介绍的最快有效的方法，一个好的名片能让别人迅速对你有一定的了解，所以本次我选择用代码做一个自我介绍。

我们首先确定了我们要展示的内容，一张名片最重要的就是个人信息，职业和联系方式，以及一定的美观性。前端的展现主要是使用HTML，CSS和JavaScript来编写代码。

最终的名片样式体现如下：

HTML超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言。
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为 .css

具体可执行代码如下，CSS样式代码略长，仅附部分代码以供参考。

HTML

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Profile Card</title>
    <link rel="stylesheet" href="style.css">
    <script src="a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img src="https://th.bing.com/th/id/OIP.OUD4YMXQMD_GFKvPm8KIOAHaK5?pid=ImgDet&rs=1">
      </div>
      <div class="content">
        <div class="info">
            <h2>Violet</h2>
            <span>前端工程师</span>
        </div>
      </div>
      <ul>
      <li><a href="#"><span class="job">student</span></a></li>
      <li><a href="#">151xxxx1313<span class="phone"></span></a></li>
      <li><a href="#"><span class="Email">123@xx.com</span></a></li>
      </ul>
  </div>
</body>
</html>

CSS

html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.container{
  position: relative;
  height: 500px;
  width: 400px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.container:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.container .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}

总结：

这次的名片项目只是简单的运行HTML和CSS制作的，并没有很复杂的交互效果，在后续的学习中，还有很多东西需要学习，希望日后可以制作比较复杂的前端页面。而且这次的代码是使用码上掘金写的，发现非常方便，强烈推荐新手使用。

当青训营遇上码上掘金 | 我的名片

HTML

CSS

总结：