My Party (Copy 10118)

✨ SASITHORN SRIJUN

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>Jabont
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Pattaya&family=Sriracha&display=swap');
      body{
        background:#eee;
        font-family:sans-serif;
        margin:2em;
        font-family: 'Sriracha', cursive;
      }
      .card{
        background:blue;
        display:flex;
        height:300px;
        width:600px;
        border-radius:20px;
        overflow:hidden;
        box-shadow:0px 10px 10px #0232;
        margin:auto;
        margin-bottom:5em;
        transition:all .3s;
      }
      .side-left{
        background:linear-gradient(to bottom right, #AA00FF , #FF1744);
        width:40%;
        justify-content:center;
        align-items:center;
        display:flex;
        text-align:center;
        color:white;
      }
      .side-right{
        background:white;
        color:#FF1744;
        width:60%;
        padding:1em;
        box-sizing:border-box;
        display:flex;
        align-items:center;
      }
      .card-name{
        color:#AA00FF;
        text-shadow:0px 1px 1px #D500F955;
        font-family: 'Pattaya', sans-serif;
        font-size:2em;
        text-shadow:0px 2px 0px white,0px 4px 1px #666a;
      }
      h5{
        color:#888;
        font-weight:500;
      }
      .card-pic{
        width:60%;
        overflow:hidden;
        border-radius: 50%;
        margin-top:2em;
        border:10px solid #fffa;
        transition:all .3s;
      }
      .title{
        text-align:center;
        margin-bottom:2em;
        margin-top:2em;
        color:#AA00FF;
        font-family: 'Pattaya', sans-serif;
        text-shadow:0px 2px 0px white,0px 4px 1px #666a;
      }
      .card:hover{
        transform:scale(1.1) rotate(2deg) translatey(-5%);
        box-shadow:0px 30px 15px #0231;
      }
      .card:hover .card-pic{
        width:70%;
        transform:rotate(-10deg);
        border:5px solid #fffa;
      }
      .nickname{
        font-family: 'Pattaya', sans-serif;
      }
      a{
        color:#FF1744;
        font-size:1.5em;
        transition:all .2s;
        text-decoration:none;
      }
      a:hover{
        opacity:.5;
      }
    </style>
  </head>
  <body>
    <h1 class="title">
      Multimedia 2021 
      <span style="color:#FF1744">All Party
      </span>
    </h1>
    <div class="card">
      <div class="side-left">
        <div>
          <img src="https://cdn.discordapp.com/attachments/930418797742014505/932938594522398740/109169745_10220668417733377_4224478972945688457_n.png" class="card-pic">
          <h2 class="nickname">
            Jabont
          </h2>
        </div>
      </div>
      <div class="side-right">
        <div>
          <h3>
            Teaching Director 😎 
          </h3>
          <h3 class="card-name">
            Chamikorn Ph
          </h3>
          <h5>
            วันนึงฉันตื่นสาย เข้าเรียนไม่ทัน แต่ไม่เป็นไรหรอก เพราะฉันเป็นคนสอน..
          </h5>
          <div class="social">
            <a href="https://instagram.com/jabont">
              <i class="fab fa-instagram">
              </i>
            </a>
            <a href="https://twitter.com/jabont">
              <i class="fab fa-twitter">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
   
  </body>
</html>