Professional online course landing page with curriculum, instructor bio, and enrollment options.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Master Web Development | Online Course</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<a href="#" class="logo">DevMaster<span>Academy</span></a>
<div class="nav-links">
<a href="#overview">Overview</a>
<a href="#curriculum">Curriculum</a>
<a href="#instructor">Instructor</a>
<a href="#reviews">Reviews</a>
<a href="#enroll" class="nav-cta">Enroll Now</a>
</div>
<button class="mobile-menu"><i class="fas fa-bars"></i></button>
</div>
</nav>
<header class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">🔥 Bestseller - Updated for 2025</div>
<h1>Master Web Development<br><span>Become a Full-Stack Developer</span></h1>
<p>Learn HTML, CSS, JavaScript, React, Node.js, and more. Build real-world projects and launch your career.</p>
<div class="hero-stats">
<div><i class="fas fa-clock"></i> 40+ hours</div>
<div><i class="fas fa-project-diagram"></i> 10 projects</div>
<div><i class="fas fa-users"></i> 50,000+ students</div>
<div><i class="fas fa-star"></i> 4.8 rating</div>
</div>
<div class="hero-buttons">
<a href="#enroll" class="btn-primary">Enroll Now <i class="fas fa-arrow-right"></i></a>
<a href="#curriculum" class="btn-secondary">View Curriculum <i class="fas fa-book"></i></a>
</div>
</div>
</div>
</header>
<section id="overview" class="overview">
<div class="container">
<div class="overview-grid">
<div class="overview-content">
<span class="section-tag">Course Overview</span>
<h2>What You'll Learn</h2>
<p>This comprehensive course takes you from beginner to professional web developer. You'll master both front-end and back-end technologies through hands-on projects.</p>
<div class="skills-list">
<div class="skill">✅ HTML5 & CSS3</div>
<div class="skill">✅ JavaScript (ES6+)</div>
<div class="skill">✅ React.js & Hooks</div>
<div class="skill">✅ Node.js & Express</div>
<div class="skill">✅ MongoDB & SQL</div>
<div class="skill">✅ Git & GitHub</div>
</div>
</div>
<div class="overview-card">
<div class="price">$299<span>one-time payment</span></div>
<ul>
<li><i class="fas fa-check"></i> Lifetime access</li>
<li><i class="fas fa-check"></i> 10 real-world projects</li>
<li><i class="fas fa-check"></i> Certificate of completion</li>
<li><i class="fas fa-check"></i> Downloadable resources</li>
<li><i class="fas fa-check"></i> 24/7 support</li>
</ul>
<a href="#enroll" class="btn-primary">Enroll Now</a>
</div>
</div>
</div>
</section>
<section id="curriculum" class="curriculum">
<div class="container">
<div class="section-header">
<span class="section-tag">Course Curriculum</span>
<h2>10 Comprehensive Modules</h2>
<p>Structured learning path from fundamentals to advanced topics.</p>
</div>
<div class="curriculum-modules">
<div class="module">
<div class="module-header">
<h3>Module 1: HTML Fundamentals</h3>
<span>6 lectures • 2 hours</span>
</div>
<div class="module-content">
<p>Learn the building blocks of the web. Master semantic HTML, forms, tables, and accessibility.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 2: CSS Styling Mastery</h3>
<span>8 lectures • 3 hours</span>
</div>
<div class="module-content">
<p>Flexbox, Grid, animations, responsive design, and modern CSS techniques.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 3: JavaScript Essentials</h3>
<span>12 lectures • 6 hours</span>
</div>
<div class="module-content">
<p>Variables, functions, arrays, objects, DOM manipulation, and ES6+ features.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 4: Advanced JavaScript</h3>
<span>10 lectures • 5 hours</span>
</div>
<div class="module-content">
<p>Async/await, promises, APIs, error handling, and modern patterns.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 5: React.js & Modern Frontend</h3>
<span>12 lectures • 8 hours</span>
</div>
<div class="module-content">
<p>Components, props, state, hooks, context API, and building SPAs.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 6: Backend with Node.js</h3>
<span>10 lectures • 6 hours</span>
</div>
<div class="module-content">
<p>Express, REST APIs, authentication, and database integration.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 7: Databases (MongoDB & SQL)</h3>
<span>8 lectures • 4 hours</span>
</div>
<div class="module-content">
<p>Data modeling, queries, relationships, and database design.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 8: Real-World Projects</h3>
<span>10 lectures • 10 hours</span>
</div>
<div class="module-content">
<p>Build a portfolio, e-commerce site, blog platform, and full-stack application.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 9: Deployment & DevOps</h3>
<span>6 lectures • 2 hours</span>
</div>
<div class="module-content">
<p>Deploy to Vercel, Netlify, Heroku, and set up CI/CD pipelines.</p>
</div>
</div>
<div class="module">
<div class="module-header">
<h3>Module 10: Career Preparation</h3>
<span>4 lectures • 1 hour</span>
</div>
<div class="module-content">
<p>Build your portfolio, optimize LinkedIn, and ace technical interviews.</p>
</div>
</div>
</div>
</div>
</section>
<section id="instructor" class="instructor">
<div class="container">
<div class="instructor-grid">
<div class="instructor-image">
<div class="image-placeholder">👨🏫</div>
</div>
<div class="instructor-info">
<span class="section-tag">Your Instructor</span>
<h2>James Wilson</h2>
<p class="title">Senior Full-Stack Developer & Educator</p>
<p>James has over 12 years of industry experience working with Fortune 500 companies. He's taught over 50,000 students worldwide and is passionate about making web development accessible to everyone.</p>
<div class="instructor-stats">
<div><strong>50k+</strong> Students</div>
<div><strong>12+</strong> Years Experience</div>
<div><strong>4.9</strong> Rating</div>
</div>
<div class="instructor-social">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="reviews" class="reviews">
<div class="container">
<div class="section-header">
<span class="section-tag">Student Reviews</span>
<h2>What Our Students Say</h2>
<p>Join 50,000+ happy students who transformed their careers.</p>
</div>
<div class="reviews-grid">
<div class="review-card">
<div class="review-rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
<p>"This course changed my life! Landed my first dev job within 3 months of completing it. The projects are real-world and challenging."</p>
<div class="reviewer">
<strong>Sarah Chen</strong>
<span>Frontend Developer at TechCorp</span>
</div>
</div>
<div class="review-card">
<div class="review-rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
<p>"The instructor explains complex topics in such a simple way. Best investment I've made for my career."</p>
<div class="reviewer">
<strong>Mike Rodriguez</strong>
<span>Full-Stack Developer</span>
</div>
</div>
<div class="review-card">
<div class="review-rating">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
</div>
<p>"The projects are amazing! Built a complete portfolio that helped me get hired. Highly recommend!"</p>
<div class="reviewer">
<strong>Emily Zhao</strong>
<span>UI Developer at CreativeStudio</span>
</div>
</div>
</div>
</div>
</section>
<section id="enroll" class="enroll">
<div class="container">
<div class="enroll-content">
<h2>Start Your Journey Today</h2>
<p>Get lifetime access to all modules, projects, and future updates. 30-day money-back guarantee.</p>
<div class="price-large">$299<span>one-time payment</span></div>
<a href="#" class="btn-primary" id="enrollBtn">Enroll Now <i class="fas fa-arrow-right"></i></a>
<p class="guarantee"><i class="fas fa-shield-alt"></i> 30-day money-back guarantee</p>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-grid">
<div>
<h4>DevMaster Academy</h4>
<p>Empowering developers worldwide.</p>
</div>
<div>
<h4>Quick Links</h4>
<a href="#">About Us</a>
<a href="#">Contact</a>
<a href="#">FAQs</a>
</div>
<div>
<h4>Legal</h4>
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
<a href="#">Refund Policy</a>
</div>
<div>
<h4>Follow Us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-discord"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 DevMaster Academy. All rights reserved. Built with <i class="fas fa-heart"></i> by WordTune®</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>/* Online Course Styles */
:root {
--primary: #e94560;
--primary-dark: #c7354e;
--secondary: #667eea;
--dark: #1a1a2e;
--light: #f8f9fa;
--gray: #6c757d;
--white: #ffffff;
--border: #e9ecef;
--success: #28a745;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
color: var(--dark);
line-height: 1.6;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 800;
text-decoration: none;
color: var(--dark);
}
.logo span {
color: var(--primary);
}
.nav-links {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--dark);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary);
}
.nav-cta {
background: var(--primary);
color: white !important;
padding: 0.5rem 1.2rem;
border-radius: 40px;
}
.nav-cta:hover {
background: var(--primary-dark);
}
.mobile-menu {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Hero */
.hero {
padding: 8rem 0 4rem;
background: linear-gradient(135deg, var(--dark) 0%, #16213e 100%);
color: white;
text-align: center;
}
.hero-badge {
display: inline-block;
background: var(--primary);
padding: 0.3rem 1rem;
border-radius: 50px;
font-size: 0.8rem;
margin-bottom: 1.5rem;
}
.hero h1 {
font-size: 2.8rem;
margin-bottom: 1rem;
}
.hero h1 span {
color: var(--primary);
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 2rem;
opacity: 0.9;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.hero-stats i {
margin-right: 0.3rem;
color: var(--primary);
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}
.btn-primary, .btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.8rem;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: var(--dark);
}
/* Section Header */
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-tag {
display: inline-block;
background: rgba(233,69,96,0.1);
color: var(--primary);
padding: 0.3rem 1rem;
border-radius: 50px;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-header p {
color: var(--gray);
max-width: 600px;
margin: 0 auto;
}
/* Overview */
.overview {
padding: 5rem 0;
}
.overview-grid {
display: grid;
grid-template-columns: 1fr 350px;
gap: 3rem;
}
.overview-content h2 {
font-size: 2rem;
margin: 0.5rem 0 1rem;
}
.skills-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
margin-top: 1.5rem;
}
.skill {
font-weight: 500;
}
.overview-card {
background: var(--white);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
text-align: center;
border: 1px solid var(--border);
position: sticky;
top: 100px;
}
.price {
font-size: 2.5rem;
font-weight: 800;
color: var(--primary);
}
.price span {
font-size: 0.9rem;
font-weight: normal;
color: var(--gray);
display: block;
}
.overview-card ul {
list-style: none;
margin: 1.5rem 0;
text-align: left;
}
.overview-card li {
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.overview-card li i {
color: var(--success);
width: 20px;
}
/* Curriculum */
.curriculum {
padding: 5rem 0;
background: var(--light);
}
.curriculum-modules {
max-width: 800px;
margin: 0 auto;
}
.module {
background: var(--white);
border-radius: 16px;
margin-bottom: 1rem;
overflow: hidden;
border: 1px solid var(--border);
}
.module-header {
padding: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
cursor: pointer;
background: var(--white);
transition: background 0.3s;
}
.module-header:hover {
background: rgba(233,69,96,0.05);
}
.module-header h3 {
font-size: 1.1rem;
}
.module-header span {
font-size: 0.8rem;
color: var(--gray);
}
.module-content {
padding: 0 1.2rem 1.2rem 1.2rem;
display: none;
border-top: 1px solid var(--border);
}
.module.active .module-content {
display: block;
}
/* Instructor */
.instructor {
padding: 5rem 0;
}
.instructor-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
align-items: center;
}
.instructor-image {
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 24px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
}
.instructor-info h2 {
font-size: 2rem;
margin: 0.5rem 0;
}
.instructor-info .title {
color: var(--primary);
font-weight: 500;
margin-bottom: 1rem;
}
.instructor-stats {
display: flex;
gap: 2rem;
margin: 1.5rem 0;
}
.instructor-stats strong {
display: block;
font-size: 1.3rem;
color: var(--primary);
}
.instructor-social {
display: flex;
gap: 1rem;
}
.instructor-social a {
color: var(--gray);
font-size: 1.2rem;
transition: color 0.3s;
}
.instructor-social a:hover {
color: var(--primary);
}
/* Reviews */
.reviews {
padding: 5rem 0;
background: var(--light);
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.review-card {
background: var(--white);
padding: 2rem;
border-radius: 20px;
border: 1px solid var(--border);
}
.review-rating {
margin-bottom: 1rem;
}
.review-rating i {
color: #ffc107;
margin-right: 0.2rem;
}
.review-card p {
color: var(--gray);
margin-bottom: 1rem;
line-height: 1.6;
}
.reviewer strong {
display: block;
}
.reviewer span {
font-size: 0.8rem;
color: var(--gray);
}
/* Enroll */
.enroll {
padding: 5rem 0;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: white;
text-align: center;
}
.enroll h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.enroll p {
margin-bottom: 1.5rem;
opacity: 0.9;
}
.price-large {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
}
.price-large span {
font-size: 1rem;
font-weight: normal;
opacity: 0.8;
}
.guarantee {
margin-top: 1rem;
font-size: 0.9rem;
}
.guarantee i {
color: var(--primary);
}
/* Footer */
footer {
background: var(--dark);
color: #888;
padding: 3rem 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-grid h4 {
margin-bottom: 1rem;
color: white;
}
.footer-grid a {
display: block;
color: #888;
text-decoration: none;
padding: 0.3rem 0;
transition: color 0.3s;
}
.footer-grid a:hover {
color: var(--primary);
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
display: inline-block;
font-size: 1.2rem;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #333;
}
.footer-bottom i {
color: var(--primary);
}
/* Responsive */
@media (max-width: 900px) {
.overview-grid {
grid-template-columns: 1fr;
}
.overview-card {
position: static;
}
.instructor-grid {
grid-template-columns: 1fr;
text-align: center;
}
.instructor-stats {
justify-content: center;
}
.instructor-social {
justify-content: center;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.mobile-menu {
display: block;
}
.hero h1 {
font-size: 2rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-stats {
gap: 1rem;
}
.section-header h2 {
font-size: 1.8rem;
}
.skills-list {
grid-template-columns: 1fr;
}
.module-header {
flex-direction: column;
text-align: center;
}
}// Online Course JavaScript
// Mobile Menu Toggle
const mobileMenu = document.querySelector('.mobile-menu');
const navLinks = document.querySelector('.nav-links');
if (mobileMenu) {
mobileMenu.addEventListener('click', () => {
navLinks.classList.toggle('active');
mobileMenu.classList.toggle('active');
});
}
// Course Modules Accordion
const modules = document.querySelectorAll('.module');
modules.forEach(module => {
const header = module.querySelector('.module-header');
header.addEventListener('click', () => {
module.classList.toggle('active');
});
});
// Open first module by default
if (modules.length > 0) {
modules[0].classList.add('active');
}
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
if (navLinks && navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
mobileMenu.classList.remove('active');
}
}
});
});
// Enroll Button Handler
const enrollBtn = document.getElementById('enrollBtn');
if (enrollBtn) {
enrollBtn.addEventListener('click', (e) => {
e.preventDefault();
alert('🎓 Thanks for enrolling! Checkout page would open here.');
});
}
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.module, .review-card, .skill').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.5s ease';
observer.observe(el);
});
console.log('Online course page ready!');