Campus — Free Online Course Platform Website Template
Campus is built specifically for e-learning marketplaces and course businesses: a hero search bar, a filterable eight-card course grid with ratings and prices, and a "become an instructor" flow all ship ready to wire up. It leans on a warm chalkboard-green identity and a Bricolage Grotesque / Mulish pairing so it reads as trustworthy and human rather than another purple SaaS gradient. Every interaction — the category filter, animated stat counters, and swipeable testimonials — is hand-written vanilla JavaScript with zero jQuery.
Features
- Hero course-search bar with category select, front-end validation, and trending-topic chips
- Filterable popular-courses grid: eight course cards with thumbnail, category tag, title, instructor, star rating and price (including a Free tier)
- Eight browse-by-topic category tiles with hand-drawn inline SVG icons
- Animated stats band (learners, courses, instructors, certificates) that counts up on scroll
- Top-instructors row with avatars, specialties and student counts
- Three-step "how it works" flow with a connecting dashed guide line
- Swipeable, scroll-snap testimonials slider with prev/next buttons and dot navigation
- "Become an instructor" split CTA plus a footer newsletter with email validation
- Fully responsive 360px–1440px, accessible landmarks, skip link, focus-visible styles, and prefers-reduced-motion support
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Friendly academic — chalkboard-green and marigold, Bricolage Grotesque display
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Campus really free to use?
Yes. Campus is free for both personal and commercial projects. Use it for a course marketplace, a bootcamp, a single-instructor site, or a client build — no attribution required, though a link back to uiCookies is always appreciated.
Does it need a build step, jQuery, or a framework?
No. It is static HTML, one CSS file, and one vanilla-JavaScript file, with a self-hosted copy of Bootstrap 5 for the grid and utilities. Open `index.html` in a browser and it runs — nothing to compile or install.
How do I connect real courses or a search backend?
The course cards are plain HTML articles with a `data-category` attribute, so you can generate them from any CMS or database. The hero search and footer newsletter are front-end forms — point their handlers at your own search endpoint or email service and they are production-ready.
Which icons and fonts does it use?
All icons are hand-written inline SVG, so there is no icon-font dependency to break on strict hosts. Fonts are Bricolage Grotesque and Mulish, loaded from Google Fonts; swap the single `<link>` in the head if you prefer to self-host them.
