{"html":"

uiverse

\n ui/ux designer trying to be an fullstack devolper
\n mom i love u\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":".card {\n font-family: \"Poppins\", sans-serif;\n width: 562px;\n height: 289px;\n border-radius: 8px;\n background-color: rgba(36, 36, 36, 0.05);\n padding: 16px 32px 16px 32px;\n display: flex;\n flex-direction: column;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n cursor: pointer;\n}\n\n.cls-1 {\n fill: #fff;\n}\n\n.title {\n font-size: 36px;\n font-weight: 600;\n color: #ffffff;\n margin-bottom: 12px;\n}\n\n.label {\n font-size: 18px;\n color: #ffffff;\n opacity: 0.8;\n line-height: 1.4;\n font-weight: 300;\n}\n\n.ico {\n position: absolute;\n bottom: 16px;\n left: 92px;\n display: flex;\n gap: 32px;\n opacity: 0;\n transition: left 0.3s ease, opacity 0.3s ease;\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 5px;\n background-image: linear-gradient(to bottom, #0085d7, #5cc9ff);\n border-radius: 8px 0 0 8px;\n transition: width 0.3s ease;\n}\n\n.card:hover::before {\n width: 10px;\n}\n\n.card:hover {\n border-left-width: 10px;\n}\n\n.title,\n.label {\n transition: transform 0.3s ease;\n}\n\n.card:hover .title,\n.card:hover .label {\n transform: translateX(20px);\n}\n\n.card:hover .ico {\n left: 52px;\n opacity: 0.3;\n}\n\n.gradient {\n position: absolute;\n top: -200px;\n left: -200px;\n width: 600px;\n height: 600px;\n background: #ffffff;\n border-radius: 50%;\n filter: blur(200px);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.card:hover .gradient {\n opacity: 0.04;\n}\n"}

quiet-robin-20

👁 实时预览

📝 源代码