当青训营遇上码上掘金——我的名片当青训营遇上码上掘金很高兴能参加这次寒假青训营的码上掘金活动。在前端主题中我选择主题1

当青训营遇上码上掘金

很高兴能参加这次寒假青训营的码上掘金活动。在前端主题中我选择主题1——我的名片。
下面是我制作个人名片的过程。

主题介绍

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
虽然本次前端的主题创作只有html和css代码，但也给了我一次很有价值的创作经历，熟悉了样式的写作，代码只有多写多练才能进步。

创作思路

一张基础的名片需要有个人头像、个人信息和联系方式。个人名片需要简洁但也需要让人一眼了解到你的信息。

代码只包括HTMl和Css两个部分。
名片包括header、body、footer三个部分。
名片中内容有一些简单的悬停效果。

代码

html

个人名片既要简约，又要重点突出，让别人能迅速捕捉到关键信息，我将布局分为header、body、footer三个部分。header中定义了我的个人头像，body中定义了姓名、联系方式和工作，footer中定义了qq号，也可以添加别的社交工具。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
    <title>Awesome Profile Card</title>
</head>
<body>
    <div class="card">
        <div class="card-header">
            <img src="https://pic1.zhimg.com/80/v2-715769278745803cf7a5e012dfc2a66a_1440w.webp?source=1940ef5c" alt="Profile Image" class="profile-img">
        </div>
        <div class="card-body">
            <p class="name">涂晴昊</p>
            <a href="#" class="mail">767852980@qq.com</a>
            <p class="job">硕士 | 前端工程师</p>
        </div>
 
        <div class="card-footer">
            <p class="count"><span>qq</span> 767852980 </p>
        </div>
    </div>
</body>
</html>

css

css部分我设置了各模块的布局信息，并添加了一些悬停时的样式风格。

.card {
    max-width: 250px;
    margin: 150px auto 0;
    background-color: #42515a;
    box-shadow: 0 10px 90px #00000024;
    text-align: center;
    font-size: 20px;
    border-radius: 15px;
}
 
.card .card-header {
    position: relative;
    height: 48px;
}
.card .card-header .profile-img {
    width: 130px;
    height: 130px;
    border-radius: 1000px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 8px solid #c74385;
    box-shadow: 0 0 20px #00000033;
}
 
.card .card-header .profile-img:hover {
    width: 180px;
    height: 180px;
    border: 8px solid #d885af;
}

.card .card-body {
    padding: 10px 40px;
}
 
.card .card-body .name {
    margin-top: 30px;
    font-size: 22px;
    font-weight: bold;
    color: #c74385;
}
 
.card .card-body .name:hover {
    margin-top: 30px;
    font-size: 24px;
    color: #d885af;
}
 
 
.card .card-body .mail {
    font-size: 14px;
    color: #c2bdbd;
}
 
.card .card-body .mail:hover {
    font-size: 15px;
    color: #ffffff;
}
 
.card .card-body .job {
    margin-top: 10px;
    font-size: 14px;
}
 
.card .card-footer {
    background-color: #c74385;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 20px 0 20px 0;
}
.card .card-footer .count {
    font-size: 14px;
}

成品

以下是我创作的名片的展示部分。

总结

青训营为大家提供了很好学习和互相交流的机会，平时接触的代码是原生js和脚手架更多，很少会从头写一个css样式，这次的码上掘金活动让我意识到了自己的短板，以后会更重视这些基础部分，希望在后续的青训营课程中，自己能有更好的收获，学习到更多的技术知识，深入前端领域。