galaxy/Notifications/yaroslavas2001_stupid-shrimp-89.html

<div class="notification">
  <div class="mirrow">
    <svg class="fragment fragment1" viewBox="0 0 137 108" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0H95L137 107.5L0 78V0Z"></path>
    </svg>
    <svg class="fragment fragment2" width="137" height="107" viewBox="0 0 137 107" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0L136.5 27.5L91 107H0V0Z"></path>
    </svg>
    <svg class="fragment fragment3" width="108" height="103" viewBox="0 0 108 103" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0H108L96 52L37.5 103L0 0Z"></path>
    </svg>
    <svg class="fragment fragment4" width="140" height="110" viewBox="0 0 140 110" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M69 0H140V99L0 110L60.5 52L69 0Z"></path>
    </svg>
    <svg class="fragment fragment5" width="184" height="86" viewBox="0 0 184 86" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M38 10L184 0V86H0L38 10Z"></path>
    </svg>
    <div class="level">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star1">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star2">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star3">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star4">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star5">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star6">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star7">
        <path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
      </svg>
      <p class="level_text">Level Up!</p>
      <p class="level_sub_text">7 lvl.</p>
      <div class="btn_block">
        <button class="btn">Menu</button>
        <button class="btn">Next Level</button>
      </div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by yaroslavas2001 - Tags: notification */
.notification {
  height: 12em;
  width: 19em;
}

.mirrow {
  height: 12em;
  width: 19em;
  position: relative;
  background: linear-gradient(45deg, #6720D9, #0062FF, #0085FF, #009CFF, #00AED3, #00BD9B);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.fragment {
  position: absolute;
  filter: blur(5px);
  fill: rgba(252, 252, 252, 0.7);
  transition: all 2s ease-in-out;
}

.mirrow:hover .fragment {
  height: 0em;
  width: 0em;
  filter: blur(10px);
}

.fragment1 {
  width: 9.5em;
  height: 7.5em;
}

.mirrow:hover .fragment1 {
  transform: translate(-15px, -15px);
}

.fragment2 {
  width: 8em;
  height: 6.5em;
  bottom: 0px;
  left: 0px;
}

.mirrow:hover .fragment2 {
  transform: translate(-15px, 15px);
}

.fragment3 {
  width: 7em;
  height: 7em;
  top: 0px;
  right: 25%;
  left: 40%;
}

.mirrow:hover .fragment3 {
  transform: translate(0px, -15px);
}

.fragment4 {
  width: 8em;
  height: 7em;
  top: 0px;
  right: 0px
}

.mirrow:hover .fragment4 {
  transform: translate(15px, -15px);
}

.fragment5 {
  width: 12em;
  height: 6em;
  bottom: 0px;
  right: 0px;
}

.mirrow:hover .fragment5 {
  transform: translate(15px, 15px);
}

.level {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.btn_block {
  display: flex;
}

.level_text {
  font-weight: bold;
  font-size: 22px;
  color: #fff;
  margin: 0px 0px 5px 0px;
}

.level_sub_text {
  font-size: 13px;
  color: #fff;
  margin: 0px 0px 10px 0px;
}

.btn {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 14px;
  cursor: pointer;
  margin: 0px 2px;
  color: #fff;
  font-size: 12px;
  transition: all 1s ease-in-out;
  padding: 2px 6px;
}

.btn:hover {
  background: #fff;
  color: #000;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.star {
  position: absolute;
  height: 28px;
  width: 28px;
  fill: yellow;
}

.star1 {
  animation: Orbita1 15s linear infinite;
}

@keyframes Orbita1 {
  from {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(80px) rotate(-360deg);
  }
}

.star2 {
  animation: Orbita2 15s linear infinite;
}

@keyframes Orbita2 {
  from {
    transform: rotate(50deg) translateX(80px) rotate(50deg);
  }

  to {
    transform: rotate(410deg) translateX(80px) rotate(-410deg);
  }
}

.star3 {
  animation: Orbita3 15s linear infinite;
}

@keyframes Orbita3 {
  from {
    transform: rotate(100deg) translateX(80px) rotate(100deg);
  }

  to {
    transform: rotate(460deg) translateX(80px) rotate(-460deg);
  }
}

.star4 {
  animation: Orbita4 15s linear infinite;
}

@keyframes Orbita4 {
  from {
    transform: rotate(150deg) translateX(80px) rotate(150deg);
  }

  to {
    transform: rotate(510deg) translateX(80px) rotate(-510deg);
  }
}

.star5 {
  animation: Orbita5 15s linear infinite;
}

@keyframes Orbita5 {
  from {
    transform: rotate(200deg) translateX(80px) rotate(200deg);
  }

  to {
    transform: rotate(560deg) translateX(80px) rotate(-560deg);
  }
}

.star6 {
  animation: Orbita6 15s linear infinite;
}

@keyframes Orbita6 {
  from {
    transform: rotate(250deg) translateX(80px) rotate(250deg);
  }

  to {
    transform: rotate(610deg) translateX(80px) rotate(-610deg);
  }
}

.star7 {
  animation: Orbita7 15s linear infinite;
}

@keyframes Orbita7 {
  from {
    transform: rotate(310deg) translateX(80px) rotate(310deg);
  }

  to {
    transform: rotate(670deg) translateX(80px) rotate(-670deg);
  }
}
</style>