{"html":"

Credit card

bank-name

\n \n

Owner name

1264 3245 3322 1356

03/24

\n \n\n

","css":".card {\n width: 245px;\n height: 155px;\n background: lightgrey;\n position: relative;\n border-radius: 15px;\n overflow: hidden;\n}\n\n.foreground {\n border-radius: 15px;\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.18);\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(2.8px);\n -webkit-backdrop-filter: blur(2.8px);\n padding: 16px;\n color: white;\n}\n\n.credit-card-header {\n display: flex;\n justify-content: space-between;\n}\n\n.credit-card-chip-container {\n margin: 8px 0;\n height: 40px;\n width: 40px;\n}\n\n.chip {\n width: 100%;\n height: 100%;\n}\n\n.category, .bank {\n font-size: smaller;\n}\n\n.info-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.names {\n align-self: flex-end;\n text-transform: uppercase;\n font-size: smaller;\n}\n\n.serial {\n align-self: flex-end;\n letter-spacing: 2px;\n font-size: 15px;\n font-family: monospace;\n}\n\n.expire {\n margin-left: 3px;\n font-size: smaller;\n}\n"}

curly-catfish-36

👁 实时预览

📝 源代码