Embed

<header class="vstar-header">
  <style>
    :root{
      --nstar-bg:#000000;
      --nstar-pink:#ff2fb3;
      --nstar-green:#39ff14;
      --nstar-white:#ffffff;
    }

    .vstar-header{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 15% 0%, rgba(57,255,20,.14), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(255,47,179,.12), transparent 60%),
        var(--nstar-bg);
      color: var(--nstar-white);
      padding: 18px 14px 10px;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .vstar-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .vstar-logo{
      margin:0; font-weight: 900; font-size: clamp(28px, 5.6vw, 44px); letter-spacing:.5px; text-transform: uppercase; color: var(--nstar-white);
      text-shadow: 0 0 6px rgba(255,255,255,.85), 0 0 18px var(--nstar-green), 0 0 36px var(--nstar-pink);
    }

    .vstar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .vstar-btn{
      display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:800;
      border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      box-shadow: 0 0 12px rgba(57,255,20,.25), inset 0 0 0 1px rgba(255,255,255,.06);
      color: var(--nstar-white);
    }
    .vstar-btn.primary{ background: linear-gradient(90deg, rgba(57,255,20,.25), rgba(255,47,179,.25)); }
    .vstar-btn.ghost{ background: rgba(255,255,255,.06); }
    .vstar-btn:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 0 18px rgba(255,47,179,.35); }

    .vstar-ico{ width:18px; height:18px; display:inline-block; }

    .vstar-search{
      display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    }
    .vstar-search input{ background: transparent; border:0; color: var(--nstar-white); outline: none; width: 180px; }
    .vstar-search input::placeholder{ color: rgba(255,255,255,.7); }

    .cat-wrap{
      margin-top:14px; position:relative; overflow:hidden;
      mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
      border:1px solid rgba(255,255,255,.08); border-radius:14px; background: rgba(255,255,255,.02);
    }
    .cat-track{ display:flex; gap:16px; padding:10px 0; width:max-content; animation: vstar-marquee 22s linear infinite; }
    .cat-track:hover{ animation-play-state: paused; cursor:pointer; }
    @keyframes vstar-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

    .cat-chip{
      display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; text-decoration:none; color: var(--nstar-white);
      background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14); white-space: nowrap; font-weight:800;
      box-shadow: inset 0 0 24px rgba(57,255,20,.12), 0 0 12px rgba(255,47,179,.12);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .cat-chip:hover{ transform: translateY(-1px); box-shadow: 0 0 16px rgba(57,255,20,.35), 0 0 24px rgba(255,47,179,.35); border-color: rgba(255,255,255,.3); }
    .cat-dot{
      width:10px; height:10px; border-radius:50%; flex:0 0 10px;
      background: radial-gradient(circle, var(--nstar-green) 0%, var(--nstar-pink) 100%);
      box-shadow: 0 0 10px var(--nstar-green), 0 0 10px var(--nstar-pink);
    }

    .info-strip{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px 4px 0; font-size:14px; opacity:.95; }
    .info-strip a{ color: var(--nstar-white); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.35); }
    .info-strip a:hover{ color: var(--nstar-green); }

    @media (max-width:680px){ .vstar-search input{ width:120px; } }
    @media (prefers-reduced-motion: reduce){ .cat-track{ animation:none; } }
  </style>

  <div class="vstar-top">
    <h1 class="vstar-logo">NSTAR Wear</h1>

    <form class="vstar-search" role="search">
      <svg class="vstar-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <circle cx="11" cy="11" r="7" stroke-width="2"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65" stroke-width="2"></line>
      </svg>
      <input type="search" name="q" placeholder="Search tees hoodies sets" aria-label="Search store">
    </form>

    <nav class="vstar-actions" aria-label="Quick actions">
      <a class="vstar-btn ghost" data-link="account">
        <svg class="vstar-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="8" r="4" stroke-width="2"></circle>
          <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke-width="2"></path>
        </svg>
        Account
      </a>
      <a class="vstar-btn ghost" data-link="wishlist">
        <svg class="vstar-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M12 21s-7-4.35-9-8.5C1 8 3.5 5.5 6.5 5.5 8.24 5.5 9.91 6.44 11 7.86 12.09 6.44 13.76 5.5 15.5 5.5 18.5 5.5 21 8 21 12.5 19 16.65 12 21 12 21z" stroke-width="2"></path>
        </svg>
        Wishlist
      </a>
      <a class="vstar-btn primary" data-link="shop">
        <svg class="vstar-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M3 12h18" stroke-width="2"></path>
          <path d="M3 6h18" stroke-width="2"></path>
          <path d="M3 18h18" stroke-width="2"></path>
        </svg>
        Shop now
      </a>
      <a class="vstar-btn ghost" data-link="cart" aria-label="Cart">
        <svg class="vstar-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="9" cy="20" r="2" stroke-width="2"></circle>
          <circle cx="17" cy="20" r="2" stroke-width="2"></circle>
          <path d="M5 6h16l-2 9H7L5 6z" stroke-width="2"></path>
        </svg>
        Cart
      </a>
    </nav>
  </div>

  <div class="cat-wrap" aria-label="Shop by category">
    <div class="cat-track" role="list">
      <a class="cat-chip" role="listitem" data-link="new"><span class="cat-dot"></span>New Arrivals</a>
      <a class="cat-chip" role="listitem" data-link="tees"><span class="cat-dot"></span>Tees</a>
      <a class="cat-chip" role="listitem" data-link="hoodies"><span class="cat-dot"></span>Hoodies</a>
      <a class="cat-chip" role="listitem" data-link="workout"><span class="cat-dot"></span>Workout Gear</a>
      <a class="cat-chip" role="listitem" data-link="streetwear"><span class="cat-dot"></span>Streetwear</a>
      <a class="cat-chip" role="listitem" data-link="women"><span class="cat-dot"></span>Women</a>
      <a class="cat-chip" role="listitem" data-link="men"><span class="cat-dot"></span>Men</a>
      <a class="cat-chip" role="listitem" data-link="kids"><span class="cat-dot"></span>Kids</a>
      <a class="cat-chip" role="listitem" data-link="accessories"><span class="cat-dot"></span>Accessories</a>
      <a class="cat-chip" role="listitem" data-link="sale"><span class="cat-dot"></span>Sale</a>

      <a class="cat-chip" role="listitem" data-link="new"><span class="cat-dot"></span>New Arrivals</a>
      <a class="cat-chip" role="listitem" data-link="tees"><span class="cat-dot"></span>Tees</a>
      <a class="cat-chip" role="listitem" data-link="hoodies"><span class="cat-dot"></span>Hoodies</a>
      <a class="cat-chip" role="listitem" data-link="workout"><span class="cat-dot"></span>Workout Gear</a>
      <a class="cat-chip" role="listitem" data-link="streetwear"><span class="cat-dot"></span>Streetwear</a>
      <a class="cat-chip" role="listitem" data-link="women"><span class="cat-dot"></span>Women</a>
      <a class="cat-chip" role="listitem" data-link="men"><span class="cat-dot"></span>Men</a>
      <a class="cat-chip" role="listitem" data-link="kids"><span class="cat-dot"></span>Kids</a>
      <a class="cat-chip" role="listitem" data-link="accessories"><span class="cat-dot"></span>Accessories</a>
      <a class="cat-chip" role="listitem" data-link="sale"><span class="cat-dot"></span>Sale</a>
    </div>
  </div>

  <div class="info-strip">
    <div>Free ship on orders over 75. New drop each Friday. Easy returns.</div>
    <div>
      <a data-link="size">Size guide</a> ·
      <a data-link="help">Help center</a> ·
      <a data-link="track">Track order</a>
    </div>
  </div>

  <script>
    (function(){
      const root = document.currentScript.closest('.vstar-header');

      const cfg = {
        base: 'https://nstarcreation.com',   // change this to your store domain
        map: {
          shop: '/collections/all',
          account: '/account',
          wishlist: '/pages/wishlist',
          cart: '/cart',
          search: '/search',
          new: '/collections/new',
          tees: '/collections/tees',
          hoodies: '/collections/hoodies',
          workout: '/collections/workout',
          streetwear: '/collections/streetwear',
          women: '/collections/women',
          men: '/collections/men',
          kids: '/collections/kids',
          accessories: '/collections/accessories',
          sale: '/collections/sale',
          size: '/pages/size-guide',
          help: '/pages/help',
          track: '/pages/track'
        }
      };

      root.querySelectorAll('a[data-link]').forEach(a=>{
        const key = a.getAttribute('data-link');
        const path = cfg.map[key] || '/';
        a.setAttribute('href', cfg.base + path);
      });

      const form = root.querySelector('form.vstar-search');
      if(form) form.setAttribute('action', cfg.base + (cfg.map.search || '/search'));
    })();
  </script>

  <noscript>
    <div style="margin-top:8px;">Shop tees hoodies sets and more.</div>
  </noscript>
