@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>Minimal Landing — HTML & CSS Only</title>\n <meta name=\description\ content=\A clean, responsive landing page built with only HTML & CSS, inspired by a modern SaaS site.\ />\n\n <style>\n *, *::before, *::after box-sizing: border-box; \n html, body margin: 0; padding: 0; \n img, svg display: block; max-width: 100%; height: auto; \n button, input, select, textarea font: inherit; \n\n :root\n --bg: #0b0c10;\n --card: #111218;\n --muted: #8b8d96;\n --text: #e9eaf0;\n --link: #9be8ff;\n --brand: #7cf8a8;\n --brand-ink: #0f2a1d;\n --border: #1a1b22;\n --ring: #7cf8a8;\n --shadow: 0 10px 30px rgba(0,0,0,.35);\n --radius: 18px;\n --container: 1120px;\n \n body font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, \Helvetica Neue\, Arial, \Apple Color Emoji\, \Segoe UI Emoji\; color: var(--text); background: radial-gradient(1200px 800px at 80% -10%, #122015 0%, transparent 60%), radial-gradient(900px 600px at -10% 20%, #0f1429 0%, transparent 60%), var(--bg); line-height: 1.55; \n\n .container width: min(100% - 32px, var(--container)); margin-inline: auto; \n .stack > * + * margin-top: var(--space, 1rem); \n .grid display: grid; gap: 24px; \n .center display: grid; place-items: center; \n .pill padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--muted); font-weight: 600; letter-spacing: .15px; \n .eyebrow color: var(--muted); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; \n .muted color: var(--muted); \n\n header position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(8px); background: linear-gradient(180deg, rgba(11,12,16,.7), rgba(11,12,16,.5)); border-bottom: 1px solid var(--border); \n .nav display: flex; align-items: center; justify-content: space-between; padding: 14px 0; \n .brand display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .3px; \n .brand-logo width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), #b5f8d1 60%); color: var(--brand-ink); font-weight: 900; box-shadow: var(--shadow); \n\n .nav a color: var(--text); text-decoration: none; opacity: .9; \n .nav .links display: none; gap: 20px; align-items: center; \n .cta display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: #0b1711; border: 0; padding: 10px 16px; border-radius: 12px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); text-decoration: none; \n .cta:focus outline: 2px solid var(--ring); outline-offset: 2px; \n\n @media (min-width: 860px) .nav .links display: flex; \n\n .hero position: relative; padding: 72px 0 48px; border-bottom: 1px solid var(--border); overflow: clip; \n .glow position: absolute; inset: -10% -10% auto -10%; height: 400px; background: radial-gradient(600px 200px at 50% 0%, rgba(124,248,168,.3), transparent 70%); pointer-events: none; \n .hero h1 font-size: clamp(40px, 7vw, 72px); line-height: 1.02; margin: 10px 0 16px; letter-spacing: -.02em; \n .hero p font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); max-width: 72ch; \n\n .hero-actions display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; \n .ghost display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); background: rgba(255,255,255,.03); \n\n .marquee position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03)); overflow: hidden; \n .marquee-track display: flex; gap: 40px; padding: 14px 0; width: max-content; animation: slide 30s linear infinite; \n .marquee-track span color: var(--muted); opacity: .9; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; \n @keyframes slide from transform: translateX(0); to transform: translateX(-50%); \n\n section padding: 64px 0; \n .card background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); \n .features grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); \n .icon width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #151823; border: 1px solid var(--border); \n h2 font-size: clamp(28px, 5vw, 40px); letter-spacing: -.01em; margin: 0 0 12px; \n h3 margin: 12px 0 8px; \n\n .quote text-align: center; \n blockquote margin: 0; font-size: clamp(18px, 3vw, 24px); color: #dfe1ea; \n cite display: block; margin-top: 10px; color: var(--muted); font-style: normal; \n\n .pricing grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; \n .price-card display: grid; align-content: start; gap: 12px; \n .price font-size: 42px; font-weight: 800; letter-spacing: -.01em; \n .check display: inline-block; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--brand); vertical-align: -3px; position: relative; \n .check::after content: \\; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); \n\n .faq max-width: 900px; margin-inline: auto; \n details border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,.02); \n details + details margin-top: 12px; \n summary cursor: pointer; font-weight: 700; \n\n footer border-top: 1px solid var(--border); padding: 32px 0 64px; color: var(--muted); \n .footer-grid display: grid; gap: 18px; grid-template-columns: 1fr; \n @media (min-width: 860px) .footer-grid grid-template-columns: 1.2fr .8fr .8fr .8fr; \n .footer-grid a color: var(--muted); text-decoration: none; \n\n .badges display: flex; flex-wrap: wrap; gap: 12px; \n .badge padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--muted); font-weight: 600; \n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\>\n <a class=\brand\ href=\https://didicherednyk.site/\>\n <span class=\brand-logo\>▲</span>\n <span>Minimal Landing</span>\n </a>\n <nav class=\links\>\n <a href=\https://didicherednyk.site/\>Features</a>\n <a href=\https://didicherednyk.site/\>Pricing</a>\n <a href=\https://didicherednyk.site/\>FAQ</a>\n <a class=\cta\ href=\https://didicherednyk.site/\>Get started</a>\n </nav>\n </div>\n </header>\n\n <section class=\hero\>\n <div class=\glow\ aria-hidden=\true\></div>\n <div class=\container\>\n <span class=\pill\>No JS • No build tools • Just HTML & CSS</span>\n <h1>Ship a focused landing page that explains your value in seconds.</h1>\n <p>Use this starter as a clean-room, copyright‑safe base inspired by modern SaaS sites. Drop in your own brand, swap the copy, and you’re good to go.</p>\n <div class=\hero-actions\>\n <a class=\cta\ href=\https://didicherednyk.site/\>Create your page</a>\n <a class=\ghost\ href=\https://didicherednyk.site/\>See features</a>\n </div>\n <div class=\badges\ style=\margin-top:22px\>\n <span class=\badge\>Fast loads</span>\n <span class=\badge\>Responsive</span>\n <span class=\badge\>Accessible</span>\n <span class=\badge\>SEO‑friendly</span>\n </div>\n </div>\n </section>\n\n <div class=\marquee\ aria-hidden=\true\>\n <div class=\marquee-track\>\n <span>Focus on outcomes</span>\n <span>Explain, don’t overwhelm</span>\n <span>Clear pricing</span>\n <span>Real benefits</span>\n <span>Credible proof</span>\n <span>Simple call‑to‑action</span>\n </div>\n </div>\n\n <section id=\features\>\n <div class=\container stack\ style=\--space: 28px\>\n <div class=\stack\ style=\--space: 10px\>\n <span class=\eyebrow\>Why this template</span>\n <h2>Everything you need, nothing you don’t.</h2>\n <p class=\muted\>Keep the message tight: what it is, who it’s for, how it helps.</p>\n </div>\n <div class=\grid features\>\n <article class=\card\>\n <div class=\icon\>💡</div>\n <h3>Crystal‑clear messaging</h3>\n <p class=\muted\>Hero, subhead, and actions positioned for clarity — no fluff.</p>\n </article>\n <article class=\card\>\n <div class=\icon\>⚡</div>\n <h3>Performance first</h3>\n <p class=\muted\>No render‑blocking scripts, no heavy frameworks.</p>\n </article>\n <article class=\card\>\n <div class=\icon\>📱</div>\n <h3>Responsive out of the box</h3>\n <p class=\muted\>Looks great everywhere.</p>\n </article>\n <article class=\card\>\n <div class=\icon\>♿</div>\n <h3>Accessible by default</h3>\n <p class=\muted\>Proper semantic tags, good contrast, and focus states.</p>\n </article>\n </div>\n </div>\n </section>\n\n <section class=\quote\>\n <div class=\container\>\n <div class=\card\>\n <blockquote>“This template helped us launch a crisp landing in under an hour.”</blockquote>\n <cite>— Happy Customer</cite>\n </div>\n </div>\n </section>\n\n <section id=\pricing\>\n <div class=\container stack\ style=\--space: 28px\>\n <div class=\stack\ style=\--space: 10px\>\n <span class=\eyebrow\>Simple pricing</span>\n <h2>Pick a plan and grow.</h2>\n <p class=\muted\>Transparent and flexible.</p>\n </div>\n\n <div class=\grid pricing\>\n <article class=\card price-card\>\n <span class=\pill\>Starter</span>\n <div class=\price\>$0<span class=\muted\ style=\font-size:16px\>/mo</span></div>\n <p class=\muted\>Ideal for personal projects.</p>\n <p><span class=\check\></span>1 project</p>\n <p><span class=\check\></span>Basic components</p>\n <a class=\ghost\ href=\https://didicherednyk.site/\>Use free</a>\n </article>\n\n <article class=\card price-card\ style=\border-color:#2a4737; background: linear-gradient(180deg, rgba(124,248,168,.09), rgba(255,255,255,.01));\>\n <span class=\pill\ style=\border-color:#2a4737\>Pro</span>\n <div class=\price\>$19<span class=\muted\ style=\font-size:16px\>/mo</span></div>\n <p class=\muted\>For startups and indie hackers.</p>\n <p><span class=\check\></span>Unlimited projects</p>\n <p><span class=\check\></span>Email support</p>\n <a class=\cta\ href=\https://didicherednyk.site/\>Go Pro</a>\n </article>\n\n <article class=\card price-card\>\n <span class=\pill\>Team</span>\n <div class=\price\>$49<span class=\muted\ style=\font-size:16px\>/mo</span></div>\n <p class=\muted\>Best for teams who want collaboration.</p>\n <p><span class=\check\></span>3 seats included</p>\n <p><span class=\check\></span>Priority support</p>\n <a class=\ghost\ href=\https://didicherednyk.site/\>Contact sales</a>\n </article>\n </div>\n </div>\n </section>\n\n <section id=\faq\>\n <div class=\container stack\ style=\--space: 18px\>\n <div class=\stack\ style=\--space: 10px; text-align:center\>\n <span class=\eyebrow\>FAQ</span>\n <h2>Questions, answered.</h2>\n </div>\n <div class=\faq stack\>\n <details>\n <summary>Can I use this for commercial projects?</summary>\n <p class=\muted\>Yes. Replace the copy with your own content.</p>\n </details>\n <details>\n <summary>Is JavaScript required?</summary>\n <p class=\muted\>No. This page is built with pure HTML & CSS.</p>\n </details>\n <details>\n <summary>How do I customize it?</summary>\n <p class=\muted\>Tweak the CSS variables at the top of the file.</p>\n </details>\n </div>\n </div>\n </section>\n\n <footer\n\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from: