Home sweet home group D P’New

✨ SUPACHAI KHEAWJUY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="https://github.com/spicyz/fakrube/blob/main/family.png?raw=true">
    <title>♡ Home sweet home ♡</title>
</head>
<style>
    html{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rainbowBackground 10s linear infinite alternate;
}

@keyframes rainbowBackground{
    0%{background: hsl(0, 40%, 80%)}
    20%{background: hsl(60, 40%, 80%)}
    40%{background: hsl(120, 40%, 80%)}
    60%{background: hsl(180, 40%, 80%)}
    80%{background: hsl(240, 40%, 80%)}
    100%{background: hsl(300, 40%, 80%)}
}

.container{
    /* border: 15px solid hsl(0, 100%, 50%); */
    animation: borderRainbow 10s linear infinite alternate-reverse;
    overflow: hidden;
    position: relative;
    display: block;
    width: 1280px;
    height: 768px;
    border-radius: 30px;
    box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
}

.taytitan{
    content: url("https://media.discordapp.net/attachments/798210237013164052/810174515509329940/titanwall.png?width=519&height=519");
    z-index: 3;
    position: absolute;
    width: 200px;
    left: 25%;
    bottom: 0;
}

@keyframes borderRainbow{
    0%{border: 30px solid hsl(0, 100%, 50%);}
    20%{border: 30px solid hsl(60, 100%, 50%);}
    40%{border: 30px solid hsl(120, 100%, 50%);}
    60%{border: 30px solid hsl(180, 100%, 50%);}
    80%{border: 30px solid hsl(240, 100%, 50%);}
    100%{border: 30px solid hsl(300, 100%, 50%);}
}

@keyframes UpDown{
    0%, 100%{bottom: 0;}
    50%{bottom:300px;}
}

@keyframes zoom{
    0% {
        transform: scale(0.5,0.5);
    }
    100% {
        transform: scale(1.2,1.2);
    }
}

.bg{
    background: url("https://cdn.discordapp.com/attachments/798210237013164052/810119430427377684/tumblr_static_final.png") no-repeat;
    background-size: cover;
}

.wall{
    background: url("https://cdn.discordapp.com/attachments/798210237013164052/810132017270358016/1111.png") no-repeat;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: absolute;
    z-index: 2;
}

.people{
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 1;
}
/* Tay */
.people:nth-child(1){
    content: url("https://media.discordapp.net/attachments/798880741919817810/809794985272148008/img03.png");
    bottom: 100px;
    left: -35px;
    display: none;
}
/* Boss */
.people:nth-child(2){
    content: url("https://cdn.discordapp.com/attachments/798210237013164052/810183552352256060/boss.png");
    bottom: 50px;
    left: 1100px;
    animation: 
}
/* Chai */
.people:nth-child(3){
    content: url("https://media.discordapp.net/attachments/798210237013164052/810185567982583848/chai.png?width=475&height=475");
    bottom: 10px;
    left: 300px;
}
/* Sairoong */
.people:nth-child(4){
    content: url("https://media.discordapp.net/attachments/798210237013164052/810182742590881862/sairoong.png?width=519&height=519");
    bottom:10px;
    left:200px;
}
/* Fah */
.people:nth-child(5){
    content: url("https://media.discordapp.net/attachments/798210237013164052/810182634487283743/fahhhhh.png?width=519&height=519");
    bottom:-5px;
    left: 90px;
}
/* Ter */
.people:nth-child(6){
    content: url("https://media.discordapp.net/attachments/798210237013164052/809827550255382538/Ter.png?width=475&height=475");
    bottom: 30px;
    right: 495px;
    display: none;
}
/* Pun */
.people:nth-child(7){
    content: url("https://cdn.discordapp.com/attachments/798210237013164052/810192792097390622/pun.png");
    bottom: 30px;
    left: 630px;
}
/* Nut */
.people:nth-child(8){
    content: url("https://media.discordapp.net/attachments/798210237013164052/810122964723826748/Nutt.png?width=376&height=475");
    bottom:30px;
    right: 600px;
    display: none;  
}
/* Best */
.people:nth-child(9){
    content: url("https://media.discordapp.net/attachments/798210237013164052/810184424884928562/best.png?width=475&height=475");
    bottom:10px;
    right:700px;
}
/* P New */
.people:nth-child(10){
    content: url("https://media.discordapp.net/attachments/798210237013164052/810161141904703527/pnew.png?width=475&height=475");
    bottom:30px;
    left: 830px;
    z-index: 3;
}
/* P Jabont */
.people:nth-child(11){
    content: url("https://media.discordapp.net/attachments/798210237013164052/810156922828750898/JB.png?width=475&height=475");
    bottom:30px;
    left:970px;
    z-index: 3;
}
.tertitan{
    content: url("https://media.discordapp.net/attachments/798210237013164052/810168340622082098/titanter2.png?width=783&height=384");
    /* bottom: 60px; */
    bottom: 200px;
    left: 500px;
    position: absolute;
    z-index: 1;
}
.nuttitan{
    content: url("https://cdn.discordapp.com/attachments/798210237013164052/810190330916896768/nut.png");
    bottom: -600px;
    left: 200px;
    position: absolute;
    z-index: 5;
}
</style>
<body onload="run()">
    <div class="container bg">
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="people"></img>
        <img class="nuttitan">
        <img class="tertitan">
        <img class="taytitan">
        <div class="wall"></div>
    </div>
</body>
<script>
    function run(){
        var x = document.querySelectorAll(".people");
        for (let i=0;i<x.length;i++){
            setTimeout(() => {
                console.log(i);x[i].style.animation = `UpDown 5s linear infinite, zoom 5s infinite`
            }, 500*i);
        }
    }
</script>
</html>