Welcome to CODEBOX! (Branch 2051)

✨ นายนริศ พงษ์พิทักษ์

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body
      {
        background:#eee;
        margin:1em;
        font-family:sans-serif;
        overflow: hidden
      }
		.grid
      {
        	background:#eee;
    		display: flex;
    		flex-wrap: wrap;
    		border: solid 1px;
    		width: 800px;
    		height: 500px;
		}
      @keyframes kraprib
      {
        0%{opacity:.2;}
        5%{opacity:1;}
        10%{opacity:.2;}
        15%{opacity:1;}
        20%{opacity:.2;}
        25%{opacity:1;}
        30%{opacity:.2;}
        35%{opacity:1;}
        40%{opacity:.2;}
        45%{opacity:1;}
        50%{opacity:.2;}
        55%{opacity:1;}
        60%{opacity:.2;}
        65%{opacity:1;}
        70%{opacity:.2;}
        75%{opacity:1;}
        80%{opacity:.2;}
        85%{opacity:1;}
        90%{opacity:.2;}
        95%{opacity:1;}
        100%{opacity:.2;}
      }
      .box1 /* Toey */
      {
			background-image:url('https://scontent.fbkk2-6.fna.fbcdn.net/v/t1.0-9/77124318_1401060160062741_278862270795087872_o.jpg?_nc_cat=109&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFxG6Kjmwbxevi2dBIQerDbvcWV1-jzgDq9xZXX6POAOncO3sPThjlP8WmoK7uz02cSxTmMgRMSepxE6FIl0Nmd&_nc_ohc=4yMC-oh-5F8AX_aFBTU&_nc_ht=scontent.fbkk2-6.fna&oh=4ae390a777b79cc09432ada20bc92ac6&oe=6048640D');
        background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:247px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:8s;
        z-index:2;
        	
        
      }
      .box2 /* Save */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809331291945435136/7583D0C7-658F-4318-BDF7-1C35351EBECF.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
       	left:247px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:14s;
        z-index:2;
           
      }
      .box3 /* Pae */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809331914099654656/IMG20210211145508.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:247px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:20s;
        z-index:2;
           
      }
      .box4 /* Jit */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809330564670816276/135201594_3605230476212893_7071914341693562105_n.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:247px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:26s;
        z-index:2;
           
      }
      .box5 /* Jabont */
      {
			background-image:url('https://scontent.fbkk2-7.fna.fbcdn.net/v/t1.0-9/93520242_10219841843149529_6244240891939127296_n.jpg?_nc_cat=106&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFiZfefyWf3bjTX-CYiqca2DL73xLjREmQMvvfEuNESZHKCSAZtmEso4W7DGaVTIPvITolIK1q75KrHaj0816Z3&_nc_ohc=MdHPvKNL3XsAX_Nmn7M&_nc_ht=scontent.fbkk2-7.fna&oh=5d3dd842c737abdad8f144c126d4750b&oe=604A34A1');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-90px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px purple;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:32s;
        z-index:2;
        
        
      }
      .box6 /* Tong */
      {
			background-image:url('https://cdn.discordapp.com/attachments/756177447896088577/809332623729754172/20210211_145621.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-90px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:26s;
        z-index:2;
        
      }
      .box7 /* Mon */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809333112311250964/my_photo.jpg');
        	background-size: cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-90px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:20s;
        z-index:2;
        
      }
      .box8 /* Pink */
      {
			background-color:pink;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-90px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:14s;
        z-index:2;
        
      }
      .box9 /* Earth */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809333901042253854/unknown.png');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-90px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:8s;
        z-index:2;
        
      }
      .box10 /* P'Ae */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337271894933554/unknown.png');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-90px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px gold;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay: 2s;
        	z-index:2;
      }
      .box11 /* T.Muna */
      {
			background-image:url('https://scontent.fbkk2-8.fna.fbcdn.net/v/t1.0-9/102466793_10158094575126590_7416939879325592566_n.jpg?_nc_cat=102&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFHaczNirmygOTUIL0kHCd3eYDMacJ32Wd5gMxpwnfZZwIeGjDuMpNRD4DG8uTxFdQ5rNu5dYNJ9AoE4c8aOcMs&_nc_ohc=KYj7U7gOSSMAX_nNYwF&_nc_ht=scontent.fbkk2-8.fna&oh=4b4123c839a8f0095d3a3fc400447539&oe=604B6FF2');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:247px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px gold;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay: 2s;
        	z-index:2;
      }
      .box12 /* Arin */
      {
			background-image:url('https://scontent.fbkk2-5.fna.fbcdn.net/v/t1.0-9/134372666_2851472108421234_1650577855754040748_n.jpg?_nc_cat=110&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeG0WnY0UC8_QvuRSNzVrzgx9PpBrx_88of0-kGvH_zyh-zvu052qCgmWyq_OkjwHMYbiCGiXRzrfF8jWRI0oArC&_nc_ohc=PLpg4Dx15PEAX-ghNN6&_nc_ht=scontent.fbkk2-5.fna&oh=91dd025e66c6fa30c124aaff37e494b1&oe=604A9CB8');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:247px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px purple;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay:32s;
        	z-index:2;
      }
      @keyframes matangsai
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:300px;}
        98% {left:300px; opacity:1}
        100%{left:300px; opacity:0}
      }
		@keyframes matangkwa
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:-45px;}
        98% {left:-45px; opacity:1}
        100%{left:-45px; opacity:0}
      }
      
      /*P2*/
      .PAe
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809338920038301716/dr.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:500px;
        width:500px;
        position:relative;
        bottom: 100px;
        left:500px;
        animation: matangsai 2.2s;
        animation-duration: 5s;
        animation-delay:2s;
        opacity:0
        
      }
      .earth
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809341464264966184/2.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:500px;
        width:500px;
        position:relative;
        bottom: 600px;
        left:500px;
        animation: matangsai 2.2s;
        animation-duration: 5s;
        animation-delay:8s;
        opacity:0;
         
      }
      
     /* .pink
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809341464264966184/2.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:500px;
        width:500px;
        position:relative;
        bottom: 600px;
        left:500px;
        animation: matangsai 2.2s;
        animation-duration: 5s;
        animation-delay:8s;
        opacity:0;
      }*/
      .mon
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809341464105582662/1.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:470px;
        width:470px;
        position:relative;
        bottom: 2890px;
        left:600px;
        animation: matangsai 2.2s;
        animation-duration: 5s;
        animation-delay:20s;
        opacity:0;
  
      }
      .tong
      {
			background-image:url('https://cdn.discordapp.com/attachments/756177447896088577/809332618855710730/20210211_145621-removebg-preview.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:470px;
        width:470px;
        position:relative;
        bottom: 3800px;
        left:600px;
        animation: matangsai 2.2s;
        animation-duration: 5s;
        animation-delay:26s;
        opacity:0;
  
      }
      
      .jabont
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337114080575508/jabont.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:470px;
        width:470px;
        position:relative;
        bottom: 4670px;
        left:650px;
        animation: matangsai 2.2s;
        animation-duration: 5s;
        animation-delay:32s;
        opacity:0;
  
      }
      
      /*P1*/
      
      .muna
      {
			background-image:url('https://cdn.discordapp.com/attachments/809362797909639178/809362893967589416/tmunac.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:400px;
        width:400px;
        position:relative;
        bottom: 1000px;
        left:-200px;
        animation: matangkwa 2.2s;
        animation-duration: 5s;
        animation-delay:2s;
        opacity:0
        
      }
      .toey
      {
			background-image:url('https://cdn.discordapp.com/attachments/809362797909639178/809368316237578240/toey.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:500px;
        width:500px;
        position:relative;
        bottom: 1500px;
        left:-200px;
        animation: matangkwa 2.2s;
        animation-duration: 5s;
        animation-delay:8s;
        opacity:0;
      }
      .save
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809328052572127242/save.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:470px;
        width:470px;
        position:relative;
        bottom: 1950px;
        left:-200px;
        animation: matangkwa 2.2s;
        animation-duration: 5s;
        animation-delay:14s;
        opacity:0;
        transform:scalex(-1)
      }
      .pae2
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337347686400050/IMG20210211145508-removebg-preview.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:450px;
        width:450px;
        position:relative;
        bottom: 2425px;
        left:-200px;
        animation: matangkwa 2.2s;
        animation-duration: 5s;
        animation-delay:20s;
        opacity:0;

}
    	.jit
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337090679767060/jit.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:450px;
        width:450px;
        position:relative;
        bottom: 3330px;
        left:-200px;
        animation: matangkwa 2.2s;
        animation-duration: 5s;
        animation-delay:26s;
        opacity:0;

}
      
      .arin
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337119477596180/arin.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:400px;
        width:400px;
        position:relative;
        bottom: 4200px;
        left:-100px;
        animation: matangkwa 2.2s;
        animation-duration: 5s;
        animation-delay:32s;
        opacity:0;

}
      
    </style>
  </head>
  <body>
    
    <center>
    	<div class="grid">
        <div class="box11"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box12"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
        <div class="box10"></div>
        <div class="PAe"></div>
        <div class="earth"></div>
        <div class="muna"></div>
        <div class="toey"></div>
        <div class="pink"></div>
        <div class="save"></div>
        <div class="pae2"></div>
        <div class="mon"></div>
        <div class="jit"></div>
        <div class="tong"></div>
        <div class="arin"></div>
        <div class="jabont"></div>
      </div>
    </center>
  </body>
</html>