{"html":"

Title\n

Lorem ipsum dolor sit amet consectetur adipisicing elit.

\n April 15, 2022\n

\n \n

","css":"/* this card is inspired form this - https://georgefrancis.dev/ */\n\n.card {\n --border-radius: 0.75rem;\n --primary-color: #7257fa;\n --secondary-color: #3c3852;\n width: 210px;\n font-family: \"Arial\";\n padding: 1rem;\n cursor: pointer;\n border-radius: var(--border-radius);\n background: #f1f1f3;\n box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);\n position: relative;\n}\n\n.card > * + * {\n margin-top: 1.1em;\n}\n\n.card .card__content {\n color: var(--secondary-color);\n font-size: 0.86rem;\n}\n\n.card .card__title {\n padding: 0;\n font-size: 1.3rem;\n font-weight: bold;\n}\n\n.card .card__date {\n color: #6e6b80;\n font-size: 0.8rem;\n}\n\n.card .card__arrow {\n position: absolute;\n background: var(--primary-color);\n padding: 0.4rem;\n border-top-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n bottom: 0;\n right: 0;\n transition: 0.2s;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card svg {\n transition: 0.2s;\n}\n\n/* hover */\n.card:hover .card__title {\n color: var(--primary-color);\n text-decoration: underline;\n}\n\n.card:hover .card__arrow {\n background: #111;\n}\n\n.card:hover .card__arrow svg {\n transform: translateX(3px);\n}"}

itchy-chipmunk-95

👁 实时预览

📝 源代码