TonNam (Copy 10335)

✨ THAMPAPON PRATHUM

<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=Yesteryear&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Maitree:wght@200&display=swap');
      body{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933709211488104499/wall.jpg");
      width:1820px;
      height:1580px;
        margin:4em;
        font-family:sans-serif;
        text-align:center;
      }
      .card{
        width:300px;
        height:400px;
        margin:1em;
        transform:translatey(5em);
        perspective: 2000px;
        transition:all .5s;
        display:inline-block;
      }
      .card-inner{
        transform-style: preserve-3d;
        position:relative;
        width:100%;
        height:100%;
        transition:box-shadow .5s,transform 1s;
        transform: rotateY(0deg);
        box-shadow:0em .5em 1em #0002;
        border-radius:1em;
      }
      .card-side{
        border-radius:1em;
        position:absolute;
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        height:100%;
        backface-visibility: hidden;
      }
      .card-front1{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933680707350437938/pong.jpg");
      }
      .card-front2{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933712630814765116/tonnam.jpg");
      }
      .card-front3{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933712630814765116/tonnam.jpg");
      }
      .card-front4{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933713006918004756/ton.jpg");
      }
      .card-front5{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933683670995329084/pj.jpg");
      }
      .card-front6{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933680332853628948/game.jpg");
      }
      .card-front7{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933680332232851527/aum.jpg");
      }
      .card-front8{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933680332006363156/peak.jpg");
      }
      .card-front9{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933680331763101696/tun.jpg");
      }
      .card-front10{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933680332656508938/non.jpg");
      }
      .card-front11{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933680332463546420/lo.jpg");
      }
      .card-back{
        background-image: url("https://cdn.discordapp.com/attachments/930100919956287498/933705319614398474/blank.jpg");
        transform: rotateY(180deg) rotateZ(180deg);
      }
      .card-logo{
        font-size:3rem;
      }
      a{
        text-decoration:none;
        color:black;
        font-weight:bold;
      }
      .card:hover{
        transform:translatey(0em);
      }
      .card:hover .card-inner{
        box-shadow:0em 3em 3em #0002;
      }
      .card:target .card-inner{
        transform: rotateY(180deg) rotateZ(180deg);
      }
      .bottom{
        background:#fffc;
        position:fixed;
        left:0;
        bottom:0;
        padding:.5em;
        z-index:100;
        width:100%;
        color:grey;
      }
      .card-pic{
        width:60%;
        overflow:hidden;
        transition:all .3s;
        margin-top:-1.35em;
      }
      .card-name{
        color:#422221;
        font-family: 'Yesteryear', cursive;
        font-size:3em;
        margin-top:-1.35em;
      }
      .card-name2{
        color:#422221;
        font-family: 'Yesteryear', cursive;
        font-size:2em;
       	margin-top:-1.35em;
      }
      .card-name3{
        color:#422221;
        font-family: 'Maitree', serif;
        font-size:20px;
       	margin-top:1em;
      }
      .card{
      position: absolute;
      }
    #card-1{
			top:200;
        left:20px;
      
      }
      #card-2{
			top:450;
        left:965;
      }
      #card-3{
			top:50;
        left:500;
        
      }
      #card-4{
			top:-100;
        left:965;
      }
      #card-5{
			top:50;
        left:1430;
      }
      #card-6{
			top:200;
        left:1895;
      }
      #card-7{
			top:700;
        left:20px;
      }
      #card-8{
			top:850;
        left:500;
      }
      #card-9{
			top:1000;
        left:965;
      }
      #card-10{
			top:850;
        left:1430;
      }
      #card-11{
			top:700;
        left:1895;
      }
      #desk{
		position: relative;
      width:1820px;
      height:1580px;
      background:;
      margin:auto;
      }
    
    </style>
  </head>
  <body>
    <div id="desk">
    <div class="bottom">
      <a href="#card-2">P'Jean
      </a> | 
      <a href="#card-1">Pong
      </a> | 
      <a href="#card-3">TonNam
      </a> | 
      <a href="#card-4">Ton
      </a> | 
      <a href="#card-5">PJ
      </a> | 
      <a href="#card-6">Game
      </a> | 
      <a href="#card-7">AUM
      </a> | 
      <a href="#card-8">Peak
      </a> | 
      <a href="#card-9">Tun
      </a> | 
      <a href="#card-10">Non
      </a> | 
      <a href="#card-11">Lo
      </a>
      
    </div>
    <a href="#card-1">
      <div class="card" id="card-1">
        <div class="card-inner">
          <div class="card-side card-back">
          </div>
          <div class="card-side card-front1">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933677633839988786/271626971_4772767646094277_7152541870506499194_n.png" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    <a href="#card-2">
      <div class="card" id="card-2">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐓
            </div>
          </div>
          <div class="card-side card-front2">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933665901591560212/34392478_1687151208034394_2829855734022275072_n.png" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    <a href="#card-3">
      <div class="card" id="card-3">
        <div class="card-inner">
          <div class="card-side card-back">
            <div>
				<h3 class="card-name">
              Parin Dechakorn
              </h3>
              <h3  class="card-name2">
              64070064
            </h3>
          <h3  class="card-name3">
              ต้นน้ำ เองคับ เรียนออนไลน์ <br>กายออนเบท ขอบคุณครับ
          </h3>
              <div class="social">
            	 <a href="https://www.facebook.com/profile.php?id=100004047060360">
                  <i class="fab fa-facebook" ></i>
                </a>
             
              </div>
            </div>
            <div class="card-logo">
              
            </div>
          </div>
          <div class="card-side card-front3">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933678697586753616/unknown.png" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    <a href="#card-4">
      <div class="card" id="card-4">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front4">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/700312699015266304/933702304438292500/IMG_4759_1.png" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    <a href="#card-5">
      <div class="card" id="card-5">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front5">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933712557657690182/271752249_1128246207933644_8016860714260175824_n.jpg" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    <a href="#card-6">
      <div class="card" id="card-6">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front6">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933675404974227497/unknown.png" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    <a href="#card-7">
      <div class="card" id="card-7">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front7">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933676465327833138/aum.jpg" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    <a href="#card-8">
      <div class="card" id="card-8">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front8">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/415510080130383875/933701373571264552/1642671076943.png" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
      <a href="#card-9">
      <div class="card" id="card-9">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front9">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933677264040771594/80CF3D35-020E-4B52-AF5D-866E50ADC6F1_1_201_a.jpeg" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
      <a href="#card-10">
      <div class="card" id="card-10">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front10">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933675808445308958/272226541_4397587277012256_1314267784790888710_n.jpg" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
      <a href="#card-11">
      <div class="card" id="card-11">
        <div class="card-inner">
          <div class="card-side card-back">
            <div class="card-logo">
              🐅
            </div>
          </div>
          <div class="card-side card-front11">
            <div class="card-logo">
              <img src="https://cdn.discordapp.com/attachments/930100919956287498/933676280128352256/IMG_20220120_142644.jpg" class="card-pic">
            </div>
          </div>
        </div>
      </div>
    </a>
    </div>
  </body>
</html>