Posted inWebsite Designs

How to Create a Course Selling Website Using HTML, CSS, and JavaScript 2025

No CommentsPosted inWebsite Designs

Creating a course-selling website using HTML, CSS, and JavaScript requires careful planning and implementation.

1. Homepage – First Impression Matters!

How to Create a Course Selling Website Using HTML, CSS, and JavaScript 2025
How to Create a Course Selling Website Using HTML, CSS, and JavaScript 2025

The homepage acts as a marketing tool to attract users and encourage enrollments.

Essential Features:

2. Course Catalog Page – Showcase Available Courses

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LearnHub - Premium Online Courses</title>
    <meta name="description" content="Learn in-demand skills with our premium online courses. Get certified and advance your career today!">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
      /* Global Styles */
:root {
    --primary-color: #4361ee;
    --secondary-color: #3a0ca3;
    --accent-color: #f72585;
    --text-color: #333;
    --light-text: #777;
    --light-bg: #f9f9f9;
    --dark-bg: #1a1a1a;
    --success-color: #4caf50;
    --warning-color: #ff9800;
    --error-color: #f44336;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.primary-btn {
    background-color: var(--primary-color);
    color: white;
}

.primary-btn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

.secondary-btn {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.secondary-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

section {
    padding: 80px 0;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
}

h2:after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--primary-color);
    margin: 15px auto;
}

/* Navbar Styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo h1 {
    color: var(--primary-color);
    font-size: 1.8rem;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-weight: 500;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary-color);
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

.login-btn {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.login-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.signup-btn {
    background-color: var(--primary-color);
    color: white;
}

.signup-btn:hover {
    background-color: var(--secondary-color);
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--text-color);
    transition: var(--transition);
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    min-height: 80vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: var(--light-text);
}

.cta-buttons {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.hero-image img {
    max-width: 90%;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

/* Course Highlights */
.course-highlights {
    background-color: var(--light-bg);
    padding: 80px 5%;
}

.highlights-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.highlight-card {
    background-color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
}

.highlight-card:hover {
    transform: translateY(-10px);
}

.highlight-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.highlight-card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Featured Courses */
.featured-courses {
    padding: 80px 5%;
}

.courses-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.course-card {
    background-color: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.course-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.course-card:hover .course-image img {
    transform: scale(1.05);
}

.course-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--accent-color);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.course-details {
    padding: 20px;
}

.course-details h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.instructor {
    color: var(--light-text);
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.rating {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.stars {
    color: #ffc107;
    margin-right: 5px;
}

.count {
    font-size: 0.8rem;
    color: var(--light-text);
}

.course-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--light-text);
}

