{"html":"

\n • card component • card component • card component • card component •\n card component • card component\n

\n \n

\n Highlight Curation\n

\n Works autonomously through artificial intelligent and hundred of\n micro-services\n

\n • card component • card component • card component • card component •\n card component • card component\n

\n","css":".card {\n --lime-500: #bdd910;\n --violet-700: #8a07b8;\n\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 0.75rem;\n\n padding: 1rem;\n width: 14rem;\n height: auto;\n min-height: 16rem;\n background-color: var(--lime-500);\n\n border-radius: 0.5rem;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: 7rem;\n right: 2rem;\n\n width: 1.25rem;\n aspect-ratio: 1 / 1;\n background-color: var(--violet-700);\n\n border-radius: 9999px;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n top: 8.75rem;\n right: -0.5rem;\n\n width: 3rem;\n aspect-ratio: 1 / 1;\n background-color: var(--violet-700);\n\n border-radius: 9999px;\n}\n\n.card .carousel {\n position: absolute;\n left: 0;\n\n animation: carousel 10s linear var(--carousel_direction, normal) infinite;\n}\n\n.card .carousel[data-direction=\"right\"] {\n --carousel_direction: reverse;\n}\n.card .carousel[data-position=\"top\"] {\n top: 0.75rem;\n}\n.card .carousel[data-position=\"bottom\"] {\n bottom: 0.75rem;\n}\n\n.card .carousel .carousel__text {\n font-size: 0.75rem;\n color: black;\n text-wrap: nowrap;\n}\n\n@keyframes carousel {\n to {\n transform: translate(-50%);\n }\n}\n\n.card .image {\n position: relative;\n z-index: 10;\n display: flex;\n justify-content: center;\n align-items: center;\n\n padding: 0.25rem;\n margin-bottom: 0.5rem;\n width: fit-content;\n aspect-ratio: 1 / 1;\n background-color: black;\n\n border-radius: 0.25rem;\n}\n\n.card .image svg {\n width: 1.5rem;\n fill: white;\n}\n\n.card .title {\n position: relative;\n z-index: 10;\n\n font-size: 1rem;\n color: black;\n font-weight: bold;\n}\n\n.card .paragraph {\n position: relative;\n z-index: 10;\n\n padding-right: 0.25rem;\n\n font-size: 0.75rem;\n color: black;\n}\n"}

brown-falcon-18

👁 实时预览

📝 源代码