{"html":"

\n\n

\n \n

\n\n

\n Creative Studio\n Premium\n

\n\n

\n Award-winning design studio crafting bold brands and cutting-edge digital\n experiences for forward-thinking companies.\n

\n\n

\n \n

\n UI/UX Design\n

\n\n

\n \n

\n Development\n

\n\n

\n \n

\n Brand Identity\n

\n\n

\n \n

\n Marketing\n

\n\n

\n $899\n per project\n

\n\n \n

\n\n

\n \n

\n\n

\n Approved\n

\n","css":".card {\n --primary: #ff3e00;\n --primary-hover: #ff6d43;\n --secondary: #4d61ff;\n --secondary-hover: #5e70ff;\n --accent: #00e0b0;\n --text: #050505;\n --bg: #ffffff;\n --shadow-color: #000000;\n --pattern-color: #cfcfcf;\n\n position: relative;\n width: 20em;\n background: var(--bg);\n border: 0.35em solid var(--text);\n border-radius: 0.6em;\n box-shadow:\n 0.7em 0.7em 0 var(--shadow-color),\n inset 0 0 0 0.15em rgba(0, 0, 0, 0.05);\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n overflow: hidden;\n font-family: ui-sans-serif, system-ui, sans-serif;\n transform-origin: center;\n}\n\n.card:hover {\n transform: translate(-0.4em, -0.4em) scale(1.02);\n box-shadow: 1em 1em 0 var(--shadow-color);\n}\n\n.card:hover .card-pattern-grid,\n.card:hover .card-overlay-dots {\n opacity: 1;\n}\n\n.card:active {\n transform: translate(0.1em, 0.1em) scale(0.98);\n box-shadow: 0.5em 0.5em 0 var(--shadow-color);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: -1em;\n right: -1em;\n width: 4em;\n height: 4em;\n background: var(--accent);\n transform: rotate(45deg);\n z-index: 1;\n}\n\n.card::after {\n content: \"★\";\n position: absolute;\n top: 0.4em;\n right: 0.4em;\n color: var(--text);\n font-size: 1.2em;\n font-weight: bold;\n z-index: 2;\n}\n\n.card-pattern-grid {\n position: absolute;\n inset: 0;\n background-image: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.05) 1px,\n transparent 1px\n ),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);\n background-size: 0.5em 0.5em;\n pointer-events: none;\n opacity: 0.5;\n transition: opacity 0.4s ease;\n z-index: 1;\n}\n\n.card-overlay-dots {\n position: absolute;\n inset: 0;\n background-image: radial-gradient(var(--pattern-color) 1px, transparent 1px);\n background-size: 1em 1em;\n background-position: -0.5em -0.5em;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.4s ease;\n z-index: 1;\n}\n\n.bold-pattern {\n position: absolute;\n top: 0;\n right: 0;\n width: 6em;\n height: 6em;\n opacity: 0.15;\n pointer-events: none;\n z-index: 1;\n}\n\n.card-title-area {\n position: relative;\n padding: 1.4em;\n background: var(--primary);\n color: var(--bg);\n font-weight: 800;\n font-size: 1.2em;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 0.35em solid var(--text);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n z-index: 2;\n overflow: hidden;\n}\n\n.card-title-area::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0.1) 0.5em,\n transparent 0.5em,\n transparent 1em\n );\n pointer-events: none;\n opacity: 0.3;\n}\n\n.card-tag {\n background: var(--bg);\n color: var(--text);\n font-size: 0.6em;\n font-weight: 800;\n padding: 0.4em 0.8em;\n border: 0.15em solid var(--text);\n border-radius: 0.3em;\n box-shadow: 0.2em 0.2em 0 var(--shadow-color);\n text-transform: uppercase;\n letter-spacing: 0.1em;\n transform: rotate(3deg);\n transition: all 0.3s ease;\n}\n\n.card:hover .card-tag {\n transform: rotate(-2deg) scale(1.1);\n box-shadow: 0.25em 0.25em 0 var(--shadow-color);\n}\n\n.card-body {\n position: relative;\n padding: 1.5em;\n z-index: 2;\n}\n\n.card-description {\n margin-bottom: 1.5em;\n color: var(--text);\n font-size: 0.95em;\n line-height: 1.4;\n font-weight: 500;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1em;\n margin-bottom: 1.5em;\n}\n\n.feature-item {\n display: flex;\n align-items: center;\n gap: 0.6em;\n transition: transform 0.2s ease;\n}\n\n.feature-item:hover {\n transform: translateX(0.3em);\n}\n\n.feature-icon {\n width: 1.4em;\n height: 1.4em;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--secondary);\n border: 0.12em solid var(--text);\n border-radius: 0.3em;\n box-shadow: 0.2em 0.2em 0 rgba(0, 0, 0, 0.2);\n transition: all 0.2s ease;\n}\n\n.feature-item:hover .feature-icon {\n background: var(--secondary-hover);\n transform: rotate(-5deg);\n}\n\n.feature-icon svg {\n width: 0.9em;\n height: 0.9em;\n fill: var(--bg);\n}\n\n.feature-text {\n font-size: 0.85em;\n font-weight: 600;\n color: var(--text);\n}\n\n.card-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 1.5em;\n padding-top: 1.2em;\n border-top: 0.15em dashed rgba(0, 0, 0, 0.15);\n position: relative;\n}\n\n.card-actions::before {\n content: \"✂\";\n position: absolute;\n top: -0.8em;\n left: 50%;\n transform: translateX(-50%) rotate(90deg);\n background: var(--bg);\n padding: 0 0.5em;\n font-size: 1em;\n color: rgba(0, 0, 0, 0.4);\n}\n\n.price {\n position: relative;\n font-size: 1.8em;\n font-weight: 800;\n color: var(--text);\n background: var(--bg);\n}\n\n.price::before {\n content: \"\";\n position: absolute;\n bottom: 0.15em;\n left: 0;\n width: 100%;\n height: 0.2em;\n background: var(--accent);\n z-index: -1;\n opacity: 0.5;\n}\n\n.price-currency {\n font-size: 0.6em;\n font-weight: 700;\n vertical-align: top;\n margin-right: 0.1em;\n}\n\n.price-period {\n display: block;\n font-size: 0.4em;\n font-weight: 600;\n color: rgba(0, 0, 0, 0.6);\n margin-top: 0.2em;\n}\n\n.card-button {\n position: relative;\n background: var(--secondary);\n color: var(--bg);\n font-size: 0.9em;\n font-weight: 700;\n padding: 0.7em 1.2em;\n border: 0.2em solid var(--text);\n border-radius: 0.4em;\n box-shadow: 0.3em 0.3em 0 var(--shadow-color);\n cursor: pointer;\n transition: all 0.2s ease;\n overflow: hidden;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.card-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(255, 255, 255, 0.2) 50%,\n transparent 100%\n );\n transition: left 0.6s ease;\n}\n\n.card-button:hover {\n background: var(--secondary-hover);\n transform: translate(-0.1em, -0.1em);\n box-shadow: 0.4em 0.4em 0 var(--shadow-color);\n}\n\n.card-button:hover::before {\n left: 100%;\n}\n\n.card-button:active {\n transform: translate(0.1em, 0.1em);\n box-shadow: 0.15em 0.15em 0 var(--shadow-color);\n}\n\n.dots-pattern {\n position: absolute;\n bottom: 2em;\n left: -2em;\n width: 8em;\n height: 4em;\n opacity: 0.3;\n transform: rotate(-10deg);\n pointer-events: none;\n z-index: 1;\n}\n\n.accent-shape {\n position: absolute;\n width: 2.5em;\n height: 2.5em;\n background: var(--secondary);\n border: 0.15em solid var(--text);\n border-radius: 0.3em;\n transform: rotate(45deg);\n bottom: -1.2em;\n right: 2em;\n z-index: 0;\n transition: transform 0.3s ease;\n}\n\n.card:hover .accent-shape {\n transform: rotate(55deg) scale(1.1);\n}\n\n.stamp {\n position: absolute;\n bottom: 1.5em;\n left: 1.5em;\n width: 4em;\n height: 4em;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 0.15em solid rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n transform: rotate(-15deg);\n opacity: 0.2;\n z-index: 1;\n}\n\n.stamp-text {\n font-size: 0.6em;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.corner-slice {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 1.5em;\n height: 1.5em;\n background: var(--bg);\n border-right: 0.25em solid var(--text);\n border-top: 0.25em solid var(--text);\n border-radius: 0 0.5em 0 0;\n z-index: 1;\n}\n"}

funny-seahorse-89

👁 实时预览

📝 源代码