.price {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.original-price {
    text-decoration: line-through;
    color: var(--light-text);
}

.discount {
    background-color: #e6f7ff;
    color: var(--primary-color);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.enroll-btn {
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    padding: 12px;
    font-size: 1rem;
}

.enroll-btn:hover {
    background-color: var(--secondary-color);
}

.view-all {
    text-align: center;
}

.view-all-btn {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 12px 30px;
}

.view-all-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Testimonials */
.testimonials {
    background-color: var(--light-bg);
    padding: 80px 5%;
}

.testimonial-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.student-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.student-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.student-info h4 {
    margin-bottom: 5px;
}

.student-info p {
    color: var(--light-text);
    font-size: 0.9rem;
}

.testimonial-text {
    margin-bottom: 20px;
    font-style: italic;
    color: var(--text-color);
}

.testimonial-rating {
    color: #ffc107;
    font-size: 1.2rem;
}

/* Limited Time Offer */
.limited-offer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 60px 5%;
    text-align: center;
}

.offer-content {
    max-width: 800px;
    margin: 0 auto;
}

.offer-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.offer-content h2:after {
    background: white;
}

.offer-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.countdown-item {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: var(--border-radius);
    min-width: 80px;
}

.countdown-item span:first-child {
    font-size: 2rem;
    font-weight: bold;
    display: block;
}

.offer-btn {
    background-color: white;
    color: var(--primary-color);
    padding: 15px 30px;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.offer-btn:hover {
    background-color: var(--accent-color);
    color: white;
}

.coupon-code {
    font-size: 1.1rem;
}

.coupon-code span {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Footer */
footer {
    background-color: var(--dark-bg);
    color: white;
    padding: 60px 5% 20px;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column h3, .footer-column h4 {
    margin-bottom: 20px;
    position: relative;
}

.footer-column h3:after, .footer-column h4:after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--primary-color);
    margin-top: 10px;
}

.footer-column p {
    margin-bottom: 20px;
    color: #ccc;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-icons a:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #ccc;
    transition: var(--transition);
}

.footer-column ul li a:hover {
    color: white;
    padding-left: 5px;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    color: #ccc;
}

.contact-info li i {
    margin-right: 10px;
    color: var(--primary-color);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: #ccc;
    transition: var(--transition);
}

.footer-links a:hover {
    color: white;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 60px 5%;
    }
    
    .hero-content {
        margin-bottom: 40px;
    }
    
    .cta-buttons {
        justify-content: center;
    }
    
    .hero-image {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 15px 5%;
    }
    
    .nav-links, .auth-buttons {
        display: none;
    }
    
    .hamburger {
        display: block;
    }
    
    .countdown {
        flex-wrap: wrap;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    section {
        padding: 60px 0;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .countdown-item {
        min-width: 60px;
        padding: 15px;
    }
}
    </style>
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="navbar">
        <div class="logo">
            <h1>LearnHub</h1>
        </div>
        <ul class="nav-links">
            <li><a href="index.html">Home</a></li>
            <li><a href="courses.html">Courses</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        <div class="auth-buttons">
            <button class="btn login-btn">Login</button>
            <button class="btn signup-btn">Sign Up</button>
        </div>
        <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1>Master New Skills, Advance Your Career</h1>
            <p>Join over 50,000+ students learning from industry experts</p>
            <div class="cta-buttons">
                <button class="btn primary-btn">Explore Courses</button>
                <button class="btn secondary-btn">View Free Tutorials</button>
            </div>
        </div>
        <div class="hero-image">
            <img src="jo.png" alt="Students learning online">
        </div>
    </section>

    <!-- Course Highlights -->
    <section class="course-highlights">
        <h2>Why Choose Our Courses?</h2>
        <div class="highlights-container">
            <div class="highlight-card">
                <i class="fas fa-certificate"></i>
                <h3>Certification</h3>
                <p>Get industry-recognized certificates upon completion</p>
            </div>
            <div class="highlight-card">
                <i class="fas fa-clock"></i>
                <h3>Lifetime Access</h3>
                <p>Learn at your own pace with unlimited access</p>
            </div>
            <div class="highlight-card">
                <i class="fas fa-user-tie"></i>
                <h3>Expert Instructors</h3>
                <p>Learn from industry professionals with years of experience</p>
            </div>
            <div class="highlight-card">
                <i class="fas fa-laptop-code"></i>
                <h3>Practical Projects</h3>
                <p>Build your portfolio with real-world projects</p>
            </div>
        </div>
    </section>

    <!-- Featured Courses -->
    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="courses-container">
            <!-- Course Card 1 -->
            <div class="course-card">
                <div class="course-image">
                    <img src="images.jpg" alt="Web Development Course">
                    <div class="course-tag">Bestseller</div>
                </div>
                <div class="course-details">
                    <h3>Complete Web Development Bootcamp</h3>
                    <div class="instructor">By Amarjeet Singh</div>
                    <div class="rating">
                        <span class="stars">★★★★★</span>
                        <span class="count">4.9 (5000+ reviews)</span>
                    </div>
                    <div class="course-meta">
                        <span><i class="fas fa-video"></i> 120 Lectures</span>
                        <span><i class="fas fa-clock"></i> 30 Hours</span>
                    </div>
                    <div class="price">
                        <span class="current-price">₹1,499</span>
                        <span class="original-price">₹4,999</span>
                        <span class="discount">70% off</span>
                    </div>
                    <button class="btn enroll-btn">Enroll Now</button>
                </div>
            </div>
            
            <!-- Course Card 2 -->
            <div class="course-card">
                <div class="course-image">
                    <img src="images/course2.jpg" alt="Data Science Course">
                    <div class="course-tag">New</div>
                </div>
                <div class="course-details">
                    <h3>Data Science & Machine Learning</h3>
                    <div class="instructor">By Priya Sharma</div>
                    <div class="rating">
                        <span class="stars">★★★★★</span>
                        <span class="count">4.8 (3200+ reviews)</span>
                    </div>
                    <div class="course-meta">
                        <span><i class="fas fa-video"></i> 150 Lectures</span>
                        <span><i class="fas fa-clock"></i> 40 Hours</span>
                    </div>
                    <div class="price">
                        <span class="current-price">₹1,999</span>
                        <span class="original-price">₹5,999</span>
                        <span class="discount">67% off</span>
                    </div>
                    <button class="btn enroll-btn">Enroll Now</button>
                </div>
            </div>
            
            <!-- Course Card 3 -->
            <div class="course-card">
                <div class="course-image">
                    <img src="images/course3.jpg" alt="Digital Marketing Course">
                </div>
                <div class="course-details">
                    <h3>Digital Marketing Masterclass</h3>
                    <div class="instructor">By Rahul Verma</div>
                    <div class="rating">
                        <span class="stars">★★★★☆</span>
                        <span class="count">4.7 (2800+ reviews)</span>
                    </div>
                    <div class="course-meta">
                        <span><i class="fas fa-video"></i> 100 Lectures</span>
                        <span><i class="fas fa-clock"></i> 25 Hours</span>
                    </div>
                    <div class="price">
                        <span class="current-price">₹1,299</span>
                        <span class="original-price">₹3,999</span>
                        <span class="discount">68% off</span>
                    </div>
                    <button class="btn enroll-btn">Enroll Now</button>
                </div>
            </div>
        </div>
        <div class="view-all">
            <a href="courses.html" class="btn view-all-btn">View All Courses</a>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="testimonials">
        <h2>What Our Students Say</h2>
        <div class="testimonial-container">
            <div class="testimonial-card">
                <div class="student-info">
                    <img src="images/student1.jpg" alt="Student 1">
                    <div>
                        <h4>Ankit Patel</h4>
                        <p>Web Developer</p>
                    </div>
                </div>
                <p class="testimonial-text">"The web development course completely transformed my career. I went from knowing nothing about coding to landing a job as a frontend developer in just 3 months!"</p>
                <div class="testimonial-rating">★★★★★</div>
            </div>
            
            <div class="testimonial-card">
                <div class="student-info">
                    <img src="images/student2.jpg" alt="Student 2">
                    <div>
                        <h4>Neha Gupta</h4>
                        <p>Data Analyst</p>
                    </div>
                </div>
                <p class="testimonial-text">"The data science course was comprehensive and practical. The projects helped me build a strong portfolio that impressed my employers."</p>
                <div class="testimonial-rating">★★★★★</div>
            </div>
            
            <div class="testimonial-card">
                <div class="student-info">
                    <img src="images/student3.jpg" alt="Student 3">
                    <div>
                        <h4>Rajesh Kumar</h4>
                        <p>Digital Marketer</p>
                    </div>
                </div>
                <p class="testimonial-text">"I was struggling with my marketing campaigns until I took this course. Now I'm running successful campaigns and have doubled my client base!"</p>
                <div class="testimonial-rating">★★★★☆</div>
            </div>
        </div>
    </section>

    <!-- Limited Time Offer -->
    <section class="limited-offer">
        <div class="offer-content">
            <h2>Special Offer - Limited Time Only!</h2>
            <p>Get 50% off on all courses when you enroll today</p>
            <div class="countdown">
                <div class="countdown-item">
                    <span id="days">02</span>
                    <span>Days</span>
                </div>
                <div class="countdown-item">
                    <span id="hours">12</span>
                    <span>Hours</span>
                </div>
                <div class="countdown-item">
                    <span id="minutes">45</span>
                    <span>Minutes</span>
                </div>
                <div class="countdown-item">
                    <span id="seconds">30</span>
                    <span>Seconds</span>
                </div>
            </div>
            <button class="btn offer-btn">Claim Offer Now</button>
            <p class="coupon-code">Use code: <span>NEWUSER50</span></p>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-container">
            <div class="footer-column">
                <h3>LearnHub</h3>
                <p>Your gateway to premium online education and skill development.</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            
            <div class="footer-column">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="courses.html">Courses</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="blog.html">Blog</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h4>Courses</h4>
                <ul>
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Data Science</a></li>
                    <li><a href="#">Digital Marketing</a></li>
                    <li><a href="#">Mobile App Development</a></li>
                    <li><a href="#">Graphic Design</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h4>Contact Us</h4>
                <ul class="contact-info">
                    <li><i class="fas fa-map-marker-alt"></i> 123 Education Street, Mumbai, India</li>
                    <li><i class="fas fa-phone"></i> +91 9876543210</li>
                    <li><i class="fas fa-envelope"></i> info@learnhub.com</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2023 LearnHub. All Rights Reserved.</p>
            <div class="footer-links">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Service</a>
                <a href="#">Refund Policy</a>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
    <script>
      // Mobile Navigation Toggle
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const authButtons = document.querySelector('.auth-buttons');

hamburger.addEventListener('click', () => {
    // Toggle navigation menu for mobile
    hamburger.classList.toggle('active');
    navLinks.classList.toggle('active');
    authButtons.classList.toggle('active');
});

// Add active class to nav links when clicked
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', () => {
        document.querySelector('.nav-links a.active')?.classList.remove('active');
        link.classList.add('active');
    });
});

