Card by akshat-patel28
#212121
1.card { 2 position: relative; 3 width: 350px; 4 height: 180px; 5 box-sizing: border-box; 6 background-color: #212121; 7 border: 5px solid #222; 8 border-radius: 8px; 9 display: flex; 10 flex-direction: column; 11 justify-content: center; 12 gap: 10px; 13 padding: 10px; 14 box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, 15 rgba(0, 0, 0, 0.23) 0px 6px 6px, 16 inset rgba(0, 0, 0, 0.19) 0px 10px 20px, 17 inset rgba(0, 0, 0, 0.23) 0px 6px 6px; 18 transition: all ease-in-out 0.3s; 19 overflow: hidden; 20} 21 22.card:hover { 23 box-shadow: rgba(193, 44, 223, 0.19) 0px 10px 20px, 24 rgba(193, 44, 223, 0.23) 0px 6px 6px, 25 inset rgba(0, 0, 0, 0.19) 0px 10px 20px, 26 inset rgba(0, 0, 0, 0.23) 0px 6px 6px; 27 border: 5px solid #b671d6; 28} 29 30.card-title { 31 margin: 0; 32 font-size: 18px; 33 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 34 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 35 font-weight: 600; 36 color: #fff; 37 cursor: default; 38} 39 40.card-des { 41 margin: 0; 42 font-size: 15px; 43 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 44 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 45 font-weight: 600; 46 color: #fff; 47 -webkit-box-orient: vertical; 48 overflow: hidden; 49 display: -webkit-box; 50 word-break: break-all; 51 -webkit-line-clamp: 3; 52 line-clamp: 3; 53 cursor: default; 54} 55 56.card-text { 57 position: absolute; 58 margin: 0; 59 font-size: 14px; 60 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 61 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 62 font-weight: 400; 63 color: #fff; 64 right: 20px; 65 bottom: 5px; 66 display: flex; 67 align-items: center; 68 gap: 3px; 69 opacity: 0; 70 transition: all ease-in-out 0.3s; 71 animation: textanimate 0.8s alternate infinite; 72 cursor: pointer; 73} 74 75.card:hover > .card-text { 76 opacity: 1; 77} 78 79@keyframes textanimate { 80 0% { 81 right: 20px; 82 } 83 84 100% { 85 right: 10px; 86 } 87} 88 89.arrow-icon { 90 font-size: 15px; 91 font-weight: 500; 92}
1.2K views
1.2K views
MIT License