mfer的名片|当青训营遇上码上掘金当青训营遇上码上掘金，会碰撞出哪些火花呢？今天和大家分享一下我参与「青训营 X 码

当青训营遇上码上掘金，会碰撞出哪些火花呢？今天和大家分享一下我参与「青训营 X 码上掘金」主题创作活动的作业以及思路我选的题目是

主题 1：我的名片

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

我之前也有做过个人博客以及github介绍展示，感兴趣的朋友可以点击下方链接：

当时算是我第一次接触前端，可以说我接触前端的第一个主题就是我的名片

但遗憾的是，我没有继续深耕前端，直到字节青训营给我这个机会让我系统性的学习，所以我就用刚学到的HTML和CSS重新做个简单的我的名片

代码大概如下

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <style>
      body {
        background-image: url(mfer.png);
        background-size: cover;
        font-family: Arial, sans-serif;
        color: #333;
        text-align: center;
      }

      h1 {
        font-size: 36px;
        margin-top: 50px;
      }

      p {
        font-size: 18px;
        margin: 20px 0;
      }

      .info {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: left;
        max-width: 500px;
        margin-top: 50px;
      }

      .info h2 {
        font-size: 24px;
        margin: 0;
      }

      .info p {
        font-size: 16px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <h1>Ryan</h1>
    <div class="info">
      <h2>个人信息</h2>
      <p>姓名：Ryan</p>
      <p>性别：男</p>
      <p>生日：0717</p>
      <p>专业：信息安全</p>
      <p>爱好：篮球、音乐</p>
    </div>
    
  </body>
</html>

效果大概如下

因为我将背景大小选择为cover，所以他的宽度匹配的浏览器的宽度，一开始没有注意，后来想修改高度宽度，但是发现探一个头的mfer意外的有点可爱，就保留了。目前代码已经发布，我写的其实比较简单，图片因为我用的相对路径，没有使用网上的图片，我自己也懒得上传云盘了，在平台上的就没有图片效果，如果大家想fork我这个代码修改的，图片部分直接改成自己的就好。

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

主题 1：我的名片