ShaBuuuuu

✨ KRITTAPAS DUANGKRUT

<html>
<head>
	<title>Let's Start</title>
  <style>
    * {
      margin:0;
      box-sizing:border-box;
    }
    body{
      background:#eee;
      font-family:sans-serif;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .wrap {
       display: block;
       width: 100%;
       text-align: center;
    }
    #canvas{
      display: inline-block;
      width:1400px;
      height:700px;
      background-size: 100% 100%;
      background: linear-gradient(217deg, rgba(300,150,20,.8), rgba(65,0,50,0) 70.71%),
            linear-gradient(127deg, rgba(150,255,50,.8), rgba(0,215,50,0) 70.71%),
            linear-gradient(336deg, rgba(90,0,255,.8), rgba(0,0,25,0) 70.71%);
      position:relative;
/*       top:calc(50vh - 350px);
      left:calc(50vw - 700px); */
      border-radius:20px;
      z-index:-999;
      overflow:hidden;
      box-shadow:4px 4px 0 #0001;
    }
    .table-box{
      width:100%;
      height:300px;
      position:relative;
      perspective:200px;
      z-index:-100;
    }
    .table{
      background: #000a;
      width: 100%;
      height: 300px;
      position: absolute;
      transform: rotateX(25deg);
      border-radius: 30px;
      overflow: hidden;
      z-index:-100;
    }
    .table-inner{
		background: hsl(32, 58%, 50%);
      width: 100%;
      height: 50px;
      margin-bottom: 5px;
      box-shadow: 0 2px 5px #D5B6A3;
      z-index:-100;
    }
    .boxpot{
      position:relative;
      left:calc(50% - 250px);
      top:calc(50% - 50px);
      height:400px;
      width:500px;
      /* background:#fff; */
      z-index: -10;
    }
    .inpot{
      position:absolute;
      height:180px;
      width:480px;
      top: 10px;
      left: 10px;
      right: 10px;
      border-radius: 50%;
      background: white;
      z-index: 0;
      box-shadow:0px 120px 1px #000 inset;
    }
    .pottop{
      position:absolute;
      height:200px;
      width:500px;
      border-radius: 50%;
      background: hsl(0, 93%, 33%);
      z-index: -1;
    }
    .potmid{
      position:absolute;
      top: 100px;
      height:150px;
      width:500px;
      background: hsl(0, 100%, 50%);
      z-index: -2;
    }
    .potbottom{
      position:absolute;
      top: 150px;
      height:200px;
      width:500px;
      border-radius: 50%;
      background: hsl(0, 100%, 50%);
      box-shadow: 0px 6px 1px #0003;
      z-index: -3;
    }
    .pig1{
      width:50px;
      height:50px;
      background:hsl(15, 52%, 84%);
      position:absolute;
      left:100px;
      top:30px;
      z-index:10;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .pig2{
      width:50px;
      height:50px;
      background:hsl(15, 52%, 74%);
      position:absolute;
      left:140px;
      top:60px;
      z-index:10;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .pig3{
      width:50px;
      height:50px;
      background:hsl(15, 52%, 64%);
      position:absolute;
      left:330px;
      top:100px;
      z-index:10;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .carrot{
      width:50px;
      height:90px;
      background:hsl(27, 100%, 50%);
      position:absolute;
      left:390px;
      top:45px;
      z-index:1;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .cabbage{
      width:70px;
      height:100px;
      background:hsl(103, 51%, 74%);
      position:absolute;
      left:250px;
      top:40px;
      z-index:1;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .tofu1{
      width:70px;
      height:30px;
      background:hsl(45, 51%, 74%);
      position:absolute;
      left:30px;
      top:90px;
      z-index:1;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .tofu2{
      width:70px;
      height:80px;
      background:hsl(45, 51%, 64%);
      position:absolute;
      left:170px;
      top:90px;
      z-index:1;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .alga1{
      width:100px;
      height:20px;
      background:hsl(152, 52%, 44%);
      position:absolute;
      left:170px;
      top:10px;
      z-index:2;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .alga2{
      width:60px;
      height:20px;
      background:hsl(152, 52%, 54%);
      position:absolute;
      left:100px;
      top:130px;
      z-index:1;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .Pneng{
        position: absolute;
        top: 40px;
        left: 150px;
        width: 100%;
        height: 100%;
        background-image: url(https://media.discordapp.net/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png);
        z-index: 1;
        background-repeat: no-repeat;
        animation: dookdik 1.7s infinite alternate;
        animation-timing-function: ease-in-out;
        }
    .Pneng2{
        position: absolute;
        top: 20px;
        left: 850px;
        width: 100%;
        height: 100%;
        background-image: url(https://media.discordapp.net/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png);
        z-index: 1;
        background-repeat: no-repeat;
        animation: dookdik 1.7s infinite alternate;
        animation-timing-function: ease-in-out;
        }
      @keyframes dookdik {
      from{
        transform: rotate(5deg);
      }
      to {
        transform: rotate(-5deg);
      }
  </style>
</head>
<body>

  <div class="wrap">
    <div id="canvas">
      <div class ="Pneng">
      	<div class = "Pneng2">
        </div>
      </div>
      <div class="boxpot">
        <div class="inpot">
          <div class="pig1">
            หมู1
          </div>
          <div class="pig2">
            หมู2
          </div>
          <div class="pig3">
            หมู3
          </div>
          <div class="carrot">
            แครอท
          </div>
          <div class="cabbage">
            ผักกาด
          </div>
          <div class="tofu1">
            เต้าหู้1
          </div>
          <div class="tofu2">
            เต้าหู้2
          </div>
          <div class="alga1">
            สาหร่าย1
          </div>
          <div class="alga2">
            สาหร่าย2
          </div>
        </div>
        <div class="pottop">
        </div>
        <div class="potmid">
        </div>
        <div class="potbottom">
        </div>
      </div>
      <div class="table-box">
        <div class="table">
				<div class="table-inner">
              
          </div>
          <div class="table-inner">
              
          </div>
          <div class="table-inner">
              
          </div>
          <div class="table-inner">
              
          </div>
          <div class="table-inner">
          </div>
            </div>
      </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>