Lyceum - Education HTML Template

Lyceum is a clean, modern HTML5 template for schools, colleges, universities, academies, training institutes, and online learning platforms. Its arch-inspired design, 20 ready-made sections, and interactive detail popups help you present courses, instructors, programs, events, and admissions with confidence.

Lyceum is built with plain HTML, CSS and vanilla JavaScript. It needs no Bootstrap, no jQuery, and no build tools, so it stays lightweight and easy to customise.

Perfect for

• Schools, colleges and universities

• Online course and e-learning platforms

• Academies, tutoring and coaching centres

• Language schools, bootcamps and training institutes

• Any education brand that sells courses or admissions

Homepage sections

• Top bar and sticky header with dropdown menu and search

• Hero with course search bar

• Quick highlights

• About us with Mission / Vision / Values tabs and video popup

• Course categories

• Popular courses with category filter

• Programs and departments

• Animated counters

• Instructors

• How it works

• Admission form with live countdown timer

• Events

• Pricing plans with monthly/yearly toggle

• Testimonials slider

• Blog and news

• Partners marquee

• FAQ accordion

• Contact form with Google Map

• Footer with newsletter and notice board

Key features

• Detail popups for every course, instructor and blog post. The popup content is written directly in the HTML, so it is easy to edit.

• Filterable course grid with star ratings, prices, free badges and wishlist hearts

• Fully responsive layout with an off-canvas mobile menu

• Colour scheme controlled by CSS variables, so you can restyle the whole site from one block

• 40+ SVG icons in a sprite, with no icon font to load

• Full-screen search overlay and YouTube video popup

• Accessibility-minded markup: skip link, keyboard-friendly tabs, accordion and dialogs, visible focus and reduced-motion support

• Semantic, SEO-friendly HTML with meta tags ready to edit

• Clean, well-commented code

• Detailed documentation included

• Google Fonts: Bricolage Grotesque and DM Sans

Please note

• The contact, admission, and newsletter forms are front-end demos. Connect them to your own server or form service. The documentation includes step-by-step instructions and an example PHP script.

• The photographs in the live preview come from Unsplash and are not included in the download. All people, courses, and organisations in the demo are fictional.

What's included

• index.html: homepage

• assets/css/style.css

• assets/js/main.js

• Documentation

Sources and credits

• Fonts: Bricolage Grotesque and DM Sans (Google Fonts, SIL Open Font License)

• Icons: hand-drawn in the style of Lucide / Feather (open-source, ISC / MIT)

• Demo photos: Unsplash (preview only, not included)