NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Zwevende contactkaart met gezicht Nieuw

Kaartje rechtsonder met de foto van een echte medewerker, beschikbaarheid en knoppen WhatsApp en Bellen. Verschijnt een keer per sessie na een korte pauze (zodra het blok in beeld is), is sluitbaar met de kruisknop of Esc en klapt dan in tot een rond fotoknopje. De keuze staat in sessionStorage (met try/catch, werkt ook zonder). Inkomen met @starting-style en transition-behavior: allow-discrete; browsers zonder ondersteuning tonen de kaart zonder animatie.

KlachtenBehandelingenVergoedingenTeamAfspraak maken

Utrecht-West · zonder verwijzing

Rug, knie of schouder? Meestal binnen 2 werkdagen op de behandeltafel.

Zes fysiotherapeuten, waarvan twee sportfysio en een manueel therapeut. Vergoed vanuit je aanvullende verzekering.

Fysiotherapeut begeleidt een knieoefening op de behandelbank
Demo

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Zwevende contactkaart met gezicht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fyk">
  <div class="fyk__page">
    <div class="fyk__bar"><span class="fyk__logo"><svg viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="13" fill="#1f3b2d"/><path d="M9 20c2-6 4-9 10-11M11 8.5c1.6 0 2.8 1.2 2.8 2.8" fill="none" stroke="#e7efe4" stroke-width="2" stroke-linecap="round"/></svg>Fysio Lombok</span><span class="fyk__links"><a href="#">Klachten</a><a href="#">Behandelingen</a><a href="#">Vergoedingen</a><a href="#">Team</a></span><a class="fyk__cta" href="#">Afspraak maken</a></div>
    <div class="fyk__hero">
      <div class="fyk__txt">
        <p class="fyk__kick">Utrecht-West · zonder verwijzing</p>
        <h2 class="fyk__h">Rug, knie of schouder? Meestal binnen 2 werkdagen op de behandeltafel.</h2>
        <p class="fyk__lead">Zes fysiotherapeuten, waarvan twee sportfysio en een manueel therapeut. Vergoed vanuit je aanvullende verzekering.</p>
        <ul class="fyk__chips"><li><a href="#">Lage rugpijn</a></li><li><a href="#">Knieblessure</a></li><li><a href="#">Nek en schouder</a></li><li><a href="#">Na een operatie</a></li><li><a href="#">Hardloopblessure</a></li></ul>
      </div>
      <img class="fyk__img" src="https://neddev.com/lab-media/contactkaart-gezicht-2.webp" alt="Fysiotherapeut begeleidt een knieoefening op de behandelbank" loading="lazy">
    </div>
  </div>
  <div class="fyk__card" role="complementary" aria-label="Vraag het een fysiotherapeut" hidden>
    <button class="fyk__x" type="button" aria-label="Kaart sluiten"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15"/></svg></button>
    <div class="fyk__who"><img src="https://neddev.com/lab-media/contactkaart-gezicht-1.webp" alt="" width="56" height="56"><div><b>Sanne de Wit</b><span>Fysiotherapeut, 11 jaar in de praktijk</span><em class="fyk__on"><i aria-hidden="true"></i><span class="fyk__on-t">Nu bereikbaar</span></em></div></div>
    <p class="fyk__msg">Twijfel je of fysio iets voor je klacht is? App me, ik reageer meestal binnen een uur.</p>
    <div class="fyk__btns"><a class="fyk__b fyk__b--wa" href="#">WhatsApp Sanne</a><a class="fyk__b fyk__b--tel" href="tel:+31302012488">030 201 24 88</a></div>
  </div>
  <button class="fyk__mini" type="button" aria-label="Open de contactkaart van Sanne" aria-expanded="false" hidden><img src="https://neddev.com/lab-media/contactkaart-gezicht-1.webp" alt=""><i aria-hidden="true"></i></button>
  <div class="fyk__demo"><span>Demo</span><button type="button" data-fyk="reset">Wis sessie en toon opnieuw</button><span class="fyk__state" aria-live="polite"></span></div>
</div>
</div>

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 →