QR Code Generators

<div class="uk-qr-basic">
    <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://webnexa.com" alt="QR Code" class="uk-qr-img">
</div>

<style>
    .uk-qr-basic {
        display: inline-block; padding: 1rem; background: #fff;
        border: 1px solid #e2e8f0; border-radius: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }
    .uk-qr-img { display: block; width: 150px; height: 150px; }
</style>

<div class="uk-qr-card">
    <div class="uk-qr-card-header">
        <img src="https://i.pravatar.cc/100?img=11" class="uk-qr-avatar">
        <div class="uk-qr-info">
            <div class="uk-qr-name">Jane Cooper</div>
            <div class="uk-qr-role">Frontend Engineer</div>
        </div>
    </div>
    <div class="uk-qr-card-body">
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=mailto:[email protected]" class="uk-qr-img">
        <div class="uk-qr-scan-text">Scan to contact me</div>
    </div>
</div>

<style>
    .uk-qr-card {
        max-width: 250px; background: #fff; border: 1px solid #e2e8f0;
        border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }
    .uk-qr-card-header {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 1rem; border-bottom: 1px solid #f1f5f9;
    }
    .uk-qr-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
    .uk-qr-name { font-weight: 600; font-size: 0.95rem; color: #0f172a; }
    .uk-qr-role { font-size: 0.75rem; color: #64748b; }
    .uk-qr-card-body { padding: 1.5rem; text-align: center; background: #f8fafc; }
    .uk-qr-img { width: 120px; height: 120px; margin-bottom: 1rem; border-radius: 0.5rem; }
    .uk-qr-scan-text { font-size: 0.8rem; font-weight: 600; color: #64748b; }
</style>

<div class="uk-qr-product">
    <div class="uk-qr-prod-title">Wireless Headphones</div>
    <div class="uk-qr-prod-price">$129.99</div>
    <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=SKU-8942" class="uk-qr-img">
    <div class="uk-qr-prod-sku">SKU: 8942-XZ</div>
</div>

<style>
    .uk-qr-product {
        display: inline-flex; flex-direction: column; align-items: center;
        padding: 1.5rem; background: #fff; border: 1px dashed #cbd5e1;
        border-radius: 0.5rem; max-width: 200px; text-align: center;
    }
    .uk-qr-prod-title { font-weight: 700; font-size: 0.95rem; color: #0f172a; margin-bottom: 0.25rem; }
    .uk-qr-prod-price { font-size: 1.1rem; font-weight: 800; color: #1e3a8a; margin-bottom: 1rem; }
    .uk-qr-img { width: 100px; height: 100px; margin-bottom: 0.75rem; }
    .uk-qr-prod-sku { font-size: 0.75rem; font-family: monospace; color: #64748b; }
</style>

<div class="uk-qr-action">
    <img src="https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=https://webnexa.com/download" class="uk-qr-img">
    <div class="uk-qr-action-text">Scan to download the app</div>
    <button class="uk-qr-dl-btn"><i class="fas fa-download"></i> Save Image</button>
</div>

<style>
    .uk-qr-action {
        display: inline-flex; flex-direction: column; align-items: center;
        padding: 1.5rem; background: #fff; border: 1px solid #e2e8f0;
        border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .uk-qr-img { width: 140px; height: 140px; margin-bottom: 1rem; }
    .uk-qr-action-text { font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 1rem; }
    .uk-qr-dl-btn {
        background: #eef2f8; color: #1e3a8a; border: none;
        padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8rem;
        font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;
        transition: background 0.15s;
    }
    .uk-qr-dl-btn:hover { background: #dbeafe; }
</style>

<div class="uk-qr-gradient-wrap">
    <div class="uk-qr-gradient-inner">
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=https://webnexa.com" style="width: 100%; height: 100%;">
    </div>
</div>

<style>
    .uk-qr-gradient-wrap {
        display: inline-block; padding: 4px;
        background: linear-gradient(135deg, #1e3a8a, #a855f7);
        border-radius: 1rem; box-shadow: 0 8px 20px rgba(30,58,138,0.2);
    }
    .uk-qr-gradient-inner {
        background: #fff; padding: 1rem; border-radius: 0.85rem;
    }
</style>