n

HTML

CSS

body {
      background: #140b29;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }

.buy {
      position: relative;
      width: 400px;
      height: 300px;
      background: linear-gradient(225deg, #5545b6 0%, #140b29 100%);
      border-radius: 15px;
      overflow: visible;
      box-shadow: 0 0 30px rgba(112, 93, 242, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }

.object {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 20px;
      color: white;
      font-size: 5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      user-select: none;
      cursor: default;
    }

.object.pyramid {
      bottom: 95%;
      left: -5%;
      background: #b83fff;
      animation: buy-object-floating 6.5s infinite ease-in-out alternate;
    }

.object.sphere {
      bottom: 0;
      left: 100%;
      background: #ffbe00;
      animation: buy-object-floating 7.1s infinite ease-in-out alternate;
    }

.object.cube {
      top: 15%;
      left: 105%;
      background: #ff0085;
      animation: buy-object-floating 8s infinite ease-in-out alternate;
    }

.radial-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.15;
      z-index: -1;
    }

.pyramid .radial-glow {
      width: 15vmax;
      height: 15vmax;
      background: radial-gradient(closest-side, #b83fff, transparent);
    }

.sphere .radial-glow {
      width: 15vmax;
      height: 15vmax;
      background: radial-gradient(closest-side, #ffbe00, transparent);
      opacity: 0.2;
    }

.cube .radial-glow {
      width: 15vmax;
      height: 15vmax;
      background: radial-gradient(closest-side, #ff0085, transparent);
      opacity: 0.2;
    }

@keyframes buy-object-floating {
      0% {
        transform: translateY(-30px);
      }
      100% {
        transform: translateY(30px);
      }
    }

Trang chủ

HTML

CSS

JS