Create a modern, responsive e-learning platform using Tailwind CSS. This project will guide you through creating a clean, intuitive interface that’s optimized for manual users. Hold and desktop
Project Functionality
- Technology Use: HTML5, Tailwindcss
- External Resources: Tailwind Css, Bootstrap icons
- Responsive: Yes
Download & Installation Guideline
To use this project source code effectively:
- Step 1: Download the source code by clicking the Source Code button below to get a ZIP file of the project. Extract the contents to your desired directory.
- Step 2: Open the project folder using a text editor or an integrated development environment (IDE) like Visual Studio Code.
- Step 3: To install the node_module folder from Tailwindcss run this command
<strong>npm install -D tailwindcss</strong>into the vs code terminal. It is only needed if you will use tailwind CLI not CDN. Direct CDN has designed this template. - Step 4: Install prettier to format your code.
- Step 5: After completing all the previous steps open your vs code live server to run your project
Related Content You Might Enjoy
Source Code
<!doctype html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>online course</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap"
rel="stylesheet" />
<!-- fontawesome cdn -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<!-- tailwind cdn -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="relative min-h-screen font-['League_Spartan']">
<!-- HEADER START -->
<header class="relative">
<!-- top header start -->
<section class="w-full bg-gray-950">
<div
class="flex justify-center lg:justify-between items-center px-4 sm:px-0 h-14 sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto">
<div class="hidden lg:flex gap-4 items-center">
<a href="#" class="space-x-1">
<i class="fa-solid fa-phone text-green-600"></i>
<span class="text-gray-100">Call: 123 4561 5523 </span>
</a>
<a href="#" class="space-x-1">
<i class="fa-regular fa-envelope text-green-600"></i>
<span class="text-gray-100">Email: info@edublink.co </span>
</a>
</div>
<div
class="h-full w-full sm:w-auto flex justify-between sm:justify-start items-center gap-4">
<a
href="#"
class="text-gray-200 capitalize hover:text-white duration-300"
>login/register</a
>
<a
href="#"
class="group bg-green-600 h-full w-fit px-4 flex gap-4 justify-center items-center text-gray-100 hover:bg-green-700 duration-300">
<span class="capitalize text-base text-nowrap">apply now</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</div>
</div>
</section>
<!-- top header end -->
<!-- navbar start -->
<section class="w-full relative">
<nav
class="flex justify-between items-center px-4 sm:px-0 h-20 w-full sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto">
<a href="#" class="space-x-2 text-green-600">
<i class="fa-solid fa-graduation-cap text-2xl lg:text-3xl"></i>
<span class="text-2xl capitalize font-extrabold">e-learning</span>
</a>
<ul
id="menu"
class="fixed z-50 top-0 bottom-0 left-0 w-0 bg-gray-950 text-lg text-gray-100 flex justify-center items-center flex-col lg:gap-4 lg:relative lg:w-auto lg:bg-transparent lg:text-gray-950 lg:flex-row overflow-hidden transition-all duration-500">
<li class="w-full">
<a
href="#"
class="capitalize block text-center px-3 py-4 font-semibold hover:text-green-600 duration-300"
>home</a
>
</li>
<li class="w-full">
<a
href="#course"
class="capitalize block text-center px-3 py-4 font-semibold hover:text-green-600 duration-300"
>course</a
>
</li>
<li class="w-full">
<a
href="#instructor"
class="capitalize block text-center px-3 py-4 font-semibold hover:text-green-600 duration-300"
>instructor</a
>
</li>
<li class="w-full">
<a
href="#news"
class="capitalize block text-center px-3 py-4 font-semibold hover:text-green-600 duration-300"
>news</a
>
</li>
<li class="w-full">
<a
href="#blog"
class="capitalize block text-center px-3 py-4 font-semibold hover:text-green-600 duration-300"
>blog</a
>
</li>
</ul>
<div class="space-x-3">
<i class="fa-solid fa-magnifying-glass text-xl"></i>
<a href="#"><i class="fa-solid fa-cart-shopping text-xl"></i></a>
<i
id="menu-btn"
class="fa-solid fa-bars text-xl lg:hidden cursor-pointer"></i>
</div>
</nav>
</section>
<!-- navbar end -->
</header>
<!-- HEADER END -->
<!-- MAIN CONTENT START -->
<main>
<!-- banner start -->
<section
class="h-screen md:h-[600px] relative bg-[url('https://i.postimg.cc/Y25f0990/pupil.jpg')] bg-center bg-no-repeat bg-cover">
<div
class="h-full w-full top-0 left-0 bg-[#00000099] flex flex-col gap-6 justify-center items-center px-4 md:px-12 2xl:px-16">
<h1
class="text-center text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-gray-50 capitalize font-extrabold w-full sm:w-11/12 md:w-10/12 xl:w-8/12 2xl:w-7/12 mx-auto">
The Best Program to Enroll for Exchange
</h1>
<p
class="text-gray-50 text-xl sm:text-2xl w-full sm:w-10/12 md:w-7/12 lg:w-5/12 xl:w-4/12 text-center">
Excepteur sint occaecat cupidatat non provident sunt in culpa qui
official deserunt mollit.
</p>
<a
href="#"
class="bg-green-600 px-12 py-4 rounded-lg text-lg text-gray-50 flex gap-2 items-center hover:bg-green-700 duration-300 opacity-100">
<span class="capitalize text-nowrap">explore</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</div>
</section>
<!-- banner end -->
<!-- category start -->
<section class="pt-32 pb-8 space-y-16">
<div class="space-y-4 text-center px-4">
<span class="text-xl capitalize text-green-600 font-semibold"
>categories</span
>
<h2 class="text-2xl md:text-4xl lg:text-5xl capitalize font-bold">
Online <span class="text-green-500">Classes</span> For Remote
Learning.
</h2>
<p class="text-lg md:text-xl">
Consectetur adipiscing elit sed do eiusmod tempor.
</p>
</div>
<div
class="grid gap-4 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 w-full px-4 sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto capitalize">
<!-- category card one -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-blue-100 group-hover:bg-blue-600 duration-300">
<i
class="fa-solid fa-palette text-3xl text-blue-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">managment</span>
</div>
<!-- category card two -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-orange-100 group-hover:bg-orange-600 duration-300">
<i
class="fa-solid fa-user text-3xl text-orange-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">art & design</span>
</div>
<!-- category card three -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-indigo-100 group-hover:bg-indigo-600 duration-300">
<i
class="fa-solid fa-code text-3xl text-indigo-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">development</span>
</div>
<!-- category card four -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-pink-100 group-hover:bg-pink-600 duration-300">
<i
class="fa-solid fa-pills text-3xl text-pink-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize"
>health & fitness</span
>
</div>
<!-- category card five -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-amber-100 group-hover:bg-amber-600 duration-300">
<i
class="fa-solid fas fa-database text-3xl text-amber-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">data science</span>
</div>
<!-- category card six -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-red-100 group-hover:bg-red-600 duration-300">
<i
class="fa-solid fas fa-pencil-ruler text-3xl text-red-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">design</span>
</div>
<!-- category card seven -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-lime-100 group-hover:bg-lime-600 duration-300">
<i
class="fa-solid fas fa-bullhorn text-3xl text-lime-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">marketing</span>
</div>
<!-- category card eight -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-rose-100 group-hover:bg-rose-600 duration-300">
<i
class="fa-solid fas fa-laptop text-3xl text-green-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize"
>computer science</span
>
</div>
<!-- category card nine -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-purple-100 group-hover:bg-purple-600 duration-300">
<i
class="fa-solid fas fa-camera text-3xl text-green-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">photography</span>
</div>
<!-- category card ten -->
<div
class="rounded-md flex justify-center items-center flex-col shadow-sm border h-52 space-y-2 group hover:shadow-md duration-300">
<div
class="w-[80px] h-[80px] rounded-full flex justify-center items-center rounded-full bg-violet-100 group-hover:bg-violet-600 duration-300">
<i
class="fa-solid fas fa-headphones text-3xl text-green-600 group-hover:text-gray-50 duration-300"></i>
</div>
<span class="text-xl font-semibold capitallize">music class</span>
</div>
</div>
</section>
<!-- category end -->
<!-- course start -->
<section id="course" class="pt-24 pb-8 space-y-16">
<div class="space-y-4 text-center px-4">
<span class="text-xl capitalize text-green-600 font-semibold"
>popular courses</span
>
<h2 class="text-2xl md:text-4xl lg:text-5xl capitalize font-bold">
Pick A Course To Get Started.
</h2>
</div>
<div
class="grid gap-6 lg:grid-cols-2 w-full px-4 sm:w-11/12 md:w-10/12 lg:w-9/12 2xl:w-8/12 capitalize mx-auto">
<!-- course card one -->
<div
class="group shadow-md border rounded-md p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-none xl:grid-cols-5 items-center hover:bg-green-600 duration-300">
<div
class="relative h-full rounded-md flex flex-col justify-center items-center xl:col-span-2">
<div
class="absolute top-2 left-2 bg-green-500 text-gray-100 px-2 py-1 rounded-md">
<i class="fa-regular fa-clock text-sm"></i>
<span class="text-sm capitalize">12 weeks</span>
</div>
<img
src="https://i.postimg.cc/kg9QNpWd/education-1.jpg"
class="top-0 left-0 w-full max-h-[300px] md:h-full object-cover rounded-md"
alt="course image" />
</div>
<div class="space-y-4 xl:col-span-3">
<span
class="text-xl font-bold text-green-600 group-hover:text-gray-100"
>$49</span
>
<a
href="#"
class="capitalize text-xl sm:text-2xl font-semibold block group-hover:text-gray-100">
Grow Personal Financial Security Thinking & Principles
</a>
<div class="flex gap-6 items-center">
<div class="group-hover:text-gray-100">
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
</div>
<p
class="text-gray-600 capitalize font-semibold group-hover:text-gray-100">
(5.0/2 ratings)
</p>
</div>
<div class="flex gap-6 items-center">
<div class="space-x-1">
<i
class="fa-solid fa-chart-simple text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>8 leassons</span
>
</div>
<div class="space-x-1">
<i
class="fa-solid fa-users text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>952 students</span
>
</div>
</div>
</div>
</div>
<!-- course card two -->
<div
class="group shadow-md border rounded-md p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-none xl:grid-cols-5 items-center hover:bg-green-600 duration-300">
<div
class="relative h-full rounded-md flex flex-col justify-center items-center xl:col-span-2">
<div
class="absolute top-2 left-2 bg-green-500 text-gray-100 px-2 py-1 rounded-md">
<i class="fa-regular fa-clock text-sm"></i>
<span class="text-sm capitalize">12 weeks</span>
</div>
<img
src="https://i.postimg.cc/tJW6W3TT/child.jpg"
class="top-0 left-0 w-full max-h-[300px] md:h-full object-cover rounded-md"
alt="course image" />
</div>
<div class="space-y-4 xl:col-span-3">
<span
class="text-xl font-bold text-green-600 group-hover:text-gray-100"
>$49</span
>
<a
href="#"
class="capitalize text-xl sm:text-2xl font-semibold block group-hover:text-gray-100">
The Complete Guide to Build RESTful API Application
</a>
<div class="flex gap-6 items-center">
<div class="group-hover:text-gray-100">
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
</div>
<p
class="text-gray-600 capitalize font-semibold group-hover:text-gray-100">
(5.0/2 ratings)
</p>
</div>
<div class="flex gap-6 items-center">
<div class="space-x-1">
<i
class="fa-solid fa-chart-simple text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>8 leassons</span
>
</div>
<div class="space-x-1">
<i
class="fa-solid fa-users text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>952 students</span
>
</div>
</div>
</div>
</div>
<!-- course card three -->
<div
class="group shadow-md border rounded-md p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-none xl:grid-cols-5 items-center hover:bg-green-600 duration-300">
<div
class="relative h-full rounded-md flex flex-col justify-center items-center xl:col-span-2">
<div
class="absolute top-2 left-2 bg-green-500 text-gray-100 px-2 py-1 rounded-md">
<i class="fa-regular fa-clock text-sm"></i>
<span class="text-sm capitalize">12 weeks</span>
</div>
<img
src="https://i.postimg.cc/Y25f0990/pupil.jpg"
class="top-0 left-0 w-full max-h-[300px] md:h-full object-cover rounded-md"
alt="course image" />
</div>
<div class="space-y-4 xl:col-span-3">
<span
class="text-xl font-bold text-green-600 group-hover:text-gray-100"
>$89</span
>
<a
href="#"
class="capitalize text-xl sm:text-2xl font-semibold block group-hover:text-gray-100">
Competitive Strategy Law for Management Consultants
</a>
<div class="flex gap-6 items-center">
<div class="group-hover:text-gray-100">
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
</div>
<p
class="text-gray-600 capitalize font-semibold group-hover:text-gray-100">
(5.0/2 ratings)
</p>
</div>
<div class="flex gap-6 items-center">
<div class="space-x-1">
<i
class="fa-solid fa-chart-simple text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>8 leassons</span
>
</div>
<div class="space-x-1">
<i
class="fa-solid fa-users text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>952 students</span
>
</div>
</div>
</div>
</div>
<!-- course card four -->
<div
class="group shadow-md border rounded-md p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-none xl:grid-cols-5 items-center hover:bg-green-600 duration-300">
<div
class="relative h-full rounded-md flex flex-col justify-center items-center xl:col-span-2">
<div
class="absolute top-2 left-2 bg-green-500 text-gray-100 px-2 py-1 rounded-md">
<i class="fa-regular fa-clock text-sm"></i>
<span class="text-sm capitalize">12 weeks</span>
</div>
<img
src="https://i.postimg.cc/mD0MPXTJ/books.jpg"
class="top-0 left-0 w-full max-h-[300px] md:h-full object-cover rounded-md"
alt="course image" />
</div>
<div class="space-y-4 xl:col-span-3">
<span
class="text-xl font-bold text-green-600 group-hover:text-gray-100"
>$100</span
>
<a
href="#"
class="capitalize text-xl sm:text-2xl font-semibold block group-hover:text-gray-100">
The Authentic Confidence and Self-Esteem Masterclass
</a>
<div class="flex gap-6 items-center">
<div class="group-hover:text-gray-100">
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
<i
class="fa-regular fa-star-half-stroke lg:text-sm text-green-600 group-hover:text-gray-100"></i>
</div>
<p
class="text-gray-600 capitalize font-semibold group-hover:text-gray-100">
(5.0/2 ratings)
</p>
</div>
<div class="flex gap-6 items-center">
<div class="space-x-1">
<i
class="fa-solid fa-chart-simple text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>8 leassons</span
>
</div>
<div class="space-x-1">
<i
class="fa-solid fa-users text-green-600 group-hover:text-gray-100"></i>
<span class="text-gray-600 group-hover:text-gray-100"
>952 students</span
>
</div>
</div>
</div>
</div>
</div>
<!-- course section button -->
<a
href="#"
class="bg-green-600 px-12 py-4 rounded-lg text-lg text-gray-50 flex gap-2 items-center hover:bg-green-700 duration-300 opacity-100 block w-fit mx-auto">
<span class="capitalize text-nowrap">browse more courses</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</section>
<!-- course end -->
<!-- partner section start -->
<section class="pt-32 pb-8">
<div
class="space-y-16 grid gap-x-20 xl:grid-cols-5 items-center sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto">
<div class="space-y-4 text-center xl:text-start xl:col-span-2">
<span class="text-xl capitalize text-green-600 font-semibold"
>our partners</span
>
<h2 class="text-2xl md:text-4xl lg:text-5xl capitalize font-bold">
learn with our partners
</h2>
<p class="text-xl xl:text-2xl font-bold xl:font-bold">
Consectetur adipiscing elit sed do eiusmod tempor.
</p>
</div>
<div class="xl:col-span-3 grid gap-0 grid-cols-2 md:grid-cols-4">
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/Vv8vy3ff/brand-01.png"
alt="partner-img" />
</div>
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/1t6Xj9Z7/brand-02.png"
alt="partner-img" />
</div>
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/s2b1mMbZ/brand-03.png"
alt="partner-img" />
</div>
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/FKY70yC4/brand-04.png"
alt="partner-img" />
</div>
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/W1bD1LMt/brand-05.png"
alt="partner-img" />
</div>
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/VkGJSGRg/brand-06.png"
alt="partner-img" />
</div>
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/65h2K54D/brand-07.png"
alt="partner-img" />
</div>
<div class="border flex justify-center items-center h-[150px]">
<img
src="https://i.postimg.cc/MKwMgjH7/brand-08.png"
alt="partner-img" />
</div>
</div>
</div>
</section>
<!-- partner section end -->
<!-- instructor section start -->
<section id="instructor" class="pt-32 pb-8 space-y-16">
<div class="space-y-4 text-center px-4 sm:px-8 lg:px-16">
<span class="text-lg capitalize text-green-600 font-semibold"
>instructor</span
>
<h2 class="text-2xl md:text-4xl lg:text-5xl capitalize font-bold">
course instructor
</h2>
</div>
<div
class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 w-full px-4 sm:px-8 sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto capitalize overflow-hidden">
<!-- instructor card one -->
<div class="group overflow-hidden rounded-md">
<div class="h-[300px] w-full overflow-hidden">
<img
src="https://i.postimg.cc/rmpq4WKv/smartboy.jpg"
alt="instructor image"
class="h-full w-full object-fill origin-center group-hover:scale-150 duration-1000" />
</div>
<div
class="bg-white h-0 grid grid-cols-4 group-hover:h-14 duration-300 overflow-hidden">
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-x-twitter text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-facebook-f text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-linkedin-in text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-discord text-xl"></i
></a>
</div>
<div
class="py-4 bg-gray-950 space-y-4 text-center text-gray-100 capitalize">
<h3 class="text-lg sm:text-2xl font-bold">json jhonson</h3>
<span class="text-xl">full stack developer</span>
</div>
</div>
<!-- instructor card two -->
<div class="group overflow-hidden rounded-md">
<div class="h-[300px] w-full overflow-hidden">
<img
src="https://i.postimg.cc/FHtF67BL/aifemale.jpg"
alt="instructor image"
class="h-full w-full object-fill origin-center group-hover:scale-150 duration-1000" />
</div>
<div
class="bg-white h-0 grid grid-cols-4 group-hover:h-14 duration-300 overflow-hidden">
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-x-twitter text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-facebook-f text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-linkedin-in text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-discord text-xl"></i
></a>
</div>
<div
class="py-4 bg-gray-950 space-y-4 text-center text-gray-100 capitalize">
<h3 class="text-lg sm:text-2xl font-bold">orobindu neel</h3>
<span class="text-xl">prompt engineer</span>
</div>
</div>
<!-- instructor card three -->
<div class="group overflow-hidden rounded-md">
<div class="h-[300px] w-full overflow-hidden">
<img
src="https://i.postimg.cc/6pd6xtk1/handsome.jpg"
alt="instructor image"
class="h-full w-full object-fill origin-center group-hover:scale-150 duration-1000" />
</div>
<div
class="bg-white h-0 grid grid-cols-4 group-hover:h-14 duration-300 overflow-hidden">
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-x-twitter text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-facebook-f text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-linkedin-in text-xl"></i
></a>
<a
href="#"
class="border-r w-full h-full flex justify-center items-center group hover:bg-gray-950 hover:text-white duration-300"
><i class="fa-brands fa-discord text-xl"></i
></a>
</div>
<div
class="py-4 bg-gray-950 space-y-4 text-center text-gray-100 capitalize">
<h3 class="text-lg sm:text-2xl font-bold">alex homonis</h3>
<span class="text-xl">blockchain developer</span>
</div>
</div>
</div>
</section>
<!-- instructor section end -->
<!-- faq section start -->
<section class="pt-32 pb-8 space-y-16">
<div class="space-y-4 text-center px-4">
<span class="text-xl capitalize text-green-600 font-semibold"
>FAQ’S</span
>
<h2 class="text-2xl md:text-4xl lg:text-5xl capitalize font-bold">
learn form <span class="text-green-600">e-learning</span>
</h2>
<p class="tex-lg sm:text-xl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
<br />
eius mod tempor incididunt labore dolore magna.
</p>
</div>
<div
class="w-full px-4 sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto capitalize space-y-8 accordion">
<!-- accordion one -->
<div
class="bg-green-50 border rounded-lg overflow-hidden accordion-body">
<div
class="flex justify-between items-center px-8 cursor-pointer text-gray-950 accordion-header">
<h4 class="capitalize md:text-xl font-bold py-6">
how can i contact a moderate directly?
</h4>
<i
class="fa-solid fa-chevron-down accordion-down-btn transition-transform duration-300"></i>
</div>
<div
class="overflow-hidden max-h-0 transition-[max-height] duration-300 ease-in-out accordion-content">
<p
class="px-8 pb-6 pt-4 text-lg sm:text-xl text-gray-600 text-justify md:text-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur cupiditate, eos ea ratione perspiciatis voluptatem
incidunt assumenda placeat id eaque sequi sed quaerat laborum
exercitationem dignissimos dolor hic fugiat quo? Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Enim ab non ipsum
labore, deleniti inventore nemo, dignissimos tempora eius ex
numquam accusantium, corporis nostrum quae exercitationem a
autem doloribus reiciendis!
</p>
</div>
</div>
<!-- accordion two -->
<div
class="bg-green-50 border rounded-lg overflow-hidden accordion-body">
<div
class="flex justify-between items-center px-8 cursor-pointer text-gray-950 accordion-header">
<h4 class="capitalize md:text-xl font-bold py-6">
what is the best payment method?
</h4>
<i
class="fa-solid fa-chevron-down accordion-down-btn transition-transform duration-300"></i>
</div>
<div
class="overflow-hidden max-h-0 transition-[max-height] duration-300 ease-in-out accordion-content">
<p
class="px-8 pb-6 pt-4 text-lg sm:text-xl text-gray-600 text-justify md:text-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur cupiditate, eos ea ratione perspiciatis voluptatem
incidunt assumenda placeat id eaque sequi sed quaerat laborum
exercitationem dignissimos dolor hic fugiat quo? Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Enim ab non ipsum
labore, deleniti inventore nemo, dignissimos tempora eius ex
numquam accusantium, corporis nostrum quae exercitationem a
autem doloribus reiciendis!
</p>
</div>
</div>
<!-- accordion three -->
<div
class="bg-green-50 border rounded-lg overflow-hidden accordion-body">
<div
class="flex justify-between items-center px-8 cursor-pointer text-gray-950 accordion-header">
<h4 class="capitalize md:text-xl font-bold py-6">
what is the refund policy?
</h4>
<i
class="fa-solid fa-chevron-down accordion-down-btn transition-transform duration-300"></i>
</div>
<div
class="overflow-hidden max-h-0 transition-[max-height] duration-300 ease-in-out accordion-content">
<p
class="px-8 pb-6 pt-4 text-lg sm:text-xl text-gray-600 text-justify md:text-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur cupiditate, eos ea ratione perspiciatis voluptatem
incidunt assumenda placeat id eaque sequi sed quaerat laborum
exercitationem dignissimos dolor hic fugiat quo? Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Enim ab non ipsum
labore, deleniti inventore nemo, dignissimos tempora eius ex
numquam accusantium, corporis nostrum quae exercitationem a
autem doloribus reiciendis!
</p>
</div>
</div>
</div>
</section>
<!-- faq section end -->
<!-- event & news start -->
<section id="news" class="pt-32 pb-8 space-y-16">
<div class="space-y-4 text-center px-4">
<span class="text-xl capitalize text-green-600 font-semibold"
>events & news</span
>
<h2 class="text-2xl md:text-4xl lg:text-5xl capitalize font-bold">
Popular Events & News
</h2>
</div>
<div
class="w-full px-4 sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto grid gap-6 md:grid-cols-2 xl:grid-cols-3">
<!-- event card one -->
<div
class="bg-green-50 shadow-sm rounded-md relative overflow-hidden">
<!-- schedule time -->
<div
class="absolute top-3 left-3 bg-green-500 text-gray-100 px-2 py-1 rounded-md z-30">
<i class="fa-regular fa-clock text-sm"></i>
<span class="text-sm capitalize">7:00 pm - 9:00 pm</span>
</div>
<!-- event image -->
<img
src="https://i.postimg.cc/kg9QNpWd/education-1.jpg"
class="h-[250px] w-full object-cover"
alt="course image" />
<!-- event content -->
<div class="bg-inherit space-y-4 p-6">
<h3 class="capitalize text-2xl font-semibold">
Creative Teaching Seminar Master Class
</h3>
<p class="text-gray-600 text-lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo
perferendis culpa officia sequi nostrum quas.
</p>
<div class="space-x-3">
<i class="fa-solid fa-location-dot text-green-600"></i>
<span class="capitalize">torento, canada</span>
</div>
<a
href="#"
class="bg-green-600 px-6 py-2 rounded-lg text-lg text-gray-50 flex gap-2 items-center hover:bg-green-700 duration-300 block w-fit">
<span class="capitalize text-nowrap">learn more</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</div>
</div>
<!-- event card two -->
<div
class="bg-green-50 shadow-sm rounded-md relative overflow-hidden">
<!-- schedule time -->
<div
class="absolute top-3 left-3 bg-green-500 text-gray-100 px-2 py-1 rounded-md z-30">
<i class="fa-regular fa-clock text-sm"></i>
<span class="text-sm capitalize">7:00 pm - 9:00 pm</span>
</div>
<!-- event image -->
<img
src="https://i.postimg.cc/Y25f0990/pupil.jpg"
class="h-[250px] w-full object-cover"
alt="course image" />
<!-- event content -->
<div class="bg-inherit space-y-4 p-6">
<h3 class="capitalize text-2xl font-semibold">
Learn English in Ease Basic to Advance
</h3>
<p class="text-gray-600 text-lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo
perferendis culpa officia sequi nostrum quas.
</p>
<div class="space-x-3">
<i class="fa-solid fa-location-dot text-green-600"></i>
<span class="capitalize">torento, canada</span>
</div>
<a
href="#"
class="bg-green-600 px-6 py-2 rounded-lg text-lg text-gray-50 flex gap-2 items-center hover:bg-green-700 duration-300 block w-fit">
<span class="capitalize text-nowrap">learn more</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</div>
</div>
<!-- event card three -->
<div
class="bg-green-50 shadow-sm rounded-md relative overflow-hidden">
<!-- schedule time -->
<div
class="absolute top-3 left-3 bg-green-500 text-gray-100 px-2 py-1 rounded-md z-30">
<i class="fa-regular fa-clock text-sm"></i>
<span class="text-sm capitalize">7:00 pm - 9:00 pm</span>
</div>
<!-- event image -->
<img
src="https://i.postimg.cc/mD0MPXTJ/books.jpg"
class="h-[250px] w-full object-cover"
alt="course image" />
<!-- event content -->
<div class="bg-inherit space-y-4 p-6">
<h3 class="capitalize text-2xl font-semibold">
Navigating the Future of Business Education
</h3>
<p class="text-gray-600 text-lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo
perferendis culpa officia sequi nostrum quas.
</p>
<div class="space-x-3">
<i class="fa-solid fa-location-dot text-green-600"></i>
<span class="capitalize">torento, canada</span>
</div>
<a
href="#"
class="bg-green-600 px-6 py-2 rounded-lg text-lg text-gray-50 flex gap-2 items-center hover:bg-green-700 duration-300 block w-fit">
<span class="capitalize text-nowrap">learn more</span>
<i class="fa-solid fa-arrow-right-long"></i>
</a>
</div>
</div>
</div>
</section>
<!-- event & news end -->
<!-- contact section start -->
<div
class="mt-32 mb-8 bg-[url(https://i.postimg.cc/tJW6W3TT/child.jpg)] bg-no-repeat bg-cover bg-center min-h-[350px] relative">
<div
class="absolute h-full w-full bg-[#00000099] flex flex-col justify-center items-center gap-6 px-4 text-gray-50">
<h3 class="capitalize text-2xl md:text-3xl font-bold text-center">
we are always wating for your response
</h3>
<div class="space-x-2 text-2xl md:text-3xl">
<span class="capitalize font-bold">email:</span>
<a href="#" class="font-bold">info@elarning.com</a>
</div>
<div class="space-x-2 text-2xl md:text-3xl">
<span class="capitalize font-bold">call:</span>
<a href="#" class="font-bold tracking-wide">+11 01258745896</a>
</div>
</div>
</div>
<!-- contact section end -->
<!-- blog section start -->
<section id="blog" class="py-32 space-y-16">
<div class="space-y-4 text-center px-4">
<span class="text-xl capitalize text-green-600 font-semibold"
>latest articles</span
>
<h2 class="text-2xl md:text-4xl lg:text-5xl capitalize font-bold">
get news with e-learning
</h2>
</div>
<div
class="grid gap-8 lg:grid-cols-2 w-full px-4 sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto">
<!-- blog card one -->
<div class="rounded-md overflow-hidden space-y-6">
<img
src="https://i.postimg.cc/tJW6W3TT/child.jpg"
alt="artical img"
class="w-full h-[350px] rounded-md" />
<div class="space-y-4">
<div class="space-y-2">
<span class="capitalize text-lg text-green-600 font-semibold"
>science</span
>
<h4 class="text-2xl font-bold text-gray-700">
Crafting Effective Learning Guide Line
</h4>
<p class="text-lg text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eveniet doloribus nam veniam rem soluta delectus.
</p>
</div>
<div class="flex gap-x-6 gap-y-3 items-center">
<div class="space-x-2 text-lg">
<i class="fa-solid fa-calendar-days text-green-600"></i>
<span>15, nov 2024</span>
</div>
<div class="space-x-2 text-lg">
<i class="fa-regular fa-comments text-green-600"></i>
<span>com 0</span>
</div>
</div>
</div>
</div>
<div class="space-y-8">
<!-- blog card two -->
<div
class="rounded-md overflow-hidden grid gap-4 sm:grid-cols-2 lg:grid-cols-none xl:grid-cols-2 items-center">
<img
src="https://i.postimg.cc/JhzjvHT6/laptop.jpg"
alt="artical img"
class="w-full max-h-fit min-h-[200px] lg:h-[150px] object-cover rounded-md" />
<div class="">
<div class="space-y-2">
<div>
<span
class="capitalize text-lg text-green-600 font-semibold"
>technology</span
>
<h4 class="text-2xl font-bold text-gray-700">
Exploring Learning Landscapes in Academic
</h4>
</div>
<div class="flex gap-x-6 gap-y-3 items-center">
<div class="space-x-2 text-lg">
<i class="fa-solid fa-calendar-days text-green-600"></i>
<span>15, nov 2024</span>
</div>
<div class="space-x-2 text-lg">
<i class="fa-regular fa-comments text-green-600"></i>
<span>com 0</span>
</div>
</div>
</div>
</div>
</div>
<!-- blog card three -->
<div
class="rounded-md overflow-hidden grid gap-4 sm:grid-cols-2 lg:grid-cols-none xl:grid-cols-2 items-center">
<img
src="https://i.postimg.cc/Y25f0990/pupil.jpg"
alt="artical img"
class="w-full max-h-fit min-h-[200px] lg:h-[150px] object-cover rounded-md" />
<div class="">
<div class="space-y-2">
<div>
<span
class="capitalize text-lg text-green-600 font-semibold"
>learning</span
>
<h4 class="text-2xl font-bold text-gray-700">
Voices from the Learning Education Hub
</h4>
</div>
<div class="flex gap-x-6 gap-y-3 items-center">
<div class="space-x-2 text-lg">
<i class="fa-solid fa-calendar-days text-green-600"></i>
<span>15, nov 2024</span>
</div>
<div class="space-x-2 text-lg">
<i class="fa-regular fa-comments text-green-600"></i>
<span>com 0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- blog section end -->
</main>
<!-- FOOTER SECTION -->
<footer class="py-24 bg-gray-950">
<section
class="w-full px-4 sm:w-11/12 md:w-10/12 lg:w-9/12 xl:w-8/12 mx-auto grid gap-x-4 lg:gap-x-10 xl:gap-x-4 gap-y-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-12 justify-between">
<!-- about face -->
<div class="space-y-4 text-gray-100 xl:col-span-4">
<a href="#" class="space-x-2 text-green-600">
<i class="fa-solid fa-graduation-cap text-2xl lg:text-3xl"></i>
<span class="text-2xl capitalize font-extrabold">e-learning</span>
</a>
<div class="space-y-4">
<p class="text-lg leading-snug">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
praesentium quos necessitatibus similique unde maxime.
</p>
<div class="space-y-1">
<p class="space-x-2">
<span class="capitalize">address: </span>70-80 Upper St
Norwich NR2
</p>
<p class="space-x-2">
<span class="capitalize">call:</span
><a href="#" class="text-green-600 duration-300"
>+11 01258745896</a
>
</p>
<p class="space-x-2">
<span class="capitalize">email:</span
><a href="#" class="text-green-600 duration-300"
>info@elearning.com</a
>
</p>
</div>
</div>
</div>
<!-- online plateform face -->
<div class="space-y-4 text-gray-100 xl:col-span-2">
<h3 class="text-xl capitalize font-bold">online platform</h3>
<ul class="space-y-2">
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>about</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>course</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>instructor</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>events</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>instructor details</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>purchase guide</a
>
</li>
</ul>
</div>
<!-- links face -->
<div class="space-y-4 text-gray-100 xl:col-span-2">
<h3 class="text-xl capitalize font-bold">links</h3>
<ul class="space-y-2">
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>contact us</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>gallery</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>news & articles</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>FAQ'S</a
>
</li>
<li>
<a
href="#"
class="capitalize text-lg text-gray-400 hover:text-green-600 duration-300"
>signin/registration</a
>
</li>
</ul>
</div>
<!-- contact face -->
<div class="space-y-4 text-gray-100 lg:col-span-2 xl:col-span-4">
<h3 class="text-xl capitalize font-bold">contact</h3>
<p class="text-lg">
Enter your email address to register to our newsletter subscription
</p>
<div class="h-12 grid gap-2 sm:grid-cols-6">
<input
type="email"
name="email"
id="email"
placeholder="enter email"
class="h-full sm:col-span-4 border-none bg-gray-50 px-4 rounded-sm text-gray-950 placeholder:text-gray-950 placeholder:capitalize" />
<input
type="submit"
value="subscribe"
class="h-full sm:col-span-2 bg-green-600 text-gray-100 capitalize text-lg cursor-pointer rounded-sm" />
</div>
</div>
</section>
</footer>
<!-- js file -->
<script src="script.js"></script>
</body>
</html>
// navigation controller
document.getElementById("menu-btn").onclick = () => {
document.getElementById("menu").classList.toggle("w-[280px]");
};
const accordions = document.querySelectorAll(".accordion-body");
accordions.forEach((accordion) => {
const header = accordion.querySelector(".accordion-header");
const content = accordion.querySelector(".accordion-content");
const icon = accordion.querySelector(".accordion-down-btn");
header.addEventListener("click", () => {
const isOpen = content.style.maxHeight;
// Toggle accordion content
if (!isOpen || isOpen === "0px") {
content.style.maxHeight = content.scrollHeight + "px"; // Open the accordion
header.classList.add("text-gray-100"); // Change header text color
icon.classList.add("rotate-[180deg]"); // Rotate icon
header.classList.add("bg-green-600"); // change header color
} else {
content.style.maxHeight = "0px"; // Close the accordion
header.classList.remove("text-gray-100"); // Revert header text color
icon.classList.remove("rotate-[180deg]"); // Reset icon rotation
header.classList.remove("bg-green-600"); // reset header color
}
});
});Code & Preview
You can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Edit With Codepen button below.
