Welcome to CODEBOX! (Branch 839)

✨ Naiohm Pwpp

<html>
<style>
    body {
        background-color: wheat;
        overflow: hidden;
    }

.wrap {
        display: block;
        padding-top: 2.5%;
        width: 100%;
        text-align: center;
    }

.main {
        position: relative;
        display: inline-block;
        height: 550px;
        width: 1000px;
        box-sizing: border-box;
        border: 3px solid #f008;
        overflow: hidden;
        background-color: #BFDFEC;
        background-repeat: repeat-x;
        background-image: url("https://i.stack.imgur.com/b7z29.png");
        animation: movement 10s linear infinite;

}

.parin {

position: absolute;
        width: 120px;
        height: 120px;
        animation: parinmove 4s infinite linear;
    }

@keyframes parinmove {
        from {
            top: 600px;
            right: -10;
            transform: rotateZ(0deg);
        }

to {
            top: -700px;
            right: 600px;
            transform: rotateZ(-360deg);
        }
    }

@keyframes movement {
        0% {
            background-position: 0px 0px;
        }

100% {
            background-position: 560px 0px;
        }
    }

.sun {
        position: absolute;
        width: 204px;
        height: 204px;
        background-image: url("https://cdn.discordapp.com/attachments/798205933716635681/809440343355162644/islands-computer-game-isometric-set_1284-35570-removebg-preview.png"); 
        left: 20px;
        top: 10px;
        animation: movesun 1s infinite alternate;
    }

.imgsun {
        position: absolute;
        left: 35px;
        width: 150px;
        height: 150px;
        animation: moveimgsun 10s linear infinite;
    }

@keyframes moveimgsun {
        from {
            transform: rotateZ(0deg);
        }

to {
            transform: rotateZ(360deg);
        }
    }
  @keyframes movesun{
     	0%   {left:35px;
        top:10px;
    		}
  		30% {right:50px;
    top:20px;}
  }
  
    .airplane {
        position: absolute;
        top: 200px;
        right: -400px;
        /* left: 0; */
        animation: airplanemove 10s linear infinite;
    }

@keyframes airplanemove{
        from {
            transform: translateX(0px);
        }
        to {
            transform: translateX(-2500px);
        }
    }

.banner {
        position: absolute;
        bottom: 0px;
        left: 320px;
        animation: bannermove 1s alternate infinite;
    }

@keyframes bannermove {
        from {
            transform: translateY(0px) rotateZ(0deg);
        }

to {
            transform: translateY(10px) rotateZ(2deg);
        }
    }

.palm {
        position: absolute;
        top: 100px;
        left: -40px;
      	animation: movepeople 2s infinite;
    }

.pang {
        position: absolute;
        top: 138px;
        left: 200px;
      	animation: movepeople 2s infinite;
    }

.kim {
        position: absolute;
        left: -150px;
        bottom: -140px;
        animation: kimarrive 4s alternate infinite;
    }

@keyframes kimarrive {
        from {
            transform: translateY(190px);
        }

to {
            transform: translateY(0px);
        }
    }

.jay {
        position: absolute;
        top: 160px;
        left: 320px;
      	animation: movepeople 2s infinite;
    }

.don {
        position: absolute;
        top: 130px;
        right: 0px;
      animation: movepeople 2s infinite;
    }

.tonhom {
        position: absolute;
        top: 150px;
        left: 320px;
      animation: movepeople 2s infinite;
    }
    
    .mod {
        position: absolute;
        top: 155px;
        right: 250px;
      animation: movepeople 2s infinite;
    }

.phu {
        position: absolute;
        top: 120px;
        right: -90px;
        transform: rotateZ(90deg);
    }

.ohm {
        position: absolute;
        top: 130px;
        right: 135px;
      animation: movepeople 2s infinite;
    }
  @keyframes movepeople{
      0% { transform: translate(1px, 1px) rotate(0deg); }
      10% { transform: translate(-1px, -2px) rotate(-1deg); }
      20% { transform: translate(-3px, 0px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  .bubblemain{
      background: url("https://imgur.com/zEAVbdX.png");
      background-size: 200px 200px;
      width:200px;
      height:200px;
      bottom:-200px;
		position:absolute;
      display: inline-block;
  }
  .bubble1{
      background: url("https://cdn.discordapp.com/attachments/798205933716635681/809472796287565914/149019802_164915691901684_5829502625261816680_n.png");
		position: absolute;
      top: 40%;
      left: 35%;
      background-size: 50px 50px;
      width:50px;
      height:50px;
  }
  .bubble2{
		background: url("https://cdn.discordapp.com/attachments/798205933716635681/809437321795469322/20191023_133323-removebg-preview_1.png");
		position: absolute;
      top: 30%;
      left: 25%;
      background-size: 100px 100px;
      width:100px;
      height:100px;
  }
  .bubble3{
		background: url("https://cdn.discordapp.com/attachments/798205933716635681/809797752359223296/vEWdBQ6.png");
		position: absolute;
      top: 25%;
      left: 25%;
      background-size: 100px 100px;
      width:100px;
      height:100px;
  }
  .bubble4{
		background: url("https://cdn.discordapp.com/attachments/798205933716635681/809421231631499345/84458983_2741963735892425_6825954762907713536_o-removebg-preview.png");
		position: absolute;
      top: 10px;
      left: -50px;
      background-size: 300px 300px;
      width:300px;
      height:300px;
  }
  .bubble5{
		background: url("https://cdn.discordapp.com/attachments/798205933716635681/809444168148844564/image0.png");
		position: absolute;
      top: 50px;
      left: -30px;
      background-size: 170px 170px;
      width:170px;
      height:170px;
  }
  .bubble6{
		background: url("https://cdn.discordapp.com/attachments/798205933716635681/809438374309265428/profile.png");
		position: absolute;
      top: 60px;
      left: 60px;
      background-size: 80px 80px;
      width:80px;
      height:80px;
  }
  @keyframes a{
    0%{
		bottom:-200px;
      left:200px;
      opacity:0;
    }
    30%{
		left:300px;
    }
    50%{
		opacity:1;
      left:450px;
    }
    75%{
		left:300px;
    }
    100%{
		left:200px;
		bottom:800px;
    }
  }
  @keyframes d{
    0%{
		bottom:-200px;
      left:200px;
      opacity:0;
    }
    30%{
		left:300px;
    }
    50%{
		opacity:1;
      left:450px;
    }
    75%{
		left:300px;
    }
    100%{
		left:100px;
		bottom:800px;
    }
  }
  @keyframes b{
    0%{
		bottom:-200px;
      left:500px;
      opacity:0;
    }
    30%{
		left:600px;
    }
    50%{
      left:500px;
		opacity:1;
    }
    75%{
		left:600px;
    }
    100%{
      left:500px;
		bottom:800px;
    }
  }
  @keyframes c{
    0%{
		bottom:-200px;
      left:100px;
      opacity:0;
    }
    50%{
      left:500px;
		opacity:1;
    }
    100%{
      left:100px;
		bottom:800px;
    }
  }
  </style>

</body>
<script>

</script>

</html>