当青训营遇上码上掘金

📋前言

📑主题介绍（前端方向）

• 主题 1：我的名片

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

• 主题 2：遇见

  据说世界上两个陌生人相遇且相识的概率是 0.0000005，大家来到我们青训营能够遇见许多志同道合的伙伴一同学习、快乐成长，这是件多么美妙的事情。请大家围绕“遇见”这个主题进行代码创作。

💻我的创作

1️⃣选择与创作目的

• 本次「青训营 X 码上掘金」主题创作活动有四个主题，其中主题1、2适合于前端方向的掘友选择。在互联网中，想要大家认识你，过多的文字会导致视觉效果不好，让读者的阅读过程很辛苦，而且不能直观的表达出重点，因此一张独具风格个人名片即可满足其他人对你的认识。因此我选择了主题1，因为我对个人名片也很感兴趣，通过代码来实现自我介绍，非常符合程序员的风格，与此同时，我们又可以发挥自己的想象力和创造力，用与众不同的方式展现出个人名片。

2️⃣灵感与构思

• 一个名片应该具有什么呢，首先少不了个人信息，其次是直入主题、一目了然的布局，让读者可以很快的阅读完，并且留下过目不忘的亮点。因此布局简约、内容精炼是我这次创作的核心。
• 我的灵感来源于身份证的信息布局和掘金个人主页的信息栏。

3️⃣创作过程

• 首先在网页中布局好卡片大小以及位置，为了更加契合主题和掘金的风格，我选择了掘金蓝加淡蓝色的配色，然后使用颜色渐变的效果来填充卡片

//渐变背景
background: linear-gradient(293deg, #c3dee8, #1e80ff);

• 然后是填入基本的信息，包括了我的昵称、头像、一些基本的个人信息。其中第一部分是我的昵称和青训营的班级，然后下面的部分分为两个区域，第一个是基本的个人信息，第二个是头像，最后是卡片右上角的掘金logo，一眼望去尽显掘金风格，布局如下。
• 其中还有个细节，就是运用了box-shadow属性，使得卡片具有立体感，这里我尝试了两种样式，图片展示的是第二种。

// 立体感效果
/* box-shadow:0 15px 35px rgba(0,0,0,0.1),0 3px 10px rgba(0,0,0,0.07); */
box-shadow:7px 7px 12px rgba(0, 0, 0, .4),
-7px -7px 12px rgba(255, 255, 255, .9);

📝最终效果&完整代码

• 具体见如下的码上掘金