QE Position (ฺB-Thun) (Copy 12568)

✨ Bug 9Best

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/* Set Deflaut ---------------------------------------------------------------------- */
		* {
			margin: 0;
			box-sizing: border-box;
		}

body {
			width: 100vw;
			height: 100vh;
			background-color: #333;
		}

/* Mother Conntainer ---------------------------------------------------------------- */
		.wrapper {
			background-color: #333;
			width: 100%;
			height: 100%;
			overflow: hidden;
			transform: scale(.8);
			box-shadow: 0 0 4px 4px rgb(179, 179, 179);
			border-radius: 20px;

}

#sky {
			position: relative;
			width: 100%;
			height: 40%;
			background-image: linear-gradient(to bottom, #71c9ff, #c2e6fc, #d6efff);
		}

#grass {
			position: relative;
			width: 100%;
			height: 40%;
			background-color: #619d17;
		}

#road {
			position: relative;
			width: 100%;
			height: 20%;
			background-color: #ddcaac;
		}

#side-road {
			position: absolute;
			top: 0;
			width: 100%;
			height: 5px;
			background-color: #a38e6d;
		}

/* Element --------------------------------------------------------------------------- */
		.sun {
			position: absolute;
			top: 20px;
			left: 10%;
			width: 90px;
			height: 90px;
			background-color: #F39C12;
			border-radius: 50%;
			box-shadow: 0 0 0 10px #FA961B,
			0 0 0 20px #FCB033,
			0 0 0 30px #FECC51,
			0 0 0 40px #FFE469,
			0 0 0 50px #FCF3CF,
			0 0 30px 80px #F9E79F;
			animation: sunrise 2s infinite linear forwards, rays 2s 2s infinite linear;
		}

#chair {
			position: absolute;
			left: 20px;
			bottom: 125px;
			height: 50px;
			width: 50px;
			z-index: 100;
		}

#bush {
			display: flex;
			position: absolute;
			overflow: hidden;
			width: 100%;
			top: -100px;
			left: 0;
		}

#tree-left {
			position: absolute;
			left: -100px;
			bottom: 50px;
			z-index: 80;
		}

.mek {
			position: absolute;
			left: -300px;
			top: 75px;
			z-index: 3;
			animation: mek-move 15s linear 1s infinite;
		}

/* Best */
		#best {
			height: 300px;
			position: absolute;
			top: -100px;
			left: 850px;
        	z-index:50;
		}

/* Chompoo */
		.pot-chompoo {
			position: absolute;
			left: 311px;
			top: 150px;
			z-index: 80;
		}

.grass-chompoo {
			position: absolute;
			left: 250px;
			top: 90px;
			z-index: 90;
		}

.pic-chompoo {
			position: absolute;
			left: 290px;
			top: 65px;
			animation: pic-jumping;
			animation-duration: 3s;
			animation-iteration-count: infinite;
		}

/* Mod */
		.picnic-mod {
			position: absolute;
			right: 30px;
			top: 0;

}

.dog-mod {
			position: absolute;
			right: 200px;
			top: 115px;
			animation: pic-jumping;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			z-index: 60;
		}

.tree-right {
			position: absolute;
			right: -100px;
			bottom: 150px;
			z-index: 4;
		}

.mod {
			position: absolute;
			right: 0;
			top: 25px;
			z-index: 60;
		}

/* Tangva */
		.car-tangva {
			position: absolute;
			right: -350px;
			bottom: -229px;
			animation: drive 10s infinite linear;
			z-index: 300;
		}

.tangva {
			position: absolute;
			right: 350px;
			bottom: 315px;
		}

/* Rome */
		.rome {
			position: absolute;
			bottom: -175px;
			right: -450px;
			animation: drive 10s infinite ease-out;
			z-index: 250;
		}

/* Bam */
		#bam {
			position: absolute;
			height: 150px;
			top: 17%;
			left: -200px;
			opacity: 95%;
			z-index: 2;
			animation: pic_bam 15s linear 1s infinite;
		}

/* Thun */
		#thun {
			position: absolute;
			height: 275px;
			top: -280px;
			/* right: -73px; */
			right: 200px;
			left: auto;
			z-index: 50;
			transform: rotate(20deg);
		}

/* Nick */
		.nick {
			position: absolute;
			z-index: 1px;
			bottom: -20px;
			left: 600px;
			z-index: 10;
		}

