803 views
1.card { 2 display: flex; 3 position: relative; 4 flex-direction: column; 5 height: 350px; 6 width: 190px; 7 min-width: 250px; 8 padding: 1rem; 9 border-radius: 16px; 10 background: #17141d; 11 box-shadow: -1rem 0 3rem #00000067; 12 transition: .2s; 13 font-family: 'Inter', sans-serif; 14} 15 16.card:hover { 17 transform: translateY(-0.4rem); 18} 19 20.card-author { 21 position: relative; 22 display: grid; 23 grid-template-columns: 75px 1fr; 24 align-items: center; 25 margin: 3rem 0 0; 26} 27 28.author-name { 29 color: #7a7a8c; 30} 31 32.author-name-prefix { 33 color: #e52e71; 34 font-weight: 600; 35} 36 37.author-avatar span { 38 display: block; 39 width: 40px; 40 height: 40px; 41 border-radius: 50%; 42 background: #f2f2f2; 43 margin: 16px 10px; 44} 45 46.half-circle { 47 position: absolute; 48 bottom: 0; 49 left: 0; 50 width: 60px; 51 height: 48px; 52 fill: none; 53 stroke: #ff8a00; 54 stroke-width: 8; 55 stroke-linecap: round; 56} 57 58.card-header { 59 margin-bottom: auto; 60 color: #7a7a8c; 61} 62 63.card-header p { 64 font-size: 14px; 65 margin: 0 0 1rem; 66 color: #7a7a8c; 67} 68 69.card-header .title { 70 font-size: 25px; 71 margin: .25rem 0 auto; 72 cursor: pointer; 73 font-family: 'Arial Black', sans-serif; 74} 75 76.card-header .title:hover { 77 background: linear-gradient(90deg,#ff8a00,#e52e71); 78 text-shadow: none; 79 background-clip: text; 80 -webkit-background-clip: text; 81 -webkit-text-fill-color: transparent; 82} 83 84.tags { 85 margin: 1rem 0 2rem; 86 padding: .5rem 0 1rem; 87 line-height: 2; 88 margin-bottom: 0; 89} 90 91.tags a { 92 font-style: normal; 93 font-weight: 700; 94 color: #7a7a8c; 95 text-transform: uppercase; 96 font-size: .66rem; 97 border: 3px solid #28242f; 98 border-radius: 2rem; 99 padding: .2rem .85rem .25rem; 100 position: relative; 101} 102 103.tags a:hover { 104 background: linear-gradient(90deg,#ff8a00,#e52e71); 105 text-shadow: none; 106 -webkit-text-fill-color: transparent; 107 -webkit-background-clip: text; 108 -webkit-box-decoration-break: clone; 109 box-decoration-break: clone; 110 background-clip: text; 111 border-color: white; 112}
MIT License