Element Armory
Product
Features
Pricing
Examples
Add to Chrome - It's
Free
Copy HTML
Copy CSS
Copy Prompt
Capture your own elements →
Add to Chrome - It's
Free
HTML
<section class="hero"> <div class="hero-inner"> <span class="eyebrow">Now in public beta</span> <h1 class="headline">Build UI faster<br>than ever before</h1> <p class="subtitle">Capture any element from any website and get clean, ready-to-use HTML and CSS in seconds.</p> <div class="cta-row"> <a href="#" class="btn btn-primary">Get Started Free</a> <a href="#" class="btn btn-ghost">See examples</a> </div> <p class="social">Trusted by 2,400+ developers</p> </div> </section>
CSS
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, sans-serif; background: #ffffff; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .hero { width: 100%; } .hero-inner { max-width: 600px; margin: 0 auto; padding: 48px 32px; text-align: center; } .eyebrow { display: inline-block; background: #eff6ff; color: #3b82f6; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin-bottom: 20px; letter-spacing: 0.04em; text-transform: uppercase; } .headline { font-size: 40px; font-weight: 800; color: #111827; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; } .subtitle { font-size: 16px; color: #6b7280; line-height: 1.6; max-width: 420px; margin: 0 auto 28px; } .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .btn { display: inline-flex; align-items: center; text-decoration: none; border-radius: 8px; padding: 11px 22px; font-size: 14px; font-weight: 600; font-family: inherit; transition: all 150ms; cursor: pointer; border: none; } .btn-primary { background: #3b82f6; color: #fff; } .btn-primary:hover { background: #2563eb; } .btn-ghost { background: transparent; color: #374151; border: 1px solid #d1d5db; } .btn-ghost:hover { background: #f9fafb; } .social { font-size: 12px; color: #9ca3af; }