「青训营 X 码上掘金」主题创作活动 | 主题 1：我的名片

LianQi
122 阅读3分钟

「青训营 X 码上掘金」主题创作活动 | 主题 1：我的名片

当青训营遇上码上掘金，HTML和CSS技术便成为了我们展示个人形象和专业能力的有力工具。我们可以使用HTML和CSS代码制作一张高质量的名片，来展示自己的专业能力和职业形象。这不仅可以增加我们在商业活动和社交场合中的影响力，还能让我们更加自信地展示自己。

作为一名程序员，不仅需要具备扎实的技术能力，还需要具备出色的沟通和表达能力。名片的制作，既可以帮助我们更好地向他人介绍自己，还可以锻炼我们的沟通和表达能力。而使用代码来制作名片，则是在技术和艺术之间进行平衡，体现了我们的创造力和个性魅力。

HTML：

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Profile Card</title>
    <meta charset="UTF-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
<section>
    <div class="container">
        <div class="card front-face">
            <header>
            <span class="logo">
                <img alt="ByteDance logo"
                     src="https://cdn.jsdelivr.net/gh/LianQi-Kevin/Markdown_Image_Hosting@main/images/bytedance-logo.png"/>
                <h5 class="company">ByteDance</h5>
            </span>
            </header>
            <div class="colum">
                <div class="card-details">
                    <div>
                        <h5 class="position">UI designer</h5>
                        <h1 class="name">张 三</h1>
                        <h6 class="phone">电话 / 12345678912</h6>
                        <h6 class="mail">邮箱 / 12345678912@gmail.com</h6>
                        <h6 class="web-site">网址 / github.com</h6>
                    </div>
                </div>
                <div class="photo">
                    <img alt="head_portrait"
                         src="https://cdn.jsdelivr.net/gh/LianQi-Kevin/Markdown_Image_Hosting@main/images/head_portrait.png"/>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

CSS：

/* 加载谷歌字体 - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* 设置字体和box模式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

section::before {
    content: "";
    position: absolute;
    height: 240px;
    width: 240px;
    border-radius: 50%;
    transform: translate(-150px, -100px);
    background: linear-gradient(90deg, #9c27b0, #f3f5f5);
    filter: brightness(0.8);
}

section::after {
    content: "";
    position: absolute;
    height: 240px;
    width: 240px;
    border-radius: 50%;
    transform: translate(150px, 100px);
    background: linear-gradient(90deg, #9c27b0, #f3f5f5);
    filter: brightness(0.8);
}

/* 背景 */
section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background: #121321;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    perspective: 1000px;
}

.container {
    position: relative;
    height: 225px;
    width: 375px;
    z-index: 100;
    transition: 0.6s;
    transform-style: preserve-3d;
}

/*设置半透明卡片*/
.container .card {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 25px;
    border-radius: 25px;
    backdrop-filter: blur(25px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.front-face header,
.front-face .logo {
    display: flex;
    align-items: center;
}

.front-face header {
    justify-content: space-between;
}

.front-face .logo img {
    width: 30px;
    margin-right: 10px;
}

.front-face .chip {
    width: 50px;
}

.front-face .card-details {
    display: flex;
    margin-top: 20px;
    align-items: flex-end;
    justify-content: space-between;
}

.front-face .colum {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

h6 {
    font-size: 10px;
    font-weight: 400;
}

h5 {
    font-size: 16px;
    font-weight: 400;
}

h1.name {
    font-size: 30px;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 7px;
}

.front-face .photo img {
    width: 125px;
    height: 150px;
}

这段代码会生成一张带有半透明底色的名片。其中包含了一个头像、公司名称、姓名、职位和电话。代码中使用了CSS的 box-shadow 和 border-radius 属性来增加卡片的立体感和圆角效果，使用 display: flex 属性来实现头像和信息的排列，使用 rgba() 函数来设置卡片的半透明背景色。

如果您希望制作更加独特的名片，可以自行调整代码中的样式和属性，或者使用其他的HTML和CSS技术。总之，制作一张好的名片不仅可以提高您的职业形象和认可度，还能为您带来更多商业机会和社交资源。

avatar
文章
阅读
粉丝