当青训营遇上码上掘金——我的名片作为一名大学生，我们有着独特的想法和创造力。为了展示自己的技能和个人特质，我们创造了一张

作为一名大学生，我们有着独特的想法和创造力。为了展示自己的技能和个人特质，我们创造了一张个人名片。这张名片不仅仅是一张简单的名片，而是一份代码作品，用代码展示了自我介绍。

创作灵感来源于对代码的热爱。我们希望通过这张名片，向人们展示我们的技能，表现出我们的创造力和专业素养。同时，我们还希望能够向别人展示我们的工作能力和专业态度。

创作过程中，我们首先确定了我们要展示的内容，包括个人信息，技能，项目经验和联系方式。接着，我们选择了一种合适的编程语言，如HTML，CSS和JavaScript来编写代码。我们注意到了代码的可读性和可维护性，以确保代码的高质量。最后，我们测试了代码，确保它能够正确显示所有内容，并在互联网上发布了我们的名片。

最终，我们创造了一张个人名片，既有趣又有用。它不仅仅是一张简单的名片，而是一份代码作品，用代码展示了我们的技能和创造力。通过这张名片，我们不仅仅向人们展示了自我，也向人们展示了我们对代码的热爱和对自我品牌的认识。我们相信，这张名片将帮助我们与更多人建立联系，并有望成为一名更受欢迎的程序员。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Card</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="card">
    <img src="https://img.tukuppt.com/ad_preview/00/05/66/5c98dd6bcbf32.jpg!/fw/980" alt="background">
    <h1 class="name">name：xj</h1>
    <p class="occupation">occupation：Student</p>
    <p class="contact">QQ:12347567@email.com</p>
    <p class="age">age:19</p>
    <p class="hobbies">hobbies：Reading, Traveling</p>
  </div>
</body>
</html>

CSS

.card {
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 36px;
  margin-top: 10px;
}

.occupation {
  font-size: 24px;
  margin-top: 10px;
}

.company {
  font-size: 18px;
  margin-top: 10px;
}

.contact {
  font-size: 16px;
  margin-top: 10px;
}

.age {
  font-size: 14px;
  margin-top: 10px;
}

.hobbies {
  font-size: 14px;
  margin-top: 10px;
}