mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
104 lines
3.8 KiB
HTML
104 lines
3.8 KiB
HTML
<div class="card">
|
|
<svg height="180px" width="200px" version="1.1" id="Layer_1" viewBox="0 0 512 512" xml:space="preserve" class="metal">
|
|
<path style="fill: #ffc61b" d="M256,512c-76.231,0-138.249-62.018-138.249-138.249c0-76.232,62.018-138.25,138.249-138.25
|
|
c23.8,0,47.273,6.151,67.886,17.79c7.033,3.971,9.515,12.892,5.544,19.927c-3.971,7.033-12.896,9.515-19.927,5.544
|
|
c-16.232-9.166-34.733-14.009-53.503-14.009c-60.102,0-108.999,48.898-108.999,109S195.899,482.751,256,482.751
|
|
s108.999-48.896,108.999-108.999c0-8.077,6.549-14.625,14.625-14.625c8.076,0,14.625,6.548,14.625,14.625
|
|
C394.249,449.982,332.231,512,256,512z"></path>
|
|
<path style="fill: #fee187" d="M256,424.249c-27.845,0-50.498-22.653-50.498-50.498s22.653-50.499,50.498-50.499
|
|
s50.498,22.654,50.498,50.499C306.498,401.596,283.845,424.249,256,424.249z"></path>
|
|
<g>
|
|
<path style="fill: #ffc61b" d="M256,438.874c-35.909,0-65.123-29.214-65.123-65.123s29.215-65.125,65.123-65.125
|
|
s65.123,29.215,65.123,65.124S291.908,438.874,256,438.874z M256,337.877c-19.781,0-35.873,16.092-35.873,35.874
|
|
c0,19.781,16.092,35.873,35.873,35.873s35.873-16.092,35.873-35.873C291.873,353.969,275.781,337.877,256,337.877z"></path>
|
|
<path style="fill: #ffc61b" d="M316.661,280.679c-2.437,0-4.905-0.61-7.178-1.893c-16.262-9.182-34.757-14.036-53.483-14.036
|
|
s-37.221,4.853-53.483,14.036c-6.986,3.943-15.846,1.525-19.857-5.423l-58.24-100.876c-4.039-6.995-1.642-15.94,5.353-19.978
|
|
c6.995-4.038,15.94-1.642,19.978,5.353l51.383,88.997c17.255-7.462,35.969-11.359,54.868-11.359s37.613,3.899,54.868,11.359
|
|
l49.423-85.604V29.25h-25.8c-8.076,0-14.625-6.548-14.625-14.625S326.416,0,334.492,0h40.426c8.076,0,14.625,6.548,14.625,14.625
|
|
v150.55c0,2.567-0.676,5.09-1.96,7.313l-58.24,100.876C326.632,278.053,321.717,280.679,316.661,280.679z"></path>
|
|
</g>
|
|
<path style="fill: #fee187" d="M256,250.126c0.41,0,0.812,0.026,1.22,0.031V14.625H137.084v150.55l58.242,100.876
|
|
C213.253,255.929,233.942,250.126,256,250.126z"></path>
|
|
<path style="fill: #ffc61b" d="M195.338,280.679c-5.057,0-9.971-2.625-12.679-7.314l-58.24-100.876
|
|
c-1.284-2.223-1.96-4.746-1.96-7.313V14.625C122.459,6.548,129.008,0,137.084,0H257.22c8.076,0,14.625,6.548,14.625,14.625v235.531
|
|
c0,3.905-1.562,7.648-4.338,10.396c-2.776,2.747-6.511,4.291-10.441,4.23c-0.309-0.003-0.616-0.013-0.923-0.023l-0.211-0.007
|
|
c-18.662,0-37.155,4.854-53.417,14.037C200.243,280.069,197.774,280.679,195.338,280.679z M151.709,161.256l49.423,85.604
|
|
c13.161-5.691,27.171-9.309,41.462-10.706V29.25h-90.885V161.256L151.709,161.256z"></path>
|
|
</svg>
|
|
<span class="text-1">Congratulations</span>
|
|
<span class="text-2">you've leveled up</span>
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by John-CFO - Tags: notification */
|
|
.card {
|
|
color: #090909;
|
|
height: 12rem;
|
|
width: 20rem;
|
|
border-radius: 1rem;
|
|
background: rgb(63, 94, 251);
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(63, 94, 251, 1) 0%,
|
|
rgba(252, 70, 223, 1) 100%
|
|
);
|
|
border: 1px solid #e8e8e8;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.text-1 {
|
|
margin: 0;
|
|
font-family: fantasy;
|
|
font-size: 35px;
|
|
padding-bottom: 5px;
|
|
color: transparent;
|
|
-webkit-text-stroke: 1px #fff;
|
|
}
|
|
|
|
.text-2 {
|
|
margin: 0;
|
|
padding-bottom: 2rem;
|
|
font-family: fantasy;
|
|
font-size: 25px;
|
|
color: #fff;
|
|
}
|
|
|
|
.text-1,
|
|
.text-2 {
|
|
animation: scaling 5s infinite;
|
|
}
|
|
|
|
@keyframes scaling {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1.8;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.metal {
|
|
margin-top: 10px;
|
|
width: 60px;
|
|
animation: spin 5.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateY(1800deg);
|
|
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
|
|
}
|
|
}
|
|
</style>
|