Simple Web (Branch 10092) (Copy 10375)

✨ AKHABHOP KHUNKITTI

<html>
  <head>
    <title>SecB Party P'[Arin]</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
      integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp"
      crossorigin="anonymous"
    />
    <style>
    	body{
  		  align-items: center;
        justify-content: center;
        font-family: sans-serif;
  		  background: #006699 url('https://cdn.discordapp.com/attachments/932912268180619274/934395100560232478/fgqwe2232.png') no-repeat;
  		  -webkit-background-size: cover;
  		  background-size: cover;
  		  background-repeat: no-repeat;
  		  background-attachment: fixed;
  	 	  background-position: center;
  		  width: 100vw;
  		  margin: 0;
  		  min-height: 50vh;
		}
      .card-container {
    	  position: relative;
    	  width: 65vmin;
    	  height: 90vmin;
        justify-content: center;
        align-items: center;
        
   	}
      .card {
    	  position: absolute;
         top:  50%;
  			left: 150%;
  			margin: -50% 0 0 -50%;
    	  width: 100%;
    	  height: 110vh;
    	  background-color: #fafafa;
    	  border-radius: 2px;
    	  box-shadow: 2px 2px 5px rgba(17, 17, 17, 0.35);
    	  transition: transform 1.5s ease-out;
    	  transform: translate(var(--x), var(--y)) scale(0.35) rotate(var(--angle));
    	  will-change: transform;
    	  min-width: 150px ;
    	  min-height: 175px ;
    	}
		.card:hover {
        transform: scale(0.75) rotate(0deg);
    	  z-index: 1;
		}
		.card:hover:before {
    	  opacity: 1;
		}
		.card:before {
    	  content: "";
    	  display: block;
    	  width: 90%;
    	  height: 65%;
        margin: 5%;
        background: var(--image) center center no-repeat;
        background-size: cover;
        box-shadow: inset 0 0 5px rgba(34, 34, 34, 0.35);
        border-radius: 2px;
        filter: sepia(0.2) brightness(0.8) contrast(1.3);
        transition: opacity .50s ease-out;
        opacity: 0.9;
        will-change: opacity;
		}
		.card:after {
        display: block;
        content: var(--caption);
        font-weight: 500;
        color: #555;
        font-size: 3vmin;
        opacity: .75;
        text-align: center;
		}
/* Paragraph */
		p{
  		  text-align: center;
  		  font-size: 25px;
  		  color: gray;
 		}
