<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 60px;background:#0f172a;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(139,92,246,0.15);">
    <div style="font-size:24px;font-weight:700;color:#fff;font-family:Montserrat,sans-serif;">Learn<span style="color:#8b5cf6;">Pro</span></div>
    <div style="display:flex;gap:32px;align-items:center;">
        <a href="#curriculum" style="color:#c4b5fd;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Curriculum</a>
        <a href="#instructor" style="color:#c4b5fd;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Instructor</a>
        <a href="#pricing" style="color:#c4b5fd;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Pricing</a>
        <a href="#pricing" style="display:inline-block;padding:10px 24px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Enroll Now</a>
    </div>
</nav>

<!-- Hero Section -->
<section style="padding:100px 20px 80px;background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 60%,#2e1065 100%);text-align:center;position:relative;overflow:hidden;">
    <div style="position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,0.12) 0%,transparent 70%);border-radius:50%;"></div>
    <div style="position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,0.08) 0%,transparent 70%);border-radius:50%;"></div>
    <div style="max-width:800px;margin:0 auto;position:relative;z-index:1;">
        <div style="display:inline-block;padding:8px 20px;background:rgba(139,92,246,0.15);border:1px solid rgba(139,92,246,0.3);border-radius:50px;margin-bottom:24px;">
            <span style="color:#c4b5fd;font-size:14px;font-weight:500;font-family:Inter,sans-serif;">New cohort starting soon — Limited spots</span>
        </div>
        <h1 style="color:#fff;font-size:52px;font-weight:800;margin-bottom:20px;font-family:Montserrat,sans-serif;line-height:1.15;letter-spacing:-1px;">Master Modern Web Development</h1>
        <p style="color:#c4b5fd;font-size:19px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;max-width:620px;margin-left:auto;margin-right:auto;">Go from beginner to job-ready developer. Learn HTML, CSS, JavaScript, React, and Node.js through hands-on projects and real-world applications.</p>
        <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;">
            <a href="#pricing" style="display:inline-block;padding:16px 40px;background:#8b5cf6;color:#fff;font-size:17px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;box-shadow:0 4px 20px rgba(139,92,246,0.4);">Enroll Now</a>
            <a href="#" style="display:inline-block;padding:16px 40px;background:rgba(255,255,255,0.08);color:#fff;font-size:17px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;border:1px solid rgba(255,255,255,0.15);">Watch Preview</a>
        </div>
        <div style="display:flex;justify-content:center;gap:48px;flex-wrap:wrap;">
            <div style="text-align:center;">
                <div style="font-size:28px;font-weight:800;color:#fff;font-family:Montserrat,sans-serif;">2,500+</div>
                <div style="font-size:14px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:4px;">Students Enrolled</div>
            </div>
            <div style="text-align:center;">
                <div style="font-size:28px;font-weight:800;color:#fff;font-family:Montserrat,sans-serif;">4.9 &#9733;</div>
                <div style="font-size:14px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:4px;">Average Rating</div>
            </div>
            <div style="text-align:center;">
                <div style="font-size:28px;font-weight:800;color:#fff;font-family:Montserrat,sans-serif;">12 Hours</div>
                <div style="font-size:14px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:4px;">Video Content</div>
            </div>
        </div>
    </div>
</section>

<!-- What You'll Learn -->
<section style="padding:90px 20px;background:#fff;">
    <div style="max-width:900px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:56px;">
            <h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">What You'll Learn</h2>
            <p style="font-size:17px;color:#64748b;font-family:Inter,sans-serif;">Practical skills that employers are looking for right now.</p>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:20px;">
            <div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
                <span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">&#10003;</span>
                <div>
                    <div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Responsive HTML & CSS</div>
                    <div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Build pixel-perfect layouts that work on every device using modern CSS techniques.</div>
                </div>
            </div>
            <div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
                <span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">&#10003;</span>
                <div>
                    <div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">JavaScript Fundamentals</div>
                    <div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Master variables, functions, async/await, DOM manipulation, and ES6+ features.</div>
                </div>
            </div>
            <div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
                <span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">&#10003;</span>
                <div>
                    <div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">React & Component Architecture</div>
                    <div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Build dynamic UIs with React, hooks, state management, and reusable components.</div>
                </div>
            </div>
            <div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
                <span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">&#10003;</span>
                <div>
                    <div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Node.js & REST APIs</div>
                    <div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Create server-side applications, RESTful APIs, and handle authentication.</div>
                </div>
            </div>
            <div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
                <span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">&#10003;</span>
                <div>
                    <div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Databases & Deployment</div>
                    <div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Work with MongoDB and PostgreSQL, then deploy your apps to the cloud.</div>
                </div>
            </div>
            <div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
                <span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">&#10003;</span>
                <div>
                    <div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Git, Testing & Best Practices</div>
                    <div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Version control, unit testing, code reviews, and professional development workflows.</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Curriculum -->
