![](/build/_assets/logo-png-XGWSYHKJ.png)
Card by rmdhnkhsn
#e8e8e8
1.card { 2 position: relative; 3 display: flex; 4 max-width: 500px; 5 padding: 42px 32px; 6 flex-direction: column; 7 align-items: flex-start; 8 border-radius: 30px; 9 border: 2px solid #f8f9fd; 10 background: #fff; 11 transition: 1s all; 12 text-decoration: none; 13} 14.title { 15 color: #072713; 16 text-align: center; 17 font-size: 22px; 18 font-style: normal; 19 font-weight: 600; 20 line-height: 35.196px; 21 transition: 0.4s all; 22} 23.subtitle { 24 color: #7e8882; 25 text-align: center; 26 font-size: 14px; 27 font-style: normal; 28 font-weight: 400; 29 line-height: 22px; 30 transition: 0.4s all; 31} 32.icon-circle { 33 position: absolute; 34 top: 0; 35 left: 50%; 36 transform: translate(-50%, -50%); 37 display: flex; 38 justify-content: center; 39 align-items: center; 40 width: 56px; 41 height: 56px; 42 border-radius: 50%; 43 background: #e5f6eb; 44} 45.card:hover { 46 background: #23c55e; 47 transition: 0.4s all; 48} 49.card:hover .title, 50.card:hover .subtitle { 51 color: #fff; 52 transition: 0.4s all; 53} 54.btnRound { 55 display: inline-flex; 56 justify-content: center; 57 align-items: center; 58 height: 30px; 59 padding: 6px 28px; 60 border-radius: 100px; 61 border: 1px solid #23c55e; 62 background: #fff; 63 transition: all 0.2s ease; 64} 65.btnRound:hover { 66 box-shadow: 0px 6px 10px 0px rgba(35, 197, 94, 0.2); 67 transition: all 0.2s ease; 68} 69.btnService { 70 position: absolute; 71 bottom: -30px; 72 left: 50%; 73 transform: translate(-50%, -50%); 74} 75
79 views
79 views
MIT License