/* ICON */
		fb{
  		  font-size: 3.5vw;
  		  background-color: #3b5999;
        /* ตัด background text ให้อยู่ใน text */
  		  -webkit-background-clip: text; 
  		  color: transparent;
  		  transition: 0.5s;
		}
		ig{
  		  font-size: 3.5vw;
  		  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 		75%,#bc1888 100%); 
  		  -webkit-background-clip: text;
  		  color: transparent;
  		  transition: 0.5s;
		}
      dis{
        font-size: 3.5vw;
        background-color: #6267DC;
        -webkit-background-clip: text;
        color: transparent;
        transition: 0.5s;
		}
      .content{
        padding: 20px;
  		  text-align: center;
  		  font-size: 1.5em;
  		  color: gray;
 		}
      .content h3{
        font-size: 1.5vw;
        color: gray;
      }
      .content p{
		  font-size: 1.5vw;
        color:  gray;
        font-weight: 300;
      }
      /* icon hover */
      a {
        position: relative;
        display: inline-block;
        padding: 8px 8px;
        margin-top: auto;
        background: #fff;
        color: #000;
        border-radius: 20px;
        text-decoration: none;
        font-weight: 500;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        font-size:1.5em;
        transition:all .2s;
		}
		a:hover{
        opacity:.5;
      }
    </style>
  </head>
  <body> 
    
    
    
    <div class="card-container">
      <div class="card"
           style="--image: url('https://scontent.fbkk5-4.fna.fbcdn.net/v/t1.6435-9/134372666_2851472108421234_1650577855754040748_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=174925&_nc_eui2=AeGTzOZAeWiyfCsb3zLUBMYk9PpBrx_88of0-kGvH_zyh9LPL7MgV_6XeIi9BTEyiHzYgOCr6LWI0T9na29xj_G_&_nc_ohc=Tz9fJ1jNPCMAX_gmWWQ&tn=z043w2N_OzTLN46b&_nc_ht=scontent.fbkk5-4.fna&oh=00_AT8YxKvLSb72JQtjVEZ4pqUKsa4CATUmZzwPZS6UYnA92A&oe=62120B55'); --angle: 9deg; --x: 32%; --y: -10%; --caption: ''">
        <div class="content">
          <h3>[ P Arin - TA ]</h3>
          
          <a target="_blank" href="https://www.facebook.com/arinnaline"><fb class="fab fa-facebook"></fb></a>
          
          <a href="https://www.instagram.com/_arinnaline/" target="_blank"><ig class="fab fa-instagram-square"></ig></a>
          
          <a target="_blank" href="https://discordapp.com/users/241596955715829770/"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    </div>
    
    
    <div class="card-container">
      <div class="card"
           style="--image: url('https://scontent.fbkk12-1.fna.fbcdn.net/v/t39.30808-6/264083344_1547761415610953_7687556070554824126_n.jpg?_nc_cat=101&ccb=1-5&_nc_sid=09cbfe&_nc_eui2=AeGT1TKJbZf0inBLuOrS1SGCHpt7vWHckW0em3u9YdyRbYIi4v12wYCYjS_He-T2-KndZ6S5IffoKDT5WBZpq2gz&_nc_ohc=G-Yg7slXzwMAX8MtlP1&_nc_ht=scontent.fbkk12-1.fna&oh=00_AT9CZSRuCChw735PkOxyEi1sYziYwQN-Jj3selDnTuCevw&oe=61EFA4C4'); --angle: -10deg; --x: -10%; --y: -50%; --caption: ''">
        <div class="content">
          <h3>Karn Kaewprapa</h3>
          <p>[ กานต์ ]</p>
          
          <a href="https://www.facebook.com/karn.kaewprapa.7/" target="_blank"><fb class="fab fa-facebook"></fb></a>
          
          <a href="https://www.instagram.com/karn.kw/" target="_blank"><ig class="fab fa-instagram-square"></ig></a>
          
          <a href="https://discordapp.com/users/244389740693028865/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    
    
    
      <div class="card"
           style="--image: url('https://cdn.discordapp.com/attachments/934094889669492766/934094971173208094/147254.jpg'); --angle: 10deg; --x: 100%; --y: -50%; --caption: ''">
        <div class="content">
          <h3>Natthawut Sornkhiew</h3>
          <p>[ รี่ ]</p>
          
          <a href="https://www.facebook.com/natthawut.sornkhiew.5/" target="_blank"><fb class="fab fa-facebook"></fb></a>
          
          <a href="https://www.instagram.com/natthawut_s_k/" target="_blank"><ig class="fab fa-instagram-square"></ig></a> 
          
          <a href="https://discordapp.com/users/684007247025537070/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    </div>
    
    
    
    <div class="card-container">
      <div class="card"
           style="--image: url('https://media.discordapp.net/attachments/404266538590535680/934119815583510548/271242566_616819539392351_8399117609451155638_n.png?width=507&height=676'); --angle: 5deg; --x: 100%; --y: -50%; --caption: ''">
        <div class="content">
          <h3>Traitam Sangduen</h3>
          <p>[ ตรัย ]</p>
          
          <a href="https://web.facebook.com/profile.php?id=100010016529087" target="_blank"><fb class="fab fa-facebook"></fb>	 </a>
          
          <a href="https://www.instagram.com/double_trai/?fbclid=IwAR300B721Q7v5uptqrfTnNLcJGQssUt9hXqMCTijGVqUI7bsqlYnnu_b_BQ" target="_blank"><ig class="fab fa-instagram-square">				 </ig>
          </a> 
          
          <a href="https://discordapp.com/users/276709848492802048/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    
    
    
    
    
      <div class="card"
           style="--image: url('https://cdn.discordapp.com/attachments/932848156419452988/934107858642018324/unknown.png'); --angle: -12deg; --x: 210%; --y: -50%; ">
        <div class="content">
          <h3>Akhabhop Khunkitti</h3>
          <p>[ เบญ ]</p>
          
          <a href="https://www.facebook.com/akhabhop.khunkitti" target="_blank"><fb class="fab fa-facebook"></fb></a>
          
          <a href="https://cdn.discordapp.com/attachments/932912268180619274/934126939243958312/10624995_0.png" target="_blank">
          <ig class="fab fa-instagram-square"></ig>
          </a> 
          
          <a href="https://discordapp.com/users/242805857551777792/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    </div>
    
    
    
    <div class="card-container">
      <div class="card"
           style="--image: url('https://media.discordapp.net/attachments/796636594735153182/934118414685995028/FB_IMG_1642781382713.jpg'); --angle: 15deg; --x: 95%; --y: -36%; --caption: ''">
        <div class="content">
          <h3>Ekanat Hirunnutchanat</h3>
          <p>[ ฟี่ ]</p>
          
          <a href="https://www.facebook.com/move.extra/" target="_blank"><fb class="fab fa-facebook"></fb></a>
          
          <a href="https://www.instagram.com/fie.ekanat/" target="_blank"><ig class="fab fa-instagram-square"></ig></a> 
          
          <a href="https://discordapp.com/users/404120040149876756/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    
    
    
     
    
      <div class="card"
           style="--image: url('https://scontent.fbkk22-1.fna.fbcdn.net/v/t39.30808-6/271582596_4392375827556928_5854599204445781014_n.jpg?_nc_cat=100&ccb=1-5&_nc_sid=8bfeb9&_nc_eui2=AeFzzL3LGxAQdlZepwy4s6NR5RINJSwNvaPlEg0lLA29o_fs-q_baCqah22aoytczBQI-L2qj-ihYfxE5Qe_N9Nf&_nc_ohc=fqbKtwE2yScAX8iyfBq&_nc_ht=scontent.fbkk22-1.fna&oh=00_AT8Zp3mTomjtbzZ1-ZhQ0j1mdXraWf3HSJ9NEao0S6aOSA&oe=61EF0482'); --angle: 20deg; --x: 15%; --y: 27%; --caption: ''">
        <div class="content">
          <h3>Teeratorn Chithanonda</h3>
          <p>[ โอม ]</p>
          
          <a href="https://www.facebook.com/teeratorn.chithanonda" target="_blank"><fb class="fab fa-facebook"></fb></a>
          
          <a href="https://www.instagram.com/ohmmuro/" target="_blank"><ig class="fab fa-instagram-square"></ig></a> 
          
          <a href="https://discordapp.com/users/470593519560687629/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    </div>
    
    
    
    <div class="card-container">
      <div class="card"
           style="--image: url('https://media.discordapp.net/attachments/310407389759275008/934120993985822720/gammadd.jpg?width=437&height=468'); --angle: 10deg; --x: 130%; --y: 5%; --caption: ">
        <div class="content">
          <h3>Weerapong Pannisai</h3>
          <p>[ โด ]</p>
          
          <a href="https://www.facebook.com/profile.php?id=100012968675901" target="_blank"><fb class="fab fa-facebook"></fb>				 </a>
          
          <a href="https://ww47w.instagram.com/w.donutt/" target="_blank"><ig class="fab fa-instagram-square"></ig></a> 
          
          <a href="https://discordapp.com/users/293685029047894017/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    
    
    
    
    
      <div class="card"
           style="--image: url('https://cdn.discordapp.com/attachments/895533055928852502/934115454186844190/15681.jpg'); --angle: -15deg; --x: 45%; --y: 35%; --caption: ">
        <div class="content">
          <h3>Tadporn Tannarat</h3>
          <p>[ โอปอ ]</p>
          
          <a href="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/28fa795e-7f92-437d-bfaa-28b2d0c6366e/d3a1cxr-54f8045d-7952-4b39-b8ad-5164715151cc.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI4ZmE3OTVlLTdmOTItNDM3ZC1iZmFhLTI4YjJkMGM2MzY2ZVwvZDNhMWN4ci01NGY4MDQ1ZC03OTUyLTRiMzktYjhhZC01MTY0NzE1MTUxY2MuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.RVJT-FMRawZIvPug1SOpPUYK9CwUbjfLZeaHaZK8AtA" target="_blank"><fb class="fab fa-facebook"></fb>
          </a>
          
          <a href="https://www.instagram.com/tadphornn/?hl=en" target="_blank"><ig class="fab fa-instagram-square"></ig></a> 
          
          <a href="https://discordapp.com/users/276709848492802048/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    </div>
    
    
    
    <div class="card-container">
      <div class="card"
           style="--image: url('https://media.discordapp.net/attachments/910202907973009500/934090170230243428/30707.jpg'); --angle: 8deg; --x: 80%; --y: 40%; --caption: ''">
        <div class="content">
          <h3>Anuwat Prasit</h3>
          <p>[ ปั้น ]</p>
          
          <a href="https://www.facebook.com/anuwat.prasit" target="_blank"><fb class="fab fa-facebook"></fb></a>
          
          <a href="https://www.instagram.com/pnmn_pun/" target="_blank"><ig class="fab fa-instagram-square"></ig></a> 
          
          <a href="https://discordapp.com/users/317576156087844864/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    
    
    
    
    
      <div class="card"
           style="--image: url('https://cdn.discordapp.com/attachments/907544840437366807/934119750416601108/IMG_3421.jpg'); --angle: -3deg; --x: 110%; --y: 30%; --caption: ''">
        <div class="content">
          <h3>Chawanwit Kuanphipatku</h3>
          <p>[ นิว ]</p>
          
          <a href="https://www.facebook.com/profile.php?id=100009433964687" target="_blank"><fb class="fab fa-facebook"></fb>				 </a>
          
          <a href="https://www.instagram.com/n3w0705_/" target="_blank"><ig class="fab fa-instagram-square"></ig></a> 
          
          <a href="https://discordapp.com/users/872468283050319952/" target="_blank"><dis class="fab fa-discord"></dis>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>