Multi Media House GroupE P’PIM (Copy 2217)

✨ นายอินทนนท์ แต่งตั้ง

</---Credit Background : https://www.bloggang.com/data/a/aawdesign/picture/1520261116.jpg
Credit Music : https://www.youtube.com/watch?v=mhvPA5ZW3bY&feature=emb_logo
Inspiration from : ซีรี่ย์น้ำตากามเทพ--> 
<html>
    <style>
      body{ background-image: linear-gradient(to bottom right, red, yellow);
  height: %; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#wrapper {
  width: 1420px;
  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 20px;
  position: relative;
  overflow: hidden;
  background-image: url("https://images-ext-2.discordapp.net/external/3dMOm7pWFfO6jKTLftgLW4-98by8NnkSZqlHJXa7gOY/https/www.bloggang.com/data/a/aawdesign/picture/1520261116.jpg");
   border: 10px solid;
  border-image-source: linear-gradient(90deg, rgba(255,157,0,1) 0%, rgba(255,217,0,1) 100%);
  border-image-slice: 1;
  border-radius: 5px;
  border-width: 20px 20px;
  box-shadow: 10px 10px 10px 10px hsla(247, 100%, 0%, 0.64);
  
}
.bk{
  position: absolute;
    top: 87%;
    right: -20%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809782967681155132/rsz_84f45f126ab6aa75-removebg-preview.png");
  transform:scale(1.6);
  z-index:5;
  background-repeat: no-repeat;
  animation:bk 1.7s infinite alternate ease-in;
}
.chavee{
  position: absolute;
    top: 55%;
    right: -62%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809454310571900958/rsz_8.png");
  transform:scale(1.3);
  z-index:5;
  background-repeat: no-repeat;
  animation: chavee 1.7s infinite alternate ease-in;
}

.araya{
  position: absolute;
    top: 32%;
    left: 60%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809452802744385576/rsz_1image0.png");
  z-index:3;
  transform:scale(0.7);
  background-repeat: no-repeat;
  animation: araya 1.7s infinite alternate ease-in;
}
.maid{
  position: absolute;
    top: 50%;
    right: -20%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809450321788010546/12.png");
  z-index:1;
  transform:scale(1);
  background-repeat: no-repeat;
  animation: move 1.7s infinite alternate, maid1 1.7s linear ;
}
.piroj{
  position: absolute;
    top: 77%;
    right: 20%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809456079753838654/rsz_147079739_872875326844678_63235504643070226_n-removebg-preview.png");
  z-index:6;
  transform:rotatey(180deg)scale(1.2);
  background-repeat: no-repeat;
  animation: piroj 1.7s infinite alternate;
  
}
.maid2{
  position: absolute;
    top: 50%;
    left: 60%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809458105460850788/rsz_113.png");
  z-index:1;
  transform:scale(1);
  background-repeat: no-repeat;
  animation: move 1.7s infinite alternate,maid2 0.5s linear ;
  animation-timing-function: ease-in-out;
  
  
}
.chollee{
  position: absolute;
    top:77%;
    left: 20%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809459424606552124/rsz_149248659_698455257491319_2068816078390381022_n-removebg-preview.png");
  z-index:4;
  transform:scale(1.2);
  background-repeat: no-repeat;
animation: chollee 1.7s infinite alternate ease-in;
}
.mom{
    position: absolute;
    top:78.5%;
    left: 37%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809461876018774046/rsz_147847364_424479518874315_8204533544050398178_n-removebg-preview.png");
  z-index:3;
  transform:scale(1.25);
  background-repeat: no-repeat;
  animation:mom 1.7s infinite alternate ease-in;  
}
.doc{
  position: absolute;
    top:75%;
    left: 70%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809462702702460978/rsz_147334068_167717091820578_1892955407159673142_n-removebg-preview.png");
  z-index:6;
  transform:scale(1.1);
  background-repeat: no-repeat;
  animation: doc 1.7s infinite alternate ease-in; 
}
.ya{
  position: absolute;
    top:87.5%;
    left: 57%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809464129877311508/rsz_148517595_2907376839586685_6157271371576133330_n-removebg-preview.png");
  z-index:2;
  transform:scale(1.5);
  background-repeat: no-repeat;
  animation:ya 1.7s infinite alternate ease-in;

}
.dede{
  position: absolute;
    top:70.5%;
    left: 93%;
    width: 100%;
    height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/809413680634658839/809465011323273216/rsz_14-removebg-preview.png");
  z-index:6;
  transform:scale(1.2);
  background-repeat: no-repeat;
  animation: dede 1.7s infinite alternate ease-in;
}
       @keyframes move{
        0% {
            top: 50%;}
         40% {
            top: 55%;}
         90%{
           top: 50%;
         }
    }

