Card by catraco
#e8e8e8
1.card { 2 --card-color: #0080ff; 3 --blub-color: #52d4eb; 4 position: relative; 5 user-select: none; 6} 7 8@keyframes keyframes-rotate-blubs { 9 0% { 10 transform: translate(10px) rotate(360deg); 11 } 12 13 50% { 14 transform: translate(-5px, 10px) rotate(180deg); 15 } 16 17 100% { 18 transform: translate(10px) rotate(0deg); 19 } 20} 21 22.card span { 23 width: 100px; 24 height: 100px; 25 position: absolute; 26 background: linear-gradient(0deg, transparent, var(--blub-color)); 27 border-radius: 100%; 28 opacity: 0.5; 29 animation: keyframes-rotate-blubs 4s infinite linear; 30} 31 32.card span:nth-child(1) { 33 top: -5%; 34 left: -5%; 35 width: 60px; 36 height: 60px; 37 animation-delay: .1s; 38 opacity: 0.3; 39} 40 41.card span:nth-child(2) { 42 top: 60%; 43 left: -20%; 44 width: 80px; 45 height: 80px; 46 animation-delay: .2s; 47 opacity: 0.3; 48} 49 50.card span:nth-child(3) { 51 top: 10%; 52 left: 60%; 53 animation-delay: .3s; 54 opacity: 0.6; 55} 56 57.card span:nth-child(4) { 58 top: 70%; 59 left: 50%; 60 width: 90px; 61 height: 90px; 62 animation-delay: .4s; 63 opacity: 0.4; 64} 65 66.card div { 67 backdrop-filter: blur(15px); 68 outline: 1px solid var(--card-color); 69 color: var(--card-color); 70 width: 180px; 71 height: 250px; 72 border-radius: 5%; 73 padding: 1rem; 74 display: flex; 75 flex-direction: column; 76 justify-content: space-between; 77} 78 79.card div .check { 80 fill: var(--card-color); 81 width: 25px; 82 height: 25px; 83 position: absolute; 84 top: 0; 85 right: 0; 86 transform: translate(50%, -50%); 87} 88 89.card div strong { 90 font-size: 1rem; 91 font-weight: 900; 92 text-transform: uppercase; 93} 94 95.card div p { 96 font-size: 0.8rem; 97} 98 99.card div hr { 100 border: none; 101 border-top: 1px solid var(--card-color); 102 opacity: .5; 103} 104 105.card div button { 106 background-color: transparent; 107 color: var(--card-color); 108 border: none; 109 outline: 1px solid var(--card-color); 110 border-radius: 1rem; 111 padding: .5rem 1rem; 112 font-size: 0.8rem; 113 font-weight: 900; 114 transition: .3s; 115 display: flex; 116 align-items: center; 117 justify-content: center; 118 text-transform: uppercase; 119 gap: .2em; 120} 121 122.card div button .arrow { 123 width: 0px; 124 height: 20px; 125 fill: var(--blub-color); 126 transform: scale(0); 127 transition: .3s; 128} 129 130.card div button:hover .arrow { 131 width: 20px; 132 margin-left: 1em; 133 transform: scale(1); 134} 135 136.card div button:hover { 137 background-color: var(--card-color); 138 color: var(--blub-color); 139 cursor: pointer; 140}
1.1K views
1.1K views
MIT License