Bootstrap 5
Angular
Formation
Template
Snippet
Lecon
Layout
Pedagogie
Html Css
Tutoriel
Cours
Responsive
Template de page formation Angular avec Bootstrap 5 : layout pédagogique, sidebar de cours, navigation leçons et design épuré pour sites d'apprentissage.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template Nglesson Bootstrap5 | AngularForAll</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
:root {
--primary: #1a73e8;
--primary-dark: #1557b0;
--accent: #ff6b35;
--bg-light: #f8f9fa;
--text-dark: #2d3436;
--text-muted: #636e72;
--white: #ffffff;
--gradient: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
--gradient-accent: linear-gradient(135deg, #ff6b35 0%, #e8450b 100%);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.12);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
--radius: 16px;
--radius-sm: 10px;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: var(--text-dark);
background: var(--bg-light);
line-height: 1.6;
overflow-x: hidden;
}
/* ========== NAVBAR ========== */
.navbar {
background: var(--white);
box-shadow: var(--shadow-sm);
padding: 12px 0;
transition: var(--transition);
z-index: 1000;
}
.navbar.scrolled {
box-shadow: var(--shadow-md);
}
.navbar-brand {
font-weight: 800;
font-size: 1.6rem;
color: var(--primary) !important;
letter-spacing: -0.5px;
}
.navbar-brand span {
color: var(--accent);
}
.nav-link {
font-weight: 500;
color: var(--text-dark) !important;
margin: 0 4px;
padding: 8px 16px !important;
border-radius: 50px;
transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
background: rgba(26, 115, 232, 0.08);
color: var(--primary) !important;
}
.btn-nav {
background: var(--gradient);
color: var(--white) !important;
border-radius: 50px;
padding: 10px 24px !important;
font-weight: 600;
border: none;
transition: var(--transition);
}
.btn-nav:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ========== HERO ========== */
.hero {
background: var(--gradient);
padding: 100px 0 80px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: rgba(255,255,255,0.04);
border-radius: 50%;
animation: float 8s ease-in-out infinite;
}
.hero::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: rgba(255,255,255,0.03);
border-radius: 50%;
animation: float 10s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -30px) scale(1.05); }
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: 3.2rem;
font-weight: 800;
color: var(--white);
line-height: 1.2;
margin-bottom: 20px;
}
.hero h1 .highlight {
background: var(--accent);
padding: 2px 12px;
border-radius: 8px;
display: inline-block;
}
.hero p {
font-size: 1.2rem;
color: rgba(255,255,255,0.9);
margin-bottom: 30px;
max-width: 600px;
}
.hero .btn-hero-primary {
background: var(--white);
color: var(--primary);
padding: 14px 32px;
border-radius: 50px;
font-weight: 700;
font-size: 1.05rem;
border: none;
transition: var(--transition);
}
.hero .btn-hero-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.hero .btn-hero-outline {
background: transparent;
color: var(--white);
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
font-size: 1.05rem;
border: 2px solid rgba(255,255,255,0.5);
transition: var(--transition);
margin-left: 12px;
}
.hero .btn-hero-outline:hover {
background: rgba(255,255,255,0.1);
border-color: var(--white);
}
.hero-image {
position: relative;
z-index: 2;
}
.hero-image img {
max-width: 100%;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
animation: float 6s ease-in-out infinite;
}
.hero-badge {
position: absolute;
top: 10px;
right: -15px;
background: var(--accent);
color: var(--white);
padding: 15px 20px;
border-radius: var(--radius-sm);
text-align: center;
box-shadow: var(--shadow-md);
animation: float 5s ease-in-out infinite;
}
.hero-badge .number {
font-size: 2rem;
font-weight: 800;
display: block;
line-height: 1;
}
.hero-badge .label {
font-size: 0.8rem;
font-weight: 500;
}
/* ========== STATS BAR ========== */
.stats-bar {
background: var(--white);
margin-top: -40px;
position: relative;
z-index: 10;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 30px 0;
}
.stat-item {
text-align: center;
padding: 10px 20px;
}
.stat-item .stat-number {
font-size: 2.2rem;
font-weight: 800;
color: var(--primary);
display: block;
}
.stat-item .stat-label {
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
}
.stat-divider {
border-right: 1px solid #e9ecef;
}
/* ========== SECTION TITLES ========== */
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title .badge-custom {
display: inline-block;
background: rgba(26, 115, 232, 0.1);
color: var(--primary);
padding: 6px 16px;
border-radius: 50px;
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 12px;
}
.section-title h2 {
font-weight: 800;
font-size: 2.2rem;
color: var(--text-dark);
margin-bottom: 10px;
}
.section-title p {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
font-size: 1.05rem;
}
/* ========== HOW IT WORKS ========== */
.how-it-works {
padding: 80px 0;
}
.step-card {
text-align: center;
padding: 40px 25px;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
}
.step-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.step-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
color: var(--white);
}
.step-icon.learn {
background: var(--gradient);
}
.step-icon.quiz {
background: var(--gradient-accent);
}
.step-icon.certify {
background: linear-gradient(135deg, #00b894 0%, #00a381 100%);
}
.step-number {
position: absolute;
top: -15px;
right: -15px;
width: 40px;
height: 40px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
color: var(--primary);
box-shadow: var(--shadow-sm);
}
.step-card h4 {
font-weight: 700;
margin-bottom: 10px;
}
.step-card p {
color: var(--text-muted);
font-size: 0.95rem;
}
/* ========== CATEGORIES ========== */
.categories {
padding: 80px 0;
background: var(--white);
}
.category-card {
background: var(--bg-light);
border-radius: var(--radius);
padding: 30px 20px;
text-align: center;
transition: var(--transition);
cursor: pointer;
border: 2px solid transparent;
}
.category-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.category-icon {
width: 70px;
height: 70px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 1.8rem;
}
.category-icon.perso {
background: #e8f0fe;
color: #1a73e8;
}
.category-icon.couple {
background: #fce4ec;
color: #e91e63;
}
.category-icon.culture {
background: #e8f5e9;
color: #4caf50;
}
.category-icon.psycho {
background: #fff3e0;
color: #ff9800;
}
.category-icon.business {
background: #e3f2fd;
color: #2196f3;
}
.category-icon.sante {
background: #f3e5f5;
color: #9c27b0;
}
.category-card h5 {
font-weight: 700;
margin-bottom: 5px;
}
.category-card .count {
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
}
.category-card .cert-badge {
display: inline-block;
background: rgba(0, 184, 148, 0.1);
color: #00b894;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
margin-top: 8px;
}
/* ========== FEATURED LESSONS ========== */
.featured-lessons {
padding: 80px 0;
}
.lesson-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border: 1px solid #e9ecef;
}
.lesson-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.lesson-card .card-img-top {
height: 180px;
object-fit: cover;
background: var(--gradient);
}
.lesson-card .card-body {
padding: 20px;
}
.lesson-card .difficulty {
display: inline-block;
padding: 4px 10px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 8px;
}
.difficulty.debutant {
background: #e8f5e9;
color: #4caf50;
}
.difficulty.intermediaire {
background: #fff3e0;
color: #ff9800;
}
.difficulty.avance {
background: #fce4ec;
color: #e91e63;
}
.lesson-card h5 {
font-weight: 700;
margin-bottom: 8px;
}
.lesson-card .meta {
color: var(--text-muted);
font-size: 0.85rem;
display: flex;
gap: 15px;
margin-bottom: 12px;
}
.lesson-card .btn-lesson {
width: 100%;
background: var(--gradient);
color: var(--white);
border: none;
border-radius: 50px;
padding: 10px;
font-weight: 600;
transition: var(--transition);
}
.lesson-card .btn-lesson:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* ========== CERTIFICATE PREVIEW ========== */
.certificate-preview {
padding: 80px 0;
background: var(--white);
}
.cert-preview-card {
background: linear-gradient(135deg, #fffdf7 0%, #fff8e7 100%);
border: 3px solid #d4a853;
border-radius: var(--radius);
padding: 50px 40px;
text-align: center;
position: relative;
box-shadow: var(--shadow-lg);
}
.cert-preview-card .cert-ribbon {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-accent);
color: var(--white);
padding: 8px 30px;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
}
.cert-preview-card .cert-logo {
font-weight: 800;
font-size: 2rem;
color: var(--primary);
margin-bottom: 20px;
}
.cert-preview-card .cert-title {
font-size: 2.5rem;
font-weight: 800;
color: #b8860b;
font-family: 'Georgia', serif;
margin-bottom: 10px;
}
.cert-preview-card .cert-body {
font-size: 1.1rem;
color: #5a4a2f;
margin-bottom: 20px;
}
.cert-preview-card .cert-name {
font-size: 2rem;
font-weight: 700;
color: #3d2b00;
font-family: 'Georgia', serif;
border-bottom: 2px dashed #d4a853;
display: inline-block;
padding-bottom: 5px;
margin-bottom: 15px;
}
.cert-preview-card .cert-footer {
font-size: 0.9rem;
color: #8b7355;
}
/* ========== TESTIMONIALS ========== */
.testimonials {
padding: 80px 0;
background: var(--bg-light);
}
.testimonial-card {
background: var(--white);
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.testimonial-card:hover {
box-shadow: var(--shadow-md);
}
.testimonial-card .quote {
font-size: 1.05rem;
color: var(--text-dark);
font-style: italic;
margin-bottom: 15px;
position: relative;
padding-left: 20px;
border-left: 4px solid var(--primary);
}
.testimonial-card .author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-card .author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--gradient);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 700;
font-size: 1.2rem;
}
.testimonial-card .author-name {
font-weight: 700;
}
.testimonial-card .author-role {
color: var(--text-muted);
font-size: 0.85rem;
}
.testimonial-card .stars {
color: #ffc107;
margin-bottom: 10px;
}
/* ========== CTA ========== */
.cta-section {
padding: 80px 0;
background: var(--gradient);
text-align: center;
color: var(--white);
}
.cta-section h2 {
font-weight: 800;
font-size: 2.5rem;
margin-bottom: 15px;
}
.cta-section p {
font-size: 1.15rem;
opacity: 0.9;
margin-bottom: 30px;
}
.cta-section .btn-cta {
background: var(--accent);
color: var(--white);
padding: 16px 40px;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
border: none;
transition: var(--transition);
}
.cta-section .btn-cta:hover {
background: #e8450b;
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
/* ========== FOOTER ========== */
.footer {
background: #1a1a2e;
color: #a0a0b0;
padding: 50px 0 20px;
}
.footer h5 {
color: var(--white);
font-weight: 700;
margin-bottom: 20px;
}
.footer a {
color: #a0a0b0;
text-decoration: none;
transition: var(--transition);
display: block;
margin-bottom: 8px;
}
.footer a:hover {
color: var(--white);
padding-left: 5px;
}
.footer .social-icons a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
text-align: center;
line-height: 40px;
margin-right: 8px;
transition: var(--transition);
}
.footer .social-icons a:hover {
background: var(--primary);
padding-left: 0;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 30px;
padding-top: 20px;
text-align: center;
font-size: 0.9rem;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
.hero {
padding: 80px 0 60px;
text-align: center;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
margin: 0 auto 30px;
}
.hero-image {
margin-top: 30px;
}
.hero-badge {
right: 0;
}
.stat-divider {
border-right: none;
border-bottom: 1px solid #e9ecef;
padding-bottom: 15px;
margin-bottom: 15px;
}
.section-title h2 {
font-size: 1.8rem;
}
.cert-preview-card .cert-title {
font-size: 1.8rem;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 1.8rem;
}
.hero .btn-hero-outline {
margin-left: 0;
margin-top: 10px;
}
.stats-bar {
margin-top: -20px;
padding: 20px 0;
}
.stat-item .stat-number {
font-size: 1.6rem;
}
}
</style>
</head>
<body>
<!-- ==================== NAVBAR ==================== -->
<nav class="navbar navbar-expand-lg fixed-top" id="navbar">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-lightning-charge-fill"></i> NG<span>Lesson</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" href="#">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#lecons">Leçons</a></li>
<li class="nav-item"><a class="nav-link" href="#quiz">Quiz</a></li>
<li class="nav-item"><a class="nav-link" href="#categories">Catégories</a></li>
<li class="nav-item"><a class="nav-link" href="#certificat">Certificat</a></li>
</ul>
<a href="#start" class="btn btn-nav">Commencer <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</nav>
<!-- ==================== HERO ==================== -->
<section class="hero" id="home">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1>
Apprenez, Testez,<br>
<span class="highlight">Certifiez</span> vos<br>
Compétences
</h1>
<p>
La plateforme nouvelle génération pour apprendre à votre rythme,
valider vos connaissances avec des quiz interactifs et obtenir
des certificats reconnus.
</p>
<div class="hero-buttons">
<a href="#lecons" class="btn btn-hero-primary">
<i class="bi bi-play-circle-fill"></i> Découvrir les leçons
</a>
<a href="#quiz" class="btn btn-hero-outline">
<i class="bi bi-trophy"></i> Passer un quiz
</a>
</div>
</div>
<div class="col-lg-6">
<div class="hero-image">
<img src="https://placehold.co/600x400/1a73e8/ffffff?text=NG+Lesson+Platform"
alt="NG Lesson Platform" class="img-fluid">
<div class="hero-badge">
<span class="number">+500</span>
<span class="label">Certificats délivrés</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== STATS BAR ==================== -->
<div class="container">
<div class="stats-bar">
<div class="row g-0">
<div class="col-sm-3 col-6 stat-item stat-divider">
<span class="stat-number" data-count="120">0</span>
<span class="stat-label">Leçons disponibles</span>
</div>
<div class="col-sm-3 col-6 stat-item stat-divider">
<span class="stat-number" data-count="8500">0</span>
<span class="stat-label">Apprenants actifs</span>
</div>
<div class="col-sm-3 col-6 stat-item stat-divider">
<span class="stat-number" data-count="560">0</span>
<span class="stat-label">Quiz interactifs</span>
</div>
<div class="col-sm-3 col-6 stat-item">
<span class="stat-number" data-count="3200">0</span>
<span class="stat-label">Certificats délivrés</span>
</div>
</div>
</div>
</div>
<!-- ==================== HOW IT WORKS ==================== -->
<section class="how-it-works" id="start">
<div class="container">
<div class="section-title">
<span class="badge-custom">Comment ça marche ?</span>
<h2>3 étapes pour obtenir votre certificat</h2>
<p>Un parcours simple et efficace pour apprendre et valider vos compétences.</p>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="step-card">
<span class="step-number">1</span>
<div class="step-icon learn">
<i class="bi bi-book"></i>
</div>
<h4>Apprenez</h4>
<p>Suivez des leçons interactives structurées en sections. Chaque leçon est conçue pour être lue en moins de 15 minutes.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="step-card">
<span class="step-number">2</span>
<div class="step-icon quiz">
<i class="bi bi-question-circle"></i>
</div>
<h4>Testez-vous</h4>
<p>Passez le quiz associé à la leçon. Répondez aux questions et obtenez votre score immédiatement.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mx-md-auto">
<div class="step-card">
<span class="step-number">3</span>
<div class="step-icon certify">
<i class="bi bi-award"></i>
</div>
<h4>Certifiez</h4>
<p>Si vous obtenez plus de 70%, téléchargez votre certificat personnalisé au format PDF et partagez-le.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== CATEGORIES ==================== -->
<section class="categories" id="categories">
<div class="container">
<div class="section-title">
<span class="badge-custom">Catégories</span>
<h2>Explorez nos thématiques</h2>
<p>Des leçons et quiz dans tous les domaines qui vous passionnent.</p>
</div>
<div class="row g-4">
<div class="col-6 col-md-4 col-lg-2">
<div class="category-card">
<div class="category-icon perso">
<i class="bi bi-person-check"></i>
</div>
<h5>Personnalité</h5>
<span class="count">24 leçons</span>
<br><span class="cert-badge"><i class="bi bi-patch-check-fill"></i> Certifiant</span>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="category-card">
<div class="category-icon couple">
<i class="bi bi-heart"></i>
</div>
<h5>Couple</h5>
<span class="count">18 leçons</span>
<br><span class="cert-badge"><i class="bi bi-patch-check-fill"></i> Certifiant</span>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="category-card">
<div class="category-icon culture">
<i class="bi bi-globe2"></i>
</div>
<h5>Culture G</h5>
<span class="count">35 leçons</span>
<br><span class="cert-badge"><i class="bi bi-patch-check-fill"></i> Certifiant</span>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="category-card">
<div class="category-icon psycho">
<i class="bi bi-brain"></i>
</div>
<h5>Psychologie</h5>
<span class="count">20 leçons</span>
<br><span class="cert-badge"><i class="bi bi-patch-check-fill"></i> Certifiant</span>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="category-card">
<div class="category-icon business">
<i class="bi bi-briefcase"></i>
</div>
<h5>Business</h5>
<span class="count">15 leçons</span>
<br><span class="cert-badge"><i class="bi bi-patch-check-fill"></i> Certifiant</span>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="category-card">
<div class="category-icon sante">
<i class="bi bi-heart-pulse"></i>
</div>
<h5>Santé</h5>
<span class="count">28 leçons</span>
<br><span class="cert-badge"><i class="bi bi-patch-check-fill"></i> Certifiant</span>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== FEATURED LESSONS ==================== -->
<section class="featured-lessons" id="lecons">
<div class="container">
<div class="section-title">
<span class="badge-custom">Leçons populaires</span>
<h2>Commencez votre apprentissage</h2>
<p>Nos leçons les plus suivies par la communauté NG Lesson.</p>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="lesson-card">
<img src="https://placehold.co/400x180/1a73e8/ffffff?text=Communication"
class="card-img-top" alt="Communication">
<div class="card-body">
<span class="difficulty debutant">Débutant</span>
<h5>Les bases de la communication assertive</h5>
<div class="meta">
<span><i class="bi bi-clock"></i> 12 min</span>
<span><i class="bi bi-people"></i> 2 340 apprenants</span>
</div>
<a href="#" class="btn btn-lesson">Voir la leçon <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="lesson-card">
<img src="https://placehold.co/400x180/ff6b35/ffffff?text=Intelligence+Emotionnelle"
class="card-img-top" alt="Intelligence Emotionnelle">
<div class="card-body">
<span class="difficulty intermediaire">Intermédiaire</span>
<h5>Intelligence émotionnelle : se connaître soi-même</h5>
<div class="meta">
<span><i class="bi bi-clock"></i> 15 min</span>
<span><i class="bi bi-people"></i> 1 890 apprenants</span>
</div>
<a href="#" class="btn btn-lesson">Voir la leçon <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mx-md-auto">
<div class="lesson-card">
<img src="https://placehold.co/400x180/00b894/ffffff?text=Gestion+Stress"
class="card-img-top" alt="Gestion du Stress">
<div class="card-body">
<span class="difficulty avance">Avancé</span>
<h5>Maîtriser la gestion du stress au quotidien</h5>
<div class="meta">
<span><i class="bi bi-clock"></i> 18 min</span>
<span><i class="bi bi-people"></i> 3 120 apprenants</span>
</div>
<a href="#" class="btn btn-lesson">Voir la leçon <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== CERTIFICATE PREVIEW ==================== -->
<section class="certificate-preview" id="certificat">
<div class="container">
<div class="section-title">
<span class="badge-custom">Certificat</span>
<h2>Un certificat professionnel à chaque réussite</h2>
<p>Téléchargez votre certificat au format PDF et partagez-le sur LinkedIn.</p>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="cert-preview-card">
<div class="cert-ribbon">
<i class="bi bi-patch-check-fill"></i> CERTIFICAT OFFICIEL
</div>
<div class="cert-logo">
<i class="bi bi-lightning-charge-fill"></i> NG Lesson
</div>
<div class="cert-title">Certificat de Réussite</div>
<p class="cert-body">Ce document certifie que</p>
<div class="cert-name">Votre Nom Ici</div>
<p class="cert-body">a validé avec succès la leçon</p>
<p style="font-weight:700;font-size:1.3rem;color:#3d2b00;">
« Les bases de la communication assertive »
</p>
<p style="font-size:1.2rem;font-weight:700;color:#00b894;">
Score : 85%
</p>
<div class="cert-footer">
<div class="row">
<div class="col-6">
<strong>Date :</strong> 12 Mai 2026
</div>
<div class="col-6">
<strong>N° :</strong> NG-2026-05-12-ABCD
</div>
</div>
<div class="mt-3">
<i>L'équipe NG Lesson</i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== TESTIMONIALS ==================== -->
<section class="testimonials" id="temoignages">
<div class="container">
<div class="section-title">
<span class="badge-custom">Témoignages</span>
<h2>Ce que disent nos apprenants</h2>
<p>Ils ont testé et validé leurs connaissances avec NG Lesson.</p>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<div class="testimonial-card">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p class="quote">
"J'ai obtenu mon certificat en psychologie positive et je l'ai ajouté
à mon profil LinkedIn. Très professionnel !"
</p>
<div class="author">
<div class="author-avatar">SB</div>
<div>
<div class="author-name">Sarah B.</div>
<div class="author-role">Formatrice en entreprise</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="testimonial-card">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p class="quote">
"Les leçons sont claires et les quiz vraiment stimulants.
Le certificat est un vrai plus pour ma reconversion."
</p>
<div class="author">
<div class="author-avatar">KM</div>
<div>
<div class="author-name">Karim M.</div>
<div class="author-role">Étudiant en reconversion</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mx-md-auto">
<div class="testimonial-card">
<div class="stars">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<p class="quote">
"Simple, rapide, efficace. J'apprends pendant ma pause déjeuner
et j'ai déjà 3 certificats. Merci NG Lesson !"
</p>
<div class="author">
<div class="author-avatar">AL</div>
<div>
<div class="author-name">Amélie L.</div>
<div class="author-role">Cheffe de projet</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== CTA ==================== -->
<section class="cta-section">
<div class="container">
<h2>Prêt à décrocher votre premier certificat ?</h2>
<p>Rejoignez plus de 8 500 apprenants et commencez votre première leçon gratuitement.</p>
<a href="#lecons" class="btn btn-cta">
<i class="bi bi-rocket-takeoff"></i> Commencer maintenant
</a>
</div>
</section>
<!-- ==================== FOOTER ==================== -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h4 style="color:white;font-weight:800;">
<i class="bi bi-lightning-charge-fill"></i> NG<span style="color:#ff6b35;">Lesson</span>
</h4>
<p>La plateforme nouvelle génération pour apprendre, tester et certifier vos compétences.</p>
<div class="social-icons">
<a href="#"><i class="bi bi-facebook"></i></a>
<a href="#"><i class="bi bi-twitter-x"></i></a>
<a href="#"><i class="bi bi-linkedin"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h5>Navigation</h5>
<a href="#">Accueil</a>
<a href="#lecons">Leçons</a>
<a href="#quiz">Quiz</a>
<a href="#categories">Catégories</a>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h5>Ressources</h5>
<a href="#">Blog</a>
<a href="#">FAQ</a>
<a href="#">Support</a>
<a href="#">Contact</a>
</div>
<div class="col-lg-2 col-md-4 mb-4">
<h5>Légal</h5>
<a href="#">CGU</a>
<a href="#">Confidentialité</a>
<a href="#">Cookies</a>
</div>
<div class="col-lg-2 mb-4">
<h5>Certificat</h5>
<a href="#">Vérifier un certificat</a>
<a href="#">Exemple PDF</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 NG Lesson. Tous droits réservés. Fait avec ❤️ pour l'apprentissage.</p>
</div>
</div>
</footer>
<!-- ==================== SCRIPTS ==================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// ===== NAVBAR SCROLL EFFECT =====
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// ===== COUNTER ANIMATION =====
function animateCounters() {
const counters = document.querySelectorAll('.stat-number[data-count]');
counters.forEach(counter => {
const target = parseInt(counter.getAttribute('data-count'));
const duration = 2000; // 2 secondes
const step = target / (duration / 16); // 60fps
let current = 0;
const updateCounter = () => {
current += step;
if (current < target) {
counter.textContent = Math.floor(current).toLocaleString();
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target.toLocaleString();
}
};
updateCounter();
});
}
// ===== INTERSECTION OBSERVER POUR LES COMPTEURS =====
const statsBar = document.querySelector('.stats-bar');
let countersAnimated = false;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !countersAnimated) {
animateCounters();
countersAnimated = true;
}
});
}, { threshold: 0.5 });
if (statsBar) {
observer.observe(statsBar);
}
// ===== SMOOTH SCROLL POUR LES LIENS D'ANCRAGE =====
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
const navbarHeight = document.querySelector('.navbar').offsetHeight;
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight - 10;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
});
});
// ===== ACTIVE NAV LINK ON SCROLL =====
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');
const scrollPosition = window.scrollY + 150;
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
const sectionId = section.getAttribute('id');
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === '#' + sectionId) {
link.classList.add('active');
}
});
}
});
});
console.log('🚀 NG Lesson - Prêt pour l\'apprentissage !');
console.log('📚 Leçons | 🧠 Quiz | 🎓 Certificats');
</script>
</body>
</html>Télécharger le fichier source