📸 풀페이지 미리보기 (PC · 모바일)

1. index.html — 메인 (Hero 검색 + 카테고리 + 베스트셀러)

2. courses.html — 강의 목록 + 필터

3. course-detail.html — 강의 상세 (커리큘럼 아코디언 + 사이드바)

4. instructors.html — 강사 그리드

5. pricing.html — Free/Pro/Annual + 개별 가격대

6. business.html — 기업 교육 (B2B 랜딩)

7. login.html — 소셜 로그인 + 이메일

8. contact.html — 4채널 문의

LearnLoop — 온라인 강의 플랫폼 / LMS를 위한 8페이지 풀스택 템플릿

온라인 강의 플랫폼, MOOC, 부트캠프, 사내 LMS를 위한 모던 HTML 템플릿입니다. 화이트 베이스 + 퍼플(#7c3aed)→시안(#22d3ee) 그라데이션 + Plus Jakarta Sans 디스플레이로 신뢰감과 친근함을 동시에 전달합니다.

구성된 페이지 (8종)

• index.html — Hero (둥근 검색 박스) · 6개 카테고리 · 8개 인기 강의 · 통계 다크 배너
• courses.html — 240 강의 카탈로그 (필터 4종 + 정렬 + 페이지네이션)
• course-detail.html — 비디오 플레이어 + 6단원 커리큘럼 아코디언 + 강사 + 사이드바 결제
• instructors.html — 10명 강사 카드 + 강사 신청 CTA
• pricing.html — Free/Pro Monthly/Pro Annual + 4단 개별 가격대 + FAQ
• business.html — B2B 랜딩 (3단 비즈니스 플랜 + SSO/SCIM/SOC2)
• login.html — 소셜 로그인 4종 (Google/GitHub/Apple/Email)
• contact.html — 4채널 (Support/Sales/Teach/Press) + 문의 폼

핵심 특징

• 그라데이션 액센트 — 퍼플→시안 일관된 브랜드 색상
• 둥근 검색 박스 — 99px 라운드 + 그림자 + 인라인 CTA
• 리치 강의 카드 — 그라데이션 커버 + 카테고리 컬러 + 강사 아바타 + 별점 + 가격
• 커리큘럼 아코디언 — 6단원 토글, 미리보기/잠금 배지
• 비즈니스 플랜 — Active learner 기반 가격 (분기당 한 번 사용한 사람만 카운트)
• 소셜 로그인 — Google/GitHub/Apple 통합 + 이메일
• 다크 통계 배너 — 그라데이션 텍스트 + 퍼플 백그라운드

사용 기술

• Bootstrap 5.3 + Bootstrap Icons
• Plus Jakarta Sans + Inter (Google Fonts)
• Pure CSS variables · Vanilla JS (아코디언 + 폼 검증)

이런 분께 추천

• 온라인 강의 플랫폼 (Udemy 스타일)
• 부트캠프 · 코딩 스쿨
• 사내 LMS · 기업 교육 플랫폼
• 1인 강사 · 디지털 코칭
• 유튜브 강좌 호스팅 사이트

커스터마이즈

--ll-accent: #7c3aed;   /* 퍼플 */
--ll-accent-2: #22d3ee; /* 시안 */
--ll-bg-purple: #1a1438; /* 다크 보라 */

라이선스

단일 도메인 라이선스 — 1개 도메인 무제한 사용.