{"html":"

\n\n

\n Visual Designer\n Expert\n

\n\n

\n G\n

\n\n

Gautam Sharma

\n \n Available for work\n

\n\n

＋ Hire Me

📞 Contact

\n\n

About

\n Motion-focused designer crafting High-grade interfaces and clean UI\n systems.\n

\n\n

Currently High on Creativity

\n","css":".app {\n display: flex;\n justify-content: center;\n padding: 80px 0;\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", sans-serif;\n}\n\n/* CARD — PERFECT SQUARE */\n.card {\n width: 290px;\n height: auto;\n border-radius: 26px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n}\n\n/* TOP */\n.card-top {\n position: relative;\n padding: 20px;\n background: radial-gradient(\n 140% 120% at 0% 0%,\n rgba(255, 255, 255, 0.14),\n transparent 45%\n ),\n linear-gradient(180deg, #141414, #050505);\n}\n\n/* GLASS HOVER */\n.glass {\n position: absolute;\n inset: 0;\n background: radial-gradient(\n 140px 120px at 30% 0%,\n rgba(255, 255, 255, 0.22),\n rgba(255, 255, 255, 0.08) 40%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.25s ease;\n}\n\n.card:hover .glass {\n opacity: 1;\n}\n\n.card-top > *:not(.glass) {\n position: relative;\n z-index: 2;\n}\n\n/* META */\n.meta {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.55);\n margin-bottom: 14px;\n}\n\n/* USER */\n.user {\n display: flex;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n/* CSS AVATAR (NO IMAGES) */\n.avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 30%, #444, #111);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.avatar-initial {\n color: #fff;\n font-weight: 600;\n font-size: 16px;\n}\n\n/* INFO */\n.name {\n color: #fff;\n font-weight: 600;\n font-size: 15px;\n}\n\n.status {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.dot {\n width: 6px;\n height: 6px;\n background: #6aff6a;\n border-radius: 50%;\n}\n\n/* STACKED ACTIONS */\n.actions {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.btn {\n height: 38px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 14px;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.14),\n rgba(255, 255, 255, 0.06)\n );\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);\n}\n\n.btn.secondary {\n opacity: 0.9;\n}\n\n/* EXPANDABLE AREA (INSIDE CARD) */\n.card-expand {\n flex: 1;\n background: #0c0c0c;\n overflow: hidden;\n max-height: 0;\n transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.card:hover .card-expand {\n max-height: 120px;\n}\n\n/* EXPAND CONTENT */\n.section {\n padding: 14px 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.06);\n}\n\n.title {\n font-size: 13px;\n font-weight: 600;\n color: #fff;\n margin-bottom: 4px;\n}\n\n.text {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.75);\n line-height: 1.4;\n}\n\n/* BOTTOM — ALWAYS VISIBLE */\n.card-bottom {\n background: linear-gradient(180deg, #b8ff5a, #7de63b);\n padding: 12px;\n text-align: center;\n font-weight: bold;\n font-size: 13px;\n color: #0b0b0b;\n box-shadow:\n 0 12px 30px rgba(120, 255, 80, 0.35),\n inset 0 1px 0 rgba(255, 255, 255, 0.25);\n}\n"}

green-lionfish-10

👁 实时预览

📝 源代码