Video

Whether you're starting from zero or leveling up your online business, this course system gives you the blueprint. 

Start Your Digital Empire

Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>NSTAR Creative Studios — Courses Carousel</title>

  <style>
    /* =========  THEME  ========= */
    :root{
      --bg:#0a0b10;
      --panel:#111320;
      --ink:#e7f5ff;
      --neon-green:#8bff3d;
      --neon-pink:#ff3df0;
      --neon-cyan:#3df6ff;
      --neon-yellow:#ffe53d;
      --ring: 0 0 18px rgba(139,255,61,.55), 0 0 44px rgba(255,61,240,.25);
    }

    /* =========  RESET  ========= */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--ink);
      background: radial-gradient(1000px 600px at 20% -10%, rgba(255,61,240,.15), transparent 55%),
                  radial-gradient(900px 500px at 90% 110%, rgba(61,246,255,.12), transparent 60%),
                  var(--bg);
    }

    /* =========  SECTION WRAPPER  ========= */
    .nstar-hero{
      max-width: 1200px;
      margin: 48px auto;
      padding: 12px;
    }

    .heading{
      text-align:center;
      letter-spacing:.6px;
      margin: 0 0 14px 0;
      font-weight:800;
      font-size: clamp(24px, 3.5vw, 44px);
      text-transform: uppercase;
      color: #fff;
      text-shadow:
        0 0 12px rgba(255,61,240,.35),
        0 0 28px rgba(61,246,255,.25);
    }

    .sub{
      text-align:center;
      color:#cfd8e3;
      opacity:.9;
      margin: 0 0 24px 0;
      font-size: clamp(14px, 1.6vw, 18px);
    }

    /* =========  CAROUSEL SHELL  ========= */
    .carousel{
      position:relative;
      overflow:hidden;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 20px 60px rgba(0,0,0,.55);
      isolation:isolate;
    }

    /* subtle scanlines for cyber feel */
    .carousel::after{
      content:"";
      position:absolute; inset:0;
      background: repeating-linear-gradient(
        to bottom, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px,
        transparent 2px, transparent 4px);
      mix-blend-mode: soft-light;
      pointer-events:none;
      opacity:.25;
    }

    .track{
      display:flex;
      width:100%;
      will-change: transform;
      transition: transform .8s cubic-bezier(.2,.7,.2,1);
    }

    /* =========  SLIDE  ========= */
    .slide{
      position:relative;
      min-width:100%;
      height: clamp(320px, 52vw, 460px);
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      padding: clamp(18px, 4vw, 40px);
      align-items:center;
    }

    /* gradient neon halo behind content */
    .slide::before{
      content:"";
      position:absolute; inset:-10%;
      background:
        radial-gradient(600px 280px at 20% 30%, rgba(139,255,61,.18), transparent 60%),
        radial-gradient(700px 340px at 80% 70%, rgba(255,61,240,.18), transparent 65%);
      filter: blur(10px);
      z-index:0;
    }

    .copy{ z-index:1; }
    .tag{
      display:inline-block;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      color:#0b0d14;
      background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
      box-shadow: 0 0 22px rgba(139,255,61,.45);
      margin-bottom:12px;
    }

    .title{
      margin:0 0 8px 0;
      font-size: clamp(26px, 4.2vw, 48px);
      font-weight:900;
      line-height:1.02;
      text-transform:uppercase;
      text-shadow:
        0 0 10px rgba(139,255,61,.35),
        0 0 22px rgba(255,61,240,.35);
    }

    .blurb{
      margin:8px 0 0 0;
      color:#dbe6ff;
      opacity:.92;
      max-width: 56ch;
      line-height:1.55;
      font-size: clamp(14px, 1.7vw, 17px);
    }

    /* right side art block (no links, purely decorative) */
    .art{
      position:relative;
      height:100%;
      border-radius:16px;
      background:
        radial-gradient(200px 120px at 70% 30%, rgba(255,61,240,.35), transparent 60%),
        radial-gradient(280px 160px at 40% 70%, rgba(61,246,255,.35), transparent 70%),
        linear-gradient(135deg, #0f1224, #0a0d18);
      box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 20px 60px rgba(0,0,0,.55);
      display:grid;
      place-items:center;
      overflow:hidden;
    }

    /* animated geometric “blimpie” arrow line */
    .pulse{
      width:84%;
      height:8px;
      border-radius:8px;
      background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan), var(--neon-green));
      filter: drop-shadow(0 0 16px rgba(255,61,240,.6));
      position:relative;
      overflow:hidden;
    }
    .pulse::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
      width:22%;
      animation: sweep 2.6s linear infinite;
      mix-blend-mode: screen;
    }
    @keyframes sweep{
      from{ transform: translateX(-120%); }
      to{ transform: translateX(520%); }
    }

    /* =========  DOTS + PROGRESS  ========= */
    .dots{
      position:absolute; left:50%; bottom:14px; transform: translateX(-50%);
      display:flex; gap:10px; z-index:2;
    }
    .dot{
      width:9px; height:9px; border-radius:50%;
      background: rgba(255,255,255,.28);
      box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset;
      pointer-events:none; /* purely visual, no clicks */
    }
    .dot.active{
      background: var(--neon-green);
      box-shadow: 0 0 8px rgba(139,255,61,.9), 0 0 18px rgba(255,61,240,.6);
    }

    .progress{
      position:absolute; left:14px; right:14px; bottom:0;
      height:3px; border-radius:3px;
      background: rgba(255,255,255,.12);
      overflow:hidden;
    }
    .bar{
      height:100%; width:0%;
      background: linear-gradient(90deg, var(--neon-green), var(--neon-pink));
      box-shadow: 0 0 16px rgba(139,255,61,.7);
      transition: width 0.1s linear;
    }

    /* =========  RESPONSIVE  ========= */
    @media (max-width: 820px){
      .slide{ grid-template-columns: 1fr; height: clamp(360px, 80vw, 540px); }
      .art{ order:-1; height: 38%; }
      .pulse{ width:72% }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      .track{ transition:none }
      .pulse::after{ animation: none }
    }
  </style>
</head>
<body>
  <section class="nstar-hero" aria-label="NSTAR Creative Studios learning section banners">
    <h1 class="heading">NSTAR Creative Studios — Learning</h1>
    <p class="sub">Bright neon. Big energy. A quick look at our showcase courses — **for display only**. No links, just vibes.</p>

    <div class="carousel" id="carousel" aria-roledescription="carousel" aria-label="Course banners">
      <div class="track" id="track" style="transform: translateX(0%)">
        
        <article class="slide" aria-label="Fitness course banner">
          <div class="copy">
            <span class="tag">Fitness • Momentum</span>
            <h2 class="title">The 14-Day Fasting Reset</h2>
            <p class="blurb">
              Drop the weight and pick up discipline. Sharp focus, clean energy, and a
              simple rhythm you can actually keep. Hydrate, breathe, and level up.
            </p>
          </div>
          <div class="art" aria-hidden="true">
            <div class="pulse" style="filter: drop-shadow(0 0 18px rgba(139,255,61,.85));"></div>
          </div>
        </article>

        
        <article class="slide" aria-label="Wealth course banner">
          <div class="copy">
            <span class="tag" style="background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan)); box-shadow:0 0 22px rgba(255,61,240,.45)">Wealth • Systems</span>
            <h2 class="title">Cashflow Playbook</h2>
            <p class="blurb">
              Turn hustle into automation. Offers that convert, funnels that follow up,
              and money that moves while you sleep. Simplicity over stress.
            </p>
          </div>
          <div class="art" aria-hidden="true">
            <div class="pulse" style="filter: drop-shadow(0 0 18px rgba(255,61,240,.9));"></div>
          </div>
        </article>

        
        <article class="slide" aria-label="Business course banner">
          <div class="copy">
            <span class="tag" style="background:linear-gradient(90deg,var(--neon-cyan),var(--neon-green)); box-shadow:0 0 22px rgba(61,246,255,.45)">Business • Ops</span>
            <h2 class="title">The Pick & Roll Platinum System</h2>
            <p class="blurb">
              Stop winging it. Build clean offers, repeatable delivery, and a brand that
              looks as good as it performs. Play the long game with short, smart moves.
            </p>
          </div>
          <div class="art" aria-hidden="true">
            <div class="pulse" style="filter: drop-shadow(0 0 18px rgba(61,246,255,.9));"></div>
          </div>
        </article>
      </div>

      
      <div class="dots" aria-hidden="true">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
      <div class="progress" aria-hidden="true"><div class="bar" id="bar"></div></div>
    </div>
  </section>

  <script>
    // ======= Carousel logic (no links, no clicks required) =======
    const track = document.getElementById('track');
    const dots = Array.from(document.querySelectorAll('.dot'));
    const bar  = document.getElementById('bar');
    const slides = document.querySelectorAll('.slide');
    const total = slides.length;

    let idx = 0;
    let t = 0;
    const DURATION = 4500; // ms per slide

    function goto(i){
      idx = (i + total) % total;
      const pct = -100 * idx;
      track.style.transform = `translateX(${pct}%)`;
      dots.forEach((d, j)=> d.classList.toggle('active', j===idx));
      t = 0; // reset progress
    }

    // progress bar animation (visual only)
    function tick(ts){
      t += 16;
      const p = Math.min(1, t / DURATION);
      bar.style.width = (p*100) + '%';
      if(p >= 1){
        goto(idx+1);
      }
      requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);

    // auto-advance timer (back-up, aligns with bar)
    setInterval(()=> goto(idx+1), DURATION);

    // pause on hover for desktop (still no clicks)
    const carousel = document.getElementById('carousel');
    let paused = false, intervalId;
    function pause(){ if(!paused){ paused = true; clearInterval(intervalId); } }
    function resume(){ if(paused){ paused = false; intervalId = setInterval(()=> goto(idx+1), DURATION); } }
    carousel.addEventListener('mouseenter', pause);
    carousel.addEventListener('mouseleave', resume);

    // Keyboard nudge (optional, not required)
    window.addEventListener('keydown', (e)=>{
      if(e.key==='ArrowRight') goto(idx+1);
      if(e.key==='ArrowLeft') goto(idx-1);
    });

    // Respect reduced motion
    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
    if(media.matches){
      // Stop auto animations; show first slide
      bar.style.transition = 'none';
      bar.style.width = '0%';
    }
  </script>
</body>
</html>

List

Expand your business and generate passive income by creating and selling online courses in your niche, fostering an evergreen community.

Digital products & Courses

<p>Create unique ebooks with questions and quizzes that will help your audience retain info more and bond with your brand identity and business goals.</p>

Custom Ebook

<p>Develop websites that provide an optimal viewing experience across all devices and platforms.</p>

 Custom 4k  Coaching & Courses

<p>Enhance user experience with intuitive and aesthetically pleasing design solutions. This includes apps and more digital custom products. We also make applications for scrap, so contact us for more info.</p>

Digital products

Call to action

Transform your brand with our expert website design services in Atlanta. Let us craft a digital experience that captivates and converts visitors into customers.

Elevate Your Online Presence Today

Contact form

<h3>Get in Touch Today</h3> <p>Contact nstar creative studio for top-notch website design services in Atlanta.</p>