Godjabont Group E P’Faiifuu

✨ PANAS CHAROENRUK

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
			background: RGB(244, 164, 96)

;
      }

.box{
			background-image: url(https://media.discordapp.net/attachments/798210303846383676/809803700335411270/image1.png?width=856&height=605);
         width:856;
         height:605;
         background-repeat: no-repeat;
        	background-size: 856px 605px;
        	position: relative;
         animation: lava 35s linear infinite;
         overflow: hidden;
         z-index:-1;
      }
      .volcano{
			background-image: url(https://media.discordapp.net/attachments/798210303846383676/809781016641798165/image0.png?width=856&height=605);
        background-size: auto;
        width:856;
        height:605;
        position: absolute;
        top: 0px;
        animation:erupt 30s linear infinite, satern 0.6s infinite alternate linear;
        z-index:-1;
      }
      .cloud{
			background-image: url(https://media.discordapp.net/attachments/798210303846383676/809782238773379082/image0.png?width=428&height=605);
        width: 428;
        height: 605;
        position: absolute;
        top:-100;
        left: -500;
        z-index:-2;
        animation: loy 10s linear infinite;
        overflow: hidden
      }
      .cloud2{
			background-image: url(https://media.discordapp.net/attachments/798210303846383676/809784219852996617/image0.png?width=428&height=605);
        width: 428;
        height: 605;
        position: absolute;
        top:-100;
        left: -500;
        z-index:-2;
        animation: loy 10s linear infinite;
        animation-delay: 3s;
        overflow: hidden
      }
      .godzilla{
			background-image:url(https://media.discordapp.net/attachments/798210303846383676/809832822533652480/93_20210212225444.png);
        width:600px;
        height:600px;
        position:absolute;
        background-image: 600px 600px;
        background-repeat: no-repeat;
        top:0;
        left:200;
        animation: godwalk 30s infinite alternate;
        transform-style: preserve-3d;
      }
      .people1{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994648990515220/93_20210213093757.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:390px;
        left: 230px;
        animation:jump1 0.3s infinite alternate;
        animation-delay:3.5s;
        }
      .people2{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994648620761138/93_20210213002550.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:400px;
        left: 200px;
        animation:jump2 0.3s infinite alternate;
        animation-delay:4s;
        }
      .people3{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649439174696/93_20210213095256.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:390px;
        left: 320px;
        animation:jump3 0.3s infinite alternate;
        animation-delay:2s;
        }
      .people4{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649220415488/93_20210213094336.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:400px;
        left: 280px;
        animation:jump4 0.3s infinite alternate;
        animation-delay:3s;
        }
      .people5{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649694502912/93_20210213100000.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:400px;
        left: 360px;
        animation:jump5 0.3s infinite alternate;
        animation-delay:2.5s;
        }
      .people6{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994649912475718/93_20210213102303.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:400px;
        left: 400px;
        animation:jump6 0.3s infinite alternate;
        animation-delay:1.5s;
        }
      .people7{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994650190217246/93_20210213104034.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:400px;
        left: 450px;
        animation:jump7 0.3s infinite alternate;
        animation-delay:1s;
        }
      .people8{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809994650449870888/93_20210213104654.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:440px;
        left: 320px;
        animation:jump8 0.3s infinite alternate;
        animation-delay:0.5s;
        }
      .people9{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/810012992715489311/93_20210213120159.png);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:440px;
        left: 150px;
        animation:jump9 0.3s infinite alternate;
        animation-delay:0.5s;
        }
      .leader{
        background-image:url(https://media.discordapp.net/attachments/798210303846383676/809832823825498142/20210212_235546.gif);
        width:200px;
        height:200px;
        background-size:200px 200px;
        position:absolute;
        top:440px;
        left: 510px;
        animation:jump10 0.3s infinite alternate;
        animation-delay:0.5s;
        }
      .btn1{
          height:35px;
          border-radius: 16px;
          border: 5px solid #723c2a;
          background-color: #925946;
          font-size:18px;
          cursor: pointer;
          outline: none;
          position: relative;
        	 bottom: 0;
        	 left: 50%;
          right: 50%;
        
        }
      button:hover{
 			background: #F6EEE0;
      }
      
      @keyframes erupt{
        0%{background-image: url(https://media.discordapp.net/attachments/798210303846383676/809781016641798165/image0.png?width=856&height=605);}
        50%{background-image: url(https://media.discordapp.net/attachments/798210303846383676/809781016873009212/image1.png?width=856&height=605);}
        100%{background-image:url(https://media.discordapp.net/attachments/798210303846383676/809781017141051412/image2.png?width=856&height=605)}
      }
      @keyframes satern
      {
        from{top: 0px;}
        to{top:-30px;}
      }
      @keyframes lava
      {
        0%{background-image:url(https://media.discordapp.net/attachments/798210303846383676/809803700335411270/image1.png?width=856&height=605);}
        50%{background-image:url(https://media.discordapp.net/attachments/798210303846383676/809803699944685588/image0.png?width=856&height=605);}
      }
      @keyframes loy{
        from{left: -500;}
        to{left: 1000;}
      }
      @keyframes godwalk{
			0%{transform:scale(0); opacity: 0%;}
        25%{transform:scale(0.5); opacity: 50%;}
        50%{transform:scale(1); opacity: 100%;}
        75%{transform: scaleX(-1);}
        100%{transform: scaleX(1);}
      }
      @keyframes escape1
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump1
      {
        from{top:390px; transform: rotate(-10deg);}
        to{top:350px; transform: rotate(10deg);}
      }
      @keyframes escape2
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump2
      {
        from{top:400px; transform: rotate(-10deg);}
        to{top:360px; transform: rotate(10deg);}
      }
      @keyframes escape3
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump3
      {
        from{top:390px; transform: rotate(-10deg);}
        to{top:350px; transform: rotate(10deg);}
      }
      @keyframes escape4
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump4
      {
        from{top:400px; transform: rotate(-10deg);}
        to{top:360px; transform: rotate(10deg);}
      }
      @keyframes escape5
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump5
      {
        from{top:400px; transform: rotate(-10deg);}
        to{top:360px; transform: rotate(10deg);}
      }
      @keyframes escape6
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump6
      {
        from{top:400px; transform: rotate(-10deg);}
        to{top:360px; transform: rotate(10deg);}
      }
      @keyframes escape7
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump7
      {
        from{top:400px; transform: rotate(-10deg);}
        to{top:360px; transform: rotate(10deg);}
      }
      @keyframes escape8
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump8
      {
        from{top:440px; transform: rotate(-10deg);}
        to{top:400px; transform: rotate(10deg);}
        
      }
      @keyframes escape9
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump9
      {
        from{top:440px; transform: rotate(-10deg);}
        to{top:400px; transform: rotate(10deg);}
      }
      @keyframes escape10
      {
        from{}
        to{left: 1000px;}
      }
      @keyframes jump10
      {
        from{top:440px; transform: rotate(-10deg);}
        to{top:400px; transform: rotate(10deg);}
      }
    </style>
  </head>
  <body>
    
    <div class="container">
    <div class="box">
      <div class="godzilla"></div>
      <div class="volcano"></div>
      <div class="cloud"></div>
      <div class="cloud2"></div>
      <div id="allpeople">
      <div class="people1"></div>
      <div class="people2"></div>
      <div class="people3"></div>
      <div class="people4"></div>
      <div class="people5"></div>
      <div class="people6"></div>
      <div class="people7"></div>
      <div class="people8"></div>
      <div class="people9"></div>
      <div class="leader"></div>
      </div>
      
    </div>
    </div>
    <button class="btn1" onclick="run()">run</button>
    <script>
    	function run()
      {
			var person = document.getElementById("allpeople");
        person.querySelector(".people1").style.animation =
          "jump1 0.3s 0.5s infinite alternate, escape1 30s 0.5s infinite alternate";
        person.querySelector(".people2").style.animation =
          "jump2 0.3s 1s infinite alternate, escape2 30s 1s infinite alternate";
        person.querySelector(".people3").style.animation =
          "jump3 0.3s 1.5s infinite alternate, escape3 30s 1.5s infinite alternate";
        person.querySelector(".people4").style.animation =
          "jump4 0.3s 2s infinite alternate, escape4 30s infinite 2s alternate";
        person.querySelector(".people5").style.animation =
          "jump5 0.3s 2.5s infinite alternate, escape5 30s infinite 2.5s alternate";
        person.querySelector(".people6").style.animation =
          "jump6 0.3s 3s infinite alternate, escape6 30s infinite 3s alternate";
        person.querySelector(".people7").style.animation =
          "jump7 0.3s 3.5s infinite alternate, escape7 30s infinite 3.5s alternate";
        person.querySelector(".people8").style.animation =
          "jump8 0.3s 4s infinite alternate, escape8 30s infinite 4s alternate";
        person.querySelector(".people9").style.animation =
          "jump9 0.3s 4s infinite alternate, escape9 30s infinite 4.5s alternate";
        person.querySelector(".leader").style.animation =
          "jump10 0.3s infinite alternate, escape10 30s infinite alternate";
      }
      
    </script>
  </body>
</html>