个人卡片 |「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金。

前言

卡片确实做的有些简单，不喜勿喷~

主题

我的名片

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

卡片演示

卡片实现

• 基本卡片整体布局采用 flex 布局；整体卡片以 flex 布局固定在页面内，卡片内部以 flex 布局分为左部 icon 及右部文字描述两部分，文字描述部分以 flex 布局分为上部 nickname 和下部 description 两部分。
• 卡片整体背景采用金色-粉色的渐变色，提升卡片的活泼程度；同时卡片设置合适大小的圆角以及背景色。
• 卡片个人头像部分使用原生 HTML img 元素属性 width 和 height 以及 CSS 属性 width 属性和 height 属性共同控制图像大小尺寸，同样设置圆角（圆角尺寸略小于卡片整体的圆角大小），同时适当调整头像的透明度以能够和卡片背景色产生一定程度的混合产生更好的效果。
• 卡片文字描述部分，昵称部分设置粗体并设置合适的字体大小；同理个人简介部分亦设置合适的字体大小，略小于昵称字体大小。

卡片源码

如下展示卡片的主要的源码，包括 HTML 部分 和 CSS 部分（使用 SCSS 编写）。

HTML 部分：

<div id="card">
  <img class="avatar" width="100" height="150" src="https://p26-passport.byteacctimg.com/img/user-avatar/0d3fce9466ddba4f195702f745fde5b2~300x300.image" alt="" decoding="sync" fetchpriority="high" crossorigin="anonymous" loading="eager" />
  <div class="content">
    <div class="nickname">昵称：skyclouds2001</div>
    <div class="description">简介：一枚前端学习人~</div>
  </div>
</div>

CSS 部分：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#card {
  width: 350px;
  height: 200px;
  margin: 0;
  padding: 20px;

  background-image: linear-gradient(to right, gold, pink);
  border-radius: 10px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  > div {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 10px;
  }

  .avatar {
    width: 100px;
    height: 150px;

    border-radius: 5px;
    opacity: 0.75;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    > div {
      word-break: break-all;
    }

    .nickname {
      font-weight: bold;
      color: #333;
    }

    .description {
      font-size: 14px;
      color: #333;
    }
  }
}