Notification by Yaya12085

This notification was created for level-up-challenge

Made by

@Yaya12085

Theme:

Light

#notification

#e8e8e8

187 views

CSSAdd prefixes

1.notification {
2  width: 300px;
3  height: 70px;
4  background: #fff;
5  border-radius: 10px;
6  display: flex;
7  align-items: center;
8  justify-content: space-between;
9  color: #212121;
10  box-shadow: 0px 42px 53px 13px rgba(0,0,0,0.1);
11  padding: 2px;
12  position: relative;
13  animation: appear .6s linear alternate-reverse infinite;
14  transition: all .6s ease;
15}
16
17.icon {
18  height: 100%;
19  transition: transform .6s ease;
20}
21
22.messages {
23  height: 100%;
24  flex: 1;
25  display: flex;
26  flex-direction: column;
27  justify-content: flex-start;
28  padding: 4px;
29}
30
31.title {
32  font-size: 0.95rem;
33  line-height: 1rem;
34  font-weight: 700;
35  margin-bottom: 4px;
36  color: #494949;
37}
38
39.description {
40  font-size: 13px;
41  margin-bottom: 4px;
42}
43
44.level {
45  color: #7d5cf5;
46  font-weight: 600;
47  background-color: #7d5cf53f;
48  display: flex;
49  align-items: center;
50  flex: 1;
51  height: 0;
52  width: max-content;
53  padding: 4px;
54  border-radius: 10px;
55}
56
57.level svg {
58  height: 140%;
59  background-color: #7d5cf5;
60  border-radius: 6px;
61  margin-right: 4px;
62}
63
64.action {
65  height: 100%;
66  display: flex;
67  align-items: center;
68  justify-content: center;
69}
70
71.action button {
72  padding: 0.5rem  1rem;
73  background-color: #7d5cf5;
74  color: #ffffff;
75  font-size: 0.75rem;
76  line-height: 1rem;
77  font-weight: 700;
78  text-transform: uppercase;
79  border-radius: 10px;
80  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
81  border: none;
82  height: 40px;
83  transition: all .6s ease;
84  margin-right: 6px;
85}
86
87.notification:hover .icon {
88  transform: rotate(45deg);
89}
90
91.action button:hover {
92  height: 100%;
93  margin-right: 0;
94}
95
96.action button:active {
97  background-color: #4dec48;
98}
99
100@keyframes appear {
101  from {
102    transform: scale(0.98);
103  }
104
105  to {
106    transform: scale(1);
107  }
108}

.notification {
  width: 300px;
  height: 70px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #212121;
  box-shadow: 0px 42px 53px 13px rgba(0,0,0,0.1);
  padding: 2px;
  position: relative;
  animation: appear .6s linear alternate-reverse infinite;
  transition: all .6s ease;
}

.icon {
  height: 100%;
  transition: transform .6s ease;
}

.messages {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px;
}

.title {
  font-size: 0.95rem;
  line-height: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #494949;
}

.description {
  font-size: 13px;
  margin-bottom: 4px;
}

.level {
  color: #7d5cf5;
  font-weight: 600;
  background-color: #7d5cf53f;
  display: flex;
  align-items: center;
  flex: 1;
  height: 0;
  width: max-content;
  padding: 4px;
  border-radius: 10px;
}

.level svg {
  height: 140%;
  background-color: #7d5cf5;
  border-radius: 6px;
  margin-right: 4px;
}

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

.action button {
  padding: 0.5rem  1rem;
  background-color: #7d5cf5;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: none;
  height: 40px;
  transition: all .6s ease;
  margin-right: 6px;
}

.notification:hover .icon {
  transform: rotate(45deg);
}

.action button:hover {
  height: 100%;
  margin-right: 0;
}

.action button:active {
  background-color: #4dec48;
}

@keyframes appear {
  from {
    transform: scale(0.98);
  }

  to {
    transform: scale(1);
  }
}

HTML

