Placeholder

lezen

Overview
No lessons have been added yet. Check back soon.

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A2 Lezen – Voorbereiding Inburgering</title>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--cream: #F5F0E8;
--warm-white: #FEFCF8;
--ink: #1A1410;
--rust: #C4521A;
--rust-light: #E8754A;
--sage: #4A7C59;
--sage-light: #7BAF8A;
--gold: #C8972A;
--gold-light: #E8B84A;
--muted: #7A6E62;
--border: #D8CFC4;
--shadow: rgba(26,20,16,0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: 'DM Sans', sans-serif;
background: var(--cream);
color: var(--ink);
line-height: 1.6;
}

/* ── HERO ── */
.hero {
background: var(--ink);
color: var(--cream);
padding: 60px 40px 50px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 90% 10%, rgba(196,82,26,0.25) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 5% 90%, rgba(74,124,89,0.20) 0%, transparent 55%);
pointer-events: none;
}
.hero-tag {
display: inline-block;
background: var(--rust);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 2px;
margin-bottom: 22px;
}
.hero h1 {
font-family: 'Fraunces', serif;
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
margin-bottom: 16px;
max-width: 620px;
}
.hero h1 em {
font-style: italic;
color: var(--rust-light);
}
.hero-sub {
font-size: 1rem;
color: rgba(245,240,232,0.70);
max-width: 480px;
margin-bottom: 32px;
font-weight: 300;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.hero-meta span {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: rgba(245,240,232,0.65);
}
.hero-meta .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--rust-light);
display: inline-block;
}

/* ── PROGRESS BAR ── */
.progress-wrap {
background: var(--warm-white);
border-bottom: 1px solid var(--border);
padding: 14px 40px;
display: flex;
align-items: center;
gap: 16px;
}
.progress-label { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.progress-bar {
flex: 1;
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--sage), var(--gold));
border-radius: 3px;
transition: width 1.2s ease;
}
.progress-pct { font-size: 0.78rem; font-weight: 600; color: var(--sage); }

/* ── LAYOUT ── */
.layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 0;
max-width: 1100px;
margin: 0 auto;
padding: 40px 20px;
align-items: start;
}
@media (max-width: 800px) {
.layout { grid-template-columns: 1fr; }
.sidebar { order: -1; }
.hero, .progress-wrap { padding-left: 20px; padding-right: 20px; }
}

/* ── SECTION HEADING ── */
.section-heading {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.section-heading::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}

/* ── TABS ── */
.tabs {
display: flex;
gap: 4px;
margin-bottom: 28px;
border-bottom: 2px solid var(--border);
}
.tab {
padding: 10px 20px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
color: var(--muted);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color .2s, border-color .2s;
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: inherit;
}
.tab.active {
color: var(--rust);
border-bottom-color: var(--rust);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── LESSEN (accordion) ── */
.module {
margin-bottom: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--warm-white);
overflow: hidden;
box-shadow: 0 1px 3px var(--shadow);
transition: box-shadow .2s;
}
.module:hover { box-shadow: 0 3px 10px var(--shadow); }

