Hero met taakkaarten over de rand Nieuw
Hero voor een fysiotherapiepraktijk waarbij vier taakkaarten (afspraak maken, klachten, vergoeding, route) over de onderrand van de foto vallen, zodat de belangrijkste bezoekerstaken al boven de vouw staan. Kaarten zijn echte links met rustige hover (rand en pijl, 180 ms) en zichtbare focus; op mobiel worden het twee bij twee kaarten. Sterk voor zorg, cultuur, gemeenten en scholen.
Fysiotherapie in Utrecht-Oost
Weer zonder pijn bewegen, met een plan dat bij je past.
Afspraak makenBinnen 2 werkdagen terecht, ook 's avonds
Klachten en behandelingenRug, nek, knie, sport en na een operatie
Vergoeding checkenZonder verwijzing, contract met alle verzekeraars
Route en parkerenBiltstraat 140, gratis parkeren achter het pand
Sinds 1998 aan de Biltstraat. Zeven fysiotherapeuten, een eigen oefenzaal en korte lijnen met de huisartsen in de wijk.
- Wachttijd
- 2 werkdagen
- Specialisaties
- 6
- Vandaag open
- 7:30 tot 20:00
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Geen JavaScript nodig.
<!-- Hero met taakkaarten over de rand · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tko">
<div class="tko__top"><span>Ma t/m vr 7:30 tot 20:00 · za 8:00 tot 13:00</span><span class="tko__tr">Rapportcijfer <b>9,1</b> uit 412 beoordelingen</span><a href="tel:0301234567">030 123 4567</a></div>
<div class="tko__nav" role="banner"><a class="tko__logo" href="#"><span class="tko__lm" aria-hidden="true"></span><span>De Linde<small>fysiotherapie · Utrecht</small></span></a>
<nav class="tko__links" aria-label="Hoofdmenu"><a href="#">Behandelingen</a><a href="#">Specialisaties</a><a href="#">Team</a><a href="#">Vergoedingen</a><a href="#">Contact</a></nav><a class="tko__btn" href="#">Afspraak maken</a></div>
<div class="tko__hero"><img src="https://neddev.com/lab-media/taakkaarten-over-hero-2.webp" alt="Praktijkpand van De Linde aan een rustige straat met fietsen ervoor" loading="lazy">
<div class="tko__over"><p class="tko__k">Fysiotherapie in Utrecht-Oost</p><h3 class="tko__h">Weer zonder pijn bewegen, met een plan dat bij je past.</h3></div></div>
<div class="tko__kaarten">
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><rect x="7" y="10" width="34" height="30" rx="2"/><path d="M7 18h34M15 6v8M33 6v8M16 26h6v6h-6z"/></svg><span class="tko__kt">Afspraak maken</span><span class="tko__kd">Binnen 2 werkdagen terecht, ook 's avonds</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><circle cx="24" cy="9" r="4"/><path d="M24 13v14M24 18l-9 5M24 18l9-4M24 27l-6 14M24 27l7 13"/></svg><span class="tko__kt">Klachten en behandelingen</span><span class="tko__kd">Rug, nek, knie, sport en na een operatie</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M10 6h20l8 8v28H10z"/><path d="M30 6v8h8M16 24h16M16 31h16M16 38h9"/></svg><span class="tko__kt">Vergoeding checken</span><span class="tko__kd">Zonder verwijzing, contract met alle verzekeraars</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M24 43s13-12 13-23a13 13 0 0 0-26 0c0 11 13 23 13 23z"/><circle cx="24" cy="20" r="5"/></svg><span class="tko__kt">Route en parkeren</span><span class="tko__kd">Biltstraat 140, gratis parkeren achter het pand</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
</div>
<div class="tko__onder"><p class="tko__intro">Sinds 1998 aan de Biltstraat. Zeven fysiotherapeuten, een eigen oefenzaal en korte lijnen met de huisartsen in de wijk.</p>
<dl class="tko__feiten"><div><dt>Wachttijd</dt><dd>2 werkdagen</dd></div><div><dt>Specialisaties</dt><dd>6</dd></div><div><dt>Vandaag open</dt><dd>7:30 tot 20:00</dd></div></dl></div>
</div>
</div>/* Hero met taakkaarten over de rand · NedDev · eigen werk. */
/* fonts (Fontshare): gambetta@400,500,600 */
.tko{--tko-g:#17372f;--tko-z:#f3eee4;--tko-a:#c4472a;background:var(--tko-z);color:#1b1b1b;font-family:'Switzer',system-ui,sans-serif;padding-bottom:36px;container-type:inline-size}
.tko a:focus-visible{outline:2px solid var(--tko-a);outline-offset:3px}
.tko__top{display:flex;gap:24px;justify-content:flex-end;align-items:center;padding:8px 32px;font-size:12px;color:#e9e4d8;background:var(--tko-g)}
.tko__top span:first-child{margin-right:auto}
.tko__top a{color:#fff;text-decoration:none;font-weight:600}
.tko__top a:hover{text-decoration:underline}
.tko__nav{display:flex;align-items:center;gap:28px;padding:16px 32px}
.tko__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tko-g);font:600 22px/1 'Gambetta',Georgia,serif}
.tko__logo small{display:block;font:500 11px/1.4 'Switzer',sans-serif;color:#5b5b55;letter-spacing:.02em}
.tko__lm{width:30px;height:30px;border-radius:50% 50% 4px 50%;background:var(--tko-g);position:relative}
.tko__lm::after{content:'';position:absolute;left:13px;top:6px;width:2px;height:20px;background:var(--tko-z);box-shadow:-5px 6px 0 -0px var(--tko-z),5px 4px 0 0 var(--tko-z)}
.tko__links{display:flex;gap:22px;margin-left:auto}
.tko__links a{font-size:14px;color:#1b1b1b;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.tko__links a:hover{border-color:var(--tko-a);color:var(--tko-g)}
.tko__btn{font:600 14px/1 'Switzer',sans-serif;background:var(--tko-a);color:#fff;text-decoration:none;padding:12px 18px;border-radius:3px;transition:background .18s}
.tko__btn:hover{background:#a63a21}
.tko__hero{position:relative;margin:0 32px;height:360px;border-radius:4px;overflow:hidden;background:#cfc7b6}
.tko__hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.tko__over{position:absolute;inset:0;padding:34px 36px;background:linear-gradient(100deg,rgba(14,32,27,.78) 0%,rgba(14,32,27,.45) 38%,rgba(14,32,27,0) 62%);color:#fff;box-sizing:border-box}
.tko__k{margin:0 0 10px;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#e9e4d8}
.tko__h{margin:0;max-width:15ch;font:500 44px/1.06 'Gambetta',Georgia,serif;letter-spacing:-.01em}
.tko__kaarten{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);width:min(900px,74%);margin:-104px 60px 0 auto;background:#fff;border-radius:4px;box-shadow:0 14px 40px -18px rgba(23,55,47,.45)}
.tko__kaart{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 18px 46px;color:#1b1b1b;text-decoration:none;border-left:1px solid #e6e0d4;outline-offset:-3px!important;transition:background .18s}
.tko__kaart:first-child{border-left:0}
.tko__kaart svg:first-child{width:40px;height:40px;fill:none;stroke:var(--tko-g);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.tko__kt{font:600 19px/1.15 'Gambetta',Georgia,serif;color:var(--tko-g)}
.tko__kd{font-size:13px;line-height:1.45;color:#4a4a45}
.tko__pijl{position:absolute;left:18px;bottom:16px;width:20px;height:20px;fill:none;stroke:var(--tko-a);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.tko__kaart::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tko-a);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.tko__kaart:hover{background:#fbf9f5}
.tko__kaart:hover::after,.tko__kaart:focus-visible::after{transform:scaleX(1)}
.tko__kaart:hover .tko__pijl{transform:translateX(4px)}
.tko__kaart:active{background:#f3eee4}
.tko__onder{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:30px 32px 0;align-items:start}
.tko__intro{margin:0;font:400 20px/1.45 'Gambetta',Georgia,serif;color:#1b1b1b;max-width:36ch}
.tko__feiten{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid #d9d2c3}
.tko__feiten div{padding:12px 0}
.tko__feiten dt{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5b5b55}
.tko__feiten dd{margin:4px 0 0;font:600 18px 'Switzer',sans-serif;color:var(--tko-g);font-variant-numeric:tabular-nums}
@container (max-width:1000px){.tko__links{display:none}.tko__btn{margin-left:auto}.tko__kaarten{width:auto;margin:-80px 32px 0 32px}.tko__h{font-size:36px}}
@container (max-width:680px){.tko__top{padding:8px 16px;gap:12px;font-size:11px}.tko__top span:first-child,.tko__tr{display:none}.tko__top a{margin-left:auto}
.tko__nav{padding:12px 16px;gap:12px}.tko__logo{font-size:19px}.tko__btn{padding:10px 12px;font-size:13px}
.tko__hero{margin:0 16px;height:300px}.tko__over{padding:20px;background:linear-gradient(180deg,rgba(14,32,27,.8) 0%,rgba(14,32,27,.35) 55%,rgba(14,32,27,0) 80%)}.tko__h{font-size:27px}
.tko__kaarten{grid-template-columns:1fr 1fr;margin:-70px 16px 0}.tko__kaart{padding:14px 12px 38px}.tko__kaart:nth-child(3){border-left:0}.tko__kaart:nth-child(n+3){border-top:1px solid #e6e0d4}
.tko__kaart svg:first-child{width:30px;height:30px;margin-bottom:2px}.tko__kt{font-size:16px}.tko__kd{font-size:12px}.tko__pijl{left:12px;bottom:12px}
.tko__onder{grid-template-columns:1fr;gap:16px;padding:22px 16px 0}.tko__intro{font-size:17px}.tko__feiten dd{font-size:15px}}
@media (prefers-reduced-motion: reduce){.tko *{transition:none!important}}
Meer uit paginasecties
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →