My Party (Branch 10141) (Copy 10289)

✨ KANLAYAKORN YEENANG

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>หมูกรอบ
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Gamja+Flower&display=swap');
      body{
        background-image: linear-gradient(180deg, #fcefa9 0%, #c7d4e4 100%);
        margin:auto;
        font-family: 'Gamja Flower', cursive;
        display: flex;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
      }
      .textbox {
        margin: auto;
        margin-bottom:2em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 600px;
        height: 70px;
        border: 3px solid black;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
        transition: 0.5s;
      }
      .card{
        background:blue;
        display:flex;
        height:300px;
        width:600px;
        border-radius:20px;
        overflow:hidden;
        box-shadow:0 1px 30px rgba(0, 0, 0, 0.25);
        margin:auto;
        transition:all .3s;
        border: 3px solid black;
      }
      .side-left{
        background: #CBBBD6;
        width:40%;
        justify-content:center;
        align-items:center;
        display:flex;
        text-align:center;
        color:white;
      }
      .side-right{
        background:white;
        color: #ff967f;
        width:60%;
        padding:1em;
 
        box-sizing:border-box;
        letter-spacing: 2px;
        display:flex;
        align-items:center;
      }
      .card-name{
        color:#33539e;
        background: #f6edaa;
        width: 315px;
        text-align: center
        font-family: 'Gamja Flower', cursive;
        letter-spacing: 4px;
        font-size:2em;
        padding-left:10px
      }
      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;
        color:#000;
        font-family: 'Abril Fatface', cursive;
        font-size: 33px;
        letter-spacing: 4px;
      }
      .card:hover, .textbox: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{
        margin: 10px;
        letter-spacing: 2px;
        font-size: 30px;
        font-family: 'Gamja Flower', cursive;
      }
      a{
        color:#fd9a7b;
        font-size:1.5em;
        transition:all .2s;
        text-decoration:none;
      }
      a:hover{
        opacity:.5;
      }
    </style>
  </head>
  <body>
    <div class="container">
    <div class="textbox">
    <h1 class="title">
      Multimedia 2021 
      <span style="color:#33539e">
      	P'Neng Party
        </span>
    </h1>
    </div>
    <div class="card">
      <div class="side-left">
        <div>
          <img src="https://cdn.discordapp.com/attachments/812749326543487058/932979768712892477/242374680_209483094447227_7027210186708039341_n.jpg" class="card-pic">
          <p class="nickname">
            My dear
          </p>
        </div>
      </div>
      <div class="side-right">
        <div>
          <h2>
            Lovely student
          </h2>
          <h3 class="card-name">
            K. Yeenang
          </h3>
          <h5>
            เมี้ยว ๆๆๆๆๆ เมี่ยว เหมียว เมี่ยว เมี้ยว เหมียวๆ โฮก ฟ่อๆๆ เมี้ยว หง่าวว
          </h5>
          <div class="social">
            <a href="https://www.instagram.com/ilovemhuukrob/">
              <i class="fab fa-instagram">
              </i>
            </a>
            <a href="https://www.facebook.com/profile.php?id=100004291367649">
              <i class="fab fa-facebook">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
    </div>
   
  </body>
</html>