// Countdown Timer for Limited Offer
function startCountdown() {
    const days = document.getElementById('days');
    const hours = document.getElementById('hours');
    const minutes = document.getElementById('minutes');
    const seconds = document.getElementById('seconds');
    
    // Set the countdown end date (3 days from now)
    const countdownDate = new Date();
    countdownDate.setDate(countdownDate.getDate() + 3);
    
    function updateCountdown() {
        const now = new Date().getTime();
        const distance = countdownDate - now;
        
        // Calculate days, hours, minutes, and seconds
        const daysValue = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hoursValue = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutesValue = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const secondsValue = Math.floor((distance % (1000 * 60)) / 1000);
        
        // Update the HTML elements
        if(days) days.textContent = daysValue < 10 ? `0${daysValue}` : daysValue;
        if(hours) hours.textContent = hoursValue < 10 ? `0${hoursValue}` : hoursValue;
        if(minutes) minutes.textContent = minutesValue < 10 ? `0${minutesValue}` : minutesValue;
        if(seconds) seconds.textContent = secondsValue < 10 ? `0${secondsValue}` : secondsValue;
        
        // If countdown is over
        if (distance < 0) {
            clearInterval(countdownInterval);
            if(days) days.textContent = '00';
            if(hours) hours.textContent = '00';
            if(minutes) minutes.textContent = '00';
            if(seconds) seconds.textContent = '00';
            
            const offerBtn = document.querySelector('.offer-btn');
            if(offerBtn) {
                offerBtn.textContent = 'Offer Expired';
                offerBtn.disabled = true;
            }
        }
    }
    
    // Update countdown every second
    updateCountdown();
    const countdownInterval = setInterval(updateCountdown, 1000);
}

