当青训营遇上码上掘金

今天选择的主题1：我的名片。

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

想了下怎么在html上展示出名片出来，于是我的思路是创建一个Home页来做自我介绍，但因为不熟悉马上掘金所以有资源没有展示出来。

header部分

<header>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Me</a></li>
          <li><a href="#">Some Project</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
  </header>

就照着这样做，分四个部分，但只做了Home页。

main部分

 <main>
        <div class="card">
          <div class="left">
            <h2>寻常</h2>
            <h3>在校学生</h3>
            <hr>
            <p>
              &nbsp;&nbsp;先不谈正经的，谈谈爱好之类的。喜欢看番剧，二次元浓度一般般。之前看V看的比较多，现在V87版本已经跟不上了。游戏方面的话，FPS玩的跟SHIT一样333333，lol也玩的比较少了，但有4年丰富的观赛经验，算是核心观众了。
            </p>
            <span>
              Click It Know More
            </span>
            <div class="social">
              <a href="#">
                <i class="fa-brands fa-github"></i>
              </a>
              <a href="#">
                <i class="fa-brands fa-linkedin"></i>
              </a>
              <a href="#">
                <i class="fa-brands fa-google"></i>
              </a>
            </div>
          </div>
          <div class="right">
            <img src="./images/photo1.png" alt="Photo" width="320">
          </div>
        </div>
      </main>

CSS部分

:root {
    font-size: 10px;
    --cyan-light: #5cdbd3;
    --blue-light: #69c0ff;
    --yellow-light: #fbf9bf;
}

@mixin fontstyle {
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

@mixin imgstyle {
    filter: drop-shadow(0px 0px 5px black) invert(1);
}

html,
body {
    display: grid;
    place-items: center;
    background:linear-gradient(to right bottom, var(--cyan-light),var(--blue-light));
}

#app {
    width: 100%;
    height: 100%;
    max-width: 120rem;
    display: flex;
    flex-direction: column;
    font-size: 24px;
    font-weight: 200;
    a {
        @include fontstyle;
    }
    @include fontstyle;
    & header {
        display: flex;
        margin: 1rem 0;
        font-weight: 400;
        ul{
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: space-evenly;
            align-items: center;
            li {
                a {
                    @include fontstyle;
                }

                animation-duration: 500ms;
                animation-name: fillUp;
                animation-timing-function: cubic-bezier(0.76, 0.02, 0.43, 1.3);
                &:nth-child(1) {
                    animation-delay: 100ms;
                }
                &:nth-child(2) {
                    animation-delay: 220ms;
                }
                &:nth-child(3) {
                    animation-delay: 340ms;
                }
                &:nth-child(4) {
                    animation-delay: 460ms;
                }
            }
        }     
    }

    & main {
        flex-grow: 1;
        display: grid;
        place-items: center;
        .card {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 3rem;
            padding: calc(2rem + 4%) calc(2rem + 6%);
            height: 50%;
            max-height: 50rem;
            min-height: 40rem;
            box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.2);
            border-radius: 1rem;
            .left {
                width: 40rem;
                display: flex;
                flex-direction: column;
                height: 40rem;
                hr {
                    background-color: #fff;
                    border: 0.5px solid;
                    content: "";
                    height: 1px;
                    margin: 1.5rem 0;
                    transform-origin: center left;
                    width: 10rem;
                }

                h2 {
                    font-size: 5rem;
                    font-weight: 300;
                }

                h3 {
                    font-size: 2rem;
                    font-weight: 200;
                    color: var(--yellow-light);
                }

                span {
                    text-align: center;
                    text-shadow: none;
                    width: 20rem;
                    margin: 1rem 0;
                    padding: 1rem;
                    border-radius: 2rem;
                    box-shadow: 0 1.5rem 3rem  rgba(0,0,0,0.2);
                    background-color: white;
                    color: var(--blue-light);
                    font-size: 16px;
                    font-weight: 400;
                    transition: 0.2s;
                    &:hover {
                        color: var(--yellow-light);
                        background-color: var(--blue-light);
                    }
                }
                .social {
                    display: flex;
                    gap: 2rem;
                }
            }

            .right {
                img {
                    padding: 1rem;
                    margin: 1rem;
                    border-radius: 50%;
                    box-shadow: 0 0 10px rgba(0,0,0,0.2);
                }
            }
        }
        
    }

    & footer {
        display: grid;
        place-items: center;
        ul {
            display: flex;
            li {
                padding: 1rem 3rem;
                a {
                    img {
                        @include imgstyle()
                    }
                }

                animation-duration: 500ms;
                animation-name: fillUp;
                animation-timing-function: cubic-bezier(0.76, 0.02, 0.43, 1.3);
                &:nth-child(1) {
                    animation-delay: 100ms;
                }
                &:nth-child(2) {
                    animation-delay: 220ms;
                }
                &:nth-child(3) {
                    animation-delay: 340ms;
                }
            }
        }
    }
}