<section id="curriculum" style="padding:90px 20px;background:#f5f3ff;">
    <div style="max-width:760px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:56px;">
            <h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">Course Curriculum</h2>
            <p style="font-size:17px;color:#64748b;font-family:Inter,sans-serif;">5 comprehensive modules with hands-on projects in every section.</p>
        </div>
        <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
                <div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
                    <div style="display:flex;align-items:center;gap:16px;">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">01</span>
                        <span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">Foundations: HTML & CSS Mastery</span>
                    </div>
                    <span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">8 Lessons</span>
                </div>
            </div>
            <div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
                <div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
                    <div style="display:flex;align-items:center;gap:16px;">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">02</span>
                        <span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">JavaScript Deep Dive</span>
                    </div>
                    <span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">10 Lessons</span>
                </div>
            </div>
            <div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
                <div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
                    <div style="display:flex;align-items:center;gap:16px;">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">03</span>
                        <span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">React & Frontend Frameworks</span>
                    </div>
                    <span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">12 Lessons</span>
                </div>
            </div>
            <div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
                <div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
                    <div style="display:flex;align-items:center;gap:16px;">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">04</span>
                        <span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">Backend with Node.js & Databases</span>
                    </div>
                    <span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">10 Lessons</span>
                </div>
            </div>
            <div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
                <div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
                    <div style="display:flex;align-items:center;gap:16px;">
                        <span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">05</span>
                        <span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">Capstone Project & Career Prep</span>
                    </div>
                    <span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">6 Lessons</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Instructor -->
<section id="instructor" style="padding:90px 20px;background:#fff;">
    <div style="max-width:960px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:56px;">
            <h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">Meet Your Instructor</h2>
        </div>
        <div style="display:flex;gap:48px;align-items:center;flex-wrap:wrap;">
            <div style="flex:1;min-width:280px;text-align:center;">
                <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop&crop=face" alt="Alex Morgan" style="width:280px;height:280px;border-radius:20px;object-fit:cover;box-shadow:0 8px 30px rgba(0,0,0,0.12);" />
            </div>
            <div style="flex:1.2;min-width:300px;">
                <h3 style="font-size:28px;font-weight:700;color:#0f172a;margin-bottom:6px;font-family:Montserrat,sans-serif;">Alex Morgan</h3>
                <p style="font-size:16px;color:#8b5cf6;font-weight:600;margin-bottom:20px;font-family:Inter,sans-serif;">Senior Software Engineer & Educator</p>
                <p style="font-size:16px;color:#475569;line-height:1.8;margin-bottom:20px;font-family:Inter,sans-serif;">With 12 years of industry experience at companies like Google and Stripe, Alex has taught over 10,000 students worldwide. His teaching philosophy centers on building real projects from day one.</p>
                <div style="display:flex;flex-direction:column;gap:10px;">
                    <div style="display:flex;align-items:center;gap:10px;">
                        <span style="color:#8b5cf6;font-weight:700;">&#10003;</span>
                        <span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">Former Senior Engineer at Google & Stripe</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <span style="color:#8b5cf6;font-weight:700;">&#10003;</span>
                        <span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">10,000+ students across 85 countries</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <span style="color:#8b5cf6;font-weight:700;">&#10003;</span>
                        <span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">Published author and conference speaker</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <span style="color:#8b5cf6;font-weight:700;">&#10003;</span>
                        <span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">M.S. Computer Science, Stanford University</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section style="padding:90px 20px;background:#0f172a;">
    <div style="max-width:1100px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:56px;">
            <h2 style="font-size:38px;font-weight:800;color:#fff;margin-bottom:14px;font-family:Montserrat,sans-serif;">What Students Are Saying</h2>
            <p style="font-size:17px;color:#a78bfa;font-family:Inter,sans-serif;">Join thousands of successful graduates.</p>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
            <div style="flex:1;min-width:300px;max-width:350px;padding:32px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.15);border-radius:16px;">
                <div style="color:#fbbf24;font-size:16px;margin-bottom:14px;">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                <p style="color:#e2e8f0;line-height:1.7;font-size:15px;margin-bottom:24px;font-family:Inter,sans-serif;">"This course completely changed my career. I went from zero coding experience to landing a junior developer role in just 4 months. Alex explains everything so clearly."</p>
                <div>
                    <div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Jessica Chen</div>
                    <div style="font-size:13px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:2px;">Completed: Full Course</div>
                </div>
            </div>
            <div style="flex:1;min-width:300px;max-width:350px;padding:32px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.15);border-radius:16px;">
                <div style="color:#fbbf24;font-size:16px;margin-bottom:14px;">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                <p style="color:#e2e8f0;line-height:1.7;font-size:15px;margin-bottom:24px;font-family:Inter,sans-serif;">"The project-based approach is what sets this apart. By the end, I had a portfolio of real apps to show employers. The capstone project alone was worth the price."</p>
                <div>
                    <div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Marcus Rivera</div>
                    <div style="font-size:13px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:2px;">Completed: Full Course</div>
                </div>
            </div>
            <div style="flex:1;min-width:300px;max-width:350px;padding:32px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.15);border-radius:16px;">
                <div style="color:#fbbf24;font-size:16px;margin-bottom:14px;">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                <p style="color:#e2e8f0;line-height:1.7;font-size:15px;margin-bottom:24px;font-family:Inter,sans-serif;">"I've tried other coding courses before, but none came close. The curriculum is well-structured, the community is supportive, and Alex responds to every question."</p>
                <div>
                    <div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Priya Sharma</div>
                    <div style="font-size:13px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:2px;">Completed: Modules 1-4</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Pricing -->
