Premium
0
96
Edusphere
Edusphere is a versatile e-learning template for online courses, degree programs, expert mentors, student reviews, and education platforms.
Download Codebase
Commercial License<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edusphere | Tailwind CSS E-Learning Platform Template</title>
<meta name="description"
content="Edusphere is a versatile Tailwind CSS e-learning template for online courses, degree programs, expert mentors, student reviews, and education platforms.">
<meta name="keywords"
content="Edusphere, Tailwind CSS template, HTML website template, e-learning platform template, online course landing page, education website, responsive LMS design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Edusphere | Tailwind CSS E-Learning Platform Template">
<meta property="og:description" content="A versatile Tailwind CSS e-learning template for online courses, degree programs, expert mentors, student reviews, and education platforms.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Edusphere template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Edusphere | Tailwind CSS E-Learning Platform Template">
<meta name="twitter:description" content="A versatile Tailwind CSS e-learning template for online courses, degree programs, expert mentors, student reviews, and education platforms.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Edusphere template preview">
<script src="https://cdn.tailwindcss.com"></script>
<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=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<style>
body
{
font-family: 'Inter', sans-serif;
}
.dark-section
{
background-color: #1A1A1A;
color: #FFFFFF;
}
.accent-yellow
{
color: #FFD25D;
}
.bg-accent-yellow
{
background-color: #FFD25D;
}
.accent-green
{
color: #5CC195;
}
.bg-accent-green
{
background-color: #5CC195;
}
.accent-coral
{
color: #FF8566;
}
.bg-accent-coral
{
background-color: #FF8566;
}
.accent-blue
{
color: #6C92F2;
}
.bg-accent-blue
{
background-color: #6C92F2;
}
.stat-border
{
border-color: rgba(255, 255, 255, 0.1);
}
.accordion-item
{
transition: all 0.3s ease;
}
.accordion-panel
{
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.accordion-item.is-open .accordion-panel
{
grid-template-rows: 1fr;
opacity: 1;
}
.accordion-panel-inner
{
overflow: hidden;
}
.accordion-chevron
{
transition: transform 0.3s ease;
}
.accordion-item.is-open .accordion-chevron
{
transform: rotate(180deg);
}
.courses-chevron
{
transition: transform 0.2s ease;
}
.courses-dropdown-trigger[aria-expanded="true"] .courses-chevron
{
transform: rotate(180deg);
}
</style>
<style data-grapesjs-styles="true">
#ilh9hm
{
letter-spacing: -0.6px;
}
#ixknem-2
{
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scroll-snap-strictness: proximity;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
letter-spacing: -0.6px;
}
</style>
</head>
<body class="bg-[#F8F9FA] text-[#333333]">
<!-- block:start navbar -->
<header id="header"
class="dark-section py-6 px-4 md:px-12 border-b border-white/5">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-2"><span
class="text-2xl font-bold tracking-tight">Edu<font color="#ffd25d"
id="il41c">sphere</font></span></div>
<nav class="hidden lg:flex items-center gap-8 text-sm font-medium"><a
href="#" class="accent-yellow">Home</a>
<div class="courses-dropdown relative"><button type="button"
class="courses-dropdown-trigger flex items-center gap-1 hover:text-accent-yellow transition"
aria-expanded="false" aria-controls="courses-menu">Courses
<i
class="courses-chevron fa-solid fa-chevron-down text-[10px]"></i></button>
<div id="courses-menu"
class="hidden absolute top-full left-0 z-50 mt-4 w-56 overflow-hidden rounded-2xl border border-white/10 bg-[#242424] p-2 shadow-2xl"
aria-hidden="true">
<a href="#"
class="block rounded-xl px-4 py-3 hover:bg-white/10 hover:text-accent-yellow transition">All
Courses</a>
<a href="#"
class="block rounded-xl px-4 py-3 hover:bg-white/10 hover:text-accent-yellow transition">Business
& Management</a>
<a href="#"
class="block rounded-xl px-4 py-3 hover:bg-white/10 hover:text-accent-yellow transition">Technology</a>
<a href="#"
class="block rounded-xl px-4 py-3 hover:bg-white/10 hover:text-accent-yellow transition">Creative
Arts</a>
</div>
</div><a href="#"
class="hover:text-accent-yellow transition">Degrees</a><a href="#"
class="hover:text-accent-yellow transition">Mentors</a><a href="#"
class="hover:text-accent-yellow transition">Blog</a><a href="#"
class="hover:text-accent-yellow transition">Contacts</a>
</nav><button
class="border border-white/20 rounded-full px-6 py-2 text-sm font-medium flex items-center gap-2 hover:bg-white/5 transition">
Explore Courses <i
class="fa-solid fa-arrow-right-long -rotate-45"></i></button>
</div>
</header><!-- block:end navbar -->
<main>
<!-- block:start hero -->
<section id="hero"
class="dark-section pt-16 pb-24 px-4 md:px-12 overflow-hidden">
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
<div class="max-w-xl">
<h1 class="text-5xl md:text-6xl font-bold leading-tight mb-8">
Future‑Ready Learning Everywhere</h1>
<p class="text-slate-400 text-lg mb-10 leading-relaxed">
<strong>Education has moved beyond the classroom</strong> —
flexible, real, and built around you. No boring lectures. No
stress. Just growth.</p><a href="#"
class="inline-flex items-center gap-3 text-accent-green font-semibold hover:gap-5 transition-all">
Start Learning <i class="fa-solid fa-arrow-right-long"></i></a>
</div>
<div class="relative flex justify-center lg:justify-end">
<div class="relative w-full max-w-[500px]">
<!-- Background abstract shapes -->
<div
class="absolute top-0 right-10 w-24 h-48 bg-accent-coral rounded-2xl -rotate-12 z-0">
</div>
<div
class="absolute bottom-4 left-0 w-12 h-12 bg-accent-yellow rounded-lg rotate-12 z-0">
</div>
<div
class="relative z-10 rounded-[2.5rem] overflow-hidden bg-accent-green aspect-[4/5]">
<img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_b56eec6972_c6399cc642c0ba5e.png"
alt="modern female student with headphones and blue hoodie looking at camera, holding straps of her backp"
class="w-full h-full object-cover"></div>
</div>
</div>
</div>
</section><!-- block:end hero -->
<!-- block:start clients -->
<section id="partners" class="dark-section pb-24 px-4 md:px-12">
<div class="max-w-7xl mx-auto">
<div
class="bg-white/5 rounded-3xl py-10 px-8 flex flex-wrap justify-center items-center gap-12 md:gap-20 opacity-60">
<span
class="text-2xl font-bold tracking-tighter lowercase">duolingo</span>
<div class="flex items-center gap-1"><i
class="fa-brands fa-microsoft text-xl"></i> <span
class="text-xl font-semibold">Microsoft</span></div><span
class="text-2xl font-semibold">Google</span>
<div class="flex items-center gap-1"><i
class="fa-brands fa-linkedin text-xl"></i> <span
class="text-xl font-semibold">LinkedIn</span></div>
<div class="flex items-center gap-1"><i
class="fa-brands fa-adobe text-xl"></i> <span
class="text-xl font-semibold">Adobe</span></div>
</div>
</div>
</section><!-- block:end clients -->
<!-- block:start about -->
<section id="why-choose-us"
class="dark-section pb-32 px-4 md:px-12 pt-[50px]">
<div class="max-w-7xl mx-auto text-center mb-20">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Why Choose Us?</h2>
<p class="accent-yellow text-sm font-medium tracking-wide">Reasons To
Love Edusphere</p>
</div>
<div class="max-w-7xl mx-auto grid md:grid-cols-2">
<div
class="p-12 border-r stat-border border-b text-center md:text-left">
<h3 class="text-4xl font-bold mb-2">25,000+</h3>
<p class="accent-blue font-medium mb-6">Active Learners Worldwide
</p>
<p class="text-slate-400 text-sm leading-relaxed max-w-sm">From high
school grads to working professionals — students in over 20
countries are actively learning with Edusphere. Our global
community grows stronger every day, fueled by curiosity and
ambition.</p>
</div>
<div class="p-12 border-b stat-border text-center md:text-left">
<h3 class="text-4xl font-bold mb-2">98%</h3>
<p class="accent-green font-medium mb-6">Course Completion Rate</p>
<p class="text-slate-400 text-sm leading-relaxed max-w-sm">Our
structured modules, motivating support system, and flexible
scheduling keep learners on track — helping nearly every student
not just start, but finish what they begin.</p>
</div>
<div class="p-12 border-r stat-border text-center md:text-left">
<h3 class="text-4xl font-bold mb-2">15,000+</h3>
<p class="accent-yellow font-medium mb-6">Mentor Sessions Delivered
</p>
<p class="text-slate-400 text-sm leading-relaxed max-w-sm">Real
humans, real help. Whether it's a 1-on-1 session, a live Q&A,
or a group workshop — our mentors make sure no question goes
unanswered, and no learner feels stuck.</p>
</div>
<div class="p-12 text-center md:text-left">
<h3 class="text-4xl font-bold mb-2">4.9/5</h3>
<p class="accent-coral font-medium mb-6">Average Student Rating</p>
<p class="text-slate-400 text-sm leading-relaxed max-w-sm">
Consistently rated high by students across all courses. They love
the clarity, the guidance, the experience — and most importantly,
the results they walk away with.</p>
</div>
</div>
</section><!-- block:end about -->
<!-- block:start products -->
<section id="explore-departments"
class="dark-section pb-32 px-4 md:px-12 pt-[100px]">
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-start">
<div id="imks8u">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Explore Departments
</h2>
<p class="accent-blue text-sm font-medium tracking-wide mb-12">
Choose What Moves You</p>
<div class="relative max-w-sm">
<div
class="absolute -top-4 -left-4 w-full h-full bg-accent-blue rounded-3xl opacity-50 z-0">
</div>
<div
class="absolute -bottom-4 -right-4 w-full h-full bg-accent-coral rounded-3xl opacity-30 z-0">
</div>
<div
class="relative z-10 rounded-3xl overflow-hidden bg-accent-yellow aspect-square">
<img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_0c6e0fd20f_96792e2c4aaabf57.png"
alt="cheerful male professional with glasses and yellow shirt holding books, standing in front of a yello"
class="w-full h-full object-cover"></div>
</div>
</div>
<div class="space-y-4">
<div
class="accordion-item bg-accent-coral text-white px-6 rounded-2xl">
<button type="button"
class="accordion-trigger w-full py-6 flex justify-between items-center text-left"
aria-expanded="false" aria-controls="department-business">
<span class="text-xl font-bold">Business Management</span><i
class="accordion-chevron fa-solid fa-chevron-down"></i>
</button>
<div id="department-business" class="accordion-panel"
aria-hidden="true" inert>
<div class="accordion-panel-inner">
<div class="space-y-6 pb-6 border-t border-white/20 pt-6">
<div class="flex justify-between items-center border-b border-white/20 pb-4">
<span class="font-medium">Programs Offered</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center border-b border-white/20 pb-4">
<span class="font-medium">Department Authorities</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center pb-4">
<span class="font-medium">Curriculum Highlights</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
</div>
</div>
</div>
</div>
<div
class="accordion-item bg-accent-green text-white px-6 rounded-2xl">
<button type="button"
class="accordion-trigger w-full py-6 flex justify-between items-center text-left"
aria-expanded="false" aria-controls="department-psychology">
<span class="text-xl font-bold">Psychology</span><i
class="accordion-chevron fa-solid fa-chevron-down"></i>
</button>
<div id="department-psychology" class="accordion-panel"
aria-hidden="true" inert>
<div class="accordion-panel-inner">
<div class="space-y-6 pb-6 border-t border-white/20 pt-6">
<div class="flex justify-between items-center border-b border-white/20 pb-4">
<span class="font-medium">Programs Offered</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center border-b border-white/20 pb-4">
<span class="font-medium">Department Authorities</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center pb-4">
<span class="font-medium">Curriculum Highlights</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
</div>
</div>
</div>
</div>
<div
class="accordion-item bg-accent-yellow text-white px-6 rounded-2xl">
<button type="button"
class="accordion-trigger w-full py-8 flex justify-between items-center text-left"
aria-expanded="true" aria-controls="department-computer-science">
<span class="text-xl font-bold">Computer Science</span><i
class="accordion-chevron fa-solid fa-chevron-down"></i>
</button>
<div id="department-computer-science" class="accordion-panel"
aria-hidden="false">
<div class="accordion-panel-inner">
<div class="space-y-6 pb-8 border-t border-black/10 pt-8">
<div class="flex justify-between items-center border-b border-black/10 pb-4">
<span class="font-medium">Programs Offered</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center border-b border-black/10 pb-4">
<span class="font-medium">Department Authorities</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center pb-4">
<span class="font-medium">Curriculum Highlights</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
</div>
</div>
</div>
</div>
<div
class="accordion-item bg-accent-blue text-white px-6 rounded-2xl">
<button type="button"
class="accordion-trigger w-full py-6 flex justify-between items-center text-left"
aria-expanded="false" aria-controls="department-eee">
<span class="text-xl font-bold">EEE</span><i
class="accordion-chevron fa-solid fa-chevron-down"></i>
</button>
<div id="department-eee" class="accordion-panel"
aria-hidden="true" inert>
<div class="accordion-panel-inner">
<div class="space-y-6 pb-6 border-t border-white/20 pt-6">
<div class="flex justify-between items-center border-b border-white/20 pb-4">
<span class="font-medium">Programs Offered</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center border-b border-white/20 pb-4">
<span class="font-medium">Department Authorities</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
<div class="flex justify-between items-center pb-4">
<span class="font-medium">Curriculum Highlights</span><a
href="#" class="text-sm underline font-bold">View</a>
</div>
</div>
</div>
</div>
</div>
<div class="pt-6"><a href="#"
class="inline-flex items-center gap-3 accent-green font-semibold hover:gap-5 transition-all">
See More <i class="fa-solid fa-arrow-right-long"></i></a></div>
</div>
</div>
</section><!-- block:end products -->
<!-- block:start process -->
<section id="how-it-works" class="py-24 px-4 md:px-12 bg-[#F0F1F3]">
<div class="max-w-7xl mx-auto text-center mb-20">
<h2 class="text-4xl font-bold mb-4">How Learning Works</h2>
<p class="text-slate-500 font-medium">Flexible Steps. Real Learning.
Results That Matter</p>
</div>
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-8 mb-16">
<!-- Card 1 -->
<div
class="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all">
<div class="p-8">
<div
class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center mb-6">
<i class="fa-solid fa-shapes text-xl"></i></div>
<h4 class="text-xl font-bold mb-4">Choose A Program That Matches
Your Goals</h4>
<p class="text-slate-400 text-sm leading-relaxed mb-8">Dive Into
Our Diverse Selection Of Programs Across Departments. Find The
Perfect Fit That Aligns With Your Passion And Ambition.</p>
</div>
<div class="h-40 bg-slate-100 overflow-hidden"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_c5b08818a1_d039ce0e53cb1366.png"
alt="vibrant mosaic pattern of various architectural shapes and textures, colorful abstract art"
class="w-full h-full object-cover"></div>
</div><!-- Card 2 -->
<div
class="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all">
<div class="p-8">
<div
class="w-12 h-12 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-6">
<i class="fa-solid fa-compass text-xl"></i></div>
<h4 class="text-xl font-bold mb-4">Learn Your Way — Live Or
On-Demand</h4>
<p class="text-slate-400 text-sm leading-relaxed mb-8">Join
Engaging Live Sessions Led By Expert Educators Or Watch Recorded
Classes At Your Convenience. Flexible Learning Designed To Fit
Your Schedule.</p>
</div>
<div class="h-40 bg-slate-100 overflow-hidden"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_a21f0087fc_7998c8980df76bf8.png"
alt="abstract art with colorful circular and curved lines, geometric patterns in pastel and vibrant tones"
class="w-full h-full object-cover"></div>
</div><!-- Card 3 -->
<div
class="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all">
<div class="p-8">
<div
class="w-12 h-12 bg-red-100 text-red-600 rounded-xl flex items-center justify-center mb-6">
<i class="fa-solid fa-scroll text-xl"></i></div>
<h4 class="text-xl font-bold mb-4">Build Projects, Gain Skills
& Graduate Proud</h4>
<p class="text-slate-400 text-sm leading-relaxed mb-8">Apply What
You Learn In Real-World Projects, Boost Your Confidence, And
Graduate With A Certificate That Actually Means Something.</p>
</div>
<div class="h-40 bg-slate-100 overflow-hidden"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_aca1ed7525_46f676f9c7ace615.png"
alt="vibrant pop art style illustration with bold geometric shapes and primary colors, abstract design"
class="w-full h-full object-cover"></div>
</div>
</div>
<div
class="max-w-7xl mx-auto flex flex-wrap items-center justify-center gap-4">
<span class="text-lg font-bold mr-4">Special Features You May
Need</span><button
class="bg-[#212121] text-white px-6 py-2 rounded-full text-sm">Flexible
Learning Access</button><button
class="bg-[#212121] text-white px-6 py-2 rounded-full text-sm">Real
Projects</button><button
class="bg-[#212121] text-white px-6 py-2 rounded-full text-sm">Industry
Ready</button><button
class="bg-[#212121] text-white px-6 py-2 rounded-full text-sm">Progress
Tracking</button></div>
</section><!-- block:end process -->
<!-- block:start blog -->
<section id="news" class="dark-section py-24 px-4 md:px-12">
<div
class="max-w-7xl mx-auto flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
<div>
<h2 class="text-4xl md:text-5xl font-bold mb-4">News & Insights
</h2>
<p
class="accent-blue text-sm font-medium tracking-wide leading-relaxed max-w-sm">
Latest Stories, Smart Updates, And Insights That Matter</p>
</div>
</div>
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-8">
<!-- Large Featured Post -->
<div class="flex flex-col gap-6">
<div
class="rounded-3xl overflow-hidden aspect-[16/9] bg-accent-yellow">
<img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_5b0d8295f6_429a0c5e419002ad.png"
alt="abstract 3d composition of floating books, graduation cap, pencils and stationery items on a bright "
class="w-full h-full object-contain p-12"></div>
<div>
<h3 class="text-2xl font-bold mb-4">The Future Of Learning: Top
Education Trends You Shouldn't Miss</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-6">Discover
How Emerging Technologies Like AI, AR, And Personalized Learning
Paths Are Transforming Education. Stay Ahead With What's Shaping
Tomorrow's Classrooms — Both Virtual And Real.</p><a href="#"
class="inline-flex items-center gap-2 accent-green font-semibold">Learn
More <i class="fa-solid fa-arrow-right-long"></i></a>
</div>
</div><!-- Secondary Posts -->
<div class="space-y-12">
<div class="flex flex-col md:flex-row gap-8">
<div
class="w-full md:w-48 h-48 flex-shrink-0 rounded-2xl overflow-hidden bg-accent-blue">
<img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_b9bd53e46d_51b8510377b93e85.png"
alt="excited male student holding a trophy and books, blue background, minimalist photography"
class="w-full h-full object-cover"></div>
<div>
<h4 class="text-xl font-bold mb-4 accent-yellow">Inspiring
Journeys: How Students Around The World Succeed With Us</h4>
<p class="text-slate-400 text-sm leading-relaxed mb-4">Read real
stories of learners from different countries who unlocked new
academic and career opportunities through our platform.</p><a
href="#"
class="inline-flex items-center gap-2 accent-green text-sm font-semibold">Learn
More <i class="fa-solid fa-arrow-right-long"></i></a>
</div>
</div>
<div class="flex flex-col md:flex-row gap-8">
<div
class="w-full md:w-48 h-48 flex-shrink-0 rounded-2xl overflow-hidden bg-white/5 border border-white/10">
<img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_285349924e_0ba15abe6076198e.png"
alt="collage of artistic elements, typography 'PUBLISH', and colorful graphics, design inspiration theme"
class="w-full h-full object-cover"></div>
<div>
<h4 class="text-xl font-bold mb-4 accent-yellow">Expert Articles
& Guest Insights: Learn From The Best In The Field</h4>
<p class="text-slate-400 text-sm leading-relaxed mb-4">Dive into
thought-provoking content written by top educators, industry
mentors, and career advisors. Get practical advice and career
foresight in every read.</p><a href="#"
class="inline-flex items-center gap-2 accent-green text-sm font-semibold">Learn
More <i class="fa-solid fa-arrow-right-long"></i></a>
</div>
</div>
</div>
</div>
</section><!-- block:end blog -->
<!-- block:start reviews -->
<section id="testimonials"
class="dark-section py-24 px-4 md:px-12 border-t border-white/5">
<div class="max-w-7xl mx-auto text-center mb-20">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Testimonials</h2>
<p class="accent-yellow text-sm font-medium tracking-wide">From Doubt
To Done — Hear Their Journey</p>
</div>
<div class="max-w-4xl mx-auto relative">
<!-- Decorative Elements -->
<div class="absolute -top-10 -left-20 opacity-20"><i
class="fa-solid fa-ellipsis-vertical text-6xl text-accent-green"></i>
</div>
<div class="absolute -bottom-10 -right-20 opacity-20"><i
class="fa-solid fa-ellipsis-vertical text-6xl text-accent-coral"></i>
</div>
<div id="testimonial-content" class="text-center" aria-live="polite">
<div class="relative inline-block mb-10">
<div
class="w-32 h-32 rounded-[2rem] overflow-hidden bg-accent-yellow mx-auto">
<img id="testimonial-avatar"
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg"
alt="Amy R." class="w-full h-full object-cover"></div>
<div
class="absolute -top-2 -right-4 w-10 h-10 bg-accent-green rounded-full flex items-center justify-center text-white border-4 border-[#1A1A1A]">
<i class="fa-solid fa-quote-right text-xs"></i></div>
</div>
<h5 class="text-lg font-bold mb-1"><span
id="testimonial-name">Amy R.</span>, <span
id="testimonial-role"
class="font-normal text-slate-400">Undergrad Student,
Marketing</span></h5>
<div class="flex justify-center gap-1 accent-yellow mb-10 text-xs">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star"></i></div>
<div class="relative"><span
class="absolute -top-10 left-0 text-accent-coral text-6xl font-serif opacity-50">“</span>
<p
id="testimonial-quote"
class="text-xl md:text-2xl text-slate-300 leading-relaxed max-w-2xl mx-auto italic">
Before joining Edusphere, I was overwhelmed by all the options
out there. But everything just clicked. The live classes were
interactive, the instructors truly cared, and I could learn at
my own pace without feeling lost. Even after completing my
program, I still go back to the resources and reach out to
mentors when I need help. It's more than just a platform — it
feels like a learning family.
</p><span
class="absolute -bottom-10 right-0 text-accent-coral text-6xl font-serif opacity-50 rotate-180">“</span>
</div>
</div><!-- Controls -->
<div
class="flex items-center justify-between absolute top-1/2 -translate-y-1/2 w-full -mx-4">
<button type="button" id="testimonial-previous"
aria-label="Show previous testimonial"
class="w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-accent-green hover:text-white transition group"><i
class="fa-solid fa-chevron-left"></i></button><button
type="button" id="testimonial-next"
aria-label="Show next testimonial"
class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-slate-900 hover:bg-accent-green hover:text-white transition"><i
class="fa-solid fa-chevron-right"></i></button></div>
<div class="flex justify-center gap-3 mt-20" aria-label="Choose testimonial">
<button type="button"
class="testimonial-indicator w-2 h-2 rounded-full bg-accent-green"
aria-label="Show testimonial 1" aria-current="true"></button>
<button type="button"
class="testimonial-indicator w-2 h-2 rounded-full bg-slate-600"
aria-label="Show testimonial 2"></button>
<button type="button"
class="testimonial-indicator w-2 h-2 rounded-full bg-slate-600"
aria-label="Show testimonial 3"></button>
<button type="button"
class="testimonial-indicator w-2 h-2 rounded-full bg-slate-600"
aria-label="Show testimonial 4"></button>
<button type="button"
class="testimonial-indicator w-2 h-2 rounded-full bg-slate-600"
aria-label="Show testimonial 5"></button>
</div>
</div>
</section><!-- block:end reviews -->
<!-- block:start newsletter -->
<section id="cta"
class="dark-section py-24 px-4 md:px-12 border-t border-white/5">
<div class="max-w-7xl mx-auto">
<div
class="bg-accent-yellow rounded-[3rem] p-12 md:p-20 text-center relative overflow-hidden">
<!-- Decorative shapes -->
<div
class="absolute top-0 right-0 w-32 h-32 bg-accent-green rounded-bl-[3rem] opacity-80">
</div>
<div
class="absolute bottom-0 left-0 w-32 h-32 bg-accent-blue rounded-tr-[3rem] opacity-80">
</div>
<div
class="absolute top-4 left-4 w-12 h-12 bg-accent-coral rounded-full opacity-50">
</div>
<div class="relative z-10 max-w-2xl mx-auto">
<h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
Start Your Journey Today</h2>
<p class="text-slate-700 font-medium mb-12">Take The First Step
Toward Your Future — Your Goals, Your Pace, Your Path.</p>
<div class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
<input type="email" placeholder="Enter Your Email"
class="w-full px-6 py-4 rounded-full text-slate-800 focus:outline-none focus:ring-2 focus:ring-accent-green"><button
class="bg-slate-900 text-white px-8 py-4 rounded-full font-bold flex items-center justify-center gap-2 hover:bg-slate-800 transition whitespace-nowrap">
Apply <i
class="fa-solid fa-arrow-right-long -rotate-45"></i></button>
</div>
</div>
</div>
</div>
</section><!-- block:end newsletter -->
</main><!-- block:start footer -->
<footer id="footer"
class="dark-section pt-24 pb-12 px-4 md:px-12 border-t border-white/5">
<div class="max-w-7xl mx-auto">
<div class="grid lg:grid-cols-4 gap-16 mb-20">
<div class="col-span-1">
<div class="flex items-center gap-2 mb-8"><span
class="text-2xl font-bold tracking-tight"><span
id="ilh9hm">Edu</span>
<font id="ixknem-2" draggable="true" color="#ffd25d">sphere
</font>
</span></div>
<p class="text-slate-400 text-sm mb-8">© 2024 Edusphere. All Rights
Reserved</p>
<div class="flex gap-4"><a href="#"
class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-accent-yellow hover:text-slate-900 transition"><i
class="fa-brands fa-linkedin-in"></i></a><a href="#"
class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-accent-yellow hover:text-slate-900 transition"><i
class="fa-brands fa-facebook-f"></i></a><a href="#"
class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-accent-yellow hover:text-slate-900 transition"><i
class="fa-brands fa-x-twitter"></i></a><a href="#"
class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-accent-yellow hover:text-slate-900 transition"><i
class="fa-brands fa-youtube"></i></a></div>
</div>
<div
class="bg-accent-green/10 p-12 rounded-3xl col-span-3 grid grid-cols-1 md:grid-cols-3 gap-12">
<div>
<h5 class="font-bold mb-8 text-white">Quick Links</h5>
<ul class="space-y-4 text-slate-400 text-sm">
<li><a href="#"
class="hover:text-accent-yellow transition">Home</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Courses</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Degrees</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Mentors</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Blog</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Contacts</a>
</li>
</ul>
</div>
<div>
<h5 class="font-bold mb-8 text-white">Resources</h5>
<ul class="space-y-4 text-slate-400 text-sm">
<li><a href="#" class="hover:text-accent-yellow transition">Help
Center</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Privacy
Policy</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Terms &
Conditions</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Mentors</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Blog</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Contacts</a>
</li>
</ul>
</div>
<div>
<h5 class="font-bold mb-8 text-white">Information</h5>
<ul class="space-y-4 text-slate-400 text-sm">
<li><a href="#" class="hover:text-accent-yellow transition">Type
Of Courses</a></li>
<li><a href="#" class="hover:text-accent-yellow transition">How
It Works</a></li>
<li><a href="#"
class="hover:text-accent-yellow transition">Testimonial</a>
</li>
<li><a href="#"
class="hover:text-accent-yellow transition">Benefits</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer><!-- block:end footer -->
<script>
const coursesDropdown = document.querySelector('.courses-dropdown');
const coursesTrigger = coursesDropdown.querySelector('.courses-dropdown-trigger');
const coursesMenu = coursesDropdown.querySelector('#courses-menu');
const closeCoursesMenu = () => {
coursesTrigger.setAttribute('aria-expanded', 'false');
coursesMenu.setAttribute('aria-hidden', 'true');
coursesMenu.classList.add('hidden');
};
coursesTrigger.addEventListener('click', () => {
const willOpen = coursesTrigger.getAttribute('aria-expanded') === 'false';
if (willOpen) {
coursesTrigger.setAttribute('aria-expanded', 'true');
coursesMenu.setAttribute('aria-hidden', 'false');
coursesMenu.classList.remove('hidden');
} else {
closeCoursesMenu();
}
});
document.addEventListener('click', (event) => {
if (!coursesDropdown.contains(event.target)) closeCoursesMenu();
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && coursesTrigger.getAttribute('aria-expanded') === 'true') {
closeCoursesMenu();
coursesTrigger.focus();
}
});
document.querySelectorAll('.accordion-trigger').forEach((trigger) => {
trigger.addEventListener('click', () => {
const item = trigger.closest('.accordion-item');
const accordion = item.parentElement;
const willOpen = !item.classList.contains('is-open');
accordion.querySelectorAll('.accordion-item').forEach((otherItem) => {
otherItem.classList.remove('is-open');
otherItem.querySelector('.accordion-trigger').setAttribute('aria-expanded', 'false');
const otherPanel = otherItem.querySelector('.accordion-panel');
otherPanel.setAttribute('aria-hidden', 'true');
otherPanel.inert = true;
});
if (willOpen) {
item.classList.add('is-open');
trigger.setAttribute('aria-expanded', 'true');
const panel = item.querySelector('.accordion-panel');
panel.setAttribute('aria-hidden', 'false');
panel.inert = false;
}
});
});
const testimonials = [
{
name: 'Amy R.',
role: 'Undergrad Student, Marketing',
avatar: 'https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg',
quote: "Before joining Edusphere, I was overwhelmed by all the options out there. But everything just clicked. The live classes were interactive, the instructors truly cared, and I could learn at my own pace without feeling lost. Even after completing my program, I still go back to the resources and reach out to mentors when I need help. It's more than just a platform — it feels like a learning family."
},
{
name: 'Marcus T.',
role: 'Product Designer, UX Design',
avatar: 'https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg',
quote: 'The project-based lessons gave me a portfolio I was proud to share. My mentor challenged my ideas, helped me improve every week, and made the career change feel achievable. Within two months of graduating, I accepted my first product design role.'
},
{
name: 'Sofia L.',
role: 'Graduate Student, Data Science',
avatar: 'https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-8.jpg',
quote: 'I needed a program that could fit around work without compromising on depth. Edusphere gave me that balance. The recorded classes, practical exercises, and thoughtful feedback helped me turn difficult concepts into skills I now use every day.'
},
{
name: 'Daniel K.',
role: 'Founder, Business Management',
avatar: 'https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg',
quote: 'Every module connected theory to decisions I was making in my own company. The instructors brought real experience to each discussion, and the community introduced me to people facing the same challenges. It changed how I lead my team.'
},
{
name: 'Priya N.',
role: 'Software Engineer, Computer Science',
avatar: 'https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg',
quote: 'The curriculum was clear, demanding, and genuinely useful. I could revisit complex lessons, ask mentors precise questions, and build working applications instead of only watching lectures. That confidence made all the difference in my technical interviews.'
}
];
const testimonialAvatar = document.querySelector('#testimonial-avatar');
const testimonialName = document.querySelector('#testimonial-name');
const testimonialRole = document.querySelector('#testimonial-role');
const testimonialQuote = document.querySelector('#testimonial-quote');
const testimonialIndicators = document.querySelectorAll('.testimonial-indicator');
let activeTestimonial = 0;
const showTestimonial = (index) => {
activeTestimonial = (index + testimonials.length) % testimonials.length;
const testimonial = testimonials[activeTestimonial];
testimonialAvatar.src = testimonial.avatar;
testimonialAvatar.alt = testimonial.name;
testimonialName.textContent = testimonial.name;
testimonialRole.textContent = testimonial.role;
testimonialQuote.textContent = testimonial.quote;
testimonialIndicators.forEach((indicator, indicatorIndex) => {
const isActive = indicatorIndex === activeTestimonial;
indicator.classList.toggle('bg-accent-green', isActive);
indicator.classList.toggle('bg-slate-600', !isActive);
if (isActive) {
indicator.setAttribute('aria-current', 'true');
} else {
indicator.removeAttribute('aria-current');
}
});
};
document.querySelector('#testimonial-previous').addEventListener('click', () => {
showTestimonial(activeTestimonial - 1);
});
document.querySelector('#testimonial-next').addEventListener('click', () => {
showTestimonial(activeTestimonial + 1);
});
testimonialIndicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => showTestimonial(index));
});
</script>
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access
