hw groupE P’new

✨ RUJRAWEE MEELA

<html>
<head>
  <title>Picture groupE</title>
	<style>
		.canvas{
        position:relative;
        background-image:url("https://cdn.discordapp.com/attachments/798210263559962624/809427683234676746/OInHPpA.png");
        background-repeat:no-repeat;
        background-size:cover;
        background-position: 10% 70%;
        border-radius:20px;
        border:2px solid black;
			width: 95%;
			height: 95%;
        	display:block;
        margin:1.5em auto;
        z-index:0;
		}
     .pnew{	
       position:absolute;
       width:100px;
       height:115px;
       bottom:15%;
       transform:rotatey(180deg);
       left:18%;
       z-index:0;

}
          .neay{	
       width:90px;
       height:100px;
       position:absolute;
       top:10%;
       left:30%;
       z-index:0;
      animation: spin 4.5s infinite ease-in ;
        
     }
     @keyframes spin{
       0%{transform:rotate(0deg) translatex(0px) ;}
       50%{scale(0.7) opacity:0;}
       75%{opacity:0;}
       80%{opacity:0;}
       100%{transform:rotate(-360deg) translatex(100px) scale(0.5);opacity:0;}
     }
     .por{	
       width:90px;
       height:100px;
       position:absolute;
       bottom:1%;
       left:42%;
       z-index:2;
     }
          .rarm{	
       width:80px;
       height:90px;
       position:absolute;
       bottom:5%;
       right:42%;
       z-index:0;
     }
          .ing{	
       width:80px;
       height:90px;
       position:absolute;
       bottom:5%;
       right:47%;
       transform:rotatey(180deg);
       z-index:1;
     }
          .gam{	
       width:120px;
       height:130px;
       position:absolute;
       bottom:0%;
       transform: rotatey(180deg);
       left:10%;
       z-index:1;
      animation:walk 4s infinite;
     }
     @keyframes walk{
       0%{	left:10%;
         	transform:rotate(0px);}
       100%{left:30%;
         	transform:rotate(100==px);}
     }
     .mek{	
       width:100px;
       height:120px;
       position:absolute;
       bottom:1%;
       left:31%;
      transform: rotatey(180deg);
      z-index:1;
     }
          .babe{	
       width:120px;
       height:130px;
       position:absolute;
       bottom:0%;
       transform: rotatey(180deg);
       left:2%;
       z-index:1;
     }
          .top{	
       width:100px;
       height:110px;
       position:absolute;
       top:12%;
       right:45%;
       z-index:0;
     }
          .folk{	
       width:90px;
       height:100px;
       position:absolute;
       top:35%;
       left:0%;
      transform: rotatey(180deg);
       z-index:0;
     }    
     .pjaborn{	
       width:90px;
       height:100px;
       position:absolute;
       bottom:13%;
       left:38%;
       z-index:0;
     }
      	.store1{	
       width:320px;
       height:320px;
       position:absolute;
       bottom:-2%;
       left:10%;
       z-index:0;
     }
           	.store2{	
       width:300px;
       height:300px;
       position:absolute;
       bottom:1%;
       left:31%;
       z-index:0;
     }
     .moon-half{
       width:120px;
       height:120px;
       position:absolute;
       top:2%;
       left:20%;
       z-index:0;
     }

</style>
	</head>
<body>
	<div class="canvas">
     <div class="amongus">
     <img class="pnew"src="https://cdn.discordapp.com/attachments/798210263559962624/809432958229282897/p_new.png"><img>
       <img class="neay" data-pic="1" src="https://s2.gifyu.com/images/neoy.png"><img>
       <img class="por" src="https://s2.gifyu.com/images/por.png"><img>
       <img class="rarm" src="https://s2.gifyu.com/images/raam.png"><img>
       <img class="ing" src="https://s2.gifyu.com/images/ing.png"><img>
       <img class="gam" src="https://s2.gifyu.com/images/kaem.png"><img>
       <img class="mek" src="https://s2.gifyu.com/images/meg.png"><img>
       <img class="babe" src="https://s2.gifyu.com/images/babe.png"><img>
       <img class="top" src="https://s2.gifyu.com/images/top.png"><img>
       <img class="folk" src="https://s2.gifyu.com/images/folk.png"><img>
       <img class="pjaborn" src="https://s2.gifyu.com/images/p-jabont.png"><img>
     </div>
     <div class='store'>
       <img class='store1' src="https://cdn.discordapp.com/attachments/798210263559962624/809434927137030144/1.png"><img>
       <img class='store2' src="https://cdn.discordapp.com/attachments/798210263559962624/809434963325485076/465bfd5ee139f93d.png"><img>
     </div>
     <div class='moon'>
       <img class='moon-half' src="https://media.discordapp.net/attachments/798210263559962624/809435549244588042/82a9102512bb8cdb.png"><img>
     </div>

</div>
  <script>

setTimeout({animation:spin},5000);
  </script>
</body>
</html>