/* Earth */
		.earth {
			position: absolute;
			left: 8px;
			top: 10px;
		}

/* Ohm */
		.sitter_ohm {
			position: absolute;
			left: 40px;
			bottom: 150px;
			height: 130px;
			width: 50px;
			z-index: 200;
			animation: duk-dik infinite;
			animation-duration: 4s;
			animation-iteration-count: infinite;
		}

.sitter_ohm:hover {
			animation: panic 0.5s;
			animation-iteration-count: infinite;
		}

/* Animation --------------------------------------------------------------------------- */
		@keyframes pic-jumping {
			0% {
				transform: translateY(0%);
				animation-timing-function: ease-out;
			}

50% {
				transform: translateY(-30%);
				animation-timing-function: ease-in;
			}

100% {
				transform: translateY(0%);
			}
		}

@keyframes mek-move {
			to {
				transform: translatex(100vw);
			}
		}

@keyframes pic_bam {
			from {}

to {
				transform: translatex(100vw);
			}
		}

@keyframes sunrise {
			0% {
				box-shadow: none;
			}
		}

@keyframes rays {
			0% {
				box-shadow: 0 0 0 0 #FFDE0080,
				0 0 0 10px #FFDE0080,
				0 0 0 20px #FFDE0040,
				0 0 0 30px #FFDE0020,
				0 0 0 40px #FFDE0010,
				0 0 30px 80px #FFDE0010;
			}

100% {
				box-shadow: 0 0 0 10px #FFDE0080,
				0 0 0 20px #FFDE0040,
				0 0 0 30px #FFDE0020,
				0 0 0 40px #FFDE0010,
				0 0 0 50px #FFDE0000,
				0 0 30px 80px #FFDE0010;
			}
		}

@keyframes drive {
			to {
				transform: translateX(-125vw);
			}
		}

@keyframes panic {
			0% {
				transform: translate(1px, 1px) rotate(0deg);
			}

10% {
				transform: translate(-1px, -2px) rotate(-1deg);
			}

20% {
				transform: translate(-3px, 0px) rotate(1deg);
			}

30% {
				transform: translate(3px, 2px) rotate(0deg);
			}

40% {
				transform: translate(1px, -1px) rotate(1deg);
			}

50% {
				transform: translate(-1px, 2px) rotate(-1deg);
			}

60% {
				transform: translate(-3px, 1px) rotate(0deg);
			}

70% {
				transform: translate(3px, 1px) rotate(-1deg);
			}

80% {
				transform: translate(-1px, -1px) rotate(1deg);
			}

90% {
				transform: translate(1px, 2px) rotate(0deg);
			}

100% {
				transform: translate(1px, -2px) rotate(-1deg);
			}
		}

@keyframes duk-dik {
			0% {
				transform: rotate(-3deg);
				animation-timing-function: linear;
			}

50% {
				transform: rotate(3deg);
				animation-timing-function: linear;
			}

100% {
				transform: rotate(-3deg);
			}
		}
	</style>
</head>

<div id="grass">
      <div id="chair">
        <img
          src="https://cdn.discordapp.com/attachments/918375486315434034/940585491668025414/C20C1337-5685-46DE-9B48-B8F7FD336E74-removebg-preview.png"
          height="125px" width="300px">
      </div>
      <div class="sitter_ohm">
        <img src="https://cdn.discordapp.com/attachments/769257277320331276/940473065266085888/Sitting_OHM.png"
          height="300px" width="300px">
      </div>

<div id="road">
      <div id="side-road">
      </div>
      <div class="car-tangva">
        <img
          src="https://cdn.discordapp.com/attachments/933721474324381707/940503581319131146/kisspng-sports-car-clip-art-cartoon-car-5acab3b8460727.6663981915232337202869.png"
          width="850px" height="650px">
        <div class="tangva">
          <img
            src="https://cdn.discordapp.com/attachments/933721474324381707/940482991233331240/IMG_0738-removebg-preview.png"
            width="160px" height="160px">
        </div>
      </div>
      <div class="rome">
        <img
          src="https://cdn.discordapp.com/attachments/920339331607035946/940531634850123796/png-clipart-wally-west-flash-chibiusa-drawing-flash-superhero-chibi.png"
          width="650px" height="650px">
      </div>
    </div>

</div>

</body>

</html>