@keyframes bk{
        0% {
            left: -256px;
            bottom: -270px;
            width: 256px;
            height: 256px;}
        50% {
          top:90%;
            left: 20%;
            width: 100%;
            height: 100%;}}
@keyframes chollee{
        0% {
            left: -256px;
            top: 77%;
            width: 256px;
            height: 100%;}
        40% {
           top:77%;
    left: 20%;
    width: 100%;
    height: 100%;}}
  @keyframes ya{
        0% {
            left: -256px;
            top:87.5%;
            width: 256px;
            height: 100%;}
        30% {
           position: absolute;
    top:87.5%;
    left: 57%;
    width: 100%;
    height: 100%;}}

@keyframes mom{
        0% {
            left: -256px;
            top:78.5%;
            width: 256px;
            height: 100%;}
        35% {
            top:78.5%;
    left: 37%;
    width: 100%;
    height: 100%;}}

@keyframes chavee{
        0%  {
            left: 2000px;
            top: 55%;
            width: 256px;
            height: 100%;}
        40%  {
            top: 55%;
    left: 62%;
    width: 100%;
    height: 100%;}}

@keyframes araya{
        0%  {
            left: 2000px;
            top: 32%;
            width: 256px;
            height: 100%;}
        35%  {
            top: 32%;
    left: 60%;
    width: 100%;
    height: 100%;}
}

@keyframes piroj{
        0%  {
            left: 2000px;
            top: 77%;
            width: 256px;
            height: 100%;}
        50%  {
top: 77%;
    right: 20%;
    width: 100%;
          height: 100%;}
}
@keyframes maid1{
       0% {
            left: 2000px;
            top:50%;
            width: 256px;
            height:100%;}
        30% {
           top: 50%;
    right: 60%;
    width: 100%;
    height: 100%;}
      }

@keyframes maid2{
        0%  {
            left: 2000px;
            bottom: 256px;
            width: 256px;
            height: 256px;}
        30%  {  top: 50%;
    left: 60%;
    width: 100%;
    height: 100%;}
}

@keyframes doc{
        0%  {
          top:75%;
            left: 2000px;
            top:75%;
            width: 256px;
            height: 100%;}
        40%  {
    top:75%;
    left: 70%;
    width: 100%;
    height: 100%;}}
  @keyframes dede{
        0% {
           left: 2000px;
            top: 70.5%;
            width: 256px;
            height: 100%;}
        30% {
            top:70.5%;
    left: 93%;
    width: 100%;
    height: 100%;}}
}

