Card by micaelgomestavares
#e8e8e8
1.card { 2 padding: 1rem; 3 background-color: #fff; 4 max-width: 320px; 5 border-radius: 20px; 6 box-shadow: 10px 10px #323232; 7 border: 3px solid #323232; 8} 9 10.title { 11 display: flex; 12 align-items: center; 13} 14 15.title span { 16 position: relative; 17 padding: 0.5rem; 18 background-color: #10B981; 19 width: 1.5rem; 20 height: 1.5rem; 21 border-radius: 9999px; 22} 23 24.title span svg { 25 position: absolute; 26 top: 50%; 27 left: 50%; 28 transform: translate(-50%, -50%); 29 color: #ffffff; 30 height: 1rem; 31} 32 33.title-text { 34 margin-left: 0.5rem; 35 color: #374151; 36 font-size: 18px; 37} 38 39.percent { 40 margin-left: 0.5rem; 41 color: #02972f; 42 font-weight: 600; 43 display: flex; 44} 45 46.data { 47 display: flex; 48 flex-direction: column; 49 justify-content: flex-start; 50} 51 52.data p { 53 margin-top: 1rem; 54 margin-bottom: 1rem; 55 color: #1F2937; 56 font-size: 2.25rem; 57 line-height: 2.5rem; 58 font-weight: 700; 59 text-align: left; 60} 61 62.data .range { 63 position: relative; 64 background-color: #E5E7EB; 65 width: 100%; 66 height: 0.5rem; 67 border-radius: 0.25rem; 68} 69 70.data .range .fill { 71 position: absolute; 72 top: 0; 73 left: 0; 74 background-color: #10B981; 75 width: 76%; 76 height: 100%; 77 border-radius: 0.25rem; 78}
875 views
Variation of acard
iSweat-exe 31. August 2023. at 17:38
31. August 2023. at 17:38
nice :)
MIT License