</header>

Pricing Table

Nstar Creations

GOLD OLYMPIC ELITE  MATERIAL" STREET MOTIVATION" CONSISTENCY JACKET! CUSTOM BY NSTAR HIM-SELF!

Nstar Workout gear

Nstar tier for reliable growth! TOP TIER "TRUST THE PROCESS" NSTAR CUSTOM HAND-MADE WITH YELLOW DIAMOND & PEARL GLISS!

Nstar " trust the process " LETS GET IT!!

HEART SURGEON MOTIVATIONAL " NSTAR WORKOUT GEAR"

Nstar "HEART SURGEON"

NStar CONSISTENCY 

Unlock your creative flair with our exclusive apparel collection, designed to elevate every artistic journey.

Nstar Creations ARTSY GEAR

NEON-GOLD OLYMPIC ELITE  MATERIAL" STREET MOTIVATION" CONSISTENCY JACKET! CUSTOM BY NSTAR HIM-SELF!

Nstar tier for reliable growth! TOP TIER "ARTSY DRIP" NSTAR CUSTOM HAND-MADE WITH PINK DIAMOND & PEARL GLISS!

Nstar " trust the ARTIST " LETS GET IT!!

CUSTOM CONSISTENCY SHIRT STREET WISDOM!SPECIAL EDITION 2 TONE DPUBLE LAYER COATED SPLASH COLORS 

CONSISTENCY  "NSTAR"

Nstar Creativity artsy "ART "theme shirt
GRAPHIC STARS

Nstar Creative

Nstar Artsy

Nstar black and gold crystal diamond world class workout gear.

BUSINESS READY NSTAR ATHE;ETIC GOLF SPORTING SHORTS.

CONSISTENCY SIGNATURE STRIPED SWEATEAR AVAILABLE CUSTOM IN LL SIZES

NStar FIRE STAR JOGGER SWEAT PANTS . AVAILABLE IN ALL SIZES AND CUSTOM  COLORS.

Nstar PINK and diamond world LADIES SWEAT PANTS
.

Nstar LADIES (SWEAT PANTS )

LADIES BLACK AND PINK NSTAR SWEAT PANTS WITH DIAMOND PEARL MATERIAL VINYL


NSTAR SIGNATURE VIP EDITION STAR POWER JACKET MADE BY THE OWNER HIS SELF!

NStar FIRE CREATIONS SHIRT AVAILABLE IN ALL SIZES AND CUSTOM  COLORS.

NSTAR CREATIONS

NSTAR THERMAL SUPER JACKET CUSTOMIZE WITH NSTAR SIGNATURE!
.