The EduLearn template is a modern, responsive education website layout designed for online learning platforms, course marketplaces, schools, and training institutes. It combines clean design with user-friendly navigation to deliver an engaging learning experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EduLearn - Modern Education Platform</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<style>
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', 'Open Sans', sans-serif;
}
:root {
--primary: #4361ee;
--primary-light: #4895ef;
--secondary: #3a0ca3;
--accent: #f72585;
--accent-light: #ff5c9b;
--light: #f8f9fa;
--light-gray: #e9ecef;
--dark: #212529;
--text: #2d3436;
--text-light: #6c757d;
--success: #4cc9f0;
--warning: #f9c74f;
--danger: #f94144;
--transition: all 0.3s ease;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
--radius: 12px;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
background-color: var(--light);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
section {
padding: 80px 0;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
background: var(--primary);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
gap: 8px;
}
.btn:hover {
background: var(--secondary);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
}
.btn-accent {
background: var(--accent);
box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);
}
.btn-accent:hover {
background: var(--accent-light);
box-shadow: 0 8px 20px rgba(247, 37, 133, 0.4);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
box-shadow: none;
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.btn-sm {
padding: 10px 20px;
font-size: 0.9rem;
}
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.5rem;
color: var(--secondary);
position: relative;
font-weight: 700;
}
.section-title:after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--accent);
margin: 15px auto;
border-radius: 2px;
}
.section-subtitle {
text-align: center;
max-width: 700px;
margin: 0 auto 50px;
color: var(--text-light);
font-size: 1.1rem;
}
/* Header & Navigation */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
header.scrolled {
padding: 5px 0;
backdrop-filter: blur(10px);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
transition: var(--transition);
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.logo i {
color: var(--accent);
font-size: 2rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: 5px;
}
.nav-link {
padding: 10px 15px;
text-decoration: none;
color: var(--text);
font-weight: 500;
transition: var(--transition);
position: relative;
border-radius: 50px;
}
.nav-link:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
}
.nav-link:hover {
color: var(--primary);
background: rgba(67, 97, 238, 0.05);
}
.nav-link:hover:after {
width: 70%;
}
.nav-cta {
margin-left: 15px;
}
.hamburger {
display: none;
cursor: pointer;
background: var(--light-gray);
width: 45px;
height: 45px;
border-radius: 50%;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 4px;
transition: var(--transition);
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--text);
transition: var(--transition);
}
.hamburger.active {
background: var(--primary);
}
.hamburger.active span {
background: white;
}
.hamburger.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Hero Section */
.hero {
padding: 160px 0 100px;
background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
color: white;
position: relative;
overflow: hidden;
}
.hero-content {
max-width: 600px;
z-index: 2;
position: relative;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
animation: fadeInUp 1s ease;
line-height: 1.2;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
animation: fadeInUp 1s ease 0.2s;
animation-fill-mode: both;
}
.hero-btns {
animation: fadeInUp 1s ease 0.4s;
animation-fill-mode: both;
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.hero-image {
position: absolute;
right: 0;
bottom: 0;
width: 50%;
max-width: 600px;
animation: float 6s ease-in-out infinite;
z-index: 1;
}
/* Stats Section */
.stats {
background: white;
padding: 50px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.stat-item {
text-align: center;
padding: 20px;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 10px;
}
.stat-text {
color: var(--text-light);
font-weight: 500;
}
/* Features Section */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: white;
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
opacity: 0;
transform: translateY(20px);
display: flex;
flex-direction: column;
align-items: center;
}
.feature-card.visible {
opacity: 1;
transform: translateY(0);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.feature-icon {
width: 80px;
height: 80px;
background: rgba(67, 97, 238, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: var(--primary);
font-size: 2rem;
transition: var(--transition);
}
.feature-card:hover .feature-icon {
background: var(--primary);
color: white;
transform: scale(1.1) rotate(5deg);
}
.feature-card h3 {
margin-bottom: 15px;
color: var(--secondary);
font-size: 1.4rem;
}
.feature-card p {
color: var(--text-light);
}
/* Courses Section */
.courses {
background: #f9f9ff;
}
.course-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.course-card {
background: white;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
opacity: 0;
transform: translateY(20px);
}
.course-card.visible {
opacity: 1;
transform: translateY(0);
}
.course-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.course-img {
height: 200px;
width: 100%;
background: linear-gradient(45deg, #4361ee, #3a0ca3);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
position: relative;
overflow: hidden;
}
.course-img:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.course-content {
padding: 25px;
}
.course-content h3 {
margin-bottom: 10px;
color: var(--secondary);
font-size: 1.3rem;
}
.course-content p {
color: var(--text-light);
margin-bottom: 20px;
}
.course-info {
display: flex;
justify-content: space-between;
margin-top: 20px;
color: var(--text-light);
font-size: 0.9rem;
border-top: 1px solid var(--light-gray);
padding-top: 15px;
}
.course-info span {
display: flex;
align-items: center;
gap: 5px;
}
.course-rating {
display: flex;
align-items: center;
gap: 5px;
color: var(--warning);
font-weight: 500;
}
/* Testimonials */
.testimonials-container {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.testimonial {
background: white;
padding: 40px;
border-radius: var(--radius);
box-shadow: var(--shadow);
text-align: center;
margin: 20px;
opacity: 0;
transform: scale(0.9);
transition: var(--transition);
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.testimonial.active {
opacity: 1;
transform: scale(1);
position: relative;
}
.testimonial-img {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 20px;
background: linear-gradient(45deg, #4361ee, #3a0ca3);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8rem;
position: relative;
overflow: hidden;
}
.testimonial-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-quote {
font-style: italic;
margin-bottom: 20px;
font-size: 1.1rem;
line-height: 1.8;
color: var(--text);
position: relative;
}
.testimonial-quote:before {
content: """;
font-size: 4rem;
color: var(--primary-light);
opacity: 0.2;
position: absolute;
top: -20px;
left: -10px;
font-family: Georgia, serif;
}
.testimonial-author {
font-weight: 600;
color: var(--primary);
font-size: 1.1rem;
}
.testimonial-role {
font-size: 0.9rem;
color: var(--text-light);
}
.testimonial-dots {
display: flex;
justify-content: center;
margin-top: 30px;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
background: #ddd;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.dot.active {
background: var(--primary);
transform: scale(1.2);
}
/* Newsletter */
.newsletter {
background: linear-gradient(135deg, #3a0ca3 0%, #4361ee 100%);
color: white;
text-align: center;
padding: 60px 0;
}
.newsletter-container {
max-width: 600px;
margin: 0 auto;
}
.newsletter h2 {
margin-bottom: 20px;
}
.newsletter p {
margin-bottom: 30px;
opacity: 0.9;
}
.newsletter-form {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
}
.newsletter-input {
flex: 1;
min-width: 300px;
padding: 15px 20px;
border: none;
border-radius: 50px;
font-size: 1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Footer */
footer {
background: var(--dark);
color: white;
padding: 60px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 20px;
color: var(--success);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #aaa;
text-decoration: none;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.footer-links a:hover {
color: var(--success);
padding-left: 5px;
}
.footer-links i {
font-size: 0.8rem;
color: var(--primary-light);
}
.social-icons {
display: flex;
margin-top: 20px;
gap: 10px;
}
.social-icons a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: var(--transition);
}
.social-icons a:hover {
background: var(--primary);
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid #444;
color: #aaa;
font-size: 0.9rem;
}
/* Back to Top */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
transition: var(--transition);
opacity: 0;
visibility: hidden;
z-index: 999;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--secondary);
transform: translateY(-5px);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero h1 {
font-size: 3rem;
}
}
@media (max-width: 992px) {
.hero h1 {
font-size: 2.5rem;
}
.hero-image {
width: 45%;
opacity: 0.4;
}
.nav-menu {
position: fixed;
top: 80px;
right: -100%;
width: 280px;
height: calc(100vh - 80px);
background: white;
flex-direction: column;
align-items: center;
justify-content: flex-start;
transition: var(--transition);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
padding-top: 40px;
gap: 10px;
}
.nav-menu.active {
right: 0;
}
.nav-link {
margin: 5px 0;
font-size: 1.1rem;
padding: 12px 25px;
}
.nav-cta {
margin: 15px 0 0;
}
.hamburger {
display: flex;
}
.hero-btns {
flex-direction: column;
align-items: flex-start;
}
.newsletter-input {
min-width: 100%;
}
}
@media (max-width: 768px) {
.section-title {
font-size: 2rem;
}
.hero {
text-align: center;
padding: 140px 0 80px;
}
.hero-content {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-image {
display: none;
}
.hero-btns {
align-items: center;
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
.testimonial {
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.btn {
padding: 12px 24px;
}
.stats-container {
grid-template-columns: 1fr;
gap: 20px;
}
.stat-item {
padding: 15px;
}
.stat-number {
font-size: 2rem;
}
.feature-card, .course-card {
padding: 20px;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.social-icons {
justify-content: center;
}
}
</style>
</head>
<body>
<!-- Header & Navigation -->
<header id="header">
<div class="container nav-container">
<a href="#" class="logo">
<i class="fas fa-graduation-cap"></i>
EduLearn
</a>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav-menu" id="nav-menu">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#courses" class="nav-link">Courses</a></li>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#testimonials" class="nav-link">Testimonials</a></li>
<li><a href="#" class="nav-link">Blog</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
<li class="nav-cta"><a href="#" class="btn btn-sm">Sign Up</a></li>
</ul>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>Learn Without Limits</h1>
<p>Start, switch, or advance your career with more than 5,000 courses, Professional certificates, and degrees from world-class universities and companies.</p>
<div class="hero-btns">
<a href="#" class="btn">Join For Free <i class="fas fa-arrow-right"></i></a>
<a href="#" class="btn btn-outline"><i class="fas fa-play-circle"></i> Watch Video</a>
</div>
</div>
</div>
<div class="hero-image">
<i class="fas fa-laptop-code" style="font-size: 24rem; opacity: 0.2;"></i>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="container">
<div class="stats-container">
<div class="stat-item">
<div class="stat-number">5,000+</div>
<div class="stat-text">Online Courses</div>
</div>
<div class="stat-item">
<div class="stat-number">120K+</div>
<div class="stat-text">Happy Students</div>
</div>
<div class="stat-item">
<div class="stat-number">250+</div>
<div class="stat-text">Expert Instructors</div>
</div>
<div class="stat-item">
<div class="stat-number">98%</div>
<div class="stat-text">Satisfaction Rate</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<h2 class="section-title">Why Choose Us</h2>
<p class="section-subtitle">Discover why thousands of students choose EduLearn for their education journey</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-globe"></i>
</div>
<h3>Learn Anything</h3>
<p>Explore any interest or trending topic, take prerequisites, and advance your skills</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-user-friends"></i>
</div>
<h3>Learn Together</h3>
<p>Join knowledge-sharing community of millions of learners worldwide</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-certificate"></i>
</div>
<h3>Earn Certificates</h3>
<p>Earn certificates and degrees from world-class universities and companies</p>
</div>
</div>
</div>
</section>
<!-- Courses Section -->
<section id="courses" class="courses">
<div class="container">
<h2 class="section-title">Popular Courses</h2>
<p class="section-subtitle">Browse our most popular courses and start your learning journey today</p>
<div class="course-cards">
<div class="course-card">
<div class="course-img">
<i class="fas fa-code"></i>
</div>
<div class="course-content">
<h3>Web Development Bootcamp</h3>
<p>Learn to build modern web applications with HTML, CSS, JavaScript and more</p>
<div class="course-info">
<span><i class="far fa-clock"></i> 12 weeks</span>
<span><i class="fas fa-user-graduate"></i> Advanced</span>
</div>
</div>
</div>
<div class="course-card">
<div class="course-img">
<i class="fas fa-paint-brush"></i>
</div>
<div class="course-content">
<h3>UI/UX Design Mastery</h3>
<p>Master design thinking, UI/UX principles, and tools like Figma and Adobe XD</p>
<div class="course-info">
<span><i class="far fa-clock"></i> 10 weeks</span>
<span class="course-rating"><i class="fas fa-star"></i> 4.9</span>
</div>
</div>
</div>
<div class="course-card">
<div class="course-img">
<i class="fas fa-chart-line"></i>
</div>
<div class="course-content">
<h3>Data Science Fundamentals</h3>
<p>Learn data analysis, visualization, and machine learning with Python</p>
<div class="course-info">
<span><i class="far fa-clock"></i> 14 weeks</span>
<span><i class="fas fa-user-graduate"></i> Beginner</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials">
<div class="container">
<h2 class="section-title">What Our Students Say</h2>
<p class="section-subtitle">Hear from our students about their learning experience</p>
<div class="testimonials-container">
<div class="testimonial active">
<div class="testimonial-img">
<i class="fas fa-user"></i>
</div>
<p class="testimonial-quote">The courses on EduLearn transformed my career. I went from complete beginner to getting a job as a web developer in just 6 months! The instructors are knowledgeable and the community is supportive.</p>
<h4 class="testimonial-author">Sarah Johnson</h4>
<p class="testimonial-role">Web Developer at TechCorp</p>
</div>
<div class="testimonial">
<div class="testimonial-img">
<i class="fas fa-user"></i>
</div>
<p class="testimonial-quote">The instructors are amazing and the content is up-to-date with industry standards. I've recommended EduLearn to all my colleagues. The projects helped me build a portfolio that impressed employers.</p>
<h4 class="testimonial-author">Michael Chen</h4>
<p class="testimonial-role">Data Analyst at DataWorld</p>
</div>
<div class="testimonial">
<div class="testimonial-img">
<i class="fas fa-user"></i>
</div>
<p class="testimonial-quote">As a teacher myself, I appreciate the pedagogical approach. The lessons are well-structured and the projects are challenging and relevant. I've upgraded my skills significantly through these courses.</p>
<h4 class="testimonial-author">Emily Rodriguez</h4>
<p class="testimonial-role">Science Teacher</p>
</div>
<div class="testimonial-dots">
<div class="dot active" data-index="0"></div>
<div class="dot" data-index="1"></div>
<div class="dot" data-index="2"></div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="newsletter">
<div class="container newsletter-container">
<h2>Subscribe to Our Newsletter</h2>
<p>Get the latest updates on new courses, special offers, and educational resources.</p>
<form class="newsletter-form">
<input type="email" class="newsletter-input" placeholder="Enter your email address">
<button type="submit" class="btn btn-accent">Subscribe</button>
</form>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>EduLearn</h3>
<p>Empowering learners worldwide through accessible, high-quality education.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></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-in"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Explore</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> Home</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Courses</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Features</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Testimonials</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Categories</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> Web Development</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Data Science</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Design</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Business</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Photography</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-map-marker-alt"></i> 123 Education St, Learn City</a></li>
<li><a href="#"><i class="fas fa-phone"></i> +1 (234) 567-8900</a></li>
<li><a href="#"><i class="fas fa-envelope"></i> info@edulearn.com</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2023 EduLearn. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<a href="#" class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</a>
<script>
// Navigation toggle
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', () => {
navMenu.classList.toggle('active');
hamburger.classList.toggle('active');
});
// Close mobile menu when clicking on links
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
hamburger.classList.remove('active');
});
});
// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Testimonial slider
const testimonials = document.querySelectorAll('.testimonial');
const dots = document.querySelectorAll('.dot');
let currentTestimonial = 0;
function showTestimonial(index) {
testimonials.forEach(testimonial => testimonial.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
testimonials[index].classList.add('active');
dots[index].classList.add('active');
currentTestimonial = index;
}
dots.forEach(dot => {
dot.addEventListener('click', () => {
const index = parseInt(dot.getAttribute('data-index'));
showTestimonial(index);
});
});
// Auto slide testimonials
setInterval(() => {
currentTestimonial = (currentTestimonial + 1) % testimonials.length;
showTestimonial(currentTestimonial);
}, 5000);
// Animate elements on scroll
const featureCards = document.querySelectorAll('.feature-card');
const courseCards = document.querySelectorAll('.course-card');
const observerOptions = {
threshold: 0.2,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
featureCards.forEach(card => {
observer.observe(card);
});
courseCards.forEach(card => {
observer.observe(card);
});
// Back to top button
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
});
backToTopBtn.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>
EduLearn HTML Template - Preview
