My Party (Copy 10190)

✨ นางสาวปัณณพร จึงเปี่ยมสุข

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>PuRe
    </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:white;
        display:flex;
        height:350px;
        width:550px;
        border-radius:20px;
        overflow:hidden;
        box-shadow:10px 10px 10px #0232;
        margin:auto;
        margin-bottom:5em;
        transition:all .3s;
      }
      .side-left{
        background:linear-gradient(to bottom right, #3F51B5 , #3F51B5);
        width:50%;
        justify-content:center;
        align-items:center;
        display:flex;
        text-align:center;
        color:yellow;
      }
      .side-right{
        background:#FFEE58;
        color:#3949AB;
        width:55%;
        padding:1em;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        text-align:center;
        
      }
      .card-name{
        color:#303F9F;
        text-shadow:0px 2px 1px #303F9F;
        font-family: 'Pattaya', sans-serif;
        font-size:2.5em;
        text-align: center;   
      }
      .my-name{
        text-align:left;
        font-size: 1.5em;
      }
      h5{
        color:#757575;
        font-weight:600;
        font-size:0.9em;
        text-align:center;
      }
      .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:#FDD835;
        font-family: 'Pattaya', sans-serif;
        text-shadow:0px 2px 0px #424242,1px 2px 0px #283593;
      }
      .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:#3949AB;text-shadow:0px 3px 0px #424242,1px 2px 2px #FFF176">Team P'Kwan
      </span>
    </h1>
    <div class="card">
      <div class="side-left">
        <div>
          <img src="https://cdn.discordapp.com/attachments/919474079248044032/933253474227990528/1641135202578.jpg" class="card-pic">
          <h2 class="nickname" style="font-size:2.5em;text-shadow:2px 5px 0px #607D8B">
          PuRe
          </h2>
        </div>
      </div>
      <div class="side-right">
        <div>
          <h3 class="card-name" style="font-size:1.5em">
            🐬...64070183
          </h3>
          <h3 class="my-name">
             punnaporn jungpiumsuk
          </h3>
          
          <h5>
            การนอนเป็นสิ่งที่สำคัญ การนอนก็เช่นกัน
          </h5>
          <div class="social">
            <a href="https://www.instagram.com/pure_jps/">
              <i class="fab fa-instagram" style="color:#1976D2;">
              </i>
            </a>
            <a href="https://www.facebook.com/punnaporn.jungpiumsuk">
              <i class="fab fa-facebook" style="color:#1976D2;">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
   
  </body>
</html>