<section id="pricing" style="padding:90px 20px;background:#f5f3ff;">
    <div style="max-width:520px;margin:0 auto;text-align:center;">
        <h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">Invest in Your Future</h2>
        <p style="font-size:17px;color:#64748b;margin-bottom:48px;font-family:Inter,sans-serif;">One-time payment, lifetime access.</p>
        <div style="background:#fff;border-radius:20px;padding:48px 40px;box-shadow:0 8px 40px rgba(139,92,246,0.12);border:2px solid #8b5cf6;">
            <div style="margin-bottom:28px;">
                <span style="font-size:20px;color:#94a3b8;text-decoration:line-through;font-family:Inter,sans-serif;">$197</span>
                <span style="font-size:56px;font-weight:800;color:#0f172a;font-family:Montserrat,sans-serif;margin-left:12px;">$97</span>
            </div>
            <ul style="list-style:none;padding:0;margin:0 0 32px 0;text-align:left;">
                <li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">&#10003;</span> 12 hours of HD video content</li>
                <li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">&#10003;</span> 46 hands-on lessons across 5 modules</li>
                <li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">&#10003;</span> Downloadable source code & resources</li>
                <li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">&#10003;</span> Private student community access</li>
                <li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">&#10003;</span> Certificate of completion</li>
                <li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;"><span style="color:#8b5cf6;font-weight:700;">&#10003;</span> Lifetime updates at no extra cost</li>
            </ul>
            <a href="#" style="display:block;padding:18px;background:#8b5cf6;color:#fff;font-size:18px;font-weight:700;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;box-shadow:0 4px 16px rgba(139,92,246,0.35);">Enroll Now</a>
            <p style="color:#64748b;font-size:13px;margin-top:16px;font-family:Inter,sans-serif;">30-day money-back guarantee. No questions asked.</p>
        </div>
    </div>
</section>

<!-- Footer -->
<footer style="padding:48px 20px 28px;background:#0f172a;border-top:1px solid rgba(139,92,246,0.12);">
    <div style="max-width:900px;margin:0 auto;text-align:center;">
        <div style="font-size:22px;font-weight:700;color:#fff;margin-bottom:16px;font-family:Montserrat,sans-serif;">Learn<span style="color:#8b5cf6;">Pro</span></div>
        <div style="display:flex;justify-content:center;gap:28px;margin-bottom:24px;flex-wrap:wrap;">
            <a href="#curriculum" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Curriculum</a>
            <a href="#instructor" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Instructor</a>
            <a href="#pricing" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Pricing</a>
            <a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Privacy Policy</a>
            <a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Terms</a>
        </div>
        <div style="border-top:1px solid rgba(139,92,246,0.1);padding-top:20px;">
            <p style="color:#6b7280;font-size:13px;font-family:Inter,sans-serif;">&copy; 2026 LearnPro. All rights reserved.</p>
        </div>
    </div>
</footer>