Welcome to CODEBOX! (Copy 2062) (Branch 2098)

✨ นายวริศ อมรธนะภิญโญ

<html>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    
  }

body {
   background-image: url('https://cdn.discordapp.com/attachments/798210377618948117/809376669626007592/house.jpg');
  	background-position:bottom center;
  	background-size:cover;
  	width:100%;
  	height:100%;
  	border: 20px solid;
  border-image-source: url(https://i.pinimg.com/originals/ab/4c/21/ab4c21962addbaa0e6afbd0d7d0092d2.png);
  border-image-slice: 60 30;
    background-repeat:no-repeat;
  }

.profile1 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 580px;
    left: 30px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture1{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 580px;
    left: 30px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile2 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 370px;
    left: 50px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture2{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 370px;
    left: 50px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile3 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 570px;
    left: 240px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture3{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 570px;
    left: 240px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile4 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 500px;
    left: 450px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture4{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 500px;
    left: 450px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile5 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 380px;
    left: 250px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture5{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 380px;
    left: 250px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile6 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 475px;
    left: 670px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture6{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 475px;
    left: 670px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile7 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 570px;
    left: 880px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture7{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 570px;
    left: 880px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile8 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 380px;
    left: 870px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture8{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 380px;
    left: 870px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .profile9 {
    background: white;
    position: absolute;
    width: 170px;
    height: 170px;
    top: 400px;
    left: 1100px;
    cursor: pointer;
    animation:move1 5s infinite;
    font-size:22px;
    font-style:bolder;
  }
  .picture9{
    background: url(https://toppng.com/uploads/preview/teletubbies-teletubbies-po-11563197011vk43n3spow.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 170px;
    height: 170px;
    position:absolute;
    top: 400px;
    left: 1100px;
    cursor: pointer;
    animation:move1 5s infinite;
  }
  .head{
	font-size:26px;
    font-weight: 900;
  }
  .info{
	font-size:20px;
  }
  
  
@keyframes move1{
  0%{
    transform:translate(0px);
  }
 50%{
    transform:  translate(240px);
  }
  100%{
    transform: translate(-0px);
  }
 }
  .jbondance{
    position:absolute;
    top:25%;
    left:38%;
    width: 72px;
    height: 104px;
    background-image : url(https://cdn.discordapp.com/attachments/806432838101630979/809421053218259005/jbondance.png);
      animation: jdance 1s steps(8) infinite;
    }
    @keyframes jdance{
      from{background-position-x:0px;}
      to{background-position-x:-572px;}
    }
  .gettydance{
    position:absolute;
    top:25%;
    left:50%;
    width: 133px;
    height: 152px;
    background-image : url(https://cdn.discordapp.com/attachments/806432838101630979/809433470011047936/getty.png);
      animation: gdance 1s steps(8) infinite;
    }
    @keyframes gdance{
      from{background-position-x:0px;}
      to{background-position-x:-1062px;}
    }
</style>

</body>
<script>

/*click4*/
  function click4() {
    if (document.getElementById("id4").className == "picture4"){
    	document.getElementById("id4").innerHTML="<div class='head'>ชื่อ:</div><div class='info'>ภานุพงศ์</div><div class='head'>นามสกุล:</div><div class='info'>เฉลยรัตน์</div><div class='head'>รหัสประจำตัว:</div><div class='info'>63070134</div>";
    	document.getElementById("id4").classList.add('profile4');
    	document.getElementById("id4").classList.remove("picture4");
    }
    else {
      document.getElementById("id4").classList.remove("profile4");
      document.getElementById("id4").classList.add('picture4');
      document.getElementById("id4").innerHTML="";
	}
  }

/*click5*/
  function click5() {
    if (document.getElementById("id5").className == "picture5"){
    	document.getElementById("id5").innerHTML="<div class='head'>ชื่อ:</div><div class='info'>อธิชาติ</div><div class='head'>นามสกุล:</div><div class='info'>ชูศรี</div><div class='head'>รหัสประจำตัว:</div><div class='info'>63070181</div>";
    	document.getElementById("id5").classList.add('profile5');
    	document.getElementById("id5").classList.remove("picture5");
    }
    else {
      document.getElementById("id5").classList.remove("profile5");
      document.getElementById("id5").classList.add('picture5');
      document.getElementById("id5").innerHTML="";
	}
  }
  
/*click6*/
  function click6() {
    if (document.getElementById("id6").className == "picture6"){
    	document.getElementById("id6").innerHTML="<div class='head'>ชื่อ:</div><div class='info'>ภาสกร</div><div class='head'>นามสกุล:</div><div class='info'>คุณพิสุทธิ์</div><div class='head'>รหัสประจำตัว:</div><div class='info'>63070136</div>";
    	document.getElementById("id6").classList.add('profile6');
    	document.getElementById("id6").classList.remove("picture6");
    }
    else {
      document.getElementById("id6").classList.remove("profile6");
      document.getElementById("id6").classList.add('picture6');
      document.getElementById("id6").innerHTML="";
	}
  }
  
/*click7*/
  function click7() {
    if (document.getElementById("id7").className == "picture7"){
    	document.getElementById("id7").innerHTML="<div class='head'>ชื่อ:</div><div class='info'>พสุธา</div><div class='head'>นามสกุล:</div><div class='info'>จันทร์มณี</div><div class='head'>รหัสประจำตัว:</div><div class='info'>63070114</div>";
    	document.getElementById("id7").classList.add('profile7');
    	document.getElementById("id7").classList.remove("picture7");
    }
    else {
      document.getElementById("id7").classList.remove("profile7");
      document.getElementById("id7").classList.add('picture7');
      document.getElementById("id7").innerHTML="";
	}
  }
  
/*click8*/
  function click8() {
    if (document.getElementById("id8").className == "picture8"){
    	document.getElementById("id8").innerHTML="<div class='head'>ชื่อ:</div><div class='info'>พิสิฐไชย</div><div class='head'>นามสกุล:</div><div class='info'>เรืองวัฒนาพงษ์</div><div class='head'>รหัสประจำตัว:</div><div class='info'>63079121</div>";
    	document.getElementById("id8").classList.add('profile8');
    	document.getElementById("id8").classList.remove("picture8");
    }
    else {
      document.getElementById("id8").classList.remove("profile8");
      document.getElementById("id8").classList.add('picture8');
      document.getElementById("id8").innerHTML="";
	}
  }
  
/*click9*/
  function click9() {
    if (document.getElementById("id9").className == "picture9"){
    	document.getElementById("id9").innerHTML="<div class='head'>ชื่อ:</div><div class='info'>ภูฟ้า<div class='head'>นามสกุล</div><div class='info'>รุจิภาสวัฒน์</div><div class='head'>รหัสประจำตัว:</div><div class='info'>63070137</div>";
    	document.getElementById("id9").classList.add('profile9');
    	document.getElementById("id9").classList.remove("picture9");
    }
    else {
      document.getElementById("id9").classList.remove("profile9");
      document.getElementById("id9").classList.add('picture9');
      document.getElementById("id9").innerHTML="";
	}
  }
  /*function click9() {
    if (document.getElementById("id9").className == "picture9"){
    	document.getElementById("id9").innerHTML="<div class='head'>ชื่อ:</div><div class='info'>เมษา</div><div class='head'>นามสกุล:</div><div class='info'>มานิตสกุลวงศ์</div><div class='head'>รหัสนักศึกษา:</div><div class='info'>63070139</div>";
    	document.getElementById("id9").classList.add('profile9');
    	document.getElementById("id9").classList.remove("picture9");
    }
    else {
      document.getElementById("id9").classList.remove("profile9");
      document.getElementById("id9").classList.add('picture9');
      document.getElementById("id9").innerHTML="";
	}
  }*/
</script>
</html>