Welcome to CODEBOX! (Copy 2002) (Copy 2056) (Branch 2088)

Welcome to CODEBOX! (Copy 2002) (Copy 2056) (Branc..

✨ BUTTHACHAI AROM

<html>
  <head>
    <title>Let's Start</title>
    <style>
      body {
        background-color: brown;
      }
      .grid {
        background: #eee;
        display: flex;
        flex-wrap: wrap;
        border: solid 1px;
        margin: auto;
        width: 1500px;
        height: 700px;
        position: relative;
        background-image: url(https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-green-grass-white-clouds-pink-cartoon-background-cloudspinkcartoonbackground-image_60039.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        z-index: -2;
      }
      .jabont {
        position: absolute;
        height: 700px;
        top: -150px;
        left: -1000px;
        animation: moving 20s infinite alternate;
        z-index: -10;
      }
      @keyframes moving {
        from {
          transform: translateX(0px) translateY(0px);
          opacity: 80%;
        }
        to {
          transform: translateX(2000px) translateY(150px);
          opacity: 0%;
        }
      }
      .sun {
        animation: sundig 1s infinite alternate;
      }
      @keyframes sundig {
        0% {
          transform: rotateZ(15deg);
        }
        50% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(-15deg);
        }
      }
      .pfaii {
        position: absolute;
        height: 280px;
        width: 280px;
        left: -95;
        top: 0px;
        opacity: 100%;
        animation: dugdig 0.5s infinite alternate;
        z-index: 200;
      }
      @keyframes dugdig {
        from {
          transform: rotateZ(-15deg);
        }
        to {
          transform: rotateZ(15deg);
        }
      }

.floor {
        position: absolute;
        width: 1800px;
        height: 70px;
        background: #019243;
        left: 0px;
        bottom: calc(0px);
        background-image: linear-gradient(to top, #baca50 10px, #baca50 10px);
      }

a {
        z-index: 3;
      }
      .ferris_wheel {
        transform: scale(2);
        z-index: 0;
      }
      .pattern {
        position: absolute;
        width: 100%;
        height: 30px;
        background-image: linear-gradient(
          35deg,
          #baca50 50%,
          rgba(0, 0, 0, 0) 50%
        );
        background-size: 30px 30px;
        bottom: 63px;
        left: 0px;
        z-index: 1;
      }
      .ferris_wheel,
      .wheel {
        border: 6px solid #d0b6c3;
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
      .ferris_wheel {
        border: 0;
        position: absolute;
        bottom: calc(260px);
        left: calc(30%);
      }
      .wheel_wrap {
        position: absolute;
        animation: wheel_rotate 40s infinite linear;
      }
      .wheel:before {
        content: "";
        height: 75px;
        width: 86px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809076407149658132/91cb737fa6462719.png);
        position: absolute;
        left: 0%;
        top: 0%;
        margin-left: 45px;
        margin-top: 40px;
        z-index: 5;
        background-size: 75px 76px;
      }
      .wheel span:nth-child(1):before {
        content: "";
        border-bottom: 5px solid #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        top: 50%;
        left: 6px;
      }
      .wheel span:nth-child(1):after {
        content: "";
        border-right: 5px solid #fff;
        position: absolute;
        top: 0;
        left: 0;
        height: 150px;
        top: 6px;
        left: 50%;
        transform: rotate(45deg);
      }
      .wheel span:nth-child(2):before {
        content: "";
        border-right: 5px solid #fff;
        position: absolute;
        top: 0;
        left: 0;
        height: 150px;
        top: 5px;
        left: 50%;
        transform: rotate(-45deg);
      }
      .wheel span:nth-child(2):after {
        content: "";
        border-right: 5px solid #fff;
        position: absolute;
        top: 0;
        left: 0;
        height: 150px;
        top: 6px;
        left: 50%;
      }
      div.stand:before,
      div.stand:after {
        content: "";
        position: absolute;
        border-right: 6px solid #dfe7eb;
        height: 120px;
        transform: rotate(15deg);
        top: 88px;
        left: 50%;
        margin-left: -15px;
        z-index: -20;
      }
      div.stand:after {
        transform: rotate(-15deg);
        margin-left: 23px;
      }
      .stand div:nth-child(1) {
        position: absolute;
        height: 20px;
        background: #de0f79;
        border-radius: 100px;
        width: 150px;
        bottom: -60px;
        left: 50%;
        margin-left: -70px;
        z-index: 30;
      }
      .stand div:nth-child(2) {
        position: absolute;
        width: 150px;
        height: 10px;
        background-color: #087735;
        bottom: calc(-66px);
        left: calc(50%);
        margin-left: -90px;
        border-radius: 50%;
        box-shadow: 0 0 2px 3px #087735;
        z-index: 250;
      }
      .buckets1 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 30%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809333047890542642/a249dab7d2b386a9.png);
        height: 75px;
        width: 86px;
        background-size: 65px 100px;
        background-repeat: no-repeat;
        z-index: 260;
      }
      .buckets2 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 30%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809076402749046804/jaoo.png-removebg-preview.png);
        height: 76px;
        width: 86px;
        background-size: 50px 60px;
        background-repeat: no-repeat;
        z-index: 260;
      }
      .buckets3 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 30%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809076408444911691/2218e4011e06df51.png);
        height: 75px;
        width: 86px;
        background-size: 60px 76px;
        background-repeat: no-repeat;
        z-index: 260;
      }
      .buckets4 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 30%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809076411808612372/76b83100d3a91af6.png);
        height: 75px;
        width: 86px;
        background-size: 60px 76px;
        background-repeat: no-repeat;
        z-index: 260;
      }
      .buckets5 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 25%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809076412215459911/fc5680b1f95d946f.png);
        height: 75px;
        width: 86px;
        background-size: 75px 76px;
        background-repeat: no-repeat;
        z-index: 260;
      }
      .buckets6 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 20%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809076413797105724/fcb67f48b9ed5ccd.png);
        height: 100px;
        width: 150px;
        background-size: 65px 100px;
        background-repeat: no-repeat;
        z-index: 260;
      }
      .buckets7 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 30%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809076407149658132/91cb737fa6462719.png);
        height: 75px;
        width: 86px;
        background-size: 75px 76px;
        z-index: 260;
      }
      .buckets8 {
        position: absolute;
        animation: bucket_rotate 40s infinite linear;
        top: 30%;
        left: 35%;
        margin-left: -10px;
        background-image: url(https://media.discordapp.net/attachments/798210278327451728/809333051296841728/e6492388eadd2abe.png);
        height: 75px;
        width: 86px;
        background-size: 65px 80px;
        background-repeat: no-repeat;
        z-index: 260;
      }

.buckets div:nth-child(2) {
        animation-delay: -5s;
      }
      .buckets div:nth-child(3) {
        animation-delay: -10s;
      }
      .buckets div:nth-child(4) {
        animation-delay: -15s;
      }
      .buckets div:nth-child(5) {
        animation-delay: -20s;
      }
      .buckets div:nth-child(6) {
        animation-delay: -25s;
      }
      .buckets div:nth-child(7) {
        animation-delay: -30s;
      }
      .buckets div:nth-child(8) {
        animation-delay: -35s;
      }
      .sun {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background-color: #fcb100;
        top: calc(70px);
        right: calc(100px);
        /*box-shadow: 0 0 0 35px #9EE2A2,
              0 0 0 52px #77D7B6,
              0 0 0 53px #B9E094;*/
        z-index: 200;
      }
      .sun::after {
        position: absolute;
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background-color: #fcb100;
        top: 55px;
        left: -80px;
        box-shadow: 150px 10px 0 0#FCB100, 30px 90px 0 0 #fcb100,
          120px 90px 0 0 #fcb100, 75px 20px 0 0 #fcb100;
      }
      .cloudLeft {
        position: absolute;
        width: 150px;
        height: 5px;
        border-radius: 100px;
        background-color: #ade3f0;
        top: calc(180px);
        left: 0;
        z-index: -1;
        animation: cloudMoveLeft 35s linear infinite;
      }
      .cloudLeft::after {
        position: absolute;
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #ade3f0;
        top: 50px;
        left: -50px;
        opacity: 60%;
        box-shadow: 150px 0 0 0#ade3f0, 80px -50px 0 0 #ade3f0,
          80px 0px 0 0 #ade3f0, 115px 31px 0 -30px #ade3f0,
          40px 31px 0 -30px #ade3f0, 30px 31px 0 -30px #ade3f0,
          50px 31px 0 -30px #ade3f0;
        animation: cloudMoveLeft 35s linear infinite;
      }
      .cloudRight {
        position: absolute;
        width: 250px;
        height: 5px;
        border-radius: 100px;
        background-color: #a6e4d5;
        top: 300px;
        opacity: 90%;
        right: 0%;
        z-index: -1;
        animation: cloudMoveRight 50s linear infinite;
      }
      .cloudRight::after {
        position: absolute;
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #a6e4d5;
        top: -96px;
        left: -50px;
        box-shadow: 150px 0 0 0 #a6e4d5, 60px -60px 0 0 #a6e4d5,
          250px 0px 0 0 #a6e4d5, 200px -60px 0 0 #a6e4d5,
          130px -40px 0 0 #a6e4d5, 40px 0px 0 0 #a6e4d5, 80px 0px 0 0 #a6e4d5,
          110px 0px 0 0 #a6e4d5, 180px 0px 0 0 #a6e4d5, 210px 0px 0 0 #a6e4d5;
      }
      @keyframes wheel_rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes bucket_rotate {
        0% {
          transform: rotate(0) translateX(75px) rotate(0);
          transform: rotate(0) translateX(75px) rotate(0);
        }
        100% {
          transform: rotate(360deg) translateX(75px) rotate(-360deg);
          transform: rotate(360deg) translateX(75px) rotate(-360deg);
        }
      }
      @keyframes wheel_rotate_new {
        0% {
          transform: rotate(0);
          transform: rotate(0);
        }
        100% {
          transform: rotate(-360deg);
          transform: rotate(-360deg);
        }
      }
      @keyframes bucket_rotate_new {
        0% {
          transform: rotate(0) translateX(75px) rotate(0);
          transform: rotate(0) translateX(75px) rotate(0);
        }
        100% {
          transform: rotate(-360deg) translateX(75px) rotate(360deg);
          transform: rotate(-360deg) translateX(75px) rotate(360deg);
        }
      }
      @keyframes cloudMoveLeft {
        0% {
          left: -10%;
        }
        100% {
          left: 110%;
        }
      }
      @keyframes cloudMoveRight {
        0% {
          right: -10%;
        }
        100% {
          right: 110%;
        }
      }
      .train {
        position: relative;
        height: 300px;
        bottom: -350px;
        animation: trainrun 15s infinite;
        z-index: -1;
      }
      @keyframes trainrun {
        from {
          transform: translateX(1500px);
        }
        to {
          transform: translateX(-1000px);
        }
      }
      .itlogo {
        position: relative;
        border: 10px solid;
        background-color: white;
        height: 150px;
        bottom: -330px;
        animation: trainrun 15s infinite;
        z-index: -1;
      }
      .button {
        position: absolute;
        top: 20px;
        left: 25px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="button">
      <button onclick="back_to_the_top()">Day</button>
      <button onclick="change_bg()">Night</button>
      <button onclick="back_animation()">Rotate Right</button>
      <button onclick="change_animation()">Rotate Left</button>
    </div>
    <div id="grid" class="grid">
      <div class="container">
        <div class="floor"></div>
        <div class="pattern"></div>
        <div class="ferris_wheel">
          <div id="wheel_wrap" class="wheel_wrap">
            <div class="wheel">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <div id="buckets" class="buckets">
            <div id="new" class="buckets1"><span></span></div>
            <div id="new" class="buckets2"><span></span></div>
            <div id="new" class="buckets3"><span></span></div>
            <div id="new" class="buckets4"><span></span></div>
            <div id="new" class="buckets5"><span></span></div>
            <div id="new" class="buckets6"><span></span></div>
            <div id="new" class="buckets7"><span></span></div>
            <div id="new" class="buckets8"><span></span></div>
          </div>
          <div class="stand">
            <div></div>
          </div>
        </div>
        <div class="sun">
          <img
            class="pfaii"
            src="https://media.discordapp.net/attachments/798210278327451728/809343300111695912/36d70726293d7311.png"
          />
        </div>
      </div>
      <div id="myDIV" class="cloudLeft"></div>
      <div id="myDIV2" class="cloudRight"></div>
      <img
        class="jabont"
        src="https://media.discordapp.net/attachments/798210303846383676/809303024794992681/92_20210211125710.png"
      />
      <div class="trainmove">
        <img
          class="train"
          src="https://webstockreview.net/images/clipart-train-animated-gif-3.gif"
        />
        <img
          class="itlogo"
          src="https://ihost.it.kmitl.ac.th/assets/img/logo.png"
        />
      </div>
    </div>
    <script>
      function change_bg() {
        document.querySelector(".grid").style.backgroundImage =
          "url('https://media.discordapp.net/attachments/752901079410147439/809420960733855794/c8e658a34a5158c7.jpg')";
        var element = document.getElementById("myDIV");
        element.classList.remove("cloudLeft");
        var element = document.getElementById("myDIV2");
        element.classList.remove("cloudRight");
      }
      function back_to_the_top() {
        document.querySelector(".grid").style.backgroundImage =
          "url('https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-green-grass-white-clouds-pink-cartoon-background-cloudspinkcartoonbackground-image_60039.jpg')";
        var element = document.getElementById("myDIV");
        element.classList.add("cloudLeft");
        var element = document.getElementById("myDIV2");
        element.classList.add("cloudRight");
      }
      function change_animation() {
        var animate = document.getElementById("wheel_wrap");
        var animate1 = document.getElementById("buckets");
        animate.style.animationName = "wheel_rotate_new";
        animate1.querySelector(".buckets1").style.animationName =
          "bucket_rotate_new";
        animate1.querySelector(".buckets2").style.animationName =
          "bucket_rotate_new";
        animate1.querySelector(".buckets3").style.animationName =
          "bucket_rotate_new";
        animate1.querySelector(".buckets4").style.animationName =
          "bucket_rotate_new";
        animate1.querySelector(".buckets5").style.animationName =
          "bucket_rotate_new";
        animate1.querySelector(".buckets6").style.animationName =
          "bucket_rotate_new";
        animate1.querySelector(".buckets7").style.animationName =
          "bucket_rotate_new";
        animate1.querySelector(".buckets8").style.animationName =
          "bucket_rotate_new";
      }
      function back_animation() {
        var animate = document.getElementById("wheel_wrap");
        var animate1 = document.getElementById("buckets");
        animate.style.animationName = "wheel_rotate";
        animate1.querySelector(".buckets1").style.animationName =
          "bucket_rotate";
        animate1.querySelector(".buckets2").style.animationName =
          "bucket_rotate";
        animate1.querySelector(".buckets3").style.animationName =
          "bucket_rotate";
        animate1.querySelector(".buckets4").style.animationName =
          "bucket_rotate";
        animate1.querySelector(".buckets5").style.animationName =
          "bucket_rotate";
        animate1.querySelector(".buckets6").style.animationName =
          "bucket_rotate";
        animate1.querySelector(".buckets7").style.animationName =
          "bucket_rotate";
        animate1.querySelector(".buckets8").style.animationName =
          "bucket_rotate";
      }
    </script>
  </body>
</html>