Week 5 Teletubbie

✨ Gimme ur CANDY

<html>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
  body{
    display: flex;
    justify-content: center;
    align-items: center;
  }

.overall {
    background-image: url('https://cdn.discordapp.com/attachments/798210377618948117/809376669626007592/house.jpg');
    background-position: center;
    background-size: cover;
    text-align: center;
    width: 90%;
    height: 95%;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    /* border: 20px solid;
    border-image-source: url(https://i.pinimg.com/originals/ab/4c/21/ab4c21962addbaa0e6afbd0d7d0092d2.png);
    border-image-slice: 60 30; */
    background-repeat: no-repeat;
  }
.overall:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.tonkla{
  background:url("https://cdn.discordapp.com/attachments/798210377618948117/810107933143990272/79f6bcb3cce1337ed6986ff67fe6d6-unscreen_1.gif");
 background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
 width: 150px;
  height: 200px;
  animation: movel 5s infinite;
  bottom:10%;
  left:10%;

}
  .boom{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810107614846386207/2_1.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 200px;
  top:35%;
  left:20%;
  }
  
  .kong{
  background:url(https://cdn.discordapp.com/attachments/798210377618948117/810106640728195102/5_1.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 200px;
  top:50%;
  right:10%;
  }
	
  .blue{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810107441815355402/4.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 160px;
  height: 180px;
  bottom:30%;
  right:22%;
  }
  
  .mesa{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810107011597205504/6.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 240px;
  bottom:10%;
  right:30%;
  
  }
  
  .phufa{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810106002287624223/7.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 200px;
  bottom:40%;
  right:50%;
  
  }
  
  .kim{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810106132404109332/9_1.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 120px;
  height: 180px;
  bottom:20%;
  left:30%;

}
  
  .gray{ 	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810107144115847168/8_1.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 200px;
  bottom:10%;
  left:40%;
 
  }
  
  .m{	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810115432618655764/3.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 200px;
  top:15%;
  left:30%;
 
  }
  }

@keyframes move{
  0%{
    transform:translate(0px);
  }
 50%{
    transform:  translate(50px);
  }
  100%{
    transform: translate(0px);
  }
 }
  
@keyframes moveup {
  0%{
    transform: rotatey(60deg);
  }
 50%{
    transform:rotatey(180deg);
  }
  100%{
    transform:rotatey(360deg);
  }
 }

p1{
  display:none;
  color:black;
  text-align:center;
}

.tube{
    background:url(https://www.pinpng.com/pngs/m/160-1606757_my-image-teletubbies-noo-noo-png-transparent-png.png);
    background-position:center;
    background-size:cover;
    width:100px;
    height:100px;
  }
  
  .head {
    font-size: 26px;
    font-weight: 900;
  }

.info {
    font-size: 20px;
  }

.jbondance {
    position: absolute;
    top: 20%;
    left: 38%;
    width: 72px;
    height: 104px;
    background-image: url(https://cdn.discordapp.com/attachments/806432838101630979/809421053218259005/jbondance.png);
    animation: jdance 1s steps(8) infinite;
  }
  
@keyframes move1 {
    0% {
      transform: translate(0px);
    }

50% {
      transform: translate(40%);
    }

100% {
      transform: translate(-0px);
    }
  }
  
  @keyframes jdance {
    from {
      background-position-x: 0px;
    }

to {
      background-position-x: -572px;
    }
  }

.gettydance {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 133px;
    height: 132px;
    background-image: url(https://cdn.discordapp.com/attachments/806432838101630979/809433470011047936/getty.png);
    animation: gdance 1s steps(8) infinite;
  }

@keyframes gdance {
    from {
      background-position-x: 0px;
    }

to {
      background-position-x: -1062px;
    }
  }
  p1:nth-child(1), 
  p1:nth-child(2), 
  p1:nth-child(3),
  p1:nth-child(4),
  p1:nth-child(5),
  p1:nth-child(6),
  p1:nth-child(7),
  p1:nth-child(8),
  p1:nth-child(9){
        position:absolute;
        top: -70px;
        background: rgb(255,255,255, 0.7);
        padding: .5rem;
        border-radius: 1rem;    
        z-index: 2;
  }
</style>

<body>
  <div class="overall">
    <div class="tonkla" onclick="Tonkla()">
    <p1 id="tonklaname" >Hello! I'm Tonkla</p1>
  	 </div>
    <div class="boom" onclick="Boom()">
    <p1 id="boomname" >Hello! I'm Boom</p1>
  	 </div>
    <div class="kong" onclick="Kong()">
    <p1 id="kongname" >Hello! I'm Kong</p1>
  	 </div>
    <div class="blue" onclick="name4()">
    <p1 id="name44" >Hello! My name</p1>
  	 </div>
    <div class="mesa" onclick="Mesa()">
    <p1 id="Mesaname" >Hello! I'm P</p1>
  	 </div>
    <div class="phufa" onclick="Phufa()">
    <p1 id="phufaname" >Hello! I'm Phufa</p1>
  	 </div>
    <div class="kim" onclick="Kim()">
    <p1 id="kimname" >Hello! I'm Kim</p1>
  	 </div>
    <div class="gray" onclick="Gray()">
    <p1 id="grayname" >Hello! </p1>
  	 </div>
    <div class="m" onclick="Mpisit()">
    <p1 id="Mname" >Hello! </p1>
  	 </div>
    <div>
      <div class="jbondance"></div>
      <div class="gettydance"></div>
    </div>
  </div>

</body>
<script>

</html>