// Start countdown when page loads
document.addEventListener('DOMContentLoaded', () => {
    if (document.getElementById('days')) {
        startCountdown();
    }
    
    // Initialize other functionality
    initializeEnrollButtons();
    initializeCouponCode();
    setupContentProtection();
    setupLazyLoading();
    setupDarkMode();
    checkReferral();
});

// Course Enrollment Button Click
function initializeEnrollButtons() {
    document.querySelectorAll('.enroll-btn').forEach(button => {
        button.addEventListener('click', (e) => {
            const courseCard = e.target.closest('.course-card');
            if (!courseCard) return;
            
            const courseName = courseCard.querySelector('h3')?.textContent || 'Course';
            const coursePrice = courseCard.querySelector('.current-price')?.textContent || '₹0';
            
            // Store selected course in localStorage
            localStorage.setItem('selectedCourse', JSON.stringify({
                name: courseName,
                price: coursePrice
            }));
            
            // Redirect to checkout page
            window.location.href = 'checkout.html';
        });
    });
}

// Apply Coupon Code
function initializeCouponCode() {
    const applyCouponBtn = document.getElementById('apply-coupon');
    if (applyCouponBtn) {
        applyCouponBtn.addEventListener('click', () => {
            const couponInput = document.getElementById('coupon-code');
            if (!couponInput) return;
            
            const couponCode = couponInput.value.trim();
            const priceElement = document.getElementById('course-price');
            const discountElement = document.getElementById('discount-amount');
            const totalElement = document.getElementById('total-amount');
            
            // Check if coupon is valid
            if (couponCode === 'NEWUSER50') {
                // Apply 50% discount
                const originalPrice = parseFloat(priceElement.dataset.original || priceElement.textContent.replace(/[^\d.]/g, ''));
                const discountedPrice = originalPrice * 0.5;
                const discount = originalPrice - discountedPrice;
                
                if(priceElement) priceElement.textContent = `₹${originalPrice.toFixed(2)}`;
                if(discountElement) discountElement.textContent = `₹${discount.toFixed(2)}`;
                if(totalElement) totalElement.textContent = `₹${discountedPrice.toFixed(2)}`;
                
                // Show success message
                showMessage('Coupon applied successfully! 50% discount.', 'success');
            } else {
                // Show error message
                showMessage('Invalid coupon code. Please try again.', 'error');
            }
        });
    }
}

