TonNam (Branch 10122) (Copy 10273)

✨ PUTTHIPONG CHOBNGAM

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>TonNamXD
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Pattaya&family=Sriracha&display=swap');
      body{
        background:linear-gradient(to bottom right, #BBDEFB , #E53935);;
        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:10px 10px 10px #0232;
        margin:auto;
        margin-bottom:5em;
        transition:all .3s;
      }
      .card2{
        background:blue;
        display:grid;
        height:600px;
        width:300px;
        border-radius:50px;
        overflow:hidden;
        box-shadow:10px 10px 10px #0232;
        margin:auto;
        margin-bottom:5em;
        transition:all .3s;
      }
      .side-left{
        background:linear-gradient(to bottom right, #4FC3F7 , #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:#FF1744;
        text-shadow:0px 1px 1px #D500F955;
        font-family: 'Pattaya', sans-serif;
        font-size:2em;
        text-shadow:0px 2px 0px white,0px 4px 1px #666a;
      }
      .side-left2{
        background:linear-gradient(to bottom right, #4FC3F7 , #FF1744);
        width:100%;
        justify-content:center;
        align-items:center;
        display:flex;
        text-align:center;
        color:white;
      }
      .side-right2{
        background:white;
        color:#FF1744;
        width:100%;
        padding:2em;
        box-sizing:border-box;
        display:flex;
        align-items:center;
      }
      .card-name2{
        color:#FF1744;
        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:1.5em;
        margin-top:2em;
        color:#AA00FF;
        font-family: 'Pattaya', sans-serif;
        text-shadow:0px 2px 0px white,0px 4px 1px #666a;
        transition:all .5s;
      }
      .title:hover{
        transform:scale(1.3) rotate(2deg) translatey(-5%);
        letter-spacing: 3px;
      }
      .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;
      }
      .card2:hover{
        transform:scale(1.1) rotate(2deg) translatey(-5%);
        box-shadow:0px 30px 15px #0231;
      }
      .card2:hover .card-pic{
        width:60%;
        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">P'Jean Party
      </span>
    </h1>
    <div class="card">
      <div class="side-left">
        <div>
          <img src="https://cdn.discordapp.com/attachments/700312699015266304/932949469975183410/243746893_935153967213385_4533250041953627897_n.jpg" class="card-pic">
          <h2 class="nickname">
            TonNam
          </h2>
        </div>
      </div>
      <div class="side-right">
        <div>
          <h3 class="card-name">
          	
          </h3>
          <h3 class="card-name">
            TonNam Parin
          </h3>
          <h3>
            64070064
          </h3>
          
          <h5>
             ต้นน้ำ เองคับ เรียนออนไลน์ กายออนเบท ขอบคุณครับ
          </h5>
          <div class="social">
            <a href="https://www.facebook.com/profile.php?id=100004047060360">
              <i class="fab fa-facebook">
              </i>
            </a>
            <a href="https://www.instagram.com/tonnam_exe/">
              <i class="fab fa-instagram">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
   
  </body>
  <body>
    <div class="card2">
      <div class="side-left2">
        <div>
          <img src="https://cdn.discordapp.com/attachments/700312699015266304/932949469975183410/243746893_935153967213385_4533250041953627897_n.jpg" class="card-pic">
          <h2 class="nickname">
            TonNam
          </h2>
        </div>
      </div>
      <div class="side-right2">
        <div>
          <h3 class="card-name2">
          	
          </h3>
          <h3 class="card-name2">
            TonNam Parin
          </h3>

<h5>
             ตั้งใจเรียนทุกคาบ แต่ไม่ทราบอะไรเลย ขอบคุณครับ
          </h5>
          <div class="social">
            <a href="https://www.facebook.com/profile.php?id=100004047060360">
              <i class="fab fa-facebook">
              </i>
            </a>
            <a href="https://www.instagram.com/tonnam_exe/">
              <i class="fab fa-instagram">
              </i>
            </a>
          </div>
        </div>
      </div>
    </div>
   
  </body>
  
</html>