{"html":"

● ONLINE

\n\n

@matthieu.k

MATTHIEU
KRANZ

\n Brutalist designer & freelance typographer. Makes ugly things that\n work perfectly. Berlin / Paris.\n

\n\n

\n 482\n Projects\n

\n 28k\n Followers\n

\n ★ 4.9\n Rating\n

\n\n \n

\n","css":".card-profile {\n background: #f5f5f0;\n border: 5px solid #0a0a0a;\n box-shadow: 8px 8px 0 #0a0a0a;\n position: relative;\n overflow: hidden;\n width: 360px;\n transform: scale(0.8);\n}\n\n.prof-photo {\n height: 160px;\n background: #f5e642;\n border-bottom: 5px solid #0a0a0a;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n}\n.prof-photo::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 45deg,\n transparent 0px,\n transparent 8px,\n rgba(0, 0, 0, 0.12) 8px,\n rgba(0, 0, 0, 0.12) 10px\n );\n}\n.prof-photo-num {\n font-family: \"Bebas Neue\", sans-serif;\n font-size: 7rem;\n line-height: 0.85;\n color: rgba(0, 0, 0, 0.08);\n position: absolute;\n right: -8px;\n bottom: -10px;\n letter-spacing: -0.02em;\n pointer-events: none;\n}\n.prof-avatar {\n width: 72px;\n height: 72px;\n background: #0a0a0a;\n border: 5px solid #0a0a0a;\n border-bottom: none;\n border-left: none;\n margin-left: 20px;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: \"Bebas Neue\", sans-serif;\n font-size: 2rem;\n color: #f5e642;\n flex-shrink: 0;\n}\n.prof-status-badge {\n position: absolute;\n top: 14px;\n right: 14px;\n z-index: 2;\n background: #00e060;\n border: 3px solid #0a0a0a;\n box-shadow: 3px 3px 0 #0a0a0a;\n font-size: 0.55rem;\n font-weight: 800;\n letter-spacing: 0.18em;\n padding: 3px 8px;\n text-transform: uppercase;\n}\n\n.prof-body {\n padding: 16px 18px 0;\n}\n.prof-handle {\n font-size: 0.55rem;\n font-weight: 700;\n letter-spacing: 0.2em;\n color: #a8a49a;\n text-transform: uppercase;\n margin-bottom: 2px;\n}\n.prof-name {\n font-family: \"Bebas Neue\", sans-serif;\n font-size: 2.4rem;\n line-height: 0.88;\n color: #0a0a0a;\n letter-spacing: -0.01em;\n margin-bottom: 10px;\n}\n.prof-bio {\n font-size: 0.72rem;\n font-weight: 500;\n color: #0a0a0a;\n border-left: 5px solid #e8180a;\n padding-left: 10px;\n line-height: 1.55;\n margin-bottom: 14px;\n}\n\n.prof-stats {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n border-top: 3px solid #0a0a0a;\n}\n.pstat {\n padding: 12px 10px;\n border-right: 3px solid #0a0a0a;\n text-align: center;\n}\n.pstat:last-child {\n border-right: none;\n}\n.pstat .psv {\n font-family: \"Bebas Neue\", sans-serif;\n font-size: 1.8rem;\n line-height: 1;\n color: #0a0a0a;\n display: block;\n}\n.pstat .psl {\n font-size: 0.48rem;\n font-weight: 700;\n letter-spacing: 0.15em;\n color: #a8a49a;\n text-transform: uppercase;\n display: block;\n margin-top: 2px;\n}\n\n.prof-btn {\n display: block;\n width: 100%;\n padding: 13px;\n background: #0a0a0a;\n color: #f5e642;\n border: none;\n border-top: 5px solid #0a0a0a;\n font-family: \"Bebas Neue\", sans-serif;\n font-size: 1.1rem;\n letter-spacing: 0.2em;\n cursor: pointer;\n text-align: center;\n transition:\n background 0.15s,\n color 0.15s;\n}\n.prof-btn:hover {\n background: #f5e642;\n color: #0a0a0a;\n}\n"}

odd-fish-37

👁 实时预览

📝 源代码