// Show message function
function showMessage(message, type) {
    const messageContainer = document.createElement('div');
    messageContainer.className = `message ${type}`;
    messageContainer.textContent = message;
    
    document.body.appendChild(messageContainer);
    
    // Remove message after 3 seconds
    setTimeout(() => {
        messageContainer.classList.add('hide');
        setTimeout(() => {
            messageContainer.remove();
        }, 500);
    }, 3000);
}

// Content protection setup
function setupContentProtection() {
    // Prevent right-click on video elements
    document.addEventListener('contextmenu', (e) => {
        if (e.target.tagName === 'VIDEO') {
            e.preventDefault();
            showMessage('Right-clicking on videos is disabled for content protection.', 'warning');
        }
    });

    // Add watermark to videos
    document.querySelectorAll('video').forEach(video => {
        if (localStorage.getItem('userEmail')) {
            const watermark = document.createElement('div');
            watermark.className = 'video-watermark';
            watermark.textContent = localStorage.getItem('userEmail');
            video.parentElement.appendChild(watermark);
        }
    });
}

// Lazy loading for images
function setupLazyLoading() {
    const lazyImages = document.querySelectorAll('img[data-src]');
    
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                    imageObserver.unobserve(img);
                }
            });
        });
        
        lazyImages.forEach(img => {
            imageObserver.observe(img);
        });
    } else {
        // Fallback for browsers that don't support IntersectionObserver
        lazyImages.forEach(img => {
            img.src = img.dataset.src;
            img.removeAttribute('data-src');
        });
    }
}

// Dark mode toggle
function setupDarkMode() {
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    if (darkModeToggle) {
        darkModeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            
            // Save preference to localStorage
            if (document.body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
            } else {
                localStorage.setItem('darkMode', 'disabled');
            }
        });
        
        // Check for saved dark mode preference
        if (localStorage.getItem('darkMode') === 'enabled') {
            document.body.classList.add('dark-mode');
        }
    }
}

// Check for referral in URL when page loads
function checkReferral() {
    const urlParams = new URLSearchParams(window.location.search);
    const refId = urlParams.get('ref');
    
    if (refId) {
        // Store referral ID in localStorage
        localStorage.setItem('referredBy', refId);
        showMessage('Welcome! You were referred by a friend.', 'info');
    }
}

// Handle checkout process
document.getElementById('checkout-btn')?.addEventListener('click', function() {
    // Get form values
    const name = document.getElementById('name')?.value;
    const email = document.getElementById('email')?.value;
    const phone = document.getElementById('phone')?.value;
    
    // Basic validation
    if (!name || !email || !phone) {
        showMessage('Please fill in all required fields.', 'error');
        return;
    }
    
    // Get selected payment method
    const selectedPayment = document.querySelector('input[name="payment"]:checked');
    if (!selectedPayment) {
        showMessage('Please select a payment method.', 'error');
        return;
    }
    
    // Process payment based on method
    const paymentMethod = selectedPayment.id;
    
    if (paymentMethod === 'card-payment') {
        // Simulate card payment processing
        showMessage('Processing payment...', 'info');
        setTimeout(() => {
            // Store user info in localStorage
            localStorage.setItem('userEmail', email);
            localStorage.setItem('userName', name);
            
            // Redirect to success page
            window.location.href = 'success.html';
        }, 2000);
    } else {
        // For UPI and Bank Transfer
        const fileInput = paymentMethod === 'upi-payment' ? 
            document.getElementById('receipt-file') : 
            document.getElementById('bank-receipt-file');
            
        if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
            showMessage('Please upload payment proof.', 'error');
            return;
        }
        
        // Simulate receipt verification
        showMessage('Verifying payment...', 'info');
        setTimeout(() => {
            // Store user info in localStorage
            localStorage.setItem('userEmail', email);
            localStorage.setItem('userName', name);
            
            // Redirect to success page with pending status
            window.location.href = 'success.html?status=pending';
        }, 2000);
    }
});