.module-header {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
cursor: pointer;
user-select: none;
}
.module-icon {
width: 36px; height: 36px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.module-icon.lezen { background: rgba(196,82,26,0.12); }
.module-icon.woordenschat { background: rgba(74,124,89,0.12); }
.module-icon.grammatica { background: rgba(200,151,42,0.12); }
.module-icon.tekst { background: rgba(74,99,180,0.12); }

.module-title {
flex: 1;
font-weight: 600;
font-size: 0.95rem;
}
.module-sub {
font-size: 0.78rem;
color: var(--muted);
margin-top: 2px;
font-weight: 400;
}
.module-count {
font-size: 0.78rem;
color: var(--muted);
white-space: nowrap;
}
.module-arrow {
font-size: 0.7rem;
color: var(--muted);
transition: transform .25s;
}
.module.open .module-arrow { transform: rotate(180deg); }

.module-lessons {
display: none;
border-top: 1px solid var(--border);
}
.module.open .module-lessons { display: block; }

.lesson-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px 12px 56px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background .15s;
text-decoration: none;
color: inherit;
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover { background: rgba(196,82,26,0.04); }
.lesson-item.done .lesson-title { color: var(--muted); }
.lesson-status {
width: 20px; height: 20px;
border-radius: 50%;
border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 0.7rem;
flex-shrink: 0;
}
.lesson-status.done { background: var(--sage); border-color: var(--sage); color: #fff; }
.lesson-status.active { border-color: var(--rust); color: var(--rust); }
.lesson-title { flex: 1; font-size: 0.875rem; }
.lesson-type {
font-size: 0.72rem;
color: var(--muted);
background: var(--cream);
padding: 2px 8px;
border-radius: 10px;
}
.lesson-duration { font-size: 0.72rem; color: var(--muted); }

/* ── OVER DEZE CURSUS ── */
.info-card {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 1px 3px var(--shadow);
}
.info-card p { font-size: 0.9rem; color: #3a342e; line-height: 1.75; margin-bottom: 12px; }
.info-card p:last-child { margin-bottom: 0; }

.leerdoelen { list-style: none; }
.leerdoelen li {
display: flex;
gap: 10px;
font-size: 0.875rem;
padding: 6px 0;
border-bottom: 1px dashed var(--border);
align-items: flex-start;
}
.leerdoelen li:last-child { border-bottom: none; }
.leerdoelen li::before {
content: '✓';
color: var(--sage);
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}

/* ── SIDEBAR ── */
.sidebar { padding-left: 28px; }
.sidebar-card {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px var(--shadow);
position: sticky;
top: 20px;
}
.sidebar-img {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--ink) 0%, #3a2a1e 50%, var(--rust) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
position: relative;
}
.sidebar-img .play-btn {
position: absolute;
width: 52px; height: 52px;
background: rgba(255,255,255,0.95);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
transition: transform .2s;
}
.sidebar-img .play-btn:hover { transform: scale(1.1); }

.sidebar-body { padding: 22px; }
.sidebar-body .cta-btn {
width: 100%;
padding: 14px;
background: var(--rust);
color: #fff;
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background .2s, transform .15s;
margin-bottom: 14px;
}
.sidebar-body .cta-btn:hover { background: var(--rust-light); transform: translateY(-1px); }
.sidebar-body .cta-btn.secondary {
background: none;
border: 1.5px solid var(--border);
color: var(--ink);
margin-bottom: 0;
}
.sidebar-body .cta-btn.secondary:hover { background: var(--cream); transform: none; }

.sidebar-meta { margin: 18px 0; border-top: 1px solid var(--border); padding-top: 18px; }
.meta-row {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
padding: 5px 0;
color: var(--muted);
}
.meta-row strong { color: var(--ink); font-weight: 500; }

.cert-badge {
display: flex;
align-items: center;
gap: 10px;
background: rgba(200,151,42,0.10);
border: 1px solid rgba(200,151,42,0.25);
border-radius: 6px;
padding: 12px 14px;
margin-top: 16px;
}
.cert-badge .icon { font-size: 1.5rem; }
.cert-badge .text { font-size: 0.78rem; color: #7a6020; line-height: 1.4; }
.cert-badge .text strong { font-weight: 600; }

/* ── TIPS BLOK ── */
.tip-box {
background: rgba(74,124,89,0.08);
border-left: 3px solid var(--sage);
border-radius: 0 6px 6px 0;
padding: 16px 18px;
margin: 20px 0;
font-size: 0.875rem;
color: #2e4a38;
}
.tip-box strong { display: block; margin-bottom: 6px; font-weight: 600; color: var(--sage); }

/* ── RECENSIES ── */
.review-card {
background: var(--warm-white);
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px 20px;
margin-bottom: 12px;
}
.review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avatar {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
font-weight: 600;
color: #fff;
flex-shrink: 0;
}
.review-name { font-size: 0.875rem; font-weight: 600; }
.review-date { font-size: 0.75rem; color: var(--muted); }
.stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 1px; }
.review-text { font-size: 0.85rem; color: #4a3e35; line-height: 1.65; }

/* animations */
@keyframes fadeIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }
.module { animation: fadeIn .4s ease both; }
.module:nth-child(2) { animation-delay: .06s; }
.module:nth-child(3) { animation-delay: .12s; }
.module:nth-child(4) { animation-delay: .18s; }
.module:nth-child(5) { animation-delay: .24s; }
</style>
</head>
<body>

<!-- HERO -->
<div class="hero">
<div class="hero-tag">Inburgeringscursus · Niveau A2</div>
<h1>Lezen voor de <em>inburgering</em></h1>
<p class="hero-sub">Oefen Nederlandse teksten begrijpen op A2-niveau. Praktische thema's, echte situaties, stap voor stap.</p>
<div class="hero-meta">
<span><span class="dot"></span> 5 modules · 32 lessen</span>
<span><span class="dot"></span> ±18 uur leren</span>
<span><span class="dot"></span> Certificaat na afronding</span>
<span><span class="dot"></span> Geschikt voor inburgeringsexamen</span>
</div>
</div>

<!-- VOORTGANG -->
<div class="progress-wrap">
<span class="progress-label">Jouw voortgang</span>
<div class="progress-bar"><div class="progress-bar-fill" id="pbar"></div></div>
<span class="progress-pct" id="ppct">0%</span>
</div>

<!-- MAIN LAYOUT -->
<div class="layout">

<!-- CONTENT -->
<main>
<!-- TABS -->
<div class="tabs">
<button class="tab active" onclick="switchTab('lessen', this)">📚 Lessen</button>
<button class="tab" onclick="switchTab('over', this)">ℹ️ Over de cursus</button>
<button class="tab" onclick="switchTab('recensies', this)">⭐ Recensies</button>
</div>

<!-- TAB: LESSEN -->
<div class="tab-panel active" id="panel-lessen">

<!-- MODULE 1 -->
<div class="module open" onclick="toggleModule(this)">
<div class="module-header">
<div class="module-icon lezen">📖</div>
<div>
<div class="module-title">Module 1 – Dagelijks leven</div>
<div class="module-sub">Teksten over wonen, boodschappen en openbaar vervoer</div>
</div>
<span class="module-count">7 lessen</span>
<span class="module-arrow">▼</span>
</div>
<div class="module-lessons">
<a class="lesson-item done" href="#">
<div class="lesson-status done">✓</div>
<span class="lesson-title">1.1 Lezen: een brief van de gemeente</span>
<span class="lesson-type">Tekst</span>
<span class="lesson-duration">10 min</span>
</a>
<a class="lesson-item done" href="#">
<div class="lesson-status done">✓</div>
<span class="lesson-title">1.2 Begrijp je de supermarkt folder?</span>
<span class="lesson-type">Oefening</span>
<span class="lesson-duration">12 min</span>
</a>
<a class="lesson-item done" href="#">
<div class="lesson-status done">✓</div>
<span class="lesson-title">1.3 Informatiebord op het station</span>
<span class="lesson-type">Tekst</span>
<span class="lesson-duration">8 min</span>
</a>
<a class="lesson-item" href="#">
<div class="lesson-status active">▶</div>
<span class="lesson-title">1.4 OV-chipkaart uitleg lezen</span>
<span class="lesson-type">Quiz</span>
<span class="lesson-duration">15 min</span>
</a>
<a class="lesson-item" href="#">
<div class="lesson-status"></div>
<span class="lesson-title">1.5 Huurcontract: wat staat er?</span>
<span class="lesson-type">Tekst</span>
<span class="lesson-duration">14 min</span>
</a>
<a class="lesson-item" href="#">
<div class="lesson-status"></div>
<span class="lesson-title">1.6 Formulieren invullen</span>
<span class="lesson-type">Oefening</span>
<span class="lesson-duration">10 min</span>
</a>
<a class="lesson-item" href="#">
<div class="lesson-status"></div>
<span class="lesson-title">1.7 Toets module 1</span>
<span class="lesson-type">Toets</span>
<span class="lesson-duration">20 min</span>
</a>
</div>
</div>

<!-- MODULE 2 -->
<div class="module" onclick="toggleModule(this)">
<div class="module-header">
<div class="module-icon woordenschat">📝</div>
<div>
<div class="module-title">Module 2 – Gezondheid en zorg</div>
<div class="module-sub">Dokter, apotheek, ziekenfonds en medische formulieren</div>
</div>
<span class="module-count">6 lessen</span>
<span class="module-arrow">▼</span>
</div>
<div class="module-lessons">
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">2.1 Een afspraak bij de huisarts</span><span class="lesson-type">Tekst</span><span class="lesson-duration">10 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">2.2 Bijsluiter van medicijnen lezen</span><span class="lesson-type">Oefening</span><span class="lesson-duration">12 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">2.3 Brief van het ziekenhuis</span><span class="lesson-type">Tekst</span><span class="lesson-duration">10 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">2.4 Zorgverzekering begrijpen</span><span class="lesson-type">Tekst</span><span class="lesson-duration">14 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">2.5 Apotheek: recept en uitleg</span><span class="lesson-type">Quiz</span><span class="lesson-duration">12 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">2.6 Toets module 2</span><span class="lesson-type">Toets</span><span class="lesson-duration">20 min</span></a>
</div>
</div>

<!-- MODULE 3 -->
<div class="module" onclick="toggleModule(this)">
<div class="module-header">
<div class="module-icon grammatica">🏫</div>
<div>
<div class="module-title">Module 3 – Werk en opleiding</div>
<div class="module-sub">Vacatures lezen, sollicitatiebrief begrijpen, schoolbrief</div>
</div>
<span class="module-count">7 lessen</span>
<span class="module-arrow">▼</span>
</div>
<div class="module-lessons">
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">3.1 Een vacaturetekst begrijpen</span><span class="lesson-type">Tekst</span><span class="lesson-duration">12 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">3.2 Arbeidscontract lezen</span><span class="lesson-type">Tekst</span><span class="lesson-duration">15 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">3.3 Loonstrook begrijpen</span><span class="lesson-type">Oefening</span><span class="lesson-duration">12 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">3.4 Brief van school of kinderdagverblijf</span><span class="lesson-type">Tekst</span><span class="lesson-duration">10 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">3.5 Cursusaanbod en inschrijving</span><span class="lesson-type">Quiz</span><span class="lesson-duration">10 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">3.6 E-mail van een werkgever</span><span class="lesson-type">Oefening</span><span class="lesson-duration">12 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">3.7 Toets module 3</span><span class="lesson-type">Toets</span><span class="lesson-duration">20 min</span></a>
</div>
</div>

<!-- MODULE 4 -->
<div class="module" onclick="toggleModule(this)">
<div class="module-header">
<div class="module-icon tekst">🏛️</div>
<div>
<div class="module-title">Module 4 – Overheid en instanties</div>
<div class="module-sub">Gemeente, DigiD, belasting, burgerzaken</div>
</div>
<span class="module-count">6 lessen</span>
<span class="module-arrow">▼</span>
</div>
<div class="module-lessons">
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">4.1 Brief van de Belastingdienst</span><span class="lesson-type">Tekst</span><span class="lesson-duration">14 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">4.2 DigiD aanvragen: stappenplan</span><span class="lesson-type">Oefening</span><span class="lesson-duration">10 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">4.3 Website gemeente begrijpen</span><span class="lesson-type">Tekst</span><span class="lesson-duration">12 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">4.4 Toeslagen en subsidies lezen</span><span class="lesson-type">Tekst</span><span class="lesson-duration">14 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">4.5 Inburgeringsplicht: wat betekent het?</span><span class="lesson-type">Quiz</span><span class="lesson-duration">12 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">4.6 Toets module 4</span><span class="lesson-type">Toets</span><span class="lesson-duration">20 min</span></a>
</div>
</div>

<!-- MODULE 5 -->
<div class="module" onclick="toggleModule(this)">
<div class="module-header">
<div class="module-icon lezen">🎯</div>
<div>
<div class="module-title">Module 5 – Examenvoorbereiding</div>
<div class="module-sub">Oefentoetsen in de stijl van het officiële A2-examen</div>
</div>
<span class="module-count">6 lessen</span>
<span class="module-arrow">▼</span>
</div>
<div class="module-lessons">
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">5.1 Wat verwacht het examen?</span><span class="lesson-type">Uitleg</span><span class="lesson-duration">8 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">5.2 Oefentoets 1 – korte teksten</span><span class="lesson-type">Toets</span><span class="lesson-duration">25 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">5.3 Oefentoets 2 – formulieren</span><span class="lesson-type">Toets</span><span class="lesson-duration">25 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">5.4 Oefentoets 3 – informatie zoeken</span><span class="lesson-type">Toets</span><span class="lesson-duration">25 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">5.5 Feedback en verbeterpunten</span><span class="lesson-type">Uitleg</span><span class="lesson-duration">10 min</span></a>
<a class="lesson-item" href="#"><div class="lesson-status"></div><span class="lesson-title">5.6 Eindtoets – volledige simulatie</span><span class="lesson-type">Eindtoets</span><span class="lesson-duration">45 min</span></a>
</div>
</div>

</div><!-- /panel-lessen -->

<!-- TAB: OVER DE CURSUS -->
<div class="tab-panel" id="panel-over">
<div class="info-card">
<p>Deze cursus bereidt je voor op het <strong>Lezen-onderdeel van het inburgeringsexamen</strong> op niveau A2. Je leert Nederlandse teksten begrijpen die je in het dagelijkse leven tegenkomt: brieven van de overheid, folders, formulieren, websites en werkdocumenten.</p>
<p>De cursus is opgebouwd rond vijf praktische thema's en sluit aan op de officiële eindtermen van DUO (Dienst Uitvoering Onderwijs).</p>
</div>

<h2 class="section-heading">Wat leer je?</h2>
<div class="info-card">
<ul class="leerdoelen">
<li>Korte Nederlandse teksten begrijpen op A2-niveau</li>
<li>Belangrijke informatie herkennen in formulieren en brieven</li>
<li>Informatie opzoeken op websites en in folders</li>
<li>De betekenis van onbekende woorden afleiden uit de context</li>
<li>Officiële documenten zoals huurcontracten en arbeidscontracten lezen</li>
<li>Oefenen met de examenopmaak van het DUO-leesexamen</li>
</ul>
</div>

<div class="tip-box">
<strong>💡 Tip voor cursisten</strong>
Probeer elke dag 15–20 minuten te oefenen. Regelmatig herhalen helpt meer dan één keer lang studeren. Gebruik de oefentoetsen pas als je de modules hebt afgerond.
</div>

<h2 class="section-heading">Voor wie is deze cursus?</h2>
<div class="info-card">
<p>Voor iedereen die het inburgeringsexamen wil halen en al een basisbegrip van het Nederlands heeft (niveau A1). Ook geschikt als opfriscursus voor mensen die al in Nederland wonen maar hun leesvaardigheden willen versterken.</p>
</div>
</div>

<!-- TAB: RECENSIES -->
<div class="tab-panel" id="panel-recensies">
<div class="review-card">
<div class="review-header">
<div class="avatar" style="background: var(--rust);">FA</div>
<div>
<div class="review-name">Fatima A.</div>
<div class="review-date">maart 2025</div>
</div>
<div class="stars" style="margin-left:auto">★★★★★</div>
</div>
<p class="review-text">Heel duidelijke uitleg. De teksten zijn echt zoals je ze in het echte leven tegenkomt. Ik heb mijn examen gehaald na deze cursus!</p>
</div>
<div class="review-card">
<div class="review-header">
<div class="avatar" style="background: var(--sage);">MC</div>
<div>
<div class="review-name">Mohamed C.</div>
<div class="review-date">januari 2025</div>
</div>
<div class="stars" style="margin-left:auto">★★★★☆</div>
</div>
<p class="review-text">Goede cursus. De module over overheid en DigiD was heel nuttig voor mij. Soms iets te veel tekst op één pagina, maar de oefeningen zijn uitstekend.</p>
</div>
<div class="review-card">
<div class="review-header">
<div class="avatar" style="background: var(--gold);">LN</div>
<div>
<div class="review-name">Linh N.</div>
<div class="review-date">april 2025</div>
</div>
<div class="stars" style="margin-left:auto">★★★★★</div>
</div>
<p class="review-text">Ik was bang voor het examen maar na deze cursus voelde ik me klaar. De oefentoetsen in module 5 zijn bijna precies hetzelfde als het echte examen.</p>
</div>
</div>

</main>

<!-- SIDEBAR -->
<aside class="sidebar">
<div class="sidebar-card">
<div class="sidebar-img">
📖
<div class="play-btn">▶</div>
</div>
<div class="sidebar-body">
<button class="cta-btn" onclick="startCursus()">▶ Doorgaan met leren</button>
<button class="cta-btn secondary">⊞ Cursusoverzicht</button>

<div class="sidebar-meta">
<div class="meta-row"><span>Niveau</span><strong>A2 – Basisgebruiker</strong></div>
<div class="meta-row"><span>Taal</span><strong>Nederlands</strong></div>
<div class="meta-row"><span>Modules</span><strong>5</strong></div>
<div class="meta-row"><span>Lessen</span><strong>32</strong></div>
<div class="meta-row"><span>Duur</span><strong>±18 uur</strong></div>
<div class="meta-row"><span>Toegang</span><strong>Onbeperkt</strong></div>
<div class="meta-row"><span>Bijgewerkt</span><strong>Mei 2025</strong></div>
</div>

<div class="cert-badge">
<div class="icon">🎓</div>
<div class="text"><strong>Certificaat inbegrepen</strong><br>Na het voltooien ontvang je een officieel Masteriyo-certificaat.</div>
</div>
</div>
</div>
</aside>

</div><!-- /layout -->

<script>
// Voortgang animeren
window.addEventListener('DOMContentLoaded', () => {
const pct = 10; // 3 van 32 lessen gedaan
setTimeout(() => {
document.getElementById('pbar').style.width = pct + '%';
document.getElementById('ppct').textContent = pct + '%';
}, 400);
});

// Tabs
function switchTab(name, btn) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
btn.classList.add('active');
document.getElementById('panel-' + name).classList.add('active');
}

// Accordion modules
function toggleModule(el) {
// stop propagation voor inner links
el.classList.toggle('open');
}
// prevent links from toggling module
document.querySelectorAll('.lesson-item').forEach(a => {
a.addEventListener('click', e => e.stopPropagation());
});

function startCursus() {
// Scroll naar eerste actieve les
const active = document.querySelector('.lesson-item .lesson-status.active');
if (active) active.closest('.lesson-item').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
</body>
</html>

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below: