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

Nstar Creative

Nstar Artsy

NStar CONSISTENCY 

Nstar black and gold crystal diamond world class workout gear.

Nstar Workout gear

nstar creative studio

make a website design business, video editing , content creations, metro Atlanta 

Satoshi

Figtree

Rubik

Zodiak