// Handle payment method selection
document.querySelectorAll('.payment-method').forEach(method => {
    method.addEventListener('click', function() {
        // Update radio button
        this.querySelector('input[type="radio"]').checked = true;
        
        // Update active class
        document.querySelectorAll('.payment-method').forEach(m => {
            m.classList.remove('active');
        });
        this.classList.add('active');
        
        // Show/hide appropriate payment form
        const paymentMethod = this.dataset.method;
        document.querySelectorAll('.payment-form').forEach(form => {
            form.style.display = 'none';
        });
        
        document.getElementById(`${paymentMethod}-form`).style.display = 
            paymentMethod === 'upi' ? 'block' : 
            paymentMethod === 'bank' ? 'block' : 'block';
            
        // Show receipt upload for UPI and Bank transfer
        if (paymentMethod === 'upi' || paymentMethod === 'bank') {
            document.querySelector(`#${paymentMethod}-form .receipt-upload`).style.display = 'block';
        }
    });
});

// Handle file upload
document.getElementById('receipt-file')?.addEventListener('change', function() {
    const fileName = this.files[0]?.name || 'No file selected';
    document.getElementById('file-name').textContent = fileName;
});

document.getElementById('bank-receipt-file')?.addEventListener('change', function() {
    const fileName = this.files[0]?.name || 'No file selected';
    document.getElementById('bank-file-name').textContent = fileName;
});
    </script>
</body>
</html>

If multiple courses are offered, a well-organized course catalog is necessary.

Key Features:

  • Course Cards: Include a thumbnail, title, price, instructor details, and course duration.
  • Filters & Sorting: Allow sorting by categories (Coding, Finance, Design), price, and rating.
  • Wishlist & Compare Feature: Enable users to save and compare courses.
  • Enrollment Count: Show the number of enrolled students for credibility.

3. Course Detail Page – Convince Users to Buy

A detailed course page should provide in-depth information and motivate users to enroll.

Features to Include:

  • Course Curriculum: Display an outline of topics covered.
  • Instructor Details: Include a photo, experience, and a short bio.
  • Student Reviews & Ratings: Show real user feedback.
  • Pricing & Enrollment Button: Highlight discounted prices and CTA buttons.

4. Payment Gateway Integration

Since there’s no backend, integrating easy-to-use payment options is crucial.

Payment Options:

  • UPI QR Code (Google Pay, PhonePe, Paytm)
  • Razorpay, PayPal Payment Button
  • Credit/Debit Card Payments
  • Manual Payment Upload System: Users can upload payment receipts for verification.

5. Student Dashboard – Manage Enrolled Courses

Once a student enrolls, they need access to their purchased courses.

Key Features:

  • My Courses Section: View enrolled courses with a progress tracker.
  • Completion Certificate Download Option
  • Profile Management: Update name, email, and password.

6. Video & Content Protection – Prevent Piracy

To secure your course materials, implement the following:

  • Disable Right-Click & Downloads
  • Watermark Videos with Student Name & Email
  • Limited Access System (Video Expiry After X Days)

7. Responsive & Mobile-Friendly Design

Ensure the website is optimized for mobile users.

  • Fast Loading with Lazy Loading for Images & Videos
  • Dark Mode Option
  • User-Friendly Navigation

8. SEO & Social Media Integration

Optimize the site for search engines and easy sharing.

  • SEO Friendly URLs (e.g., /mastering-javascript-course)
  • Meta Tags & Keywords Optimization
  • Social Share Buttons for Course Pages & Certificates

9. Affiliate & Referral System – Expand Your Reach

Encourage users to promote your courses in exchange for commissions.

  • Referral Links for Students
  • Commission Tracking Dashboard
  • Affiliate Payouts via UPI/PayPal

10. Admin Panel (For Future Expansion)

If you plan to scale, consider adding an admin dashboard.

  • Course Upload & Management
  • User Enrollment & Payment Tracking
  • Sales & Revenue Reports

Final Thoughts

  1. Start Small: Begin with a single-course version and expand later.
  2. Focus on Design First: Create a UI prototype before coding.
  3. Test Payments Thoroughly: Ensure a smooth transaction process.
  4. Add SEO & Social Features: Enhance visibility with blogs, FAQs, and testimonials.
  5. Gradually Scale: Integrate affiliate marketing, live classes, and quizzes over time.

By following these steps, you can build a fully functional course-selling website using HTML, CSS, and JavaScript that is user-friendly, secure, and optimized for growth. 🚀

View Website

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *