<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pabo Reis door Delfshaven</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>
:root{
--ink:#152238;
--muted:#607089;
--sand:#f7efe1;
--cream:#fffaf1;
--gold:#d99a2b;
--brick:#a94f3f;
--blue:#1d5d7a;
--green:#4f7d60;
--shadow: 0 18px 45px rgba(21,34,56,.16);
--radius: 28px;
}
html{scroll-behavior:smooth}
body{
font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
color:var(--ink);
background:
radial-gradient(circle at top left, rgba(217,154,43,.22), transparent 32rem),
radial-gradient(circle at 90% 10%, rgba(29,93,122,.16), transparent 30rem),
linear-gradient(180deg, var(--cream), #f4f7f7 55%, #eef3f1);
}
h1,h2,h3,.display-title{font-family:'Playfair Display',serif;}
.hero{
min-height:92vh;
display:grid;
place-items:center;
padding:4rem 0 2rem;
position:relative;
overflow:hidden;
}
.hero-card{
position:relative;
border:0;
border-radius:34px;
box-shadow:var(--shadow);
background:rgba(255,250,241,.86);
backdrop-filter:blur(10px);
overflow:hidden;
}
.display-title{
font-size:clamp(2.4rem, 7vw, 5rem);
line-height:.95;
}
.eyebrow{
display:inline-flex;
gap:.5rem;
align-items:center;
padding:.45rem .8rem;
border-radius:999px;
background:rgba(29,93,122,.1);
color:var(--blue);
font-weight:700;
font-size:.85rem;
}
.lead{color:var(--muted)}
.btn-journey{
background:var(--brick);
color:white;
border:0;
border-radius:999px;
padding:.9rem 1.2rem;
font-weight:800;
box-shadow:0 14px 28px rgba(169,79,63,.25);
}
.btn-journey:hover{
background:#8f4034;
color:white;
transform:translateY(-1px);
}
.btn-soft{
background:white;
border:1px solid rgba(21,34,56,.1);
border-radius:999px;
font-weight:700;
}
.sticky-progress{
position:sticky;
top:0;
z-index:1020;
background:rgba(255,250,241,.88);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(21,34,56,.08);
}
.route-strip{
display:flex;
gap:.55rem;
overflow:auto;
padding:.75rem 0;
scrollbar-width:none;
}
.route-strip::-webkit-scrollbar{display:none}
.route-chip{
flex:0 0 auto;
text-decoration:none;
color:var(--ink);
background:white;
border:1px solid rgba(21,34,56,.1);
border-radius:999px;
padding:.5rem .75rem;
font-weight:800;
font-size:.85rem;
}
.route-chip:hover{
background:var(--ink);
color:white;
}
.section-pad{padding:4rem 0}
.stop-card{
border:0;
border-radius:var(--radius);
background:rgba(255,255,255,.86);
box-shadow:0 16px 40px rgba(21,34,56,.11);
overflow:hidden;
}
.stop-card .card-header{
background:linear-gradient(135deg, rgba(29,93,122,.12), rgba(217,154,43,.14));
border:0;
padding:1.25rem;
}
.letter{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:16px;
background:var(--ink);
color:white;
font-weight:900;
box-shadow:0 10px 20px rgba(21,34,56,.18);
}
.theme-badge{
color:var(--brick);
font-weight:800;
font-size:.9rem;
text-transform:uppercase;
letter-spacing:.06em;
}
.question-box{
background:var(--sand);
border-left:5px solid var(--gold);
border-radius:18px;
padding:1.1rem;
font-size:1.08rem;
font-weight:700;
}
.micro{
color:var(--muted);
font-size:.95rem;
}
.travel-rule{
border:1px solid rgba(29,93,122,.15);
background:rgba(29,93,122,.08);
border-radius:22px;
padding:1rem;
}
.footer-card{
border-radius:34px;
background:var(--ink);
color:white;
box-shadow:var(--shadow);
}
.footer-card .lead{color:rgba(255,255,255,.74)}
.map-placeholder{
min-height:220px;
display:grid;
place-items:center;
border:2px dashed rgba(21,34,56,.18);
border-radius:var(--radius);
background:rgba(255,255,255,.55);
color:var(--muted);
text-align:center;
padding:1.5rem;
}
.small-label{
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--muted);
font-weight:800;
}
textarea.form-control{
border-radius:18px;
border:1px solid rgba(21,34,56,.14);
padding:1rem;
}
</style>
</head>
<body>
<header class="hero" id="top">
<div class="container position-relative">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="hero-card p-4 p-md-5">
<div class="row g-4 align-items-center">
<div class="col-lg-7">
<span class="eyebrow mb-3">🎒 Introductiewandeling · Pabo Deeltijd Jaar 1</span>
<h1 class="display-title mb-3">Pabo Reis door Delfshaven</h1>
<p class="lead fs-4 mb-4">Van wie je was naar de leerkracht die je wilt worden.</p>
<div class="d-flex flex-wrap gap-2 mb-4">
<span class="badge rounded-pill text-bg-light px-3 py-2">Start: Pieter de Hoochweg 129</span>
<span class="badge rounded-pill text-bg-light px-3 py-2">Duur: 75–90 minuten</span>
<span class="badge rounded-pill text-bg-light px-3 py-2">Werk steeds met anderen</span>
</div>
<a class="btn btn-journey me-2" href="#start">Start de wandeling</a>
<a class="btn btn-soft" href="#route">Bekijk route</a>
</div>
<div class="col-lg-5">
<div class="map-placeholder">
<div>
<div class="fs-1 mb-2">🧭</div>
<h3 class="h4">Ruimte voor routebeeld</h3>
<p class="mb-0">Voeg later hier een kaart, foto of illustratie van Delfshaven toe.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<nav class="sticky-progress">
<div class="container">
<div class="route-strip">
<a class="route-chip" href="#start">Start</a>
<a class="route-chip" href="#a">A · Theaterhavo/vwo</a>
<a class="route-chip" href="#b">B · Begraafplaats</a>
<a class="route-chip" href="#c">C · Harbour</a>
<a class="route-chip" href="#d">D · Schoonderloostraat</a>
<a class="route-chip" href="#e">E · Schat</a>
<a class="route-chip" href="#f">F · Piet Heyn</a>
<a class="route-chip" href="#g">G · Brug</a>
<a class="route-chip" href="#h">H · Dullaertplein</a>
<a class="route-chip" href="#finish">Afsluiting</a>
</div>
</div>
</nav>
<main>
<section class="section-pad" id="route">
<div class="container">
<div class="row g-4 align-items-stretch">
<div class="col-lg-5">
<div class="stop-card h-100 p-4">
<span class="small-label">Werkwijze</span>
<h2 class="mt-2 mb-3">Steeds iemand anders</h2>
<p>Tijdens de wandeling werk je steeds met wisselende samenstellingen.</p>
<div class="travel-rule mb-3">Bij een tweetalopdracht zoek je iemand op met wie je nog niet hebt gesproken.</div>
<div class="travel-rule mb-3">Bij een groepsopdracht probeer je in een nieuwe groep terecht te komen.</div>
<div class="travel-rule">Het doel is dat je aan het einde van de wandeling zoveel mogelijk medestudenten hebt leren kennen.</div>
</div>
</div>
<div class="col-lg-7">
<div class="stop-card h-100 p-4">
<span class="small-label">Rode draad</span>
<h2 class="mt-2 mb-3">Verleden → Heden → Toekomst</h2>
<p class="lead">Iedere halte helpt je om iets te delen over wie je bent, wat je meeneemt en wie je wilt worden.</p>
<div class="row g-3 mt-2">
<div class="col-md-4">
<div class="travel-rule h-100">
<strong>Verleden</strong><br>
<span class="micro">Wie heeft mij gevormd?</span>
</div>
</div>
<div class="col-md-4">
<div class="travel-rule h-100">
<strong>Heden</strong><br>
<span class="micro">Wat laat ik achter en neem ik mee?</span>
</div>
</div>
<div class="col-md-4">
<div class="travel-rule h-100">
<strong>Toekomst</strong><br>
<span class="micro">Waar sta ik voor?</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-pad pt-0" id="stops">
<div class="container">
<article class="stop-card mb-4" id="start">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">S</div>
<div>
<div class="theme-badge">Waarom ben ik hier?</div>
<h2 class="mb-0">Start · Pieter de Hoochweg 129</h2>
</div>
</div>
<div class="card-body p-4">
<p class="micro">Ga in tweetallen staan met iemand die je nog niet kent of nog niet gesproken hebt.</p>
<div class="question-box mb-3">
Waarom heb je voor de Pabo gekozen?<br>
Waarom juist nu?<br>
Wat hoop je over vier jaar bereikt te hebben?
</div>
<a class="btn btn-journey" href="#a">Naar halte A</a>
</div>
</article>
<article class="stop-card mb-4" id="a">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">A</div>
<div>
<div class="theme-badge">Opnieuw leren</div>
<h2 class="mb-0">De Theaterhavo/vwo</h2>
</div>
</div>
<div class="card-body p-4">
<div class="question-box mb-3">
Wanneer heb jij voor het laatst iets geleerd waarvan je vooraf dacht dat je het niet zou kunnen?
</div>
<div class="question-box mb-3">
Wat hielp jou toen om dit toch te leren?
</div>
<p class="micro mb-3">Na afloop zoek je een nieuwe gesprekspartner.</p>
<a class="btn btn-journey" href="#b">Naar halte B</a>
</div>
</article>
<article class="stop-card mb-4" id="b">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">B</div>
<div>
<div class="theme-badge">Wie heeft mij gevormd?</div>
<h2 class="mb-0">Joodse Begraafplaats</h2>
</div>
</div>
<div class="card-body p-4">
<p class="micro">Bespreek met een nieuwe wandelpartner.</p>
<div class="question-box mb-3">
Welke persoon heeft jou gevormd tot wie je nu bent?
</div>
<div class="question-box mb-3">
Welke eigenschap van deze persoon neem jij mee in jouw toekomstige rol als leerkracht?
</div>
<a class="btn btn-journey" href="#c">Naar halte C</a>
</div>
</article>
<article class="stop-card mb-4" id="c">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">C</div>
<div>
<div class="theme-badge">Diversiteit als kracht</div>
<h2 class="mb-0">Harbour Bilingual</h2>
</div>
</div>
<div class="card-body p-4">
<p class="micro">Vorm een nieuw groepje van vier personen.</p>
<div class="question-box mb-3">
Vertel iets over jezelf dat anderen waarschijnlijk niet van je weten.
</div>
<div class="question-box mb-3">
Welke ervaring uit jouw leven gaat jou straks helpen in het onderwijs?
</div>
<a class="btn btn-journey" href="#d">Naar halte D</a>
</div>
</article>
<article class="stop-card mb-4" id="d">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">D</div>
<div>
<div class="theme-badge">Wat laat je achter?</div>
<h2 class="mb-0">Schoonderloostraat</h2>
</div>
</div>
<div class="card-body p-4">
<p class="micro">Zoek een nieuwe gesprekspartner.</p>
<div class="question-box mb-3">
Wat moet jij loslaten om succesvol te worden op de Pabo?
</div>
<div class="question-box mb-3">
Welke gewoonte, overtuiging of onzekerheid helpt jou niet meer in deze nieuwe fase?
</div>
<a class="btn btn-journey" href="#e">Naar halte E</a>
</div>
</article>
<article class="stop-card mb-4" id="e">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">E</div>
<div>
<div class="theme-badge">Welke schat neem jij mee?</div>
<h2 class="mb-0">Schat van Schoonderloo</h2>
</div>
</div>
<div class="card-body p-4">
<p class="micro">Ga met de groep in een kring staan.</p>
<div class="question-box mb-3">
Ik begin aan deze reis en ik neem mee...
</div>
<p>
Noem één kwaliteit, eigenschap of ervaring die jij meeneemt naar de opleiding.
De volgende student herhaalt wat de vorige student meenam en voegt zijn of haar eigen schat toe.
</p>
<div class="question-box mb-3">
Als je kijkt naar alles wat vandaag genoemd is, waar zou onze groep straks sterk in kunnen worden?
</div>
<a class="btn btn-journey" href="#f">Naar halte F</a>
</div>
</article>
<article class="stop-card mb-4" id="f">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">F</div>
<div>
<div class="theme-badge">Koers bepalen</div>
<h2 class="mb-0">Standbeeld Piet Heyn</h2>
</div>
</div>
<div class="card-body p-4">
<p class="micro">Vorm een nieuwe groep van vier of vijf personen.</p>
<div class="question-box mb-3">
Stel dat jullie samen een basisschool mogen starten. Welke drie waarden mogen absoluut niet ontbreken?
</div>
<div class="question-box mb-3">
Waarom zijn juist deze drie waarden voor jullie belangrijk?
</div>
<p class="micro">Deel de gekozen waarden met de groep.</p>
<a class="btn btn-journey" href="#g">Naar halte G</a>
</div>
</article>
<article class="stop-card mb-4" id="g">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">G</div>
<div>
<div class="theme-badge">Over de brug</div>
<h2 class="mb-0">Piet Heynsbrug</h2>
</div>
</div>
<div class="card-body p-4">
<div class="question-box mb-3">
Tijdens deze stop voeren we de activiteit <strong>Over de Streep</strong> uit.
</div>
<p>
Door middel van verschillende stellingen ontdekken studenten welke ervaringen,
verwachtingen, uitdagingen en kwaliteiten zij met elkaar delen.
</p>
<div class="question-box mb-3">
Wat viel je op tijdens deze activiteit?
</div>
<a class="btn btn-journey" href="#h">Naar halte H</a>
</div>
</article>
<article class="stop-card mb-4" id="h">
<div class="card-header d-flex gap-3 align-items-center">
<div class="letter">H</div>
<div>
<div class="theme-badge">Hoe wil je herinnerd worden?</div>
<h2 class="mb-0">Heiman Dullaertplein</h2>
</div>
</div>
<div class="card-body p-4">
<p class="micro">Vorm een groepje van drie personen met wie je vandaag nog niet hebt samengewerkt.</p>
<div class="question-box mb-3">
Als mijn medestudenten mij over vier jaar zouden moeten omschrijven, dan hoop ik dat ze zeggen dat ik...
</div>
<a class="btn btn-journey" href="#finish">Terug naar school</a>
</div>
</article>
<article class="footer-card p-4 p-md-5" id="finish">
<div class="row g-4 align-items-center">
<div class="col-lg-7">
<span class="eyebrow mb-3" style="background:rgba(255,255,255,.12);color:#fff">
🏁 Afsluiting · Pieter de Hoochweg 129
</span>
<h2 class="display-6 mb-3">Terug op school</h2>
<p class="lead">Ga met de groep in een kring staan en rond de wandeling samen af.</p>
<div class="question-box mb-3" style="background:rgba(255,255,255,.12);color:white;border-left-color:var(--gold)">
Welk woord neem jij mee uit deze wandeling?
</div>
<div class="question-box" style="background:rgba(255,255,255,.12);color:white;border-left-color:var(--gold)">
Wat heeft jou vandaag verrast?
</div>
</div>
<div class="col-lg-5">
<div class="bg-white text-dark p-4 rounded-5">
<span class="small-label">Rode draad</span>
<p class="mb-0 mt-2">
Waarom begin ik? → Hoe leer ik? → Wie heeft mij gevormd? →
Wat breng ik mee? → Wat laat ik achter? → Welke schat neem ik mee? →
Waar sta ik voor? → Wat delen we? → Hoe wil ik herinnerd worden?
</p>
</div>
</div>
</div>
</article>
</div>
</section>
</main>
<button type="button" class="btn btn-journey position-fixed bottom-0 end-0 m-3" data-bs-toggle="modal" data-bs-target="#notesModal">
Mijn notities
</button>
<div class="modal fade" id="notesModal" tabindex="-1" aria-labelledby="notesLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content" style="border-radius:28px">
<div class="modal-header">
<h5 class="modal-title" id="notesLabel">Mijn reisnotities</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
</div>
<div class="modal-body">
<p class="micro">Optioneel: studenten kunnen hier onderweg korte woorden of inzichten noteren.</p>
<textarea id="journeyNotes" class="form-control" rows="10" placeholder="Schrijf hier je woorden, inzichten of vragen..."></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-soft" id="clearNotes">Wis notities</button>
<button type="button" class="btn btn-journey" data-bs-dismiss="modal">Bewaar</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const notes = document.getElementById('journeyNotes');
const clear = document.getElementById('clearNotes');
if (notes) {
notes.value = localStorage.getItem('paboDelfshavenNotes') || '';
notes.addEventListener('input', () => {
localStorage.setItem('paboDelfshavenNotes', notes.value);
});
}
if (clear) {
clear.addEventListener('click', () => {
localStorage.removeItem('paboDelfshavenNotes');
notes.value = '';
});
}
</script>
</body>
</html>