Team E Thx Family
✨ APICHET KOMWATCHARAPONG
<html> <head> <style> * { margin: 0; box-sizing: border-box; } body { font-size: .9em; display: flex; overflow: hidden; justify-content: center; align-items: center; background-color: black; } .wrap { display: block; width: 100%; text-align: center; } .main { display: inline-block; position: relative; height: 600px; width: 1300px; overflow: hidden; background-image: url('https://media.discordapp.net/attachments/809796054848634932/810176112579182592/frame.png'); background-size: 100% 100%; background-repeat: no-repeat; } .bg-front { position: absolute; bottom: 0; left: -5%; width: 110%; height: 100%; background-image: url("https://media.discordapp.net/attachments/809796054848634932/810142651093221386/bgcastle.png"); background-size: 100% 100%; background-repeat: no-repeat; z-index: -98; animation: castle 1.5s linear infinite; } @keyframes castle { 50% {transform: skew(3deg);} } .bg-back { position: absolute; width: 100%; height: 100%; background-image: url("https://media.discordapp.net/attachments/809796054848634932/810137675931451432/image0.jpg"); background-size: 100% 100%; z-index: -99; } .fah img { position: absolute; top: 5%; left: 5%; width: 20em; height: auto; animation: yokyok 2s linear 2.5s infinite; z-index: -3; } .putter img { position: absolute; top: 5%; right: 5%; width: 18em; height: auto; animation: yokyok 2s linear 1.5s infinite; z-index: -3; } .ball img { position: absolute; top: 20%; left: -30%; width: 5em; height: auto; animation: move 10s linear infinite; z-index: -1; } .thx img { position: absolute; top: 0%; left: -30%; width: 25em; height: auto; animation: move 10s linear 2s infinite; z-index: -2; } .jean img { position: absolute; top: 15%; left: -30%; width: 20em; height: auto; animation: move 10s linear 3s infinite; z-index: -2; } @keyframes move { to { transform: translatex(130vw); } } .boat-pleng-art img { width: 20em; height: auto; position: absolute; bottom: 8%; left: 25%; animation: yokyok 5s linear 1s infinite; } .boat-neng-phai img { width: 25em; height: auto; position: absolute; bottom: 0%; left: 0%; animation: yokyok 5s linear 2s infinite; } .boat-o-aum img { width: 20em; height: auto; position: absolute; bottom: 8%; right: 25%; animation: yokyok 5s linear 2s infinite; } .boat-mom-fang img { width: 25em; height: auto; position: absolute; bottom: 0%; right: 0%; animation: yokyok 5s linear 1s infinite; } @keyframes yokyok { 50% { transform: translatey(20px); } } .text img { position: absolute; width: 30em; height: 10em; top: 10%; left: calc((100% - 30em)/2); z-index: -4; } </style> </head> <body> <div class="wrap"> <div class="main"> <div class="bg-back"></div> <div class="bg-front"></div> <div class="text"> <img src="https://cdn.discordapp.com/attachments/809796054848634932/810169915675639808/text.png" /> </div> <div class="fah"> <img src="https://media.discordapp.net/attachments/809796054848634933/809822205957373952/4bbdc98535153c1a.png" /> </div> <div class="putter"> <img src="https://cdn.discordapp.com/attachments/809796054848634933/810161462454517780/4ea8a3b8479bbd82.png" /> </div> <div class="ball"> <img src="https://cdn.discordapp.com/attachments/809796054848634932/810179060956135445/f5e72b16abb7de10107d31307c386f8b.png" /> </div> <div class="thx"> <img src="https://media.discordapp.net/attachments/809796054848634933/810150064973807616/thx.png" /> </div> <div class="jean"> <img src="https://cdn.discordapp.com/attachments/809796054848634932/810177804779257886/jeanswap.png" /> </div> <div class="boat-pleng-art"> <img src="https://media.discordapp.net/attachments/809796054848634933/810136038881361930/plengart.png" /> </div> <div class="boat-o-aum"> <img src="https://media.discordapp.net/attachments/809796054848634933/810136758590767104/6769b45458482ddb.png" /> </div> <div class="boat-neng-phai"> <img src="https://media.discordapp.net/attachments/809796054848634933/810137926792118282/nengphai.png" /> </div> <div class="boat-mom-fang"> <img src="https://media.discordapp.net/attachments/809796054848634933/810147317587116042/fangjabon.png" /> </div> </div> </div> <audio loop="loop" src="https://raw.githubusercontent.com/63070138/Multi/main/Harry%20Potter%20-%20The%20Ultimate%20Indian%20Theme.mp3" autoplay > </audio> </body> </html>