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> function Tonkla() { var x = document.getElementById("tonklaname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function Boom() { var x = document.getElementById("boomname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function Kong() { var x = document.getElementById("kongname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function name4() { var x = document.getElementById("name44"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function Mesa() { var x = document.getElementById("Mesaname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function Phufa() { var x = document.getElementById("phufaname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function Kim() { var x = document.getElementById("kimname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function Gray() { var x = document.getElementById("grayname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function Mpisit() { var x = document.getElementById("Mname"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } </script> </html>