G-Loot DS — reward ladder overlay claimed

by Augustin Hiebel

HTML

<div class="relative">
  <div class="absolute inset-0 z-50 backdrop-blur-sm bg-gradient-radial from-ui-900/90 via-ui-900/90 to-ui-900/60 gap-2 flex items-center justify-center overflow-hidden">
    <div class="relative z-10 flex flex-col items-center justify-center gap-3 animate-slide-in-bottom animate-delay" style="--delay: calc(1 * 0.05s);">
      <h2>Well done!</h2>
      <p class="text-ui-200">You have claimed all rewards available for this week.</p>
    </div>
    <div class="absolute z-0 inset-0 pointer-events-none">
      <img class="absolute top-10 left-[calc(50%-300px)] -rotate-[33deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-star-1.webp" width="100" height="auto" alt="" />
      <img class="absolute bottom-10 left-[calc(50%-200px)] -rotate-[120deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-star-2.webp" width="60" height="auto" alt="" />
      <img class="absolute bottom-24 right-[calc(50%-250px)] rotate-[45deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-star-1.webp" width="50" height="auto" alt="" />
      <img class="absolute top-12 right-[calc(50%-350px)] rotate-[33deg]" src="https://res.cloudinary.com/gloot/image/upload/v1660128022/Marketing/2022_prototype/3Dobjects/3dobject-star-2.webp" width="110" height="auto" alt="" />
    </div>
  </div>
  <div class="ladder-container scrollbar-desktop" style="--max: 10; --step: 1;">
    ...
  </div>
</div>