Welcome to CODEBOX! (Branch 2036) (Copy 2047)

✨ NATTAPONG WAIJAREE

<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
      {
        100% {left:300px;}
      }
      .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:1400px;
        animation: matangsai 2s;
        animation-duration: 5s;
        animation-delay:2s;
        
      }
      .Professor
      {
			background:red;
        background-size:cover;
        background-repeat: no-repeat;
        height:400px;
        width:400px;
        position:relative;
        bottom:500px;
        left:1400px;
        animation: matangsai1 3s;
        animation-duration: 5s;
        animation-delay:7s;
      }
      @keyframes matangsai1
      {
        100% {left:400px;}
      }
      .teay
      {
			background-image:url('https://scontent.fbkk9-2.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-5F8AX8Mxixq&_nc_ht=scontent.fbkk9-2.fna&oh=f33ed9d02f46af29aa21c9d1e19bef82&oe=604C588D');
        background-size:cover;
        background-repeat: no-repeat;
        height:400px;
        width:400px;
        position:relative;
        bottom:500px;
        left:1400px;
        animation: matangsai2 3s;
        animation-duration: 5s;
        animation-delay:11.5s;
      }
      @keyframes matangsai2
      {
        100% {left:0px;}
      }
      .Earth
      {
			background-image:url('https://media.discordapp.net/attachments/809327422989926431/809341464264966184/2.png?width=473&height=473');
        background-size:cover;
        background-repeat: no-repeat;
        height:400px;
        width:400px;
        position:relative;
        bottom:900px;
        left:1400px;
        animation: matangsai3 3s;
        animation-duration: 5s;
        animation-delay:17s;
      }
      @keyframes matangsai3
      {
        100% {left:430px;}
      }
    </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="Professor"></div>
        <div class="teay"></div>
        <div class="Earth"></div>
        
      </div>
    </center>
  </body>
</html>