{"html":"

\n \n

\n 6037 1234 4567 8910\n

\n CARD HOLDER\n ALI ABDI\n

\n VALID THRU\n 06/26\n

\n","css":".card-container,\n.card-box,\n.card-head,\n.card-number-row,\n.card-details,\n.card-holder-col,\n.card-date-col {\n display: flex;\n}\n.card-container {\n align-items: center;\n justify-content: center;\n}\n.card-box {\n width: 340px;\n min-height: 160px;\n background: #fff;\n box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.1);\n border-radius: 18px;\n margin: 16px;\n padding: 1.5em;\n flex-direction: column;\n justify-content: space-around;\n gap: 1.2em;\n}\n.card-head {\n justify-content: space-between;\n align-items: center;\n}\n.card-chip svg {\n width: 32px;\n height: 32px;\n}\n.card-chip svg path {\n fill: #636363;\n}\n.card-logo svg {\n width: 48px;\n height: 48px;\n}\n.card-number-row {\n justify-content: center;\n word-spacing: 1em;\n font-size: 1.3em;\n font-weight: 600;\n}\n.card-box:hover .card-number-row {\n font-size: 1.32em;\n}\n.card-details {\n justify-content: space-between;\n text-transform: uppercase;\n}\n.card-holder-col {\n flex-direction: column;\n gap: 2px;\n}\n.card-holder-title,\n.card-date-title {\n color: #bdbdbd;\n font-size: 0.7em;\n}\n.card-holder-name {\n font-size: 1.1em;\n font-weight: 600;\n}\n.card-date-col {\n flex-direction: column;\n align-items: flex-end;\n gap: 2px;\n}\n"}

tall-stingray-83

👁 实时预览

📝 源代码