Card by waleedlh10
#212121
1.card { 2 width: 280px; 3 background: white; 4 border-radius: 10px; 5 box-shadow: 0px 0px 14px -2px #bebebe; 6 transition: 0.2s ease-in-out; 7} 8 9.card:hover { 10 cursor: pointer; 11} 12 13.img { 14 width: 100%; 15 height: 7em; 16 border-top-left-radius: 10px; 17 border-top-right-radius: 10px; 18 background: linear-gradient(#7980c5, #9198e5); 19 display: flex; 20 align-items: top; 21 justify-content: right; 22} 23 24.save { 25 transition: 0.2s ease-in-out; 26 border-radius: 10px; 27 margin: 20px; 28 width: 30px; 29 height: 30px; 30 background-color: #ffffff; 31 display: flex; 32 align-items: center; 33 justify-content: center; 34} 35 36.save .svg { 37 transition: 0.2s ease-in-out; 38 width: 15px; 39 height: 15px; 40} 41 42.save:hover .svg { 43 fill: #ced8de; 44} 45 46.text { 47 padding: 7px 20px; 48 display: flex; 49 flex-direction: column; 50 align-items: space-around; 51} 52 53.text .h3 { 54 font-family: system-ui; 55 font-size: medium; 56 font-weight: 600; 57 color: black; 58 text-align: center; 59} 60 61.text .p { 62 font-family: system-ui; 63 color: #999999; 64 font-size: 13px; 65 margin: 0px; 66 text-align: center; 67 padding: 5px; 68} 69 70.icon-box { 71 margin: 10px; 72 padding: 12px; 73 background-color: #7980c5; 74 border-radius: 10px; 75 text-align: center; 76} 77 78.icon-box .span { 79 font-family: system-ui; 80 font-size: small; 81 font-weight: 500; 82 color: #fff; 83}/*# sourceMappingURL=index.css.map */
1.2K views
Variation of acard
MIT License