Happy family (group A P’Thx)

✨ ธนเดช แซ่ฉั่ว

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        body{
    width:100%;
    height:100%;
    position:absolute;     
}

.bg{
    background-image: url("https://www.beartai.com/wp-content/uploads/2020/04/Wallpaper03.jpg");
    width: 1300px;
    height: 900px;
    position:relative;
  	 left:15%;
    z-index: 0;
  	 overflow:hidden;
  	 background-repeat:no-repeat;
  	 margin:15px;
  	 background-size:cover;
  	 display:block;
}
.timehole{
    width: 120%;
    height: 150%;
    transform: translate(-50%, -50%);
    top: 50.75%;
    left: 50%;
    position:absolute;
    z-index: -1;
  	 background-size:cover;
}

.nobita1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 40%;
    left: 48%;
    position:absolute;
    visibility: visible;
  	 animation: spin 1.5s infinite;
}
.nobita2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 40%;
    left: 48%;
    position:absolute;
    visibility: hidden;
  	 animation: spin 1.5s infinite;
}

.jaiko1{
  	 cursor:pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 77%;
    position:absolute;
    visibility: visible;
  	 animation: shake 1s infinite alternate;
}
.jaiko2{
  	 cursor:pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 77%;
    position:absolute;
    visibility: hidden;
    animation: shake 1s infinite alternate;
}

.suneo1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 62%;
    position:absolute;
    visibility: visible;
  	 animation: wavee 1s infinite alternate;
}
.suneo2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 62%;
    position:absolute;
    visibility: hidden;
    animation: wavee 1s infinite alternate;
}

.gian1{
  	 cursor: pointer;
    width:280px;
    height: 280px;
    margin: auto;
    top: 37%;
    left: 35%;
    position:absolute;
    visibility: visible;
    animation: jump 1s infinite alternate;
}
.gian2{
  	 cursor: pointer;
    width:280px;
    height: 280px;
    margin: auto;
    top: 37%;
    left: 35%;
    position:absolute;
    visibility: hidden;
    animation: jump 1s infinite alternate;
}

.teacher1{
  	 cursor: pointer;
    width:250px;
    height:300px;
    margin: auto;
    top: 57%;
    left: 47%;
    position:absolute;
    visibility: visible;
    animation: wavee 1s infinite alternate;
}
.teacher2{
  	 cursor: pointer;
    width:250px;
    height:300px;
    margin: auto;
    top: 57%;
    left: 47%;
    position:absolute;
    visibility: hidden;
    animation: wavee 1s infinite alternate;
}

.shizuka1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 33%;
    position:absolute;
    visibility: visible;
    animation: wavee 1s infinite alternate;
}
.shizuka2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 33%;
    position:absolute;
    visibility: hidden;
    animation: wavee 1s infinite alternate;
}

.deki1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 20%;
    position:absolute;
    visibility: visible;
    animation: wavee 1s infinite alternate;
}
.deki2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 61%;
    left: 20%;
    position:absolute;
    visibility: hidden;
    animation: wavee 1s infinite alternate;
}

.pthx1{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top:40%;
    left: 25%;
    position:absolute;
    visibility: visible;
    animation: spin 1.5s infinite;
}

.pthx2{
  	 cursor: pointer;
    width:250px;
    height: 250px;
    margin: auto;
    top: 40%;
    left: 25%;
    position:absolute;
    visibility: hidden;
    animation: spin 1.5s infinite;
}

.none1{
  	 cursor: pointer;
    width:180px;
    height: 180px;
    margin: auto;
    top: 66%;
    left: 10%;
    position:absolute;
    visibility: visible;
    animation: shake 1s infinite alternate;
}
.none2{
  	 cursor: pointer;
    width:180px;
    height: 180px;
    margin: auto;
    top: 66%;
    left: 10%;
    position:absolute;
    visibility: hidden;
    animation: shake 1s infinite alternate;
}

@keyframes shake {
  0% {
    transform: translateX(-40px);
  }
  100% {
    transform: translateX(20px);
  }
}

@keyframes wavee {
  from {transform:rotate(15deg);}
  to { transform: rotate(-15deg); }
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes jump{
  to{transform:translatey(-40px);}
}
  
    </style>
    </head>
    <body>
        <img src="https://www.beartai.com/wp-content/uploads/2020/04/Wallpaper02.jpg" class="timehole" id="hole">
        <div class="bg">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810071852084625418/26_20210213153630.PNG" class="nobita1" onclick="clickact()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810071852147146772/26_20210213153626.PNG" class="nobita2" onclick="clickact()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" class="jaiko1" onclick="clickact2()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" class="jaiko2" onclick="clickact2()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810085000137539604/26_20210213162003.PNG" class="suneo1" onclick="clickact3()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810085000199405578/26_20210213162010.PNG" class="suneo2" onclick="clickact3()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810113702618726430/26_20210213180210.PNG" class="gian1" onclick="clickact4()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810113702501810196/26_20210213180235.PNG" class="gian2" onclick="clickact4()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810085000288010251/26_20210213164700.PNG" class="teacher1" onclick="clickact5()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810084999307067423/26_20210213164407.PNG" class="teacher2" onclick="clickact5()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810118519848828988/26_20210213185849.PNG" class="shizuka1" onclick="clickact6()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810118523677835264/26_20210213185925.PNG" class="shizuka2" onclick="clickact6()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810113702404554752/26_20210213184123.PNG" class="deki1" onclick="clickact7()">
        	<img src="https://media.discordapp.net/attachments/801450532006133822/810113702690553866/26_20210213184146.PNG" class="deki2" onclick="clickact7()">
        	<img src="https://media.discordapp.net/attachments/798207130233864222/810121035788713984/26_20210213191116.PNG" class="pthx1" onclick="clickact8()">
        	<img src="https://media.discordapp.net/attachments/798207130233864222/810121036439093288/26_20210213191111.PNG" class="pthx2" onclick="clickact8()">
        	<img src="https://media.discordapp.net/attachments/798207130233864222/810128395261837352/26_20210213194040.PNG" class="none1" onclick="clickact9()">
        	<img src="https://media.discordapp.net/attachments/798207130233864222/810128395530797146/26_20210213194044.PNG" class="none2" onclick="clickact9()">
        </div>