Notification by devsleonardo

This notification was created for level-up-challenge

Made by

@devsleonardo

Theme:

Dark

#notification

#212121

60 views

CSSAdd prefixes

1.notification {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  justify-content: center;
6  text-align: center;
7  margin: 50px;
8}
9
10.trophy {
11  fill: gold;
12  width: 80px;
13  height: 80px;
14  animation: bounce 0.5s ease-in-out 1;
15}
16
17.trophy:hover {
18  animation: spin 1s ease-in-out 1;
19}
20
21@keyframes bounce {
22  0% {
23    transform: translateY(0);
24  }
25
26  25% {
27    transform: translateY(-20px);
28  }
29
30  50% {
31    transform: translateY(0);
32  }
33
34  75% {
35    transform: translateY(-10px);
36  }
37
38  100% {
39    transform: translateY(0);
40  }
41}
42
43@keyframes spin {
44  0% {
45    transform: rotate(0);
46  }
47
48  100% {
49    transform: rotate(360deg);
50  }
51}
52

.notification {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px;
}

.trophy {
  fill: gold;
  width: 80px;
  height: 80px;
  animation: bounce 0.5s ease-in-out 1;
}

.trophy:hover {
  animation: spin 1s ease-in-out 1;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

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

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

HTML

1<div class="notification">
2  <svg class="trophy" viewBox="0 0 100 100">
3    <g>
4      <path d="M10,50 L40,50 L30,10 L20,10 Z"></path>
5      <path d="M60,50 L90,50 L80,10 L70,10 Z"></path>
6      <path d="M20,10 L80,10 L70,30 L30,30 Z"></path>
7      <path d="M30,30 L70,30 L60,50 L40,50 Z"></path>
8      <path d="M25,75 L75,75 L85,90 L15,90 Z"></path>
9      <path d="M40,50 L60,50 L55,70 L45,70 Z"></path>
10    </g>
11  </svg>
12  <p>Congratulations!
13  </p><p>You reached level 10!</p>
14</div>
15

<div class="notification">
  <svg class="trophy" viewBox="0 0 100 100">
    <g>
      <path d="M10,50 L40,50 L30,10 L20,10 Z"></path>
      <path d="M60,50 L90,50 L80,10 L70,10 Z"></path>
      <path d="M20,10 L80,10 L70,30 L30,30 Z"></path>
      <path d="M30,30 L70,30 L60,50 L40,50 Z"></path>
      <path d="M25,75 L75,75 L85,90 L15,90 Z"></path>
      <path d="M40,50 L60,50 L55,70 L45,70 Z"></path>
    </g>
  </svg>
  <p>Congratulations!
  </p><p>You reached level 10!</p>
</div>