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

前言

当青训营遇上码上掘金 - 主题一：我的名片。

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

在现代社会中，个人名片可以以在线形式出现，以便在线展示个人或公司信息并进行互动。这样的名片通常是在社交网站上创建的个人主页或公司网站。 所以，我认为个人名片应该简洁明了，用于介绍个人或公司，并建立联系。

实现效果

实现思路和相关代码

使用 HTML 建立了一个个人名片的框架，它包含了关于个人的所有重要信息，如姓名、电话号码和电子邮件地址等。使用 CSS 美化了名片的样式，还可以使用不同的字体、颜色和布局来展示个人信息。

使用 JavaScript 来监听鼠标移动事件，当鼠标移入卡片时，名片上会有阴影变深的效果。这使得名片更具吸引力，并且增加了交互性。这样的设计不仅展示了个人信息，同时也展示了设计和编程能力。

HTML代码

  <div id="card-header">
    <img src="https://pic3.zhimg.com/v2-9d324201794e66fb7d32664f0ecf3842_r.jpg" id="profile-picture">
    <h1 id="name">leslie</h1>
    <h2 id="title">前端小白</h2>
  </div>
  <div id="card-body">
    <p id="bio">我是一名开发人员，在构建响应迅速、用户友好的网站方面有一点点经验。我会HTML、CSS和JavaScript，有使用Vue框架的经验。</p>
    <div id="contact-info">
      <h3>联系方式</h3>
      <p>Email: <a href="mailto:xxx@qq.com" id="email">xxx@qq.com</a></p>
      <p>Phone: <a href="tel:12138" id="phone">12138</a></p>
      <p>Website: <a href="https://xxx.com" id="website">https://XXX.com</a></p>
    </div>
  </div>
</div>

CSS代码

  width: 400px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #e0e0e0;
}

#card-header {
  display: flex;
  align-items: center;
}

#profile-picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

#name {
  font-size: 2em;
  margin-bottom: 0;
}

#title {
  font-size: 1.5em;
  color: #666;
  margin-top: 0;
}

#card-body {
  margin-top: 20px;
}

#bio {
  font-size: 1.2em;
  line-height: 1.2
}

#contact-info {
  margin-top: 20px;
}

#contact-info h3 {
  margin-bottom: 10px;
}

#email, #phone, #website {
  color: blue;
}

JAVASCRIPT代码

const card = document.getElementById("card");

card.addEventListener("mouseenter", () => {
  card.style.boxShadow = "0px 0px 20px #2979ff";
});

card.addEventListener("mouseleave", () => {
  card.style.boxShadow = "0px 0px 10px #e0e0e0";
});