This notification was created for level-up-challenge
53 views
CSS
1.card { 2 color: #090909; 3 height: 12rem; 4 width: 20rem; 5 border-radius: 1rem; 6 background: rgb(63, 94, 251); 7 background: radial-gradient( 8 circle, 9 rgba(63, 94, 251, 1) 0%, 10 rgba(252, 70, 223, 1) 100% 11 ); 12 border: 1px solid #e8e8e8; 13 display: flex; 14 flex-direction: column; 15 align-items: center; 16 justify-content: flex-end; 17} 18 19.text-1 { 20 margin: 0; 21 font-family: fantasy; 22 font-size: 35px; 23 padding-bottom: 5px; 24 color: transparent; 25 -webkit-text-stroke: 1px #fff; 26} 27 28.text-2 { 29 margin: 0; 30 padding-bottom: 2rem; 31 font-family: fantasy; 32 font-size: 25px; 33 color: #fff; 34} 35 36.text-1, 37.text-2 { 38 animation: scaling 5s infinite; 39} 40 41@keyframes scaling { 42 0% { 43 transform: scale(1); 44 opacity: 1.8; 45 } 46 47 50% { 48 transform: scale(1.1); 49 opacity: 0.8; 50 } 51} 52 53.metal { 54 margin-top: 10px; 55 width: 60px; 56 animation: spin 5.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; 57} 58 59@keyframes spin { 60 0% { 61 transform: rotateY(0deg); 62 } 63 64 100% { 65 transform: rotateY(1800deg); 66 animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 67 } 68}
HTML
1<div class="card"> 2 <svg height="180px" width="200px" version="1.1" id="Layer_1" viewBox="0 0 512 512" xml:space="preserve" class="metal"> 3 <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 4 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 5 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 6 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 7 C394.249,449.982,332.231,512,256,512z"></path> 8 <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 9 s50.498,22.654,50.498,50.499C306.498,401.596,283.845,424.249,256,424.249z"></path> 10 <g> 11 <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 12 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 13 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> 14 <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 15 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 16 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 17 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 18 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> 19 </g> 20 <path style="fill: #fee187" d="M256,250.126c0.41,0,0.812,0.026,1.22,0.031V14.625H137.084v150.55l58.242,100.876 21 C213.253,255.929,233.942,250.126,256,250.126z"></path> 22 <path style="fill: #ffc61b" d="M195.338,280.679c-5.057,0-9.971-2.625-12.679-7.314l-58.24-100.876 23 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 24 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 25 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 26 c13.161-5.691,27.171-9.309,41.462-10.706V29.25h-90.885V161.256L151.709,161.256z"></path> 27 </svg> 28 <span class="text-1">Congratulations</span> 29 <span class="text-2">you've leveled up</span> 30 </div> 31 32 33