profile.css

/* 定义全局色板 */
:root {
  /* 主蓝色，按钮，社交图标 */
  --primary-color: #71b3dd;
  /* 主蓝色，深，导航 */
  --primary-dark-color: #4489b5;
  --text-color-gray: #8b979f;
  --text-color-light-gray: #c1c7cb;
  --text-color-dark-gray: #5a6f7c;
}

/* 容器为栅格布局 */
.container {
  display: grid;
  box-shadow: 0px 10px 20px 5px lightgrey;
  width: 700px;
  margin: 100px auto;
}

.container>div {
  margin-left: 30px;
}

/* 划分为4等分,基本信息占3份,你的帅照占1份 */
.basic-info {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

/* 图片大小调整下,位置也需要进行平移 */
.me {
  width: 100%;
  border-radius: 50%;
  transform: translateX(-30%) translateY(9%);
}

/* 社交按钮部分 */
footer {
  margin-top: 20px;
  text-align: center;
}

footer ul {
  display: flex;
}

footer ul li {
  list-style: none;
  margin: auto;
}

footer .fab {
  color: var(--primary-color);
  font-size: 24px;
}

footer .fas {
  color: var(--primary-color);
  font-size: 24px;
}

/* 鼠标悬停,字体颜色变化 */
h1:hover {
  color: pink;
}

h2:hover {
  color: blue;
}

div p:hover {
  color: var(--primary-color);
}