oefenhub_generiek_10_over_oefenhub_V1_8.html
Korte beschrijving
Deze HTML-mockup toont de publieke vaste pagina Over OefenHub. De pagina bestaat uit beheerbare contentblokken met algemene uitleg, doelgroepinformatie en een korte toelichting op de werking van OefenHub.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/generiek/oefenhub_generiek_10_over_oefenhub_V1_8.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Over OefenHub</title>
<link href="./oefenhub_shared_logo.css" rel="stylesheet">
<style>
:root {
--blue-1: #8fd0ff;
--blue-2: #5bb3ff;
--blue-3: #1f82e9;
--blue-4: #0d5db8;
--text: #114f95;
--muted: #5f7ea5;
--line: rgba(17,79,149,.12);
--orange-1: #ffbb4d;
--orange-2: #ff9620;
--green-1: #8adf67;
--green-2: #57ba3c;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--text);
background:
radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
linear-gradient(180deg, #7ec2f8 0%, #bfe2fd 15%, #edf7ff 34%, #f7fbff 100%);
min-height: 100vh;
}
.wrap { width: min(1220px, calc(100% - 30px)); margin: 0 auto; }
.header {
padding: 10px 0 12px;
background: linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
border-bottom: 1px solid rgba(255,255,255,.38);
box-shadow: 0 8px 20px rgba(28, 100, 177, .08);
position: relative;
z-index: 5;
}
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
}
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 250px;
}
.brand img { display: block; height: 46px; width: auto; max-width: 220px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); position: relative; z-index: 2; }
.welcome-text {
font-size: 12px;
color: rgba(17,79,149,.82);
font-weight: 700;
margin-top: -10px;
margin-left: 53px;
}
.header-center {
display:flex;
justify-content:center;
align-items:center;
}
.header-label {
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
padding:0 18px;
border-radius:999px;
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,247,255,.98));
border:1px solid rgba(170,204,238,.55);
box-shadow: var(--shadow-soft);
color: #195493;
font-size: 14px;
font-weight: 900;
letter-spacing: .01em;
}
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 120px; }
.menu-shell { position: relative; }
.menu-btn {
width: 42px;
height: 42px;
border-radius: 999px;
border: 0;
background: linear-gradient(180deg, #ffffff, #edf6ff);
box-shadow: var(--shadow-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--blue-4);
font-size: 18px;
font-weight: 900;
}
.menu-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 260px;
background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.98));
border-radius: 20px;
box-shadow: 0 12px 24px rgba(35,100,177,.16);
border: 1px solid rgba(170, 204, 238, .55);
padding: 10px 12px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.menu-shell.open .menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-list { display: grid; gap: 2px; }
.menu-link {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
padding: 10px 11px;
border-radius: 13px;
text-decoration: none;
color: #18518f;
font-size: 15px;
font-weight: 900;
box-shadow: inset 0 -1px 0 rgba(17,79,149,.10);
transition: background .18s ease, transform .18s ease;
}
.menu-link:last-child { box-shadow: none; }
.menu-link:hover { background: linear-gradient(180deg, #edf5ff, #dcecff); transform: translateX(2px); }
.menu-icon {
width: 23px; height: 23px; border-radius: 7px; display:grid; place-items:center;
color:#fff; font-size:14px; font-weight:900; box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.10);
}
.menu-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.menu-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }
main.wrap { padding: 24px 0 0; }
.page-shell {
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.95));
border-radius: 34px;
box-shadow: var(--shadow);
overflow: hidden;
}
.page-content { padding: 24px 24px 28px; }
.breadcrumb {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 16px;
color: #5f7ea5;
font-size: 13px;
font-weight: 800;
}
.breadcrumb a { color: #1b5ca0; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.hero-card, .content-card, .quote-card, .side-card {
background: rgba(255,255,255,.92);
border: 1px solid rgba(17,79,149,.08);
border-radius: 24px;
box-shadow: var(--shadow-soft);
}
.hero-card { padding: 24px 26px 24px; margin-bottom: 18px; }
.hero-layout {
display: block;
}
.eyebrow {
display:inline-flex;
align-items:center;
border-radius:999px;
background:#eaf2fb;
color:#18518f;
font-size:12px;
font-weight:800;
letter-spacing:.02em;
padding:6px 10px;
margin-bottom:10px;
}
.hero-title { margin: 0 0 10px; font-size: 30px; line-height: 1.1; color: #0d5db8; }
.hero-text { margin: 0; color: #315d91; font-size: 15px; line-height: 1.68; }
.hero-points {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(17,79,149,.10);
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}
.point-box {
border-radius:18px;
padding:14px 14px 12px;
border:1px solid rgba(17,79,149,.08);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.95));
}
.point-box strong { display:block; color:#0d5db8; margin-bottom:6px; font-size:14px; }
.point-box p { margin:0; font-size:13px; line-height:1.5; color:#55789f; }
.side-card { padding: 18px; display:grid; gap: 12px; align-content:start; }
.side-card h2 { margin: 0; font-size: 18px; color: #0d5db8; }
.mini-stat {
padding: 12px 14px;
border-radius: 16px;
background: #f7fbff;
border: 1px solid rgba(17,79,149,.08);
}
.mini-stat strong {
display:block; font-size:12px; color:#6b8bb2; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;
}
.mini-stat span { display:block; font-size:14px; line-height:1.5; font-weight:700; color:var(--text); }
.content-layout {
display:grid;
grid-template-columns: minmax(0, 1.1fr) minmax(280px, .78fr);
gap: 18px;
align-items: start;
}
.content-stack { display:grid; gap: 18px; }
.content-grid-two { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.content-card { padding: 22px 24px; }
.section-title { margin: 0 0 10px; font-size: 22px; color: #0d5db8; }
.section-text { margin: 0; font-size: 15px; line-height: 1.7; color: #315d91; }
.section-text + .section-text { margin-top: 12px; }
.info-list { display:grid; gap: 12px; margin-top: 16px; }
.info-item {
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f5faff);
border: 1px solid rgba(17,79,149,.09);
padding: 14px 15px;
}
.info-item strong { display:block; margin-bottom: 5px; color:#0d5db8; }
.info-item p { margin:0; font-size: 14px; line-height: 1.55; color:#56779f; }
.quote-card { padding: 18px 20px; }
.quote-card h3 { margin:0 0 10px; font-size:18px; color:#0d5db8; }
.quote-card p { margin:0; font-size:14px; line-height:1.6; color:#486f9e; }
.site-footer {
margin-top: 26px;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
border-top: 1px solid rgba(17,79,149,.10);
box-shadow: var(--shadow);
border-radius: 26px 26px 0 0;
padding: 0;
overflow: visible;
}
.site-footer > .wrap { padding: 22px 28px 18px; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 36px; align-items: start; padding: 0; }
.footer-col h4 {
margin: 0 0 12px; font-size: 15px; color: #0d5db8; font-weight: 900; padding-bottom: 8px; border-bottom: 1px solid rgba(17,79,149,.14);
}
.footer-col p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #18518f; text-decoration: none; font-size: 13px; font-weight: 700; transition: color .18s ease; }
.footer-links a:hover { color: var(--blue-4); text-decoration: underline; }
.footer-bottom {
margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(17,79,149,.10); display: flex; justify-content: space-between; gap: 12px;
align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 600;
}
@media (max-width: 1100px) {
.header-row { grid-template-columns: 1fr auto; }
.header-center { display:none; }
.hero-layout, .content-layout, .content-grid-two { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.page-content { padding: 18px; }
.hero-title { font-size: 25px; }
.hero-points { grid-template-columns: 1fr; }
.site-footer { padding: 0; }
.site-footer > .wrap { padding: 20px 18px 16px; }
.footer-bottom { justify-content: flex-start; }
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row">
<div class="brand">
<div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
</div>
<div class="header-center">
</div>
<div class="header-actions">
<div class="menu-shell" data-menu>
<button class="menu-btn" type="button" aria-label="Menu" aria-expanded="false">☰</button>
<div class="menu-dropdown">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon green">→</span><span>Inloggen</span></a>
<a class="menu-link" href="#"><span class="menu-icon orange">＋</span><span>Registreren</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="wrap">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="#">Home</a>
<span>›</span>
<span>Over OefenHub</span>
</nav>
<section class="hero-card">
<div class="hero-layout">
<div>
<h1 class="hero-title">Oefenen, herhalen en begrijpen op één plek</h1>
<p class="hero-text">OefenHub helpt kinderen om schoolvakken spelenderwijs te oefenen en in kleine stappen zelfvertrouwen op te bouwen. De omgeving is bedoeld om overzicht te geven, voortgang zichtbaar te maken en ouders, docenten en leerlingen elk vanuit hun eigen rol op een passende manier te ondersteunen.</p>
<div class="hero-points">
<div class="point-box">
<strong>Voor leerlingen</strong>
<p>Oefeningen sluiten aan op niveau, categorie en technische oefenvorm, zodat oefenen concreet en behapbaar blijft.</p>
</div>
<div class="point-box">
<strong>Voor docenten</strong>
<p>Docenten richten niveaus en inhoud in en houden overzicht over leerlingen, resultaten en beschikbare oefenstructuur.</p>
</div>
<div class="point-box">
<strong>Voor ouders en verzorgers</strong>
<p>Ouders en voogden kunnen betrokken blijven via resultaten, geschiedenis en live meekijken bij het oefenen van hun kind.</p>
</div>
</div>
</div>
</div>
</section>
<section class="content-stack">
<div class="content-grid-two">
<article class="content-card">
<h2 class="section-title">Waarom OefenHub bestaat</h2>
<p class="section-text">Leren vraagt om herhaling, structuur en duidelijke feedback. OefenHub brengt die onderdelen samen in een omgeving die niet alleen oefeningen aanbiedt, maar ook relaties tussen gebruikers, voortgang en communicatie logisch bij elkaar houdt. Daardoor blijft voor iedere rol zichtbaar wat relevant is, zonder dat verschillende losse systemen naast elkaar hoeven te bestaan.</p>
<p class="section-text">De basisgedachte achter OefenHub is dat dezelfde leeromgeving bruikbaar moet zijn voor zelfstandig oefenen, voor docentgestuurd werken en voor ouderbetrokkenheid. Vanuit die gedachte zijn rollen, frontpages en relatiecontexten bewust verschillend ingericht.</p>
</article>
<article class="content-card">
<h2 class="section-title">Voor wie OefenHub bedoeld is</h2>
<p class="section-text">OefenHub is gemaakt voor kinderen die leerstof willen oefenen in een overzichtelijke omgeving, voor docenten die oefeninhoud en voortgang willen begeleiden, en voor ouders of verzorgers die betrokken willen blijven bij het leerproces.</p>
<p class="section-text">Elke rol krijgt daarbij een eigen ingang en passende informatie, zodat de omgeving herkenbaar blijft voor de gebruiker die is ingelogd of de publieke informatie bekijkt.</p>
</article>
</div>
</section>
</div>
</div>
</main>
<footer class="site-footer">
<div class="wrap">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
</div>
<div class="footer-col">
<h4>Handige Links</h4>
<div class="footer-links">
<a href="#">Over OefenHub</a>
<a href="#">Contact</a>
<a href="#">Privacybeleid</a>
</div>
</div>
<div class="footer-col">
<h4>Starten</h4>
<div class="footer-links">
<a href="#">Inloggen</a>
<a href="#">Registreren</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</div>
</footer>
<script>
(function () {
const menu = document.querySelector('[data-menu]');
const btn = menu?.querySelector('.menu-btn');
function setOpen(open) {
if (!menu || !btn) return;
menu.classList.toggle('open', open);
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
}
if (menu && btn) {
setOpen(false);
btn.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
setOpen(!menu.classList.contains('open'));
});
document.addEventListener('click', function (event) {
if (!menu.contains(event.target)) setOpen(false);
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') setOpen(false);
});
}
})();
</script>
</body>
</html>