@wiv01 added htmlContent (English):
code:\n\njavascript\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>Mittens • The Cat</title>\n <meta name=\description\ content=\A cozy little website for Mittens the cat — photos, likes, and contact.\ />\n <link rel=\icon\ href=\data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='90'%3E%F0%9F%90%B1%3C/text%3E%3C/svg%3E\ />\n <style>\n :root \n --bg: #fff8f6;\n --fg: #201a19;\n --muted: #6b5f5b;\n --brand: #ff8aa0; /* strawberry milk */\n --brand-2: #ffd6e0;\n --card: #ffffff;\n --shadow: 0 10px 25px rgba(0,0,0,0.08);\n --radius: 18px;\n \n @media (prefers-color-scheme: dark) \n :root \n --bg: #151313;\n --fg: #f6f2f1;\n --muted: #b7adaa;\n --brand: #ff9ab1;\n --brand-2: #472934;\n --card: #1f1b1a;\n --shadow: 0 10px 25px rgba(0,0,0,0.3);\n \n \n\n * box-sizing: border-box; \n html, body height: 100%; \n body \n margin: 0;\n font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, \Helvetica Neue\, Arial, \Apple Color Emoji\, \Segoe UI Emoji\;\n color: var(--fg);\n background: radial-gradient(1000px 600px at 10% -10%, var(--brand-2), transparent 50%) no-repeat,\n radial-gradient(800px 500px at 110% 0%, var(--brand-2), transparent 45%) no-repeat,\n var(--bg);\n line-height: 1.6;\n \n\n /* --- Header & Nav --- */\n header \n position: sticky;\n top: 0;\n z-index: 50;\n backdrop-filter: saturate(140%) blur(8px);\n background: color-mix(in lab, var(--bg) 85%, transparent);\n border-bottom: 1px solid color-mix(in lab, var(--muted) 20%, transparent);\n \n .nav \n margin: 0 auto;\n max-width: 1100px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 22px;\n \n .nav .logo \n display: inline-flex;\n gap: 12px;\n align-items: center;\n text-decoration: none;\n color: var(--fg);\n font-weight: 800;\n letter-spacing: .4px;\n \n .logo .paw \n width: 30px; height: 30px; display: inline-block;\n filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));\n transform: translateY(2px);\n \n .nav a.navlink \n text-decoration: none;\n color: var(--fg);\n margin-left: 18px;\n padding: 8px 12px;\n border-radius: 999px;\n transition: transform .15s ease, background .2s ease;\n \n .nav a.navlink:hover background: color-mix(in lab, var(--brand-2) 35%, transparent); transform: translateY(-1px); \n\n /* --- Hero --- */\n .hero \n max-width: 1100px;\n margin: 28px auto 0;\n padding: 22px;\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 28px;\n align-items: center;\n \n .card \n background: var(--card);\n border: 1px solid color-mix(in lab, var(--muted) 16%, transparent);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n \n .hero .intro padding: 28px; \n .eyebrow color: var(--muted); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; \n h1 font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.1; margin: 8px 0 12px; \n .intro p font-size: 1.1rem; margin: 0 0 18px; \n .badges display: flex; gap: 10px; flex-wrap: wrap; \n .badge background: var(--brand-2); border: 1px dashed color-mix(in lab, var(--brand) 35%, transparent); padding: 8px 12px; border-radius: 999px; font-weight: 600; \n\n .hero .photo overflow: hidden; position: relative; \n .hero .photo img \n width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius);\n transform: scale(1.02);\n \n .float-label \n position: absolute; bottom: 14px; left: 14px;\n background: color-mix(in lab, var(--bg) 70%, transparent);\n backdrop-filter: blur(6px) saturate(130%);\n padding: 8px 12px; border-radius: 10px; font-weight: 700; box-shadow: var(--shadow);\n \n\n /* --- Section base --- */\n section max-width: 1100px; margin: 40px auto; padding: 0 22px; \n section h2 font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 10px 0 6px; \n .section-card padding: 22px; \n\n /* --- About --- */\n .about-grid \n display: grid; grid-template-columns: 1fr 1fr; gap: 22px;\n \n .stats display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; \n .stat background: color-mix(in lab, var(--brand-2) 50%, transparent); border: 1px solid color-mix(in lab, var(--brand) 25%, transparent); padding: 14px; border-radius: 12px; text-align: center; \n .stat b font-size: 1.2rem; display: block; \n\n /* --- Gallery --- */\n .gallery-grid display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; \n .gitem position: relative; overflow: hidden; border-radius: 14px; border: 1px solid color-mix(in lab, var(--muted) 16%, transparent); \n .gitem img width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; \n .gitem:hover img transform: scale(1.06) rotate(-.2deg); \n .gitem.large grid-column: span 6; aspect-ratio: 16/10; \n .gitem.tall grid-column: span 3; aspect-ratio: 3/5; \n .gitem.wide grid-column: span 3; aspect-ratio: 5/3; \n\n /* CSS-only Lightbox */\n .lightbox:target display: grid; \n .lightbox \n position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.7); padding: 30px; z-index: 100;\n \n .lightbox figure margin: 0; max-width: min(1100px, 95vw); \n .lightbox img width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); \n .lightbox a.close position: fixed; top: 18px; right: 18px; background: var(--card); color: var(--fg); padding: 8px 12px; border-radius: 999px; text-decoration: none; border: 1px solid color-mix(in lab, var(--muted) 16%, transparent); \n\n /* --- Favorites --- */\n .chips display: flex; flex-wrap: wrap; gap: 10px; \n .chip border: 1px solid color-mix(in lab, var(--muted) 22%, transparent); padding: 10px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); \n\n /* --- Timeline --- */\n .timeline position: relative; padding-left: 24px; \n .timeline::before content: \\; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: color-mix(in lab, var(--brand) 40%, transparent); \n .titem position: relative; margin: 16px 0; padding-left: 14px; \n .titem::before content: \\; position: absolute; left: -1px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in lab, var(--brand) 30%, transparent); \n\n /* --- Contact --- */\n form display: grid; gap: 12px; grid-template-columns: 1fr 1fr; \n form .full grid-column: 1 / -1; \n label font-weight: 700; font-size: .95rem; \n input, textarea \n width: 100%; padding: 12px 14px; background: var(--card); color: var(--fg); border: 1px solid color-mix(in lab, var(--muted) 20%, transparent); border-radius: 12px; outline: none;\n \n textarea min-height: 120px; resize: vertical; \n .btn \n display: inline-block; border: none; background: linear-gradient(180deg, var(--brand), color-mix(in lab, var(--brand) 65%, #ff5e7f)); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 800; letter-spacing: .3px; cursor: pointer; box-shadow: var(--shadow);\n \n\n /* --- Footer --- */\n footer text-align: center; color: var(--muted); padding: 40px 22px 80px; \n\n /* --- Utilities --- */\n .grid display: grid; gap: 22px; \n .cols-3 grid-template-columns: repeat(3, 1fr); \n .cols-2 grid-template-columns: repeat(2, 1fr); \n .center text-align: center; \n .divider height: 16px; background: url('data:image/svg+xml;utf8,\\\n %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 16%22%3E\\\n %3Cg fill=%22%23ff8aa0%22 opacity=%220.35%22%3E\\\n %3Ccircle cx=%228%22 cy=%228%22 r=%228%22/%3E\\\n %3Ccircle cx=%2248%22 cy=%228%22 r=%228%22/%3E\\\n %3Ccircle cx=%2288%22 cy=%228%22 r=%228%22/%3E\\\n %3C/g%3E%3C/svg%3E') center/90px 16px no-repeat; opacity: .7; margin: 10px 0; \n\n /* --- Responsive --- */\n @media (max-width: 900px) \n .hero grid-template-columns: 1fr; \n .about-grid grid-template-columns: 1fr; \n .stats grid-template-columns: repeat(3, 1fr); \n form grid-template-columns: 1fr; \n \n </style>\n</head>\n<body>\n <header>\n <nav class=\nav\ aria-label=\Primary\>\n <a class=\logo\ href=\#top\>\n <svg class=\paw\ viewBox=\0 0 64 64\ xmlns=\http://www.w3.org/2000/svg\ aria-hidden=\true\><g fill=\currentColor\><circle cx=\14\ cy=\20\ r=\8\/><circle cx=\32\ cy=\14\ r=\8\/><circle cx=\50\ cy=\20\ r=\8\/><path d=\M52 40c0 9-8 16-20 16S12 49 12 40s7-16 20-16 20 7 20 16z\/></g></svg>\n <span>Mittens</span>\n </a>\n <div>\n <a class=\navlink\ href=\#about\>About</a>\n <a class=\navlink\ href=\#gallery\>Gallery</a>\n <a class=\navlink\ href=\#favorites\>Favorites</a>\n <a class=\navlink\ href=\#timeline\>Timeline</a>\n <a class=\navlink\ href=\#contact\>Contact</a>\n </div>\n </nav>\n </header>\n\n <main id=\top\>\n (html comment removed: Hero )\n <section class=\hero\>\n <div class=\card intro\>\n <div class=\eyebrow\>Meet the cat</div>\n <h1>Mittens — Chief Nap Officer</h1>\n <p>Hi! I'm <b>Mittens</b>. I specialize in sunbeam napping, red-dot chasing, and 4 a.m. hallway concerts. When I'm not supervising plants, I accept chin-scratch payments.</p>\n <div class=\badges\ role=\list\ aria-label=\Traits\>\n <span class=\badge\ role=\listitem\>Purr-fessional</span>\n <span class=\badge\ role=\listitem\>Laser Pointer Athlete</span>\n <span class=\badge\ role=\listitem\>Box Collector</span>\n <span class=\badge\ role=\listitem\>Birdwatcher</span>\n </div>\n </div>\n <figure class=\card photo\ aria-label=\Mittens photo\>\n <img src=\https://images.unsplash.com/photo-1596854307943-279f3d34b701?q=80&w=1400&auto=format&fit=crop\ alt=\A fluffy cat looking regal\ />\n <figcaption class=\float-label\>✨ So majestic</figcaption>\n </figure>\n </section>\n\n (html comment removed: About )\n <section id=\about\>\n <div class=\card section-card\>\n <h2>About Mittens</h2>\n <div class=\divider\ aria-hidden=\true\></div>\n <div class=\about-grid\>\n <p>Mittens is a three-year-old indoor explorer with a passion for cardboard engineering and window-sill philosophy. Favorite season: the one with warm laundry. Least favorite: bath time.</p>\n <div>\n <div class=\stats\ role=\list\ aria-label=\Fun stats\>\n <div class=\stat\ role=\listitem\><b>3</b> years old</div>\n <div class=\stat\ role=\listitem\><b>9</b> naps/day</div>\n <div class=\stat\ role=\listitem\><b>11/10</b> floof</div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: Gallery )\n <section id=\gallery\>\n <div class=\card section-card\>\n <h2>Photo Gallery</h2>\n <div class=\divider\ aria-hidden=\true\></div>\n <div class=\gallery-grid\>\n (html comment removed: Each image links to a CSS-only lightbox using :target )\n <a class=\gitem large\ href=\#img1\><img src=\https://images.unsplash.com/photo-1543852786-1cf6624b9987?q=80&w=800&auto=format&fit=crop\ alt=\Mittens lounging\/></a>\n <a class=\gitem tall\ href=\#img2\><img src=\https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=600&auto=format&fit=crop\ alt=\Close-up whiskers\/></a>\n <a class=\gitem wide\ href=\#img3\><img src=\https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=600&auto=format&fit=crop\ alt=\Play time\/></a>\n <a class=\gitem wide\ href=\#img4\><img src=\https://images.unsplash.com/photo-1555685812-4b943f1cb0eb?q=80&w=600&auto=format&fit=crop\ alt=\Sunbeam nap\/></a>\n <a class=\gitem tall\ href=\#img5\><img src=\https://images.unsplash.com/photo-1547955922-26be9b2be9f5?q=80&w=600&auto=format&fit=crop\ alt=\Box inspection\/></a>\n <a class=\gitem large\ href=\#img6\><img src=\https://images.unsplash.com/photo-1450778869180-41d0601e046e?q=80&w=800&auto=format&fit=crop\ alt=\Regal pose\/></a>\n </div>\n </div>\n\n (html comment removed: Lightboxes )\n <div id=\img1\ class=\lightbox\ aria-modal=\true\ role=\dialog\><figure><img src=\https://images.unsplash.com/photo-1543852786-1cf6624b9987?q=80&w=1400&auto=format&fit=crop\ alt=\Mittens lounging big\/></figure><a class=\close\ href=\#gallery\ aria-label=\Close\>Close ✕</a></div>\n <div id=\img2\ class=\lightbox\ aria-modal=\true\ role=\dialog\><figure><img src=\https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=1200&auto=format&fit=crop\ alt=\Close-up whiskers big\/></figure><a class=\close\ href=\#gallery\>Close ✕</a></div>\n <div id=\img3\ class=\lightbox\ aria-modal=\true\ role=\dialog\><figure><img src=\https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=1400&auto=format&fit=crop\ alt=\Play time big\/></figure><a class=\close\ href=\#gallery\>Close ✕</a></div>\n <div id=\img4\ class=\lightbox\ aria-modal=\true\ role=\dialog\><figure><img src=\https://images.unsplash.com/photo-1555685812-4b943f1cb0eb?q=80&w=1400&auto=format&fit=crop\ alt=\Sunbeam nap big\/></figure><a class=\close\ href=\#gallery\>Close ✕</a></div>\n <div id=\img5\ class=\lightbox\ aria-modal=\true\ role=\dialog\><figure><img src=\https://images.unsplash.com/photo-1547955922-26be9b2be9f5?q=80&w=1200&auto=format&fit=crop\ alt=\Box inspection big\/></figure><a class=\close\ href=\#gallery\>Close ✕</a></div>\n <div id=\img6\ class=\lightbox\ aria-modal=\true\ role=\dialog\><figure><img src=\https://images.unsplash.com/photo-1450778869180-41d0601e046e?q=80&w=1400&auto=format&fit=crop\ alt=\Regal pose big\/></figure><a class=\close\ href=\#gallery\>Close ✕</a></div>\n </section>\n\n (html comment removed: Favorites )\n <section id=\favorites\>\n <div class=\card section-card\>\n <h2>Favorite Things</h2>\n <div class=\divider\ aria-hidden=\true\></div>\n <div class=\chips\ role=\list\ aria-label=\Favorite items\>\n <span class=\chip\ role=\listitem\>Feather wand</span>\n <span class=\chip\ role=\listitem\>Catnip mouse</span>\n <span class=\chip\ role=\listitem\>Cardboard box 2L</span>\n <span class=\chip\ role=\listitem\>Window perch</span>\n <span class=\chip\ role=\listitem\>Laser pointer</span>\n <span class=\chip\ role=\listitem\>Warm laundry</span>\n </div>\n </div>\n </section>\n\n (html comment removed: Timeline )\n <section id=\timeline\>\n <div class=\card section-card\>\n <h2>Timeline</h2>\n <div class=\divider\ aria-hidden=\true\></div>\n <div class=\timeline\ aria-label=\Life timeline\>\n <div class=\titem\><b>2022</b> — Adopted from Cozy Paws Shelter. First act: conquering the sofa.</div>\n <div class=\titem\><b>2023</b> — Achieved 500+ successful red-dot catches (allegedly).</div>\n <div class=\titem\><b>2024</b> — Promoted to Head of Plant Security after a suspicious fern incident.</div>\n <div class=\titem\><b>2025</b> — Started official website. Fame imminent. Snacks welcomed.</div>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (non-functional demo) )\n <section id=\contact\>\n <div class=\card section-card\>\n <h2>Contact</h2>\n <div class=\divider\ aria-hidden=\true\></div>\n <p class=\center\>Want to say hi or send treats? Fill this (just-for-show) form 🐾</p>\n <form>\n <div>\n <label for=\name\>Your name</label>\n <input id=\name\ name=\name\ placeholder=\Cat admirer\ />\n </div>\n <div>\n <label for=\email\>Email</label>\n <input id=\email\ name=\email\ type=\email\ placeholder=\[email protected]\ />\n </div>\n <div class=\full\>\n <label for=\message\>Message</label>\n <textarea id=\message\ name=\message\ placeholder=\I bring snacks and scritches...\></textarea>\n </div>\n <div class=\full\>\n <button class=\btn\ type=\button\ aria-disabled=\true\ title=\Demo only\>Send (demo)</button>\n </div>\n </form>\n </div>\n </section>\n </main>\n\n <footer>\n Made with ❤ for Mittens • © <span id=\year\>2025</span>\n </footer>\n</body>\n</html>\n\n\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from: