QE: ภูมิ-พงพันธุ์

✨ PONGPHUN SAKDASAWIT

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Itim&display=swap"
      rel="stylesheet"
    />
    <title>Fan</title>
    <style>
      :root {
        --size: 350px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        font-family: "Itim", cursive;
        background-color: hsl(332, 96%, 82%);
        background-image: url(https://i.pinimg.com/originals/24/f7/ce/24f7cedb6bcdccf5389166619cb09639.gif);
        background-size: 597px 297px;
        /* background-repeat: no-repeat; */
      }
      .fan {
        width: var(--size);
        height: calc(var(--size) * 2);
        transform-style: preserve-3d;
        display: flex;
        animation: anim 1s infinite linear alternate;
        padding-top: 20%;
      }
      .head-group {
        width: var(--size);
        height: var(--size);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform-style: preserve-3d;
        transform-origin: center center -22.5px;
        animation: swing 5s infinite linear alternate;
        --updown: 0deg;
      }
      .head {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transform-style: preserve-3d;
      }
      .crop-group {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
      }
      .crop {
        position: absolute;
        width: calc(100% - var(--crop));
        height: calc(100% - var(--crop));
        display: flex;
        justify-content: center;
        transform-style: preserve-3d;
        align-items: center;
      }
      .crop .block {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateZ(calc(12deg * var(--block)));
      }
      .crop .block div {
        position: absolute;
        width: 11%;
        height: 35px;
        background-color: hsl(214, 15%, calc(20% + var(--crop)));
        bottom: 0;
        transform-origin: bottom;
        transform-style: preserve-3d;
        transform: rotateX(-90deg) translateY(5px);
      }
      .cropside {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        transform-style: preserve-3d;
        align-items: center;
      }
      .cropside .block {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateZ(calc(12deg * var(--cropside)));
      }
      .cropside .block .cropfront {
        position: absolute;
        width: 11%;
        height: 10px;
        background-image: linear-gradient(
          to top,
          hsl(214, 15%, 20%),
          hsl(214, 15%, 25%)
        );
        bottom: 0;
        transform-origin: bottom;
        transform-style: preserve-3d;
        transform: translateZ(30px);
        border: 2px solid black;
        border-left-color: rgba(255, 255, 255, 0);
        border-right-color: rgba(255, 255, 255, 0);
      }
      .cropside .block .cropback {
        position: absolute;
        width: 11%;
        height: 10px;
        background-image: linear-gradient(
          to top,
          hsl(214, 15%, 20%),
          hsl(214, 15%, 25%)
        );
        bottom: 0;
        transform-origin: bottom;
        transform-style: preserve-3d;
        transform: translateZ(-5px);
        border: 2px solid black;
        border-left-color: rgba(255, 255, 255, 0);
        border-right-color: rgba(255, 255, 255, 0);
      }
      .head-front {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        position: absolute;
        /* background-color: rgba(128, 128, 128, 0.1); */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        transform-style: preserve-3d;
        transform: translateZ(30px);
      }
      .head-front .logo,
      .head-back .logo {
        position: absolute;
        width: 18%;
        height: 18%;
        background-color: hsla(214, 15%, 25%, 0.3);
        border-radius: 100%;
        transform: translateZ(calc(var(--logo)));
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        border: 2px solid hsl(214, 15%, 20%);
      }
      .head-front .ringline,
      .head-back .ringline {
        position: absolute;
        width: 60%;
        height: 60%;
        /* background-color: black; */
        border-radius: 100%;
        border: 3px solid rgba(0, 0, 0, 0.295);
      }
      .head-front .group-line,
      .head-back .group-line {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateZ(var(--groupline));
      }
      .head-front .group-line .line,
      .head-back .group-line .line {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: rgba(65, 65, 65, 0.1);
        transform: rotateZ(calc(12deg * var(--line)));
      }
      .head-propeller {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        transform-style: preserve-3d;
        animation: rotate 1s linear infinite;
      }
      .propeller {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        transform-style: preserve-3d;
        transform: translateZ(var(--i));
      }
      .propeller .inside {
        top: 5%;
        height: 45%;
        width: 25%;
        border-radius: 100%;
        background-color: rgba(131, 131, 131, 0.5);
        position: absolute;
        transform: rotateZ(calc(var(--prop) * 120deg));
        transform-origin: bottom;
        border: 2px solid rgb(173, 173, 173);
      }
      .core {
        width: 17%;
        height: 17%;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        transform-style: preserve-3d;
        /* transform: rotateY(80deg) rotateX(-20deg); */
      }
      .core .front {
        position: absolute;
        width: 50%;
        height: 50%;
        border-radius: 100%;
        background-color: rgba(77, 77, 77, 0.5);
        transform-style: preserve-3d;
        transform: translateZ(calc(5px + var(--front)));
        transform-origin: center;
      }
      .core .back {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background-color: rgba(94, 94, 94, 0.5);
        transform: translateZ(calc(var(--back)));
        transform-origin: center;
      }
      .head-back {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        position: absolute;
        /* background-color: rgba(128, 128, 128, 0.1); */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;
        transform-style: preserve-3d;
        transform: translateZ(-5px);
      }
      .motor {
        width: 17%;
        height: 17%;
        transform: translateZ(-6px);
        transform-style: preserve-3d;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .motor .front {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: hsla(214, 15%, 25%);
        border: 1px solid black;
      }
      .motor .back {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: hsla(214, 15%, 20%);
        transform: translateZ(-45px);
        border: 1px solid black;
      }
      .motor .left {
        position: absolute;
        width: 45px;
        height: 100%;
        background-image: linear-gradient(
          to right,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        transform: rotateY(90deg) translateZ(30px) translateX(22.5px);
        border: 1px solid black;
      }
      .motor .right {
        position: absolute;
        width: 45px;
        height: 100%;
        background-image: linear-gradient(
          to right,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        transform: rotateY(90deg) translateZ(-30px) translateX(22.5px);
        border: 1px solid black;
      }
      .motor .bottom {
        position: absolute;
        width: 100%;
        height: 45px;
        background-image: linear-gradient(
          to top,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        transform: rotateX(90deg) translateZ(-30px) translateY(-22.5px);
        border: 1px solid black;
      }
      .motor .top {
        position: absolute;
        width: 100%;
        height: 45px;
        background-image: linear-gradient(
          to top,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        transform: rotateX(90deg) translateZ(30px) translateY(-22.5px);
        border: 1px solid black;
      }
      .body {
        width: var(--size);
        height: var(--size);
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
        top: 34%;
        /* transform: rotateY(-20deg) rotateX(20deg); */
        /* animation: swing 5s infinite linear alternate; */
        z-index: 0;
      }
      .body .front {
        position: absolute;
        height: 80%;
        width: 15px;
        background-color: hsla(214, 15%, 25%);
        border: 1px solid black;
      }
      .body .back {
        position: absolute;
        height: 80%;
        width: 15px;
        background-color: hsla(214, 15%, 20%);
        transform: translateZ(-15px);
        border: 1px solid black;
      }
      .body .left {
        position: absolute;
        height: 80%;
        width: 15px;
        transform-style: preserve-3d;
        transform: rotateY(90deg);
        transform-origin: left;
        background-image: linear-gradient(
          to right,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        border: 1px solid black;
      }
      .body .right {
        position: absolute;
        height: 80%;
        width: 15px;
        transform-style: preserve-3d;
        transform: rotateY(-90deg);
        transform-origin: right;
        background-image: linear-gradient(
          to left,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        border: 1px solid black;
      }
      .body .base {
        position: absolute;
        bottom: 0;
        height: 50%;
        width: 50%;
        /* background-color: red; */
        transform-style: preserve-3d;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: bottom;
        transform: rotateX(85deg) translateY(100px) translateZ(35px);
      }
      .base .bfront {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        border: 1px solid black;
      }
      .base .bback {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: hsla(214, 15%, 20%);
        transform: translateZ(-20px);
        border: 1px solid black;
      }
      .base .bleft {
        position: absolute;
        width: 20px;
        height: 100%;
        background-image: linear-gradient(
          to left,
          hsla(214, 15%, 20%),
          hsla(214, 15%, 25%)
        );
        left: 0;
        transform-origin: left;
        transform: rotateY(90deg);
        border: 1px solid black;
      }
      .base .bright {
        position: absolute;
        width: 20px;
        height: 100%;
        background-image: linear-gradient(
          to left,
          hsla(214, 15%, 20%),
          hsla(214, 15%, 25%)
        );
        right: 0;
        transform-origin: right;
        transform: rotateY(-90deg);
        border: 1px solid black;
      }
      .base .btop {
        position: absolute;
        width: 100%;
        height: 20px;
        top: 0;
        transform-origin: top;
        transform: rotateX(-90deg);
        background-image: linear-gradient(
          to top,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        border: 1px solid black;
      }
      .base .bbottom {
        position: absolute;
        width: 100%;
        height: 20px;
        bottom: 0;
        transform-origin: bottom;
        transform: rotateX(90deg);
        background-image: linear-gradient(
          to top,
          hsla(214, 15%, 25%),
          hsla(214, 15%, 20%)
        );
        border: 1px solid black;
      }
      .hover {
        position: absolute;
        top: calc(12.5% * var(--hover));
        height: 12.5%;
        width: 100%;
        transform: translateZ(100px);
      }
      #top:hover ~ .head-group {
        --updown: 30deg;
      }
      #topmid:hover ~ .head-group {
        --updown: 20deg;
      }
      #botmid:hover ~ .head-group {
        --updown: 10deg;
      }
      #bottom:hover ~ .head-group {
        --updown: 0deg;
      }
      .hover:hover .top:hover + .head-group {
        /* animation: swing 5s infinite linear alternate; */
        background-color: red;
      }
      .card {
        /* background-color: red; */
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 30px;
        box-shadow: 0em 0.7em 2em #0002;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: all 0.3s;
        background-color: white;
      }
      .card .line-v {
        position: absolute;
        height: 100%;
        width: 30px;
        background-color: hsl(335, 86%, 50%);
        left: 50px;
      }
      .card .line-h {
        position: absolute;
        height: 30px;
        width: 100%;
        background-color: hsl(335, 86%, 50%);
        top: 50px;
      }
      .card img {
        position: absolute;
        width: 120px;
        height: 120px;
        top: 10px;
        left: 10px;
      }
      .card .text {
        position: absolute;
        bottom: 40px;
        font-size: 1.2rem;
      }
      .card:hover {
        transform: scale(1.02);
        box-shadow: 1em 0.7em 2em #0002;
      }
      @keyframes rotate {
        to {
          transform: rotateZ(360deg);
        }
      }
      @keyframes swing {
        from {
          transform: rotateY(45deg) rotateX(var(--updown));
        }
        to {
          transform: rotateY(-45deg) rotateX(var(--updown));
        }
      }
      @keyframes anim {
        from {
          transform: translateY(10px);
        }
        to {
          transform: translateY(-10px);
        }
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="fan">
        <div class="hover" style="--hover: 0" id="top"></div>
        <div class="hover" style="--hover: 1" id="topmid"></div>
        <div class="hover" style="--hover: 2" id="botmid"></div>
        <div class="hover" style="--hover: 3" id="bottom"></div>
        <div class="head-group">
          <div class="head">
            <div class="head-front">
              <div class="logo" style="--logo: 0px"></div>
              <div class="logo" style="--logo: 1px"></div>
              <div class="logo" style="--logo: 2px"></div>
              <div class="logo" style="--logo: 3px"></div>
              <div class="logo" style="--logo: 4px"></div>
              <div class="logo" style="--logo: 5px">Fan</div>
              <div class="ringline"></div>
              <div class="group-line" style="--groupline: 1">
                <div class="line" style="--line: 1"></div>
                <div class="line" style="--line: 2"></div>
                <div class="line" style="--line: 3"></div>
                <div class="line" style="--line: 4"></div>
                <div class="line" style="--line: 5"></div>
                <div class="line" style="--line: 6"></div>
                <div class="line" style="--line: 7"></div>
                <div class="line" style="--line: 8"></div>
                <div class="line" style="--line: 9"></div>
                <div class="line" style="--line: 10"></div>
                <div class="line" style="--line: 11"></div>
                <div class="line" style="--line: 12"></div>
                <div class="line" style="--line: 13"></div>
                <div class="line" style="--line: 14"></div>
                <div class="line" style="--line: 15"></div>
                <div class="line" style="--line: 16"></div>
                <div class="line" style="--line: 17"></div>
                <div class="line" style="--line: 18"></div>
                <div class="line" style="--line: 19"></div>
                <div class="line" style="--line: 20"></div>
                <div class="line" style="--line: 21"></div>
                <div class="line" style="--line: 22"></div>
                <div class="line" style="--line: 23"></div>
                <div class="line" style="--line: 24"></div>
                <div class="line" style="--line: 25"></div>
                <div class="line" style="--line: 26"></div>
                <div class="line" style="--line: 27"></div>
                <div class="line" style="--line: 28"></div>
                <div class="line" style="--line: 29"></div>
                <div class="line" style="--line: 30"></div>
              </div>
              <div class="group-line" style="--groupline: 1">
                <div class="line" style="--line: 1"></div>
                <div class="line" style="--line: 2"></div>
                <div class="line" style="--line: 3"></div>
                <div class="line" style="--line: 4"></div>
                <div class="line" style="--line: 5"></div>
                <div class="line" style="--line: 6"></div>
                <div class="line" style="--line: 7"></div>
                <div class="line" style="--line: 8"></div>
                <div class="line" style="--line: 9"></div>
                <div class="line" style="--line: 10"></div>
                <div class="line" style="--line: 11"></div>
                <div class="line" style="--line: 12"></div>
                <div class="line" style="--line: 13"></div>
                <div class="line" style="--line: 14"></div>
                <div class="line" style="--line: 15"></div>
                <div class="line" style="--line: 16"></div>
                <div class="line" style="--line: 17"></div>
                <div class="line" style="--line: 18"></div>
                <div class="line" style="--line: 19"></div>
                <div class="line" style="--line: 20"></div>
                <div class="line" style="--line: 21"></div>
                <div class="line" style="--line: 22"></div>
                <div class="line" style="--line: 23"></div>
                <div class="line" style="--line: 24"></div>
                <div class="line" style="--line: 25"></div>
                <div class="line" style="--line: 26"></div>
                <div class="line" style="--line: 27"></div>
                <div class="line" style="--line: 28"></div>
                <div class="line" style="--line: 29"></div>
                <div class="line" style="--line: 30"></div>
              </div>
            </div>
            <div class="head-propeller">
              <div class="propeller" style="--i: 0px">
                <div class="inside" style="--prop: 0"></div>
                <div class="inside" style="--prop: 1"></div>
                <div class="inside" style="--prop: 2"></div>
              </div>
              <div class="propeller" style="--i: 1px">
                <div class="inside" style="--prop: 0"></div>
                <div class="inside" style="--prop: 1"></div>
                <div class="inside" style="--prop: 2"></div>
              </div>
              <div class="propeller" style="--i: 2px">
                <div class="inside" style="--prop: 0"></div>
                <div class="inside" style="--prop: 1"></div>
                <div class="inside" style="--prop: 2"></div>
              </div>
              <div class="propeller" style="--i: 3px">
                <div class="inside" style="--prop: 0"></div>
                <div class="inside" style="--prop: 1"></div>
                <div class="inside" style="--prop: 2"></div>
              </div>
              <div class="propeller" style="--i: 4px">
                <div class="inside" style="--prop: 0"></div>
                <div class="inside" style="--prop: 1"></div>
                <div class="inside" style="--prop: 2"></div>
              </div>
              <div class="propeller" style="--i: 5px">
                <div class="inside" style="--prop: 0"></div>
                <div class="inside" style="--prop: 1"></div>
                <div class="inside" style="--prop: 2"></div>
              </div>
            </div>
            <div class="core">
              <div class="front" style="--front: 0px"></div>
              <div class="front" style="--front: 1px"></div>
              <div class="front" style="--front: 2px"></div>
              <div class="front" style="--front: 3px"></div>
              <div class="front" style="--front: 4px"></div>
              <div class="front" style="--front: 5px"></div>
              <div class="back" style="--back: 0px"></div>
              <div class="back" style="--back: 1px"></div>
              <div class="back" style="--back: 2px"></div>
              <div class="back" style="--back: 3px"></div>
              <div class="back" style="--back: 4px"></div>
              <div class="back" style="--back: 5px"></div>
            </div>
            <div class="crop-group">
              <div class="crop" style="--crop: 0%">
                <div class="block" style="--block: 1"><div></div></div>
                <div class="block" style="--block: 2"><div></div></div>
                <div class="block" style="--block: 3"><div></div></div>
                <div class="block" style="--block: 4"><div></div></div>
                <div class="block" style="--block: 5"><div></div></div>
                <div class="block" style="--block: 6"><div></div></div>
                <div class="block" style="--block: 7"><div></div></div>
                <div class="block" style="--block: 8"><div></div></div>
                <div class="block" style="--block: 9"><div></div></div>
                <div class="block" style="--block: 10"><div></div></div>
                <div class="block" style="--block: 11"><div></div></div>
                <div class="block" style="--block: 12"><div></div></div>
                <div class="block" style="--block: 13"><div></div></div>
                <div class="block" style="--block: 14"><div></div></div>
                <div class="block" style="--block: 15"><div></div></div>
                <div class="block" style="--block: 16"><div></div></div>
                <div class="block" style="--block: 17"><div></div></div>
                <div class="block" style="--block: 18"><div></div></div>
                <div class="block" style="--block: 19"><div></div></div>
                <div class="block" style="--block: 20"><div></div></div>
                <div class="block" style="--block: 21"><div></div></div>
                <div class="block" style="--block: 22"><div></div></div>
                <div class="block" style="--block: 23"><div></div></div>
                <div class="block" style="--block: 24"><div></div></div>
                <div class="block" style="--block: 25"><div></div></div>
                <div class="block" style="--block: 26"><div></div></div>
                <div class="block" style="--block: 27"><div></div></div>
                <div class="block" style="--block: 28"><div></div></div>
                <div class="block" style="--block: 29"><div></div></div>
                <div class="block" style="--block: 30"><div></div></div>
              </div>
              <div class="crop" style="--crop: 5%">
                <div class="block" style="--block: 1"><div></div></div>
                <div class="block" style="--block: 2"><div></div></div>
                <div class="block" style="--block: 3"><div></div></div>
                <div class="block" style="--block: 4"><div></div></div>
                <div class="block" style="--block: 5"><div></div></div>
                <div class="block" style="--block: 6"><div></div></div>
                <div class="block" style="--block: 7"><div></div></div>
                <div class="block" style="--block: 8"><div></div></div>
                <div class="block" style="--block: 9"><div></div></div>
                <div class="block" style="--block: 10"><div></div></div>
                <div class="block" style="--block: 11"><div></div></div>
                <div class="block" style="--block: 12"><div></div></div>
                <div class="block" style="--block: 13"><div></div></div>
                <div class="block" style="--block: 14"><div></div></div>
                <div class="block" style="--block: 15"><div></div></div>
                <div class="block" style="--block: 16"><div></div></div>
                <div class="block" style="--block: 17"><div></div></div>
                <div class="block" style="--block: 18"><div></div></div>
                <div class="block" style="--block: 19"><div></div></div>
                <div class="block" style="--block: 20"><div></div></div>
                <div class="block" style="--block: 21"><div></div></div>
                <div class="block" style="--block: 22"><div></div></div>
                <div class="block" style="--block: 23"><div></div></div>
                <div class="block" style="--block: 24"><div></div></div>
                <div class="block" style="--block: 25"><div></div></div>
                <div class="block" style="--block: 26"><div></div></div>
                <div class="block" style="--block: 27"><div></div></div>
                <div class="block" style="--block: 28"><div></div></div>
                <div class="block" style="--block: 29"><div></div></div>
                <div class="block" style="--block: 30"><div></div></div>
              </div>
              <div class="cropside">
                <div class="block" style="--cropside: 1">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 2">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 3">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 4">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 5">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 6">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 7">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 8">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 9">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 10">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 11">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 12">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 13">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 14">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 15">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 16">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 17">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 18">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 19">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 20">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 21">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 22">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 23">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 24">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 25">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 26">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 27">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 28">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 29">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
                <div class="block" style="--cropside: 30">
                  <div class="cropfront"></div>
                  <div class="cropback"></div>
                </div>
              </div>
            </div>
            <div class="head-back">
              <div class="ringline"></div>
              <div class="group-line" style="--groupline: 1">
                <div class="line" style="--line: 1"></div>
                <div class="line" style="--line: 2"></div>
                <div class="line" style="--line: 3"></div>
                <div class="line" style="--line: 4"></div>
                <div class="line" style="--line: 5"></div>
                <div class="line" style="--line: 6"></div>
                <div class="line" style="--line: 7"></div>
                <div class="line" style="--line: 8"></div>
                <div class="line" style="--line: 9"></div>
                <div class="line" style="--line: 10"></div>
                <div class="line" style="--line: 11"></div>
                <div class="line" style="--line: 12"></div>
                <div class="line" style="--line: 13"></div>
                <div class="line" style="--line: 14"></div>
                <div class="line" style="--line: 15"></div>
                <div class="line" style="--line: 16"></div>
                <div class="line" style="--line: 17"></div>
                <div class="line" style="--line: 18"></div>
                <div class="line" style="--line: 19"></div>
                <div class="line" style="--line: 20"></div>
                <div class="line" style="--line: 21"></div>
                <div class="line" style="--line: 22"></div>
                <div class="line" style="--line: 23"></div>
                <div class="line" style="--line: 24"></div>
                <div class="line" style="--line: 25"></div>
                <div class="line" style="--line: 26"></div>
                <div class="line" style="--line: 27"></div>
                <div class="line" style="--line: 28"></div>
                <div class="line" style="--line: 29"></div>
                <div class="line" style="--line: 30"></div>
              </div>
              <div class="group-line" style="--groupline: 1">
                <div class="line" style="--line: 1"></div>
                <div class="line" style="--line: 2"></div>
                <div class="line" style="--line: 3"></div>
                <div class="line" style="--line: 4"></div>
                <div class="line" style="--line: 5"></div>
                <div class="line" style="--line: 6"></div>
                <div class="line" style="--line: 7"></div>
                <div class="line" style="--line: 8"></div>
                <div class="line" style="--line: 9"></div>
                <div class="line" style="--line: 10"></div>
                <div class="line" style="--line: 11"></div>
                <div class="line" style="--line: 12"></div>
                <div class="line" style="--line: 13"></div>
                <div class="line" style="--line: 14"></div>
                <div class="line" style="--line: 15"></div>
                <div class="line" style="--line: 16"></div>
                <div class="line" style="--line: 17"></div>
                <div class="line" style="--line: 18"></div>
                <div class="line" style="--line: 19"></div>
                <div class="line" style="--line: 20"></div>
                <div class="line" style="--line: 21"></div>
                <div class="line" style="--line: 22"></div>
                <div class="line" style="--line: 23"></div>
                <div class="line" style="--line: 24"></div>
                <div class="line" style="--line: 25"></div>
                <div class="line" style="--line: 26"></div>
                <div class="line" style="--line: 27"></div>
                <div class="line" style="--line: 28"></div>
                <div class="line" style="--line: 29"></div>
                <div class="line" style="--line: 30"></div>
              </div>
            </div>
          </div>
          <div class="motor">
            <div class="front"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
          </div>
        </div>
        <div class="body">
          <div class="front"></div>
          <div class="back"></div>
          <div class="left"></div>
          <div class="right"></div>
          <div class="base">
            <div class="bfront"></div>
            <div class="bback"></div>
            <div class="bleft"></div>
            <div class="bright"></div>
            <div class="btop"></div>
            <div class="bbottom"></div>
          </div>
        </div>
      </div>
      <div class="line-v"></div>
      <div class="line-h"></div>
      <img
        src="https://cdn.discordapp.com/attachments/564425976893800468/939492197978488863/istockphoto-1142890704-1024x1024.png"
        alt=""
      />
      <div class="text">
        มอบให้<br />
        <span style="font-size: 1.7rem; font-weight: bold;">พวกไม่มีแฟน</span>
      </div>
    </div>
  </body>
</html>