Josh Knapp
b511a6684d
Includes new page templates (fitness-gym, nonprofit, online-course, photography-studio, real-estate, startup-company, travel-blog, wedding-invitation) with thumbnail SVGs, test specs, documentation files, and minor updates to index.html, router.php, and playwright config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
266 lines
24 KiB
HTML
266 lines
24 KiB
HTML
<!-- 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 ★</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">★★★★★</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;">★★★★★</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;">★★★★★</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">✓</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;">© 2026 LearnPro. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer> |