Week 5 (Copy 2172) (Copy 2225)

✨ Pisitchai rueangwatanaphong

<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: 110px;
  height: 160px;
  animation: movel 5s infinite;
  top:20%;
  left:12%;

}
  .boom{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810107614846386207/2_1.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 130px;
  height: 200px;
  top:35%;
  left:18%;
  }
  
  .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;
  bottom:15%;
  right:15%;
  }
	
  .blue{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810107441815355402/4.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 155px;
  height: 185px;
  top:17%;
  right:35%;
  }
  
  .mesa{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810107011597205504/6.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 140px;
  height: 220px;
  bottom:10%;
  left:30%;
  
  }
  
  .phufa{
	background:url(https://cdn.discordapp.com/attachments/798210377618948117/810106002287624223/7.gif);
  background-size: cover;
  position:absolute;
  background-repeat: no-repeat;
  width: 140px;
  height: 200px;
  top:40%;
  right:25%;
  
  }
  
  .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:10%;
  right:40%;

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

@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;
}

.head {
    font-size: 26px;
    font-weight: 900;
  }

.info {
    font-size: 20px;
  }

.sun-container {
		
  }
  
.sun{
    position:absolute;
    right:10%;
    top:5%;
    width: 200px;
    height: 200px;
    background-image : url(https://cdn.discordapp.com/attachments/806432838101630979/809803184196288542/sun.png);
    animation:sun1 5s infinite;
}
  .khobsun{
    position:absolute;
    right:10%;
    top:5%;
    width: 200px;
    height: 200px;
    background-image : url(https://cdn.discordapp.com/attachments/806432838101630979/809803191473930240/sun2.png);
    animation:sun2 5s infinite;
  }
  @keyframes sun2{
    0%{transform:rotateZ(0deg)scale(0.7);}
    25%{transform:rotateZ(90deg)scale(1);}
    50%{transform:rotateZ(180deg)scale(0.7);}
    75%{transform:rotateZ(270deg)scale(1);}
    100%{transform:rotateZ(360deg) scale(0.7);}
  }

.jbondance {
    position: absolute;
    top: 15%;
    left: 40%;
    width: 72px;
    height: 150px;
    background-image: url(https://cdn.discordapp.com/attachments/798210377618948117/810120854380740618/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: -577px;
    }
  }

.gettydance {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 133px;
    height: 152px;
    background-image: url(https://cdn.discordapp.com/attachments/798210377618948117/810120852020527134/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! I'm Few</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! I'm Frame </p1>
  	 </div>
    <div class="m" onclick="Mpisit()">
    <p1 id="Mname" >Hello! I'm M</p1>
  	 </div>
    <div onload="genSun()" class="sun-container">
      <div class= "sun"></div>
	 	<div class= "khobsun"></div>
    </div>
    <div>
      <div class="jbondance"></div>
      <div class="gettydance"></div>
    </div>
  </div>

</body>
<script>
  function genSun() {
	var randomX = Math.floor(Math.random()*100);
	var randomY = Math.floor(Math.random()*100);
  	var sun = document.querySelector(".sun-container");
  	sun.style.top = randomX;
  	sun.style.left = randomY;
  }

</html>