Card by syahrulnaufal
#e8e8e8
1#content { 2 width: 250px; 3 height: 400px; 4 box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.2); 5 overflow: hidden; 6 z-index: 1; 7 display: flex; 8 background-color: bisque; 9 border-radius: 15px; 10} 11 12.blob { 13 flex-shrink: 0; 14 flex-basis: 1; 15 width: 230px; 16 height: 230px; 17 position: relative; 18 z-index: 2; 19 border-radius: 50%; 20} 21 22.blob:nth-child(2) { 23 top: -10px; 24 left: -320px; 25 background-color: #FFB84C; 26 animation: wave 1.5s infinite alternate; 27 animation-delay: 0s; 28} 29 30.blob:nth-child(3) { 31 top: 0px; 32 left: -360px; 33 background-color: #F266AB; 34 animation: wave 1.5s infinite alternate; 35 animation-delay: 0.5s; 36} 37 38.blob:nth-child(4) { 39 top: 180px; 40 left: -750px; 41 background-color: #A459D1; 42 animation: wave 1.5s infinite alternate; 43 animation-delay: 1s; 44} 45 46.blob:nth-child(5) { 47 top: 230px; 48 left: -820px; 49 background-color: #2CD3E1; 50 animation: wave 1.5s infinite alternate; 51 animation-delay: 1.5s; 52} 53 54#blurer { 55 position: relative; 56 z-index: 5; 57 width: 100%; 58 height: 100%; 59 backdrop-filter: blur(40px); 60 flex-shrink: 0; 61 flex-basis: 1; 62 border-radius: 15px; 63} 64 65#article { 66 position: relative; 67 width: 90%; 68 height: 93%; 69 flex-shrink: 0; 70 flex-basis: 1; 71 background-color: rgba(255, 255, 255, 0.6); 72 z-index: 10; 73 justify-self: center; 74 align-self: center; 75 border-radius: 15px; 76 left: -1157px; 77 display: flex; 78 justify-content: center; 79 align-items: start; 80} 81 82@keyframes wave { 83 0% { 84 transform: translateY(-30px); 85 } 86 87 50% { 88 transform: translateY(30px); 89 } 90 91 100% { 92 transform: translateY(-30px); 93 } 94} 95 96#article h1 { 97 padding: 20px 10px; 98 color: #303030; 99 font-size: 3em; 100 font-family: 'Caveat', cursive; 101}
1.2K views
MIT License