Group E P’New

✨ APHATSARA MORATSATHIAN

<html><head>
<title>Picture groupE</title>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&amp;display=swap" rel="stylesheet">

@keyframes textAnimateB{
  0% {
    transform: scale(0.9);
  }
  80%,100% {
    transform: scale(1) rotateZ(-3deg);
  }
}     
      .starname{
      width:40px;
      height::40px;
      animation:fall 1500ms infinite;
      z-index:0;
      position:absolute;
      top:1%;
      right:33%;
      }
  @keyframes fall{
    0%{transform:scale(0.6);}
    100%{transform:scale(1);}
    }
     .pnew{	
       position:absolute;
       width:100px;
       height:115px;
       bottom:15%;
       transform:rotatey(180deg);
       left:18%;
       z-index:0;

}
      .neay{	
       position:absolute;
       top:10%;
       left:30%;
       z-index:0;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
      animation: spin 4.5s infinite ease-in ;

}
              .neay[data-pic="1"] {
      height: 110px;
      width: 100px;
            background-image: url("https://s2.gifyu.com/images/neoy-named.png");
      background-size: 100px 110px;
      display: inline-block;
      }
     @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{	
       position:absolute;
       bottom:1%;
       left:40%;
       z-index:2;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
     }
            .por[data-pic="2"] {
      height: 110px;
      width: 100px;
            background-image: url("https://s2.gifyu.com/images/por-named.png");
      background-size: 100px 110px;
      display: inline-block;
      }
          .rarm{	
       position:absolute;
       bottom:5%;
       right:42%;
       z-index:0;
       animation: jump 1s infinite reverse;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
     }
          .rarm[data-pic="3"] {
      height: 90px;
      width: 80px;
      background-image: url("https://s2.gifyu.com/images/raam-named.png");
      background-size: 80px 90px;
      display: inline-block;
      }
          .ing{	
       position:absolute;
       bottom:5%;
       right:46%;
       transform:rotatey(180deg);
       z-index:1;
       animation: jump 1s infinite;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
     }
          .ing[data-pic="4"] {
      height: 90px;
      width: 80px;
      background-image: url("https://s2.gifyu.com/images/ing-namede2f532eaa553b8f5.png");
      background-size: 80px 90px;
      display: inline-block;
      }
     @keyframes jump{
       0%,100%{
			bottom: 8%;
         animation: ease-in-out;
       }
       50%{
			bottom: 5%;
       }
     }
     .gam{	
       position:absolute;
       bottom:0%;
       transform: rotatey(180deg);
       left:10%;
       z-index:1;
      animation:walk 8s infinite ease-out;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
     }
            .gam[data-pic="5"] {
      height: 110px;
      width: 110px;
      background-image: url("https://s2.gifyu.com/images/kaem-nameddec988c342dc704a.png");
      background-size: 110px 110px;
      display: inline-block;
      }
     @keyframes walk{
			0%{left:10%;}
         25%{
				left:35%;
            animation: ease-out;
            transform: rotatey(180deg);
            bottom: 1%;
			   width: 100px;
            height:110px; }
       	40%{
            left:90%;
 				transform: rotatey(180deg);}
         45%{
  				left:90%;
				transform: rotatey(0deg);
            width:110px;
       		height:110px;
       }
       60%{
			animation: ease-in-out;
         animation-duration
    		left: 0%;
         transform: rotatey(0deg);
       }
       75%{
				left:35%;
            animation: ease-in-out;
            transform: rotatey(0deg);
            bottom: 1%;
			   width: 100px;
            height:110px;
       }
       100%{
    		left: 90%;
         transform: rotatey(0deg);
         left:10%;
         animation: ease-in-out
       }
     }
     .mek{	
       position:absolute;
       bottom:1%;
       left:31%;
      transform: rotatey(180deg);
      z-index:1;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
     }
            .mek[data-pic="6"] {
      height: 120px;
      width: 95px;
      background-image: url("https://s2.gifyu.com/images/mek-named013dd0c54f38ab92.png");
      background-size: 95px 120px;
      display: inline-block;
      }
          .babe{	
       position:absolute;
       bottom:0%;
       transform: rotatey(180deg);
       left:2%;
       z-index:1;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
     }
            .babe[data-pic="7"] {
      height: 145px;
      width: 130px;
      background-image: url("https://s2.gifyu.com/images/babe-namedcc53c4009d27af4f.png");
      background-size: 130px 145px;
      display: inline-block;
      }
          .top{	
       position:absolute;
       top:30%;
       right:50%;
       z-index:1;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
       animation-name: jumpingtop;
       animation-duration: 5s;
       animation-iteration-count: infinite;
       animation-timing-function: cubic-bezier(0,.57,.68,1.01);
     }
            .top[data-pic="8"] {
      background-image: url("https://s2.gifyu.com/images/top-named.png");
      background-size: 70px 80px;
      display: inline-block;
      }
     @keyframes jumpingtop{
       0%{
			top:40%;
         right:50%;
         width: 1px;
         height: 12px;
       }
       30%{
			top:20%;
       }
       40%{
         width:70px;
         height:80px;
         position:absolute;
         top:82%;
         right:49%;
       }
       50%, 60%, 70%, 90%, 100%{
			top: 80%;
         width:70px;
         height:80px;
        	right:49%;
       }
       55%, 65%, 75%, 85%, 95%{
			top: 82%;
         right:49%;
         width:70px;
         height:80px;
         animation: ease-in-out;
       }
     }
     .folk{	
       position:absolute;
       top:35%;
       left:0%;
       transform: rotatey(180deg);
       z-index:2;
       animation: folkjump 1s infinite;
        display: inline-block;
        transform-style: preserve-3d;
        transition: transform 1s;
     }
          .folk[data-pic="9"] {
      height: 100px;
      width: 90px;
      background-image: url("https://s2.gifyu.com/images/folk--namedfa12d0680fd224d3.png");
      background-size: 90px 100px;
      display: inline-block;
      }    
  @keyframes folkjump{
    0%,100%{
			top: 35%;
         animation: ease-in-out;
       }
       50%{
			top: 36%;
       }
  }
  .pjaborn{	
       width:90px;
       height:100px;
       position:absolute;
       bottom:13%;
       left:38%;
       z-index:0;
     }
      .store1{	
       width:320px;
       height:320px;
      background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/809434927137030144/1.png");
      background-size: 320px 320px;
      background-repeat: no-repeat;
       position:absolute;
       bottom:-2%;
       left:10%;
       z-index:0;
     }
  	.store1:hover{
		background-image: url("https://images-ext-2.discordapp.net/external/1PFxFif8tpm9zi3vHGmMzuMzOnlnSh_bP9ONFAHcX7M/https/s2.gifyu.com/images/newshop.png");
  }
  .store2{	
       width:300px;
       height:300px;
    background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/809434963325485076/465bfd5ee139f93d.png");
    background-size: 300px 300px;
       position:absolute;
       bottom:1%;
       left:31%;
       z-index:0;
     }
    	.store2:hover{
		background-image: url("https://s2.gifyu.com/images/465bfd5ee139f93d-copy.png");
  }
     .moon-half{
       width:120px;
       height:120px;
       position:absolute;
       top:2%;
       left:20%;
       z-index:0;
     }
     .star{
        position:absolute;
        width:0.2em;
        height:0.2em;
        background:whitesmoke;
        opacity:1;
        box-shadow:0px 0px 20px 5px #CCFFCC;
      }
  		.star:nth-child(1){
        top:10%;
        left:45%;
        animation:wow 1s infinite alternate,turn 1s infinite linear;
      }
       .star:nth-child(2){
        top:8%;
        left:16%;
        animation:wow 2s infinite alternate,turn 1s infinite linear;
      }
        .star:nth-child(3){
        top:9%;
        left:45%;
        animation:wow 3s infinite alternate,turn 1s infinite linear;
      }
        .star:nth-child(4){
        top:15%;
        left:10%;
        animation:wow 1s infinite alternate,turn 1s infinite linear;
      }
        .star:nth-child(5){
        top:17%;
        left:30%;
        animation:wow 2s infinite alternate,turn 1s infinite linear;
      }
        .star:nth-child(6){
        top:16%;
        left:50%;
        animation:wow 3s infinite alternate,turn 1s infinite linear;
      }
        .star:nth-child(7){
        top:18%;
        left:20%;
        animation:wow 4s infinite alternate,turn 1s infinite linear;
      }
        .star:nth-child(8){
        top:21%;
        left:40%;
        animation:wow 2s infinite alternate,turn 1s infinite linear;
      }
        .star:nth-child(9){
        top:7%;
        left:55%;
        animation:wow 1s infinite alternate,turn 1s infinite linear;
      }
  		@keyframes wow{
        from{opacity:.2}
        to{opacity:1}
      }
      @keyframes turn{
        from{transform:rotate(0deg)}
        to{transform:rotate(360deg)}
      }
  
  
         .neay[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/neoy.png");
      background-size: 100px 110px;
}
     .neay:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .neay.flip {
      transform: rotateY(180deg);
}
  
       .por[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/por.png");
      background-size: 100px 110px;
}
     .por:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .por.flip {
      transform: rotateY(180deg);
}
  
         .top[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/top.png");
      background-size: cover;
}
     .top:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .top.flip {
      transform: rotateY(180deg);
}
  
      .mek[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/meg.png");
      background-size: 95px 120px;
}
     .mek:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .mek.flip {
      transform: rotateY(180deg);
}
  
      .gam[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/kaem.png");
      background-size: 110px 110px;
}
     .gam:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .gam.flip {
      transform: rotateY(180deg);
}
  
      .babe[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/babe.png");
      background-size: 130px 145px;
}
     .babe:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .babe.flip {
      transform: rotateY(180deg);
}

