Ord.io Logo
Ord.io
Inscription

76,865,420

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09</title>
  <style>
    .cat {
      position: relative;
      height: 170px;
      width: 192.1px;
    }

    .ear {
      position: absolute;
      top: -30%;
      height: 60%;
      width: 25%;
      background: linear-gradient(135deg, #ff7f50, #ff4500);
      box-shadow: 0 0 10px #ff4500;
    }

    .ear::before,
    .ear::after {
      content: "";
      position: absolute;
      bottom: 24%;
      height: 10%;
      width: 5%;
      border-radius: 50%;
      background: #1e1d0a;
    }

    .ear::after {
      transform-origin: 50% 100%;
    }

    .ear--left {
      left: -7%;
      border-radius: 70% 30% 0% 0%/100% 100% 0% 0%;
      transform: rotate(-15deg);
    }

    .ear--left::before,
    .ear--left::after {
      right: 10%;
    }

    .ear--left::after {
      transform: rotate(-45deg);
    }

    .ear--right {
      right: -7%;
      border-radius: 30% 70% 0% 0%/100% 100% 0% 0%;
      transform: rotate(15deg);
    }

    .ear--right::before,
    .ear--right::after {
      left: 10%;
    }

    .ear--right::after {
      transform: rotate(45deg);
    }

    .face {
      position: absolute;
      height: 100%;
      width: 100%;
      background: linear-gradient(135deg, ##1e1d0a, #00bfff, #ff7f50, #ff4500);
      border-radius: 50%;
      box-shadow: 0 0 15px #00bfff;
      animation: glow 3s infinite alternate;
    }

    @keyframes glow {
      0% {
        box-shadow: 0 0 15px #00bfff;
      }

      100% {
        box-shadow: 0 0 25px #00bfff;
      }
    }

    .eye {
      position: absolute;
      top: 35%;
      height: 30%;
      width: 31%;
      background: radial-gradient(circle, #fff 30%, ##00bfff 100%);
      border-radius: 50%;
      box-shadow: 0 0 10px #00bfff;
      overflow: hidden;
      /* Ensure the runes don't overflow */
    }

    .eye::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-radius: 0 0 50% 50%/0 0 40% 40%;
      background: none;
      /* Remove blinking background */
    }

    .eye::before {
      content: "";
      position: absolute;
      top: 60%;
      height: 10%;
      width: 15%;
      background: #fff;
      border-radius: 50%;
    }

    .eye--left {
      left: 0;
    }

    .eye--left::before {
      right: -5%;
    }

    .eye--right {
      right: 0;
    }

    .eye--right::before {
      left: -5%;
    }

    .eye-rune {
      position: absolute;
      top: 25%;
      left: 40%;
      font-size: 2rem;
      color: #ff1493;
      animation: spin 4s infinite linear;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .muzzle {
      position: absolute;
      top: 60%;
      left: 50%;
      height: 6%;
      width: 10%;
      background: #fff;
      transform: translateX(-50%);
      border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
      box-shadow: 0 0 10px #ff4500;
      z-index: 1;
      /* Ensures whiskers are over the muzzle */
    }

    .whisker {
      position: absolute;
      height: 2px;
      background: none;
      z-index: 2;
      /* Ensures whiskers are over the muzzle */
    }

    .whisker svg {
      position: absolute;
      top: 0;
      left: 0;
    }

    .whisker--left-1 {
      top: 60%;
      left: -20%;
    }

    .whisker--left-2 {
      top: 63%;
      left: -20%;
    }

    .whisker--left-3 {
      top: 67%;
      left: -20%;
    }

    .whisker--right-1 {
      top: 60%;
      right: 20%;
    }

    .whisker--right-2 {
      top: 63%;
      right: 20%;
    }

    .whisker--right-3 {
      top: 67%;
      right: 20%;
    }

    /* General page styling */
    html {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at center, #1e1d0a, #FF4500, #FFD700, #FF6347);
    }
  </style>
</head>

<body>
  <div class="cat">
    <div class="ear ear--left"></div>
    <div class="ear ear--right"></div>
    <div class="face">
      <div class="eye eye--left">
        <div class="eye-rune">ᚹ</div>
      </div>
      <div class="eye eye--right">
        <div class="eye-rune">ᛪ</div>
      </div>
      <div class="muzzle"></div>
      <div class="whisker whisker--left-1">
        <svg width="100" height="10">
          <path d="M 0 5 Q 50 -5 100 5" stroke="#fff" fill="transparent" />
        </svg>
      </div>
      <div class="whisker whisker--left-2">
        <svg width="100" height="10">
          <path d="M 0 5 Q 50 -5 100 5" stroke="#fff" fill="transparent" />
        </svg>
      </div>
      <div class="whisker whisker--left-3">
        <svg width="100" height="10">
          <path d="M 0 5 Q 50 -5 100 5" stroke="#fff" fill="transparent" />
        </svg>
      </div>
      <div class="whisker whisker--right-1">
        <svg width="100" height="10">
          <path d="M 100 5 Q 50 -5 0 5" stroke="#fff" fill="transparent" />
        </svg>
      </div>
      <div class="whisker whisker--right-2">
        <svg width="100" height="10">
          <path d="M 100 5 Q 50 -5 0 5" stroke="#fff" fill="transparent" />
        </svg>
      </div>
      <div class="whisker whisker--right-3">
        <svg width="100" height="10">
          <path d="M 100 5 Q 50 -5 0 5" stroke="#fff" fill="transparent" />
        </svg>
      </div>
    </div>
  </div>
</body>

</html>

No replies yet

  • ID

    60ea6...c41i0

  • Owned By
  • File Type

    HTMLtext/html;charset=utf-8

  • File Size

    4.935 KB

  • Created

    October 30, 2024, 10:22 PM UTC

    192 days ago

  • Creation Block
  • Creation Transaction
  • Creation Fee

    5,516sats

  • Tags

    No tags yet

Sat

  • Sat Number
  • Sat Name

    kvzcnwkihig

  • Sat Creation Block
  • Sat Creation Year

    2010

  • Inscriptions
  • Cursed Inscriptions

    No cursed inscriptions yet

  • SATRIBUTES

    No Satributes