bodybox {
  margin:0px;
  height:500vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ddd;
}
.text-typing {
  padding:20px 30px;
  background:#ffdc7a;
  font-size:19px;
 
  border: 100px solid;
  border-image-source: linear-gradient(90deg, rgba(255,157,0,1) 0%, rgba(255,217,0,1) 100%);
  border-image-slice: 1;

border-width: 5px 5px;
  box-shadow: 5px 5px 5px 5px hsla(247, 100%, 0%, 0.64);
}
.text-typing p {
  margin:0px;
  white-space:nowrap;
  overflow:hidden;
  animation:typing 4s steps(22,end) forwards,
            blink 1s infinite ;
}
@keyframes typing {
  0% { width:0% }
  100% { width:100% }
}
@keyframes blink {
  0%,100% {
    border-right:2px solid transparent;
  }
  50% {
    border-right:2px solid #222;
  }
}
p{
  color: #9e001d;
  font-size: 30px;
  font-style:italic;
   font-family:Pinyon Script;
}
.header{
  
  position: absolute;
    top: -7%;
    right: -18%;
    width: 100%;
    height: 100%;
  background-image:url("https://cdn.discordapp.com/attachments/809413680634658839/809820504562335775/T2.png");
   background-repeat: no-repeat;
  animation: dropdown 1s linear;
}
.header:hover{
  animation: fade 1.7s infinite alternate;
}
.circle {
  width: 3em;
  height: 3em;
  position: absolute;
  border-radius: 100%;
  background:#fff705 ;
  opacity:0.2;
  animation: c 6s infinite;
  box-shadow: 5px 10px 20px #ffff05;
}
.m {
  font-size: 2.5em;
}
@keyframes c {
  0%,100%{
    transform: scale(1);
  }
  30%{
    transform: scale(1.4);
  }
}@keyframes dropdown{
  0%{top: -50%;
    right: -18%;
    width: 100%;
    height: 100%;
      }
  40%
  {
    top: -7%;
    right: -18%;
    width: 100%;
    height: 100%;
    
  }
  45%{
    top: -9%;
    right: -18%;
    width: 100%;
    height: 100%;
  }
  50%{
    top: -7%;
    right: -18%;
    width: 100%;
    height: 100%;
  }
  60%{
    transform:translateY(-25px);
    transform:rotate(5deg);
  }
}
@keyframes fade{
  from{opacity:.5;
  }
        to{opacity:1}
}
.flame {
  width: 10px;
  height: 10px;
  background: #ffffff99;
  border-radius: 100%;
  position: absolute;
  box-shadow: 0px 0px 12px #ffffff;
  animation: f 5s infinite linear;
}
@keyframes f {
  0% {
    top: 90vh;
    opacity: 0;
  }
  50% {
    top: 50vh;
    opacity: 1;
 
  }
  100% {
    top: 30vh;
    opacity:0;
}

</style>
  <body>
<div id="wrapper">
  <div class="header">
</div>
<div  class="chavee" onclick="chavee()"></div>
  <div class="bk"  onclick="bk()"></div>
  <div class="araya"  onclick="araya()"></div>
  <div class="piroj"  onclick="piroj()"></div>
  <div class="maid"  onclick="maid()"></div>
  <div class="maid2"  onclick="maid2()"></div>
  <div class ="chollee"  onclick="chollee()"></div>
  <div class = "mom"  onclick="mom()"></div>
  <div class="doc"  onclick="doc()"></div>
  <div class="ya"  onclick="ya()"></div>
  <div class="dede"  onclick="dede()"></div><div class="circle s" style="top:40vh;left:40%"></div>
    <div class="circle m" style="top:35vh;left:70%"> </div>
    <div class="circle s" style="top:30vh;left:25%"></div>
    <div class="circle s" style="top:15vh;left:77%"></div>
    <div class="circle s" style="top:15vh;left:40%"></div>
    <div class="circle m" style="top:15vh;left:50px"></div>
    <div class="circle m" style="top:7vh;left:25%"></div>
     <div class="circle m" style="top:20vh;left:85%"></div>
     <div class="circle s" style="top:20vh;left:60%"></div>
<div class="flame" style="left:5%;animation-duration:3s"></div>
    <div class="flame" style="left:15%;animation-duration:4s"></div>
    <div class="flame" style="left:25%;animation-duration:5s"></div>
    <div class="flame" style="left:35%;animation-duration:6s"></div>
    <div class="flame" style="left:45%;animation-duration:4s"></div>
    <div class="flame" style="left:55%;animation-duration:12s"></div>
    <div class="flame" style="left:65%;animation-duration:9s"></div>
    <div class="flame" style="left:75%;animation-duration:4s"></div>
    <div class="flame" style="left:85%;animation-duration:5s"></div>
    <div class="flame" style="left:95%;animation-duration:6s"></div>
</div>
      
<audio autoplay="autoplay">
<source src="https://cdn.discordapp.com/attachments/809413680634658839/810126582085320714/-_Official_Audio_1.mp3">
</audio>
  </body>
  <script>function maid2(){
		alert("''เรื่องจริงไม่เหมือนฝัน💤 เรื่องของฉันไม่ต้องเสือก🌼''")
   }
function maid(){
		alert("“ไก่หมดจาน🍗 ก็เหมือนการหมดใจ💔:”")
   }
function bk(){
		alert("อยากพาเธอไปหาแม่😉 แต่กลัวแม่เรียกชื่ออีกคน😔”")
   }
function chavee(){
		alert("“อบอุ่นกว่าพี่🤟 ก็มีแต่ไมโครเวฟแล้วแหละ🔥”")
   }
function araya(){
		alert("“จ้องอะไรนักหนา😡 มีปัญหาหรือมีใจ😽”")
   }
function piroj(){
		alert("“คนที่ถอยออกมาไม่ใช่คนที่เเพ้ 🔥 เเต่เป็นคนที่เข้าซอยผิด😝”")
   }
function chollee(){
		alert("“อิจฉาหวย😒 ที่ได้กินเธอ😱”")
   }
function mom(){
		alert("“อย่าทำวันนี้ให้ดีที่สุด🕵️‍♀️ เดี๋ยวพรุ่งนี้ไม่มีอะไรทำ🤦‍♀️”")
   }
function doc(){
		alert("“ไม่ได้ชอบคนดัดฟัน😁 ชอบคนจัดทุกวันมากกว่า🤦”")
   }
function ya(){
		alert("“พุทธไม่ถึง👌 อิสลามไม่ถึง แต่คริสต์ถึงน้าา😬”")
   }
function dede(){
		alert("“หม่าล่าที่ว่าอร่อย🐶 ยังไม่เท่ามาหาหน่อยคิดถึงอีกแล้ว🏃”")
   }</script>
</html>