.rarm[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/raam.png");
      background-size: 80px 90px;
}
     .rarm:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .rarm.flip {
      transform: rotateY(180deg);
}

.ing[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/ing.png");
      background-size: 80px 90px;
}
     .ing:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .ing.flip {
      transform: rotateY(180deg);
}
     
      .folk[data-cards="-1"] {
      background-image: url("https://s2.gifyu.com/images/folk.png");
      background-size: 90px 100px;
}
     .folk:active {
      transform: scale(0.97);
      transition: transform .5s;
}
    .folk.flip {
      transform: rotateY(180deg);
}

</style>
</head>
<body>
<div class="canvas">
<div class="name"><span>Group</span><span>P'New</span></div>
<div class="amongus">
<img class="pnew" src="https://cdn.discordapp.com/attachments/798210263559962624/809432958229282897/p_new.png"><img>
<div class="neay" data-pic="1" data-cards='-1' onclick="pick(this)"></div>
<div class="por" data-pic="2" data-cards='-1' onclick="pick(this)" ></div>
<div class="rarm" data-pic="3" data-cards='-1' onclick="pick(this)"></div>
<div class="ing" data-pic="4" data-cards='-1' onclick="pick(this)"></div>
<div class="gam" data-pic="5" data-cards='-1' onclick="pick(this)"></div>
<div class="mek" data-pic="6" data-cards='-1' onclick="pick(this)"></div>
<div class="babe" data-pic="7" data-cards='-1' onclick="pick(this)"></div>
<div class="top" data-pic="8" data-cards='-1' onclick="pick(this)"></div>
<div class="folk" data-pic="9" data-cards='-1' onclick="pick(this)"></div>
<img class="pjaborn" src="https://s2.gifyu.com/images/p-jabont.png"><img>
</div>
<div class="store">
<div class="store1" ></div>
<div class="store2" ></div>
</div>
<div class="moon">
<div>
  <img class="moon-half" onclick="image(this)" src="https://media.discordapp.net/attachments/798210263559962624/809435549244588042/82a9102512bb8cdb.png"><img></div>
</div>
<img class="starname" src="https://cdn.discordapp.com/attachments/798210263559962624/809840912163274762/image0.png"><img>
</div>
	<div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>
      <div class="star">
    </div>
      <div class="star">
</div>
  <audio autoplay="autoplay">
     <source src="https://multijabond.web.app/ngarnwad.mp3">
    </audio>
</div>
<script>
	function setHalfvolume(){
           var bgmusic = document.getElementById("autoplay");
           bgmusic.volume = 0.005;
     		  bgmusic.loop = true;
     }
  
    setTimeout({animation:spin},5000);
    function pick(cardd) {
  		cardd.dataset.cards *= -1;
		}
  	function image(){
		alert("“ท้องฟ้ายังมีจันทร์🌙 สักวันหนึ่งเธอคงมีใจ😖”")
   }
  </script>

</body></html>