Card by MohamedSSuhail
#e8e8e8
1.card { 2 --main-color: #000; 3 --bg-color: #64ccc5; 4 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 5 Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 6 width: 300px; 7 padding: 25px; 8 background: var(--bg-color); 9 border-radius: 20px; 10} 11 12.card__wrapper { 13 display: flex; 14 flex-direction: row; 15 align-items: center; 16 justify-content: space-between; 17} 18 19.card___wrapper-acounts { 20 position: relative; 21 display: flex; 22 flex-direction: row; 23 align-items: center; 24 z-index: 1; 25 cursor: pointer; 26} 27 28.card___wrapper-acounts > div:nth-child(2) { 29 position: absolute; 30 left: 25px; 31 z-index: -1; 32} 33 34.card___wrapper-acounts > div:nth-child(3) { 35 position: absolute; 36 left: 50px; 37 z-index: -2; 38} 39 40.card__score { 41 display: flex; 42 justify-content: center; 43 align-items: center; 44 font-weight: 500; 45 font-size: 16px; 46 color: #fff; 47 width: 40px; 48 height: 40px; 49 border-radius: 100%; 50 background: var(--main-color); 51} 52 53.card__acounts { 54 width: 42px; 55 height: 42px; 56} 57 58.card__acounts svg { 59 width: 100%; 60 height: 100%; 61} 62 63.card__menu { 64 width: 40px; 65 height: 40px; 66 background: #dafffb; 67 border-radius: 100%; 68 display: flex; 69 align-items: center; 70 justify-content: center; 71 cursor: pointer; 72} 73 74.card__title { 75 margin-top: 50px; 76 font-weight: 900; 77 font-size: 25px; 78 color: var(--main-color); 79} 80 81.card__subtitle { 82 margin-top: 15px; 83 font-weight: 400; 84 font-size: 15px; 85 color: var(--main-color); 86} 87 88.card__indicator { 89 margin-top: 50px; 90 font-weight: 500; 91 font-size: 14px; 92 color: var(--main-color); 93} 94 95.card__progress progress { 96 width: 100%; 97 height: 4px; 98 border-radius: 100px; 99} 100 101.card__progress progress::-webkit-progress-bar { 102 background-color: #00000030; 103 border-radius: 100px; 104} 105 106.card__progress progress::-webkit-progress-value { 107 background-color: var(--main-color); 108 border-radius: 100px; 109} 110
457 views
Variation of acard
MIT License