.ns-page { font-family: system-ui, sans-serif; background: #0D0D0D; color: #fff; margin: 0; padding: 0; } .ns-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid #1A1A1A; } .ns-logo { font-size: 1.25rem; font-weight: 700; color: #fff; text-decoration: none; } .ns-nav a { color: #888; text-decoration: none; margin-left: 1.5rem; font-size: 0.9rem; } .ns-nav a.cta { background: #F26207; color: #fff; padding: 0.5rem 1rem; border-radius: 8px; } .ns-hero { text-align: center; padding: 5rem 2rem 3rem; max-width: 56rem; margin: 0 auto; } .ns-badge { display: inline-block; background: rgba(242,98,7,0.1); border: 1px solid rgba(242,98,7,0.3); color: #F26207; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2rem; } .ns-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.1; margin: 0 0 1.5rem; } .ns-hero p { font-size: 1.125rem; color: #888; max-width: 40rem; margin: 0 auto 2.5rem; line-height: 1.6; } .ns-cta { display: inline-block; background: #F26207; color: #fff; padding: 1rem 2rem; border-radius: 12px; font-weight: 700; text-decoration: none; font-size: 1rem; } .ns-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; color: #555; font-size: 0.875rem; } .ns-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; padding: 3rem 2rem; border-top: 1px solid #1A1A1A; border-bottom: 1px solid #1A1A1A; background: #111; text-align: center; } .ns-stats .stat-value { font-size: 2rem; font-weight: 700; display: block; } .ns-stats .stat-label { color: #888; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .ns-section { max-width: 72rem; margin: 0 auto; padding: 5rem 2rem; } .ns-section h2 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1rem; text-align: center; } .ns-section .sub { color: #888; text-align: center; max-width: 36rem; margin: 0 auto 3rem; font-size: 1.05rem; line-height: 1.6; } .ns-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .ns-feature { background: #161616; border: 1px solid #2A2A2A; border-radius: 1rem; padding: 2rem; } .ns-feature h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.75rem; } .ns-feature p { color: #888; font-size: 0.9rem; margin: 0; line-height: 1.6; } .ns-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem; } .ns-step { text-align: center; } .ns-step .num { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: #161616; border: 2px solid #2A2A2A; font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; } .ns-step h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; } .ns-step p { color: #888; font-size: 0.875rem; margin: 0; } .ns-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 52rem; margin: 0 auto; } .ns-plan { background: #161616; border-radius: 1.5rem; padding: 2rem; } .ns-plan.featured { border: 1px solid #F26207; } .ns-plan.dim { border: 1px solid #2A2A2A; opacity: 0.65; } .ns-plan h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; } .ns-plan .price { font-size: 2.25rem; font-weight: 900; } .ns-plan .per { color: #888; font-size: 0.875rem; } .ns-plan ul { list-style: none; padding: 0; margin: 1.5rem 0; color: #ccc; font-size: 0.875rem; } .ns-plan ul li { padding: 0.3rem 0; } .ns-plan ul li::before { content: "✓ "; color: #F26207; font-weight: 700; } .ns-plan.dim ul li { color: #888; } .ns-plan.dim ul li::before { color: #444; } .ns-plan a { display: block; text-align: center; background: #F26207; color: #fff; padding: 0.75rem; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.9rem; } .ns-footer { border-top: 1px solid #1A1A1A; background: #0A0A0A; padding: 2rem; text-align: center; color: #555; font-size: 0.8rem; } .ns-footer a { color: #888; text-decoration: none; margin: 0 0.75rem; }

xilxo

AI-Powered Web Builder

Describe it. Build it. Ship it.

Tell our AI what you want to build. Watch it write the code. Publish to a live URL in seconds. The fastest way to turn ideas into reality.

Start building for free →

✓ No credit card required ✓ Free forever plan ✓ Live URL instantly

10,000+ Apps Built

< 30s Average Build Time

100% Free to Start

Code without coding

The only builder where you don't drag and drop. You just talk, and it builds.

AI That Actually Understands

Describe your idea in plain English. The AI understands context, layout, and functionality, generating clean HTML, CSS, and JS.

Live Preview Instantly

See your site rendered in real-time as the AI builds it. Request changes in the chat and watch the preview update instantly.

Publish With One Click

When you're happy with the result, hit publish. You get a real public URL immediately that you can share with anyone.

How it works

From idea to live website in under a minute.

Describe your idea

Type what you want to build in the chat interface.

AI writes the code

HTML, CSS, and JS are generated and rendered live.

Publish & share

Your site goes live at a public URL with one click.

Simple, transparent pricing

Start building for free. Upgrade when you need more power.

Hobby

$0 /month

Perfect for trying out ideas and building small projects.

3 active projects
Unlimited AI chat generation
Live preview capabilities
Free xilxo.com URL on publish
Community support

Start for free

Pro (Coming Soon)

$9 /month

For power users who need custom domains and priority access.

Unlimited projects
Priority AI processing (GPT-4)
Custom domains
Remove xilxo branding
Private projects
Export code