hw groupE P’new (Copy 2118)

✨ APHATSARA MORATSATHIAN

<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;
        background-size: 90px 100px;
        border-radius: 30px;
        display: inline-block;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        transition: transform 1s;
     }
          .por[data-pic="2"] {
      height: 90px;
      width: 100px;
      background-image: url("https://scontent.fbkk12-2.fna.fbcdn.net/v/t1.0-9/126847347_1852882098194999_1211517418583501058_o.jpg?_nc_cat=104&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeH_l5Jqcr0dQQZGrX7wKqJ42Mh5xZCbFErYyHnFkJsUSkA4ixrTJOq4tAgK8wy6Ratc9i6yCOgWf_h5fG_gca24&_nc_ohc=8ms3dQgyFiEAX92_PTc&_nc_ht=scontent.fbkk12-2.fna&oh=3b60d1994ba24f65395d6b8ce4a4f3c1&oe=604CDD3B");
      background-size: 90px 100px;
      border-radius: 30px;
      display: inline-block;
      }
          .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;
     }
     .por[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/por.png");
      background-size: 90px 90px;
}
     .por:active {
    transform: scale(0.97);
    transition: transform .5s;
}
    .por.flip {
      transform: rotateY(180deg);
}

</style>
	</head>
<body>
	<div class="canvas">
     <div class="amongus">
     <img class="pnew" data-pic="11" data-cards='-1' onclick="pick(this)" src="https://cdn.discordapp.com/attachments/798210263559962624/809432958229282897/p_new.png"><img>
       <img class="neay" data-pic="1" data-cards='-1' onclick="pick(this)" src="https://s2.gifyu.com/images/neoy.png"><img>
       <div class="por" data-pic="2" data-cards='-1' onclick="pick(this)" ></div>
       <img class="rarm" data-pic="3" data-cards='-1' onclick="pick(this)"  src="https://s2.gifyu.com/images/raam.png"><img>
       <img class="ing" data-pic="4" data-cards='-1' onclick="pick(this)" src="https://s2.gifyu.com/images/ing.png"><img>
       <img class="gam" data-pic="5" data-cards='-1' onclick="pick(this)" src="https://s2.gifyu.com/images/kaem.png"><img>
       <img class="mek" data-pic="6" data-cards='-1' onclick="pick(this)" src="https://s2.gifyu.com/images/meg.png"><img>
       <img class="babe" data-pic="7" data-cards='-1' onclick="pick(this)" src="https://s2.gifyu.com/images/babe.png"><img>
       <img class="top" data-pic="8" data-cards='-1' onclick="pick(this)" src="https://s2.gifyu.com/images/top.png"><img>
       <img class="folk" data-pic="9" data-cards='-1' onclick="pick(this)" src="https://s2.gifyu.com/images/folk.png"><img>
       <img class="pjaborn" data-pic="10" data-cards='-1' onclick="pick(this)" 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);
    function pick(cardd) {
  		cardd.dataset.cards *= -1;
		}
  </script>
</body>
</html>