@wiv01 added htmlContent (English):
code:javascript\n<style>\n /* ── Pastel calling card for Люся — scoped, no JS ── */\n :root color-scheme: light dark; \n .gpt-block \n --bg: #faf7fb; /* lavender milk */\n --fg: #1e1b2e; /* ink */\n --muted: #6b6a78;\n --card: #ffffff;\n --ring: #e9e2ff;\n --accent: #b79cff; /* soft lilac */\n --accent-2: #9ee0d9; /* mint */\n --accent-3: #ffd6e7; /* blush */\n --radius: 18px;\n --gap: 22px;\n --maxw: 1040px;\n font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, \Helvetica Neue\, Arial, \Noto Sans\, sans-serif;\n color: var(--fg);\n padding: 28px;\n border-radius: var(--radius);\n max-width: var(--maxw);\n margin: 0 auto;\n background:\n radial-gradient(900px 600px at -10% 0%, color-mix(in oklab, var(--accent) 22%, transparent) 0, transparent 60%),\n radial-gradient(900px 700px at 110% 110%, color-mix(in oklab, var(--accent-2) 18%, transparent) 0, transparent 60%),\n linear-gradient(180deg, #fff, var(--bg));\n box-shadow: 0 12px 40px rgba(73, 59, 112, .08);\n \n\n .gpt-block .grid display: grid; gap: var(--gap); \n .gpt-block .card \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);\n border-radius: var(--radius);\n padding: clamp(16px, 3vw, 28px);\n box-shadow:\n 0 1px 0 rgba(0,0,0,.02),\n 0 10px 30px rgba(183, 156, 255, .08);\n \n\n /* Hero */\n .hero \n display: grid;\n grid-template-columns: 1.25fr .9fr;\n gap: clamp(18px, 4vw, 40px);\n align-items: center;\n overflow: clip;\n position: relative;\n isolation: isolate;\n \n @media (max-width: 880px) .hero grid-template-columns: 1fr; \n\n .ribbon \n display: inline-grid; grid-auto-flow: column; gap: 10px; align-items: center;\n font-size: 13px; letter-spacing: .06em; text-transform: uppercase;\n color: var(--muted);\n \n .ribbon .dot \n width: 8px; height: 8px; border-radius: 999px;\n background: var(--accent);\n box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 25%, transparent);\n \n\n .title \n font-size: clamp(28px, 5vw, 48px);\n line-height: 1.06;\n letter-spacing: -0.02em;\n margin: 8px 0 12px;\n font-weight: 800;\n \n .subtitle \n color: var(--muted);\n font-size: clamp(16px, 2.2vw, 18px);\n max-width: 60ch;\n \n\n .actions display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; \n .btn \n --_bg: var(--accent);\n --_fg: #121016;\n display: inline-flex; align-items: center; gap: 10px;\n padding: 12px 16px; border-radius: 14px; text-decoration: none; font-weight: 700;\n background:\n linear-gradient(180deg, color-mix(in oklab, var(--_bg) 88%, #fff 0%), color-mix(in oklab, var(--_bg) 72%, #fff 0%));\n color: var(--_fg);\n border: 1px solid color-mix(in oklab, var(--_bg) 28%, transparent);\n box-shadow: 0 10px 24px color-mix(in oklab, var(--_bg) 26%, transparent);\n transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;\n \n .btn:hover transform: translateY(-1px); filter: saturate(1.05); \n .btn.secondary --_bg: var(--accent-3); \n\n .avatarCard \n display: grid; gap: 14px; justify-items: center; text-align: center;\n background:\n radial-gradient(220px 160px at 30% 10%, color-mix(in oklab, var(--accent-2) 28%, transparent) 0, transparent 70%),\n var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);\n border-radius: calc(var(--radius) + 4px);\n padding: clamp(16px, 3vw, 26px);\n \n .avatar \n width: clamp(92px, 22vw, 128px); height: clamp(92px, 22vw, 128px);\n border-radius: 28px;\n background:\n conic-gradient(from 240deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));\n display: grid; place-items: center; color: #1a132b;\n font-size: clamp(34px, 6.5vw, 44px); font-weight: 900;\n box-shadow: inset 0 0 24px rgba(255,255,255,.35);\n \n .kicker color: var(--muted); font-size: 13.5px; \n .badges display:flex; flex-wrap:wrap; gap:8px; justify-content:center; \n .badge \n font-size: 12.5px; padding: 7px 10px; border-radius: 999px;\n background: color-mix(in oklab, var(--fg) 8%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n \n\n /* Sections */\n .section h2 margin: 0 0 10px; font-size: clamp(18px, 2.6vw, 24px); letter-spacing:-.01em; \n .muted color: var(--muted); \n .cols display:grid; gap: 14px; \n @media (min-width: 860px) .cols.cols-2 grid-template-columns: 1fr 1fr; \n\n .pill \n display:inline-flex; align-items:center; gap:8px;\n padding: 8px 12px; border-radius: 999px;\n border: 1px dashed color-mix(in oklab, var(--fg) 18%, transparent);\n background: color-mix(in oklab, var(--accent-2) 16%, transparent);\n font-size: 13px;\n \n\n .list display:grid; gap: 10px; \n .li \n background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent-3) 10%, #fff));\n border: 1px solid var(--ring);\n padding: 12px 14px; border-radius: 14px;\n \n .li strong font-weight: 700; \n\n /* Footer */\n .footer \n display:grid; gap: 8px; justify-items:center; text-align:center; color: var(--muted);\n \n .links display:flex; gap:12px; flex-wrap:wrap; \n .link color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in oklab, var(--fg) 30%, transparent); \n</style>\n\n<div class=\gpt-block\ role=\region\ aria-label=\ніжна візитка\>\n <div class=\grid hero card\>\n <div>\n <div class=\ribbon\><span class=\dot\ aria-hidden=\true\></span> Київ, Україна</div>\n <h1 class=\title\>Люся — спокійна сила інтерфейсів</h1>\n <p class=\subtitle\>\n Ти про людей і про відчуття від продукту. Обираєш ясність замість шуму, турбуєшся про дрібниці,\n любиш акуратну типографіку, швидкість і чистоту у коді. Твої інструменти — <strong>React</strong>,\n редактори контенту (<strong>Slate</strong>), пайплайни <strong>remark/rehype</strong> та уважність до деталей.\n </p>\n <div class=\actions\>\n <a class=\btn\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\ aria-label=\Написати в Telegram\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M21.8 5.2L3.9 12.1c-.7.3-.7 1.2 0 1.4l4.7 1.5 1.5 4.7c.2.7 1.1.7 1.4 0l6.9-17.9c.3-.8-.5-1.6-1.3-1.3Z\/></svg>\n Telegram\n </a>\n <a class=\btn secondary\ href=\mailto:[email protected]\ aria-label=\Email\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M12 3a9 9 0 1 0 6.4 15.3l.1.7h2l-1.1-6.5A4.9 4.9 0 0 0 12 7a5 5 0 0 0 0 10c1.3 0 2.4-.5 3.2-1.4v1.1A7 7 0 1 1 19 12v1a2 2 0 0 1-4 0V9h-2v4a4 4 0 1 0 8 0v-1A9 9 0 0 0 12 3Z\/></svg>\n Email\n </a>\n </div>\n </div>\n\n <aside class=\avatarCard\ aria-label=\портрет і інфо\>\n <div class=\avatar\ aria-hidden=\true\>Л</div>\n <div class=\kicker\>Front-end · React · Content systems</div>\n <div class=\badges\ aria-label=\теги\>\n <span class=\badge\>React 18</span>\n <span class=\badge\>Slate.js</span>\n <span class=\badge\>remark · rehype</span>\n <span class=\badge\>sanitize-html</span>\n <span class=\badge\>UX тонкість</span>\n </div>\n </aside>\n </div>\n\n <section class=\card section\ aria-label=\про тебе\>\n <h2>Твій вайб — ніжність без кітчу</h2>\n <div class=\cols cols-2\>\n <div class=\list\>\n <div class=\li\><strong>Спокійний темп,</strong> але рішучі результати — доводиш деталі до гармонії.</div>\n <div class=\li\><strong>Структура,</strong> що заспокоює — чистий контент, продумана ієрархія, акуратні відступи.</div>\n <div class=\li\><strong>Турбота про людей:</strong> доступність, зрозумілі дії, дружні мікротексти.</div>\n </div>\n <div class=\list\>\n <div class=\li\><strong>Редактори як інструменти творчості:</strong> таблиці, списки, ембеди, медіа — все “грає”.</div>\n <div class=\li\><strong>Технічна чистота:</strong> безпечний HTML, OG/SEO, надійні пайплайни.</div>\n <div class=\li\><strong>Мʼякі кольори,</strong> пастель і повітря — твій природний простір.</div>\n </div>\n </div>\n </section>\n\n <section class=\card section\ aria-label=\що робиш найкраще\>\n <h2>Де ти особливо сильна</h2>\n <div class=\list\>\n <div class=\pill\ aria-label=\напрям\>Редактори без болю</div>\n <div class=\pill\ aria-label=\напрям\>Чисті інтерфейси</div>\n <div class=\pill\ aria-label=\напрям\>Ембеди та медіа</div>\n <div class=\pill\ aria-label=\напрям\>SEO · OG · превʼю</div>\n <div class=\pill\ aria-label=\напрям\>Безпечний HTML рендер</div>\n </div>\n </section>\n\n <footer class=\footer\ role=\contentinfo\>\n <div class=\links\ aria-label=\посилання\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Портфоліо</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Резюме</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Instagram</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>LinkedIn</a>\n </div>\n <small class=\muted\>© <span data-year></span> Люся · створено у ніжних тонах</small>\n </footer>\n</div>\n\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from: