Anuwat Prasit (Copy 10227)

✨ ANUWAT PRASIT

<html>
  <head>
    <title>Let's Start</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap");
      * {
        margin: auto;
        box-sizing: border-box;
        font-family: "Poppins", kanit;
      }
      body {
        min-height: 100vh;
        background-color: #161623;
      }
      body::before {
        content: "";
        position: fixed;
        top: -250;
        right: 0;
        width: 140%;
        height: 170%;
        background: linear-gradient(#2196f3, #e91e63);
        clip-path: circle(100% at right 70%);
      }
      /*container of card*/
      .container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1200px;
        flex-wrap: warp;
        z-index: 1;
      }
      .container h1 {
        margin-top: 30px;
        color: #fff;
        position: relative;
        font-size: 3em;
        font-weight: 900;
      }
      .container h1 span {
        color: #ff022c;
      }
      .container h1 a {
        color: #ff022c;
        text-decoration: none;
        transition: 0.5s;
      }
      .container h1 a:hover {
        color: #ff3456;
      }
      /*Card profile*/
      .card {
        width: 380px;
        height: 400px;
        margin: 30px;
        box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(5px);
      }
      /*Card hover*/
      .card:hover {
        cursor: default;
      }
      .card:hover .content {
        transform: translatey(-140px);
        opacity: 1;
      }
      .card:hover .avatar {
        transform: translatey(-300px);
        opacity: 1;
        width: 100%;
      }
      /*Card content*/
      .content {
        padding: 20px;
        text-align: center;
        transform: translatey(300px);
        transition: 0.5s;
      }
      .content h2 {
        position: fixed;
        font-size: 30vh;
        top: -130px;
        right: 2px;
        color: rgba(255, 255, 255, 0.05);
      }
      .content h3 {
        font-size: 1.8em;
        color: #fff;
      }
      .content p {
        font-size: 1.2em;
        color: #fff;
        font-weight: 300;
      }
      .content a {
        position: relative;
        display: inline-block;
        padding: 8px 8px;
        margin-top: 15px;
        background: #fff;
        color: #000;
        border-radius: 20px;
        text-decoration: none;
        font-weight: 500;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }
      .content a:hover {
        cursor: pointer;
      }
      .content i {
        font-size: 20px;
        color: blue;
        transition: 0.5s;
      }
      .avatar {
        padding: 2rem;
        transform: translatey(50px);
        transition: 0.5s;
      }

.avatar img {
        display: flex;
        width: 200px;
        height: 200px;
        border-radius: 100%;
        object-fit: cover;
        object-position: center;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
      integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp"
      crossorigin="anonymous"
    />
  </head>

<body>
    <div class="container">
      <h1>
        
      </h1>
    </div>
    <div class="container">
        <div class="card">
          <div class="avatar">
            <img
              src="https://cdn.discordapp.com/attachments/910202907973009500/934090170230243428/30707.jpg"
            />
          </div>
          <div class="content">
            <h3>Anuwat Prasit</h3>
            <p>the world is cold better bundle up</p>
            <a href="" target="_blank">
            <i class="fab fa-facebook"></i>
            <a href="" target="_blank">
            <i class="fab fa-instagram"></i>
          </a>
          </a>
          </div>
        </div>
      </div>
  </body>
</html>