oefenhub_generiek_12_contact_V1_5.html
Korte beschrijving
Deze HTML-mockup toont de publieke contactpagina met een contactformulier en aanvullende uitleg. De gebruiker vult onderwerp, naam, e-mailadres en bericht in, terwijl technische problemen of inhoudelijke fouten functioneel naar meldingen worden verwezen.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/generiek/oefenhub_generiek_12_contact_V1_5.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Contact</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 > .wrap { padding: 20px 18px 16px; }
.footer-bottom { justify-content: flex-start; }
}
.contact-layout { display:grid; grid-template-columns: minmax(0, 1.2fr) 360px; gap: 18px; align-items:start; }
.contact-form-card, .contact-side-card { background: rgba(255,255,255,.92); border: 1px solid rgba(17,79,149,.08); border-radius: 24px; box-shadow: var(--shadow-soft); }
.contact-form-card { padding: 18px 20px 20px; }
.contact-side-card { padding: 18px; display:grid; gap: 12px; }
.contact-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items:start; }
.contact-field, .contact-field-full { display:grid; gap: 8px; align-content:start; }
.contact-field-full { grid-column: 1 / -1; }
.contact-label { font-size: 13px; font-weight: 900; color: #235790; }
.contact-input, .contact-select, .contact-textarea {
width:100%; border:1px solid rgba(17,79,149,.14); background: rgba(255,255,255,.98); border-radius:16px;
padding:13px 14px; min-height:58px; font:inherit; color:#134f92; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.contact-textarea { min-height: 168px; resize: vertical; }
.contact-help { font-size: 12px; line-height: 1.45; color: #6d88aa; margin-top: -2px; }
.contact-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid rgba(17,79,149,.10); }
.contact-btn {
border:0; border-radius:15px; min-height:46px; padding:0 18px; font:inherit; font-size:14px; font-weight:900; cursor:pointer; box-shadow:var(--shadow-soft);
}
.contact-btn-primary { background: linear-gradient(180deg, #ffbc4b, #ff9621); color:#fff; }
.contact-btn-secondary { background: linear-gradient(180deg, #eef6ff, #dcecff); color:#0d5db8; }
.contact-note { border-radius: 18px; background: linear-gradient(180deg, #edf6ff, #dbeeff); border: 1px solid rgba(94,159,225,.22); padding: 14px 15px; }
.contact-note strong { display:block; margin-bottom:4px; color:#0f4d91; }
.contact-note p { margin:0; font-size:13px; line-height:1.5; color:#5a7ba3; }
.contact-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.contact-list li { position:relative; padding-left:18px; font-size:13px; line-height:1.5; color:var(--text); }
.contact-list li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:999px; background: linear-gradient(180deg, #5eb8ff, #2f8fec); }
.contact-mini { padding: 12px 14px; border-radius: 16px; background: #f7fbff; border: 1px solid rgba(17,79,149,.08); }
.contact-mini strong { display:block; font-size:13px; color:#6b8bb2; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.contact-mini span { display:block; font-size:14px; line-height:1.5; font-weight:700; color:var(--text); }
@media (max-width: 980px) { .contact-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
</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>Contact</span>
</nav>
<section class="hero-card">
<div class="hero-layout">
<div>
<h1 class="hero-title">Neem contact met ons op</h1>
<p class="hero-text">Heb je een vraag over OefenHub, loop je ergens vast of wil je iets aan ons doorgeven? Gebruik dan onderstaand formulier. We gebruiken je onderwerp om je bericht sneller op de juiste plek te laten landen.</p>
</div>
</div>
</section>
<section class="content-stack">
<div class="contact-layout">
<article class="contact-form-card">
<h2 class="section-title">Contactformulier</h2>
<p class="section-text">Kies eerst het onderwerp van je vraag. Bij <strong>Overige</strong> kun je je bericht vrij toelichten.</p>
<div class="contact-grid">
<div class="contact-field-full">
<label class="contact-label" for="contact-subject">Onderwerp</label>
<select id="contact-subject" class="contact-select">
<option>Inloggen of account</option>
<option>Registreren</option>
<option>Privacy of gegevens</option>
<option>Overige</option>
</select>
</div>
<div class="contact-field">
<label class="contact-label" for="contact-email">E-mailadres</label>
<input id="contact-email" class="contact-input" type="email" placeholder="naam@voorbeeld.nl" />
<div class="contact-help">We gebruiken dit adres om op je bericht te reageren.</div>
</div>
<div class="contact-field">
<label class="contact-label" for="contact-name">Naam</label>
<input id="contact-name" class="contact-input" type="text" placeholder="Bijvoorbeeld: Noor Jansen" />
</div>
<div class="contact-field-full">
<label class="contact-label" for="contact-message">Bericht</label>
<textarea id="contact-message" class="contact-textarea"></textarea>
<div class="contact-help">Omschrijf je vraag zo concreet mogelijk. Vermeld eventueel wat je al hebt geprobeerd.</div>
</div>
</div>
<div class="contact-actions">
<button class="contact-btn contact-btn-primary" type="button">Bericht versturen</button>
</div>
</article>
<aside class="contact-side-card">
<h2 class="section-title">Goed om te weten</h2>
<div class="contact-note">
<strong>Voor vragen en hulp</strong>
<p>Gebruik dit formulier voor algemene vragen, ondersteuning en opmerkingen over OefenHub. Voor privacygerelateerde vragen kun je hetzelfde formulier gebruiken met het onderwerp <em>Privacy of gegevens</em>.</p>
</div>
<ul class="contact-list">
<li>Kies een onderwerp dat het dichtst bij je vraag ligt.</li>
<li>Geef in je bericht kort aan wat er precies gebeurt of waar je tegenaan loopt.</li>
<li>Gebruik <strong>Overige</strong> als je vraag niet onder een van de standaardonderwerpen valt.</li>
</ul>
<div class="contact-note">
<strong>Meld een probleem</strong>
<p>Technische problemen of inhoudelijke fouten meld je het best via <em>Meld een probleem</em> zodra je bent ingelogd. Zo komt je melding direct op de juiste plek terecht.</p>
</div>
<div class="contact-mini">
<strong>Reactie</strong>
<span>We proberen vragen zo snel mogelijk op te pakken.</span>
</div>
</aside>
</div>
</section>
</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>