My Party (Branch 10110) (Copy 10165)

✨ PORNPINIT NONGNA

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>Mark
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Pattaya&family=Sriracha&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Mochiy+Pop+P+One&family=Pacifico&display=swap');
      body{
         background:linear-gradient(to bottom, #424242 , #EEEEEE);
        font-family:sans-serif;
        margin:2em;
        font-family: 'Sriracha', cursive;
      }
      .card{
        background:green;
        display:flex;
        height:300px;
        width:600px;
        border-radius:20px;
        overflow:hidden;
        box-shadow:0px 10px 10px #424242;
        margin:auto;
        margin-bottom:5em;
        transition:all .3s;
      }
      .side-left{
        background:linear-gradient(to bottom, #424242 , #EEEEEE);
        width:40%;
        justify-content:center;
        align-items:center;
        display:flex;
        text-align:center;
        color:white;
      }
      .side-right{
        background:white;
        color:#424242;
        width:60%;
        padding:1em;
        box-sizing:border-box;
        display:flex;
        align-items:center;
      }
      .card-name{
        color:#424242;
        text-shadow:0px 1px 1px #212121;
        font-family: 'Pattaya', sans-serif;
        font-size:2em;
      }
      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:#FAFAFA;
        font-family: 'Pacifico', cursive;
        font-size: 50px;
        text-shadow:0px 2px 0px black,0px 4px 0px black;
      }
      .card:hover{
        transform:scale(1.1) rotate(2deg) translatey(-5%);
        box-shadow:0px 30px 15px #424242;
      }
      .card:hover .card-pic{
        width:70%;
        transform:rotate(-10deg);
        border:10px solid #424242;
      }
      .nickname{
        font-family: 'Pattaya', sans-serif;
        color:#212121;
      }
      a{
        color:#212121;
        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:#9E9E9E">All Party
      </span>
    </h1>
    <div class="card">
      <div class="side-left">
        <div>
          <img src="https://cdn.discordapp.com/attachments/932956004675633234/932956060711542834/facebookprofile.jpg" class="card-pic">
          <h2 class="nickname">
            Mark
          </h2>
        </div>
      </div>
      <div class="side-right">
        <div>
          <h3>
            Student 💻
          </h3>
          <h3 class="card-name">
            Phuriwat PT.
          </h3>
          <h5>
            Nice to meet you all !
          </h5>
          <div class="social">
            <a href="https://www.facebook.com/profile.php?id=100008543405993">
              <i class="fab fa-facebook">
              </i>
            </a>
            <a href="https://instagram.com/o_phuriwat_o">
              <i class="fab fa-instagram">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
   
  </body>
</html>