@wiv01 added htmlContent (English):
code:javascript\n<!DOCTYPE html>\n<html lang=\en\>\n<head>\n <meta charset=\utf-8\ />\n <meta name=\viewport\ content=\width=device-width, initial-scale=1\ />\n <title>Snow — The White Cat</title>\n <meta name=\description\ content=\A clean, responsive one‑page site celebrating a white cat named Snow.\ />\n <style>\n :root \n --bg: #f7f7fb;\n --bg-card: #ffffff;\n --ink: #0e1016;\n --muted: #5a6473;\n --brand: #7c8cff; /* soft periwinkle */\n --accent: #ffd8e1; /* blush */\n --ring: #b9c2ff;\n --shadow: 0 10px 30px rgba(14,16,22,0.08);\n --radius: 18px;\n --radius-sm: 12px;\n --maxw: 1120px;\n \n @media (prefers-color-scheme: dark) \n :root \n --bg: #0c0d12;\n --bg-card: #121421;\n --ink: #eef0f7;\n --muted: #c7ccda;\n --brand: #9aa6ff;\n --accent: #5b2e3a;\n --ring: #5664ff;\n --shadow: 0 10px 30px rgba(0,0,0,0.5);\n \n \n * box-sizing: border-box; \n html, body height: 100%; \n body \n margin: 0;\n font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, \Apple Color Emoji\, \Segoe UI Emoji\;\n color: var(--ink);\n background: radial-gradient(1200px 600px at 80% -10%, var(--accent), transparent), var(--bg);\n \n a color: inherit; text-decoration: none; \n img max-width: 100%; display: block; \n .container width: min(100%, var(--maxw)); margin-inline: auto; padding: 0 20px; \n\n /* Header */\n header \n position: sticky; top: 0; z-index: 50;\n backdrop-filter: saturate(1.2) blur(8px);\n background: color-mix(in oklab, var(--bg-card) 70%, transparent);\n border-bottom: 1px solid color-mix(in oklab, var(--ring) 20%, transparent);\n \n .nav \n display: flex; align-items: center; gap: 18px; padding: 14px 0;\n \n .logo display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .3px; \n .logo svg width: 28px; height: 28px; \n .spacer flex: 1; \n .nav a opacity: .8; padding: 8px 12px; border-radius: 999px; \n .nav a:hover, .nav a:focus-visible opacity: 1; background: color-mix(in oklab, var(--brand) 20%, transparent); outline: none; \n\n /* Hero */\n .hero \n display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: clamp(32px, 7vw, 96px) 0 40px;\n \n .kicker display:inline-block; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--brand) 18%, transparent); color: var(--ink); font-weight: 600; font-size: .9rem; \n h1 font-size: clamp(36px, 6vw, 64px); line-height: 1.05; margin: 16px 0; letter-spacing: -0.02em; \n .lead font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--muted);\n .cta display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; \n .btn \n display:inline-flex; align-items:center; gap:10px; \n padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);\n background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 20%, transparent), color-mix(in oklab, var(--brand) 5%, transparent));\n box-shadow: var(--shadow);\n font-weight: 700; cursor: pointer;\n \n .btn:hover transform: translateY(-1px); \n .btn.secondary background: var(--bg-card); \n\n .hero-card \n border-radius: var(--radius);\n background: var(--bg-card);\n box-shadow: var(--shadow);\n padding: 18px; position: relative; overflow: hidden;\n border: 1px solid color-mix(in oklab, var(--ring) 25%, transparent);\n \n .hero-card .photo \n aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; position: relative;\n background: linear-gradient(135deg, #fff 0%, #eaeef7 60%);\n display: grid; place-items: center; isolation: isolate;\n \n .hero-card .photo::after \n content: \\; position: absolute; inset: 0; background:\n radial-gradient(300px 180px at 80% 30%, rgba(124,140,255,.25), transparent),\n radial-gradient(260px 140px at 20% 80%, rgba(255,216,225,.25), transparent);\n mix-blend-mode: color;\n \n .cat-illustration \n width: min(65%, 380px);\n filter: drop-shadow(0 20px 30px rgba(0,0,0,.12));\n \n .pawchips display:flex; gap:10px; flex-wrap: wrap; margin-top: 14px; \n .chip padding:6px 10px; border-radius: 999px; font-size: .85rem; background: color-mix(in oklab, var(--brand) 16%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); \n\n /* Sections */\n section padding: clamp(42px, 7vw, 84px) 0; \n .section-title font-size: clamp(24px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -0.02em; \n .section-lead color: var(--muted); max-width: 65ch; \n\n /* Features */\n .features \n display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px;\n \n .card background: var(--bg-card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border: 1px solid color-mix(in oklab, var(--ring) 25%, transparent); \n .card h3 margin: 0 0 8px; font-size: 1.15rem; \n .eyebrow font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); \n\n /* Gallery */\n .gallery display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 24px; \n .gallery figure margin: 0; border-radius: var(--radius-sm); overflow: hidden; position: relative; border: 1px solid color-mix(in oklab, var(--ring) 25%, transparent); background: #fff; \n .gallery img width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; \n .gallery figcaption position: absolute; inset: auto 0 0 0; padding: 8px 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); color: #fff; font-size: .9rem; text-shadow: 0 1px 1px rgba(0,0,0,.5); \n .col-6 grid-column: span 6; \n .col-4 grid-column: span 4; \n .col-8 grid-column: span 8; \n\n /* About */\n .about display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; \n .about p margin: 0; color: var(--muted); \n\n /* Contact */\n form display: grid; gap: 12px; margin-top: 18px; \n .field display: grid; gap: 6px; \n label font-weight: 600; \n input, textarea \n width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--ring) 35%, transparent); background: var(--bg-card); color: var(--ink);\n \n input:focus, textarea:focus outline: 2px solid var(--ring); outline-offset: 1px; \n textarea min-height: 120px; resize: vertical; \n\n /* Footer */\n footer padding: 36px 0; color: var(--muted); border-top: 1px solid color-mix(in oklab, var(--ring) 20%, transparent); \n\n /* Responsive */\n @media (max-width: 960px) \n .hero grid-template-columns: 1fr; \n .features grid-template-columns: 1fr 1fr; \n .about grid-template-columns: 1fr; \n \n @media (max-width: 640px) \n .features grid-template-columns: 1fr; \n .gallery grid-template-columns: 1fr 1fr; \n .col-8, .col-6, .col-4 grid-column: span 1; \n \n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\ role=\navigation\ aria-label=\Main\>\n <a href=\#home\ class=\logo\>\n <svg viewBox=\0 0 24 24\ aria-hidden=\true\ fill=\currentColor\ role=\img\><path d=\M6 9c0-3.5 2.7-6 6-6s6 2.5 6 6v5.8c0 2-1.6 3.7-3.6 3.7h-4.8C7.6 18.5 6 16.8 6 14.8V9z\ opacity=\.7\/><path d=\M8.5 9.5C8.2 9 7.3 7.7 6 7.3c-.4-.1-.8.2-.8.6v4.5c0 1.1.3 2.1.9 2.9l2.3 3.3c.2.4.6.6 1 .6h5c.4 0 .8-.2 1-.6l2.3-3.3c.6-.9.9-1.9.9-2.9V7.9c0-.4-.4-.7-.8-.6-1.3.4-2.2 1.7-2.5 2.2-.2.3-.6.4-.9.3a7.7 7.7 0 0 0-5 0c-.3.1-.7 0-.9-.3z\/></svg>\n Snow\n </a>\n <span class=\spacer\></span>\n <a href=\#gallery\>Gallery</a>\n <a href=\#about\>About</a>\n <a href=\#contact\>Contact</a>\n </div>\n </header>\n\n <main id=\home\>\n <div class=\container hero\>\n <div>\n <span class=\kicker\ aria-hidden=\true\>Meet Snow</span>\n <h1>Gracefully white, endlessly charming.</h1>\n <p class=\lead\>Snow is a playful white cat who loves sunbeams, cardboard castles, and supervising keyboards. This little cloud on paws brings calm, curiosity, and lots of purrs.</p>\n <div class=\cta\>\n <a class=\btn\ href=\#gallery\ aria-label=\See Snow's photo gallery\>🐾 See Gallery</a>\n <a class=\btn secondary\ href=\#contact\ aria-label=\Send a message about Snow\>✉️ Contact</a>\n </div>\n <div class=\pawchips\ aria-hidden=\true\>\n <span class=\chip\>House Panther (but white!)</span>\n <span class=\chip\>Purr Engine v2.0</span>\n <span class=\chip\>Sunbeam Enthusiast</span>\n </div>\n </div>\n <aside class=\hero-card\ aria-label=\Snow hero image\>\n <div class=\photo\>\n (html comment removed: Simple SVG illustration so no external images are required )\n <svg class=\cat-illustration\ viewBox=\0 0 400 300\ xmlns=\http://www.w3.org/2000/svg\ role=\img\ aria-label=\Stylized white cat sitting\>\n <defs>\n <filter id=\soft\ x=\-20%\ y=\-20%\ width=\140%\ height=\140%\>\n <feGaussianBlur in=\SourceGraphic\ stdDeviation=\1.2\ />\n </filter>\n </defs>\n <rect width=\400\ height=\300\ fill=\#ffffff\ opacity=\0\/>\n (html comment removed: body )\n <ellipse cx=\200\ cy=\190\ rx=\120\ ry=\85\ fill=\#ffffff\ stroke=\#e6ecf7\ stroke-width=\4\/>\n (html comment removed: head )\n <circle cx=\250\ cy=\120\ r=\55\ fill=\#ffffff\ stroke=\#e6ecf7\ stroke-width=\4\/>\n (html comment removed: ears )\n <path d=\M215 80 L230 45 L245 80 Z\ fill=\#ffffff\ stroke=\#e6ecf7\ stroke-width=\4\/>\n <path d=\M255 80 L270 45 L285 80 Z\ fill=\#ffffff\ stroke=\#e6ecf7\ stroke-width=\4\/>\n (html comment removed: eyes )\n <circle cx=\235\ cy=\120\ r=\6\ fill=\#3a4250\/>\n <circle cx=\265\ cy=\120\ r=\6\ fill=\#3a4250\/>\n (html comment removed: nose )\n <circle cx=\250\ cy=\132\ r=\3.5\ fill=\#f3a6b8\/>\n (html comment removed: mouth )\n <path d=\M250 137 q-8 10 -16 0\ stroke=\#3a4250\ stroke-width=\3\ fill=\none\ stroke-linecap=\round\/>\n <path d=\M250 137 q8 10 16 0\ stroke=\#3a4250\ stroke-width=\3\ fill=\none\ stroke-linecap=\round\/>\n (html comment removed: whiskers )\n <path d=\M220 130 h-28\ stroke=\#ccd5e6\ stroke-width=\3\/>\n <path d=\M222 137 h-30\ stroke=\#ccd5e6\ stroke-width=\3\/>\n <path d=\M280 130 h28\ stroke=\#ccd5e6\ stroke-width=\3\/>\n <path d=\M278 137 h30\ stroke=\#ccd5e6\ stroke-width=\3\/>\n (html comment removed: tail )\n <path d=\M95 190 q-40 40 0 70\ fill=\none\ stroke=\#e6ecf7\ stroke-width=\10\ stroke-linecap=\round\/>\n (html comment removed: shadow )\n <ellipse cx=\200\ cy=\250\ rx=\110\ ry=\14\ fill=\#00000010\ filter=\url(#soft)\/>\n </svg>\n </div>\n </aside>\n </div>\n\n <section id=\features\ class=\container\>\n <h2 class=\section-title\>Snow at a glance</h2>\n <p class=\section-lead\>A few quick facts about this elegant cloud-cat.</p>\n <div class=\features\ role=\list\>\n <article class=\card\ role=\listitem\>\n <div class=\eyebrow\>Temperament</div>\n <h3>Chill, curious, cuddly</h3>\n <p>Snow loves quiet corners, slow blinks, and occasional zoomies at 3 a.m. (sorry, not sorry).</p>\n </article>\n <article class=\card\ role=\listitem\>\n <div class=\eyebrow\>Hobbies</div>\n <h3>Window-watching</h3>\n <p>Bird TV is a top-rated show. Also a connoisseur of crinkly paper and cardboard forts.</p>\n </article>\n <article class=\card\ role=\listitem\>\n <div class=\eyebrow\>Care</div>\n <h3>Low maintenance</h3>\n <p>Regular brushing keeps the coat pristine; sunbeam naps are mandatory for optimal purrformance.</p>\n </article>\n </div>\n </section>\n\n <section id=\gallery\ class=\container\>\n <h2 class=\section-title\>Gallery</h2>\n <p class=\section-lead\>A few moments from Snow’s daily adventures.</p>\n <div class=\gallery\ role=\list\>\n <figure class=\col-8\ role=\listitem\>\n <img src=\https://images.unsplash.com/photo-1543852786-1cf6624b9987?q=80&w=1200&auto=format&fit=crop\ alt=\White cat lounging on a windowsill\/>\n <figcaption>Golden hour supervisor</figcaption>\n </figure>\n <figure class=\col-4\ role=\listitem\>\n <img src=\https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=800&auto=format&fit=crop\ alt=\Close-up of a white cat with blue eyes\/>\n <figcaption>Blue‑eyed wonder</figcaption>\n </figure>\n <figure class=\col-6\ role=\listitem\>\n <img src=\https://images.unsplash.com/photo-1518791841217-8f162f1e1131?q=80&w=1000&auto=format&fit=crop\ alt=\White cat playing with a string toy\/>\n <figcaption>String theory in action</figcaption>\n </figure>\n <figure class=\col-6\ role=\listitem\>\n <img src=\https://images.unsplash.com/photo-1546182990-dffeafbe841d?q=80&w=1000&auto=format&fit=crop\ alt=\White cat sleeping on a soft blanket\/>\n <figcaption>Nap expertise</figcaption>\n </figure>\n </div>\n </section>\n\n <section id=\about\ class=\container\>\n <h2 class=\section-title\>About Snow</h2>\n <div class=\about\>\n <div class=\card\>\n <h3>Story</h3>\n <p>Snow arrived on a snowy morning—naturally—and immediately claimed the sunniest spot in the house. Gentle with people and confident around new spaces, Snow is the calm in any room.</p>\n </div>\n <div class=\card\>\n <h3>Specs</h3>\n <ul>\n <li>Coat: Pure white, medium length</li>\n <li>Eyes: Blue (sometimes a hint of green)</li>\n <li>Favorite toy: Feather wand</li>\n <li>Snack of choice: Churu</li>\n </ul>\n </div>\n </div>\n </section>\n\n <section id=\contact\ class=\container\>\n <h2 class=\section-title\>Contact</h2>\n <p class=\section-lead\>Send a message to Snow’s human. (Treat recommendations welcome.)</p>\n <form action=\#\ method=\post\ novalidate>\n <div class=\field\>\n <label for=\name\>Your name</label>\n <input id=\name\ name=\name\ type=\text\ placeholder=\Whisker Fan\ autocomplete=\name\ required />\n </div>\n <div class=\field\>\n <label for=\email\>Email</label>\n <input id=\email\ name=\email\ type=\email\ placeholder=\[email protected]\ autocomplete=\email\ required />\n </div>\n <div class=\field\>\n <label for=\message\>Message</label>\n <textarea id=\message\ name=\message\ placeholder=\Snow is the fluffiest cloud I've ever seen!\ required></textarea>\n </div>\n <button class=\btn\ type=\submit\>Send message</button>\n </form>\n </section>\n </main>\n\n <footer>\n <div class=\container\>\n <small>© <span id=\year\></span> Snow the White Cat • Built with plain HTML & CSS</small>\n </div>\n </footer>\n</body>\n</html>\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from: