{"html":"

\n Category\n

This is a test title\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

\n \n

","css":".card {\n width: 300px;\n padding: 10px;\n background-image: linear-gradient(to right bottom, #5d0391, #7b05ae, #9b05cb, #bd00e7, #bd00e7);\n background-size: 200% 200%;\n border-radius: 12px;\n}\n\n.card-int {\n position: relative;\n height: 100%;\n overflow: hidden;\n font-size: 14px;\n border-radius: 6px;\n background-color: white;\n}\n\n.img {\n width: 100%;\n height: 175px;\n background-color: pink;\n}\n\n.title {\n font-weight: bold;\n font-size: 16px;\n margin-bottom: 10px;\n}\n\n.card-data {\n padding: 20px;\n font-size: 14px;\n}\n\n.card__span {\n font-family: 'Lucida Sans' sans-serif;\n font-size: 11px;\n position: absolute;\n top: 10px;\n left: 10px;\n background-color: white;\n padding: 5px 10px;\n border-radius: 15px;\n}\n\nbutton {\n width: 100%;\n margin-top: 15px;\n background-image: linear-gradient(to right bottom, #5d0391, #7b05ae, #9b05cb, #bd00e7, #bd00e7);\n background-size: 200% 200%;\n border: none;\n padding: 8px 10px;\n color: white;\n font-size: 14px;\n font-weight: bold;\n border-radius: 5px;\n transition: transform 0.1s ease-in;\n}\n\nbutton:active {\n transform: translateY(3px);\n}\n\n.card:hover, button:hover {\n animation: gradient 0.8s ease-in 1;\n}\n\n@keyframes gradient {\n 0% {\n background-position: 200% 200%;\n }\n\n 100% {\n background-position: 400% 400%;\n }\n}\n"}

nasty-turkey-29

👁 实时预览

📝 源代码