1<div class="notification">
2  <div class="icon">
3    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon" viewBox="0 0 1024 1024"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"><path fill="#E9E8FF" d="M512 512m-480 0a480 480 0 1 0 960 0 480 480 0 1 0-960 0Z"></path><path fill="#8880FE" d="M723.2 704c-25.6 0-51.2-12.8-70.4-32L582.4 582.4H435.2l-38.4 64c-19.2 32-51.2 57.6-89.6 57.6-57.6 0-102.4-44.8-102.4-102.4v-12.8V576l25.6-166.4c6.4-70.4 57.6-121.6 128-121.6 32 0 70.4 12.8 89.6 38.4 25.6 0 89.6-6.4 128 0 25.6-25.6 57.6-32 89.6-32 51.2 0 96 32 115.2 83.2v12.8l38.4 179.2c0 6.4 6.4 19.2 6.4 32 0 51.2-44.8 102.4-102.4 102.4z"></path><path fill="#FFFFFF" d="M716.8 460.8c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m-108.8 0c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m51.2 57.6c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2z m0-115.2c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2zM345.6 416h-51.2V448h51.2v51.2h32V448h51.2v-32h-51.2v-51.2h-32z"></path></g></svg>
4  </div>
5  <div class="messages">
6    <span class="title">Well done!</span>
7    <span class="description">New level reached.</span>
8    <span class="level">
9      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 16L12.1937 13.1937V13.1937C12.0867 13.0867 11.9133 13.0867 11.8063 13.1937V13.1937L9 16"></path> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 11L12.1505 8.15049V8.15049C12.0674 8.06738 11.9326 8.06738 11.8495 8.15049V8.15049L9 11"></path> </g></svg>
10      lvl. 8
11      </span>
12      
13  </div>
14  <div class="action">
15    <button>Next</button>
16  </div>
17</div>

<div class="notification">
  <div class="icon">
    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon" viewBox="0 0 1024 1024"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"><path fill="#E9E8FF" d="M512 512m-480 0a480 480 0 1 0 960 0 480 480 0 1 0-960 0Z"></path><path fill="#8880FE" d="M723.2 704c-25.6 0-51.2-12.8-70.4-32L582.4 582.4H435.2l-38.4 64c-19.2 32-51.2 57.6-89.6 57.6-57.6 0-102.4-44.8-102.4-102.4v-12.8V576l25.6-166.4c6.4-70.4 57.6-121.6 128-121.6 32 0 70.4 12.8 89.6 38.4 25.6 0 89.6-6.4 128 0 25.6-25.6 57.6-32 89.6-32 51.2 0 96 32 115.2 83.2v12.8l38.4 179.2c0 6.4 6.4 19.2 6.4 32 0 51.2-44.8 102.4-102.4 102.4z"></path><path fill="#FFFFFF" d="M716.8 460.8c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m-108.8 0c-12.8 0-19.2-12.8-19.2-19.2s6.4-19.2 19.2-19.2c12.8 0 19.2 12.8 19.2 19.2s-6.4 19.2-19.2 19.2z m51.2 57.6c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2z m0-115.2c-6.4 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2 19.2 12.8 19.2 19.2-6.4 19.2-19.2 19.2zM345.6 416h-51.2V448h51.2v51.2h32V448h51.2v-32h-51.2v-51.2h-32z"></path></g></svg>
  </div>
  <div class="messages">
    <span class="title">Well done!</span>
    <span class="description">New level reached.</span>
    <span class="level">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 16L12.1937 13.1937V13.1937C12.0867 13.0867 11.9133 13.0867 11.8063 13.1937V13.1937L9 16"></path> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#fff" d="M15 11L12.1505 8.15049V8.15049C12.0674 8.06738 11.9326 8.06738 11.8495 8.15049V8.15049L9 11"></path> </g></svg>
      lvl. 8
      </span>
      
  </div>
  <div class="action">
    <button>Next</button>
  </div>
</div>