#e8e8e8
1/* this card is inspired form this - https://georgefrancis.dev/ */ 2 3.card { 4 --border-radius: 0.75rem; 5 --primary-color: #7257fa; 6 --secondary-color: #3c3852; 7 width: 210px; 8 font-family: "Arial"; 9 padding: 1rem; 10 cursor: pointer; 11 border-radius: var(--border-radius); 12 background: #f1f1f3; 13 box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%); 14 position: relative; 15} 16 17.card > * + * { 18 margin-top: 1.1em; 19} 20 21.card .card__content { 22 color: var(--secondary-color); 23 font-size: 0.86rem; 24} 25 26.card .card__title { 27 padding: 0; 28 font-size: 1.3rem; 29 font-weight: bold; 30} 31 32.card .card__date { 33 color: #6e6b80; 34 font-size: 0.8rem; 35} 36 37.card .card__arrow { 38 position: absolute; 39 background: var(--primary-color); 40 padding: 0.4rem; 41 border-top-left-radius: var(--border-radius); 42 border-bottom-right-radius: var(--border-radius); 43 bottom: 0; 44 right: 0; 45 transition: 0.2s; 46 display: flex; 47 justify-content: center; 48 align-items: center; 49} 50 51.card svg { 52 transition: 0.2s; 53} 54 55/* hover */ 56.card:hover .card__title { 57 color: var(--primary-color); 58 text-decoration: underline; 59} 60 61.card:hover .card__arrow { 62 background: #111; 63} 64 65.card:hover .card__arrow svg { 66 transform: translateX(3px); 67}
12K views
12K views
Comments
MIT License