Premium
0
11
Edusphere
Edusphere template is a learning platform offering courses, degrees, and expert mentorship. This design makes learning more intuitive.
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 - Empowering Minds Anywhere Anytime</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">
<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;
}
</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 header -->
<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="group relative"><button
class="flex items-center gap-1 hover:text-accent-yellow transition">Courses
<i class="fa-solid fa-chevron-down text-[10px]"></i></button>
</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 header -->
<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 partners -->
<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 partners -->
<!-- block:start why-choose-us -->
<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 why-choose-us -->
<!-- block:start explore-departments -->
<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 p-6 rounded-2xl flex justify-between items-center cursor-pointer group">
<span class="text-xl font-bold">Business Management</span><i
class="fa-solid fa-chevron-down"></i></div>
<div
class="accordion-item bg-accent-green text-white p-6 rounded-2xl flex justify-between items-center cursor-pointer">
<span class="text-xl font-bold">Psychology</span><i
class="fa-solid fa-chevron-down"></i></div>
<div
class="accordion-item bg-accent-yellow text-slate-900 p-8 rounded-3xl">
<div class="flex justify-between items-center mb-8"><span
class="text-xl font-bold">Computer Science</span><i
class="fa-solid fa-chevron-up"></i></div>
<div class="space-y-6">
<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 border-b border-black/10 pb-4">
<span class="font-medium">Curriculum Highlights</span><a
href="#" class="text-sm underline font-bold">View</a></div>
</div>
</div>
<div
class="accordion-item bg-accent-blue text-white p-6 rounded-2xl flex justify-between items-center cursor-pointer">
<span class="text-xl font-bold">EEE</span><i
class="fa-solid fa-chevron-down"></i></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 explore-departments -->
<!-- block:start how-it-works -->
<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 how-it-works -->
<!-- block:start news-insights -->
<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 news-insights -->
<!-- block:start testimonials -->
<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 class="text-center">
<div class="relative inline-block mb-10">
<div
class="w-32 h-32 rounded-[2rem] overflow-hidden bg-accent-yellow mx-auto">
<img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg"
alt="Student" 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">Amy R., <span
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
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
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
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-2 mt-20">
<div class="w-2 h-2 rounded-full bg-slate-600"></div>
<div class="w-2 h-2 rounded-full bg-accent-green"></div>
<div class="w-2 h-2 rounded-full bg-slate-600"></div>
<div class="w-2 h-2 rounded-full bg-slate-600"></div>
<div class="w-2 h-2 rounded-full bg-slate-600"></div>
</div>
</div>
</section><!-- block:end testimonials -->
<!-- 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 -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages with a single yearly payment.
€60
per year
Get Unlimited Access
