Group E P’New
✨ APHATSARA MORATSATHIAN
<html><head> <title>Picture groupE</title> <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet"> <style> html{ background-color: #282130; opacity: 1; background-image: radial-gradient(#ffbd4b 0.7000000000000001px, #282130 0.7000000000000001px); background-size: 14px 14px; } .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; } .name{ position: absolute; font-family: "Fredoka One"; font-size: 5em; font-weight: 700; color: #ffae21; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #ffeebd; right: 3%; margin-top: 0.5%; text-shadow: 0 0.1em 20px rgba(214, 64, 255, 0.4), 0.05em -0.03em 0 rgba(214, 64, 255, 0.3), 0.05em 0.005em 0 rgba(214, 64, 255, 0.5), 0em 0.08em 0 rgba(214, 64, 255, 0.6), 0.05em 0.08em 0 rgba(214, 64, 255, 0.3), 0px -0.03em 0 rgba(214, 64, 255, 0.8), -0.03em -0.03em 0 rgba(214, 64, 255, 0.5), -0.03em 0.08em 0 rgba(214, 64, 255, 0.4), -0.03em 0 0 rgba(214, 64, 255, 0.5); } span { transform: scale(0.5px); display: inline-block; } span:nth-child(1) { animation: textAnimate 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate; } span:nth-child(2) { animation: textAnimateB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate; } @keyframes textAnimate{ 0% { transform: scale(0.9); } 50%,100% { transform: scale(1) rotateZ(3deg); } } @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>