NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Voor wie: kaarten met foto en subcategorieën New

Audience picker for a business with several target groups: asymmetric grid of cards with photo, audience name, a one-line explanation and subcategories as real links (good for internal linking and SEO). The whole card is clickable via a stretched link, sublinks remain separately reachable. Last cell is a contact panel for those who do not see their sector. Hover: photo zooms 3% and arrow shifts, 200 ms; :focus-within outlines the card. Pure CSS, grid with container queries for stacking.

Hofstad Schoonmaak · Den Haag, Delft, Leiden

Voor wie wij schoonmaken

Elke branche heeft eigen regels: hygiëneprotocol in een praktijk, sleutelbeheer bij een VvE, schoonmaak na sluitingstijd in de horeca. Kies je situatie.

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. No JavaScript needed.
<!-- Voor wie: kaarten met foto en subcategorieën · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vwk">
  <div class="vwk__in">
    <div class="vwk__head">
      <div><p class="vwk__kick">Hofstad Schoonmaak · Den Haag, Delft, Leiden</p><h2 class="vwk__h">Voor wie wij schoonmaken</h2></div>
      <p class="vwk__lead">Elke branche heeft eigen regels: hygiëneprotocol in een praktijk, sleutelbeheer bij een VvE, schoonmaak na sluitingstijd in de horeca. Kies je situatie.</p>
    </div>
    <ul class="vwk__grid">
      <li class="vwk__card vwk__card--big"><div class="vwk__img"><img src="https://neddev.com/lab-media/voor-wie-kaarten-1.webp" alt="Glazenwasser maakt de glazen gevel van een kantoor schoon" loading="lazy"></div><div class="vwk__b"><h3><a class="vwk__a" href="#">Kantoren<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a></h3><p>Dagelijks of een paar keer per week, voor of na kantooruren. Vaste schoonmaker die je pand kent.</p><ul class="vwk__subs"><li><a href="#">Dagelijkse schoonmaak</a></li><li><a href="#">Glasbewassing</a></li><li><a href="#">Vloeronderhoud</a></li><li><a href="#">Sanitair en pantry</a></li></ul></div></li>
      <li class="vwk__card"><div class="vwk__img"><img src="https://neddev.com/lab-media/voor-wie-kaarten-2.webp" alt="Schoonmaker reinigt de balie van een tandartspraktijk" loading="lazy"></div><div class="vwk__b"><h3><a class="vwk__a" href="#">Zorg en praktijken<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a></h3><ul class="vwk__subs"><li><a href="#">Tandarts</a></li><li><a href="#">Fysio</a></li><li><a href="#">Huisarts</a></li></ul></div></li>
      <li class="vwk__card"><div class="vwk__img"><img src="https://neddev.com/lab-media/voor-wie-kaarten-3.webp" alt="Schoonmaker dweilt het trappenhuis van een appartementengebouw" loading="lazy"></div><div class="vwk__b"><h3><a class="vwk__a" href="#">VvE en appartementen<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a></h3><ul class="vwk__subs"><li><a href="#">Trappenhuis</a></li><li><a href="#">Bergingen</a></li><li><a href="#">Glas gevel</a></li></ul></div></li>
      <li class="vwk__card"><div class="vwk__img"><img src="https://neddev.com/lab-media/voor-wie-kaarten-4.webp" alt="Restaurantkeuken van rvs wordt na sluitingstijd schoongemaakt" loading="lazy"></div><div class="vwk__b"><h3><a class="vwk__a" href="#">Horeca<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a></h3><ul class="vwk__subs"><li><a href="#">Keuken (HACCP)</a></li><li><a href="#">Zaal na sluiting</a></li></ul></div></li>
      <li class="vwk__card"><div class="vwk__img"><img src="https://neddev.com/lab-media/voor-wie-kaarten-5.webp" alt="Glazenwasser op een ladder bij een Haags herenhuis" loading="lazy"></div><div class="vwk__b"><h3><a class="vwk__a" href="#">Particulier<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a></h3><ul class="vwk__subs"><li><a href="#">Glazenwasser</a></li><li><a href="#">Opleverschoonmaak</a></li></ul></div></li>
      <li class="vwk__other"><p class="vwk__o-k">Staat je branche er niet bij?</p><p class="vwk__o-t">We maken ook scholen, sportclubs en winkels schoon. Bel Daan, hij komt binnen een week kijken.</p><a class="vwk__o-tel" href="tel:+31703455120">070 345 51 20</a><a class="vwk__o-m" href="#">of vraag een offerte aan</a></li>
    </ul>
  </div>
</div>
</div>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →