简约个人简历

2021/8/15 23:05:57
编程Tag： var text color 个人简历 Card -- XXXXX 简约
本文主要是介绍简约个人简历，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
在线XX
名字
xxxxxx专业
xxxxxx666
xxxxxxxxxx@qq.com
工作经验
xxxxxxxxxx集团时间:[2020.9-至今] 职责:xxxxxxxxxx
xxxxx公司时间:[2019.10-2020.8] 职责:xxxxxxxxxx
技术栈
js css vue 个人项目
xxxxx网址
xxxxx网址
xxxxx网址
在线项目
xxxxx网址
xxxxx网址
<!--
 * @Descripttion: 个人网页模板
 * @version: 1.00
 * @Author: wenlong
 * @LastEditors: 文龙
-->
<!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" />
  <title>XXX</title>
  <!-- <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./style.css" /> -->
  <style>
    :root {
      --primary: #abc4ff;
      --secondary: #4ecdc4;
      --red: #c44536;
      --pink: #ff8fab;
      --text-large: 1.8rem;
      --text-small: 1.2rem;
      --text-middle: 1.5rem;
      --dark: #192a51;
    }

    .text-large {
      font-size: var(--text-large);
      color: var(--dark);
    }

    .text-dark {
      font-size: var(--text-middle);
      color: var(--dark);
      font-weight: bold;
    }

    .text-strong {
      font-size: var(--text-small);
      font-weight: bold;
      animation: text-strong 0.2s forwards ease-in-out;
    }

    .text-strong::first-letter {
      color: var(--dark);
      font-size: var(--text-large);
    }

    .program-card,
    .link-card {
      padding: 0.5rem;
      color: var(--dark);
      border-left: 5px solid var(--dark);
      margin: 0.5rem 0;
      animation: card 0.5s forwards ease-in-out;
      animation-delay: 0.2s;
      opacity: 0;
    }

    .program-card span::before,
    .link-card span::before {
      content: "";
      border-bottom: 2px solid;
      transition: all 0.5s;
      position: absolute;
      bottom: -3px;
      width: 0;
      left: 0;
    }

    .program-card span,
    .link-card span {
      position: relative;
      cursor: pointer;
      padding-bottom: 0.1rem;
      padding: 0 .5rem;
    }

    .program-card span:hover::before,
    .link-card span:hover::before {
      width: 100%;
      color: var(--primary);
    }

    .link-card {
      position: relative;
    }

    .link-card:after {
      content: "链接";
      font-size: 12px;
      opacity: 0.2;
      position: absolute;
      left: 50%;
    }

    .link-card span::after {
      content: attr(data-tip);
      position: absolute;
      top: -10px;
      right: -2rem;
      width: fit-content;
      color: var(--secondary);
      font-size: 12px;
    }

    .item .techn-list {
      padding-bottom: 20px;
    }

    .wrap   .item .techn-list span {
      border: 1px solid var(--secondary);
      border-radius: 5px;
      padding: 2px 10px;
      font-size: 0.8rem;
      cursor: pointer;
    }

    @keyframes card {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    *:not(summary) {
      margin: 0;
      padding: 0;
      outline: none;
      text-decoration: none;
      list-style: none;
      color: var(--dark);
    }

    *::selection {
      color: var(--pink);
    }

    *::-webkit-scrollbar {
      display: none;
    }

    .wrap  a {
      position: relative;
    }

    .wrap a::before {
      content: "";
      width: 5px;
      height: 5px;
      border-top: 2px solid var(--primary);
      border-left: 2px solid var(--pink);
      left: -10px;
      position: absolute;
      top: -2px;
    }

    .wrap a::after {
      content: "";
      width: 5px;
      height: 5px;
      border-bottom: 2px solid var(--dark);
      border-right: 2px solid var(--secondary);
      right: -10px;
      position: absolute;
      bottom: -2px;
    }

    a:hover {
      color: var(--pink);
    }

    body,
    html {
      background-color: rgba(245, 245, 245, 0.151);
    }

    @keyframes text-strong {
      0% {
        transform: translateY(-200px);
      }

      100% {
        transform: translateY(0);
        color: var(--primary);
      }
    }

    div.wrap {
      padding: 50px 200px;
    }

    div.wrap .body {
      columns: 2;
    }

    div.wrap .body .item {
      page-break-inside: avoid;
      page-break-before: avoid;
      page-break-after: avoid;
    }

    div.wrap .body .item hr {
      margin: 1rem 0;
      width: clamp(10rem, 30%, 10vw);
    }

    div.wrap .intro {
      padding: 1.5rem 1.5rem 0 1.5rem;
    }

    @media screen and (max-width: 720px) {
      div.wrap {
        padding: 5px 20px;
      }

      div.wrap .body {
        columns: 1;
      }
    }
  </style>
</head>

<body>
  <div class="wrap">
    <nav class="text-large ">在线XX</nav>
    <br />
    <div class="body">
      <div class="item">
        <div>
          <div class="text-strong">名字</div>
          <hr />
          <ul>
            <li class="program-card"><span>xxxxxx专业</span></li>
            <li class="program-card"><span>xxxxxx666</span></li>
            <li class="program-card"><span>xxxxxxxxxx@qq.com</span></li>
          </ul>
        </div>
        <br />
        <div>
          <div class="text-strong">工作经验</div>
          <hr />
          <ul>
            <li class="program-card">
              <details open>
                <summary>xxxxxxxxxx集团</summary>
                <div class="intro">时间:[2020.9-至今]</div>
                <div class="intro">职责:xxxxxxxxxx</div>
              </details>
            </li>
            <li class="program-card">
              <details>
                <summary>xxxxx公司</summary>
                <div class="intro">时间:[2019.10-2020.8]</div>
                <div class="intro">职责:xxxxxxxxxx</div>
              </details>
            </li>
          </ul>
        </div>
      </div>

      <div class="item">
        <div>
          <div class="text-strong">技术栈</div>
          <hr />
          <div class="techn-list">
            <span>js</span>
            <span>css</span>
            <span>vue</span>
          </div>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="text-strong">个人项目</div>
          <hr />
          <ul>
            <li class="link-card"><span data-tip="个人">xxxxx网址</span></li>
            <li class="link-card"><span data-tip="个人">xxxxx网址</span></li>
            <li class="link-card"><span data-tip="个人">xxxxx网址</span></li>
          </ul>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="text-strong">在线项目</div>
          <hr />
          <ul>
            <li class="link-card"><span data-tip="企业">xxxxx网址</span></li>
            <li class="link-card"><span data-tip="企业">xxxxx网址</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
这篇关于简约个人简历的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
简约个人简历

相关编程文章
