Card by rmdhnkhsn
#e8e8e8
1.card { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 align-items: flex-start; 6 padding: 28px; 7 max-width: 340px; 8 border-radius: 30px; 9 background: #fff; 10 box-shadow: 0px 0px 14px 0px rgba(192, 192, 192, 0.2); 11 transition: 1s all; 12 overflow: hidden; 13} 14.card::after { 15 content: ""; 16 position: absolute; 17 bottom: -30%; 18 right: -30%; 19 width: 120px; 20 height: 120px; 21 background: #23c55e; 22 filter: blur(70px); 23 border-radius: 50%; 24 transition: width 1s, height 1s; 25} 26.card::before { 27 content: ""; 28 position: absolute; 29 bottom: -160%; 30 left: 50%; 31 transform: translate(-50%, -50%); 32 width: 0; 33 height: 0; 34 background: #23c55e; 35 filter: blur(70px); 36 border-radius: 50%; 37 transition: width 1s, height 1s; 38} 39.card:hover::before { 40 bottom: -230%; 41 width: 1000px; 42 height: 1000px; 43 filter: blur(1px); 44} 45.containers { 46 position: relative; 47} 48.icon { 49 display: flex; 50 justify-content: center; 51 align-items: center; 52 width: 56px; 53 height: 56px; 54 border-radius: 6px; 55 background: #e5f6eb; 56} 57.card:hover .icon { 58 background: #23c55e; 59 transition: 1s all; 60} 61.card:hover .icon svg, 62.card:hover .linkMore svg { 63 filter: brightness(0) invert(1); 64 transition: 1s all; 65} 66.title { 67 color: #171d29; 68 font-size: 26px; 69 font-style: normal; 70 font-weight: 500; 71 white-space: nowrap; 72 transition: 1s all; 73 margin: 1rem 0; 74} 75.subtitle { 76 color: #7e8882; 77 font-size: 14px; 78 font-style: normal; 79 font-weight: 400; 80 line-height: 22px; 81 transition: 1s all; 82} 83.linkMore { 84 display: flex; 85 justify-content: start; 86 align-items: center; 87 gap: 0.8rem; 88 color: #072713; 89 font-size: 14px; 90 font-style: normal; 91 font-weight: 600; 92 line-height: 22px; 93 text-decoration: none; 94 transition: 1s all; 95 margin-top: 1rem; 96} 97.card:hover .title, 98.card:hover .subtitle, 99.card:hover .linkMore { 100 color: #fff; 101 transition: 1s all; 102} 103
46 views
46 views
MIT License