3K views
1.card { 2 width: 100%; 3 max-width: 290px; 4 height: 70px; 5 background: #353535; 6 border-radius: 20px; 7 display: flex; 8 align-items: center; 9 justify-content: left; 10 backdrop-filter: blur(10px); 11 transition: 0.5s ease-in-out; 12} 13 14.card:hover { 15 cursor: pointer; 16 transform: scale(1.05); 17} 18 19.img { 20 width: 50px; 21 height: 50px; 22 margin-left: 10px; 23 border-radius: 10px; 24 background: linear-gradient(#d7cfcf, #9198e5); 25} 26 27.card:hover > .img { 28 transition: 0.5s ease-in-out; 29 background: linear-gradient(#9198e5, #712020); 30} 31 32.textBox { 33 width: calc(100% - 90px); 34 margin-left: 10px; 35 color: white; 36 font-family: 'Poppins' sans-serif; 37} 38 39.textContent { 40 display: flex; 41 align-items: center; 42 justify-content: space-between; 43} 44 45.span { 46 font-size: 10px; 47} 48 49.h1 { 50 font-size: 16px; 51 font-weight: bold; 52} 53 54.p { 55 font-size: 12px; 56 font-weight: lighter; 57} 58 59
MIT License