{"id":16,"date":"2026-08-10T14:56:01","date_gmt":"2026-08-10T14:56:01","guid":{"rendered":"https:\/\/webbouwoostvoorne.nl\/?page_id=16"},"modified":"2026-08-10T15:14:27","modified_gmt":"2026-08-10T15:14:27","slug":"home","status":"publish","type":"page","link":"https:\/\/webbouwoostvoorne.nl\/index.php\/home\/","title":{"rendered":"Home"},"content":{"rendered":"\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary><\/summary>\n<style>\n:root{\n  --wbo-navy:#102a43;\n  --wbo-blue:#1677ff;\n  --wbo-light:#f5f8fc;\n  --wbo-text:#182230;\n  --wbo-muted:#607086;\n  --wbo-white:#fff;\n  --wbo-border:#e3eaf2;\n  --wbo-shadow:0 12px 35px rgba(16,42,67,.10);\n  --wbo-radius:18px;\n}\n\n.wbo-site,\n.wbo-site *{\n  box-sizing:border-box;\n}\n\n.wbo-site{\n  font-family:Arial,Helvetica,sans-serif;\n  color:var(--wbo-text);\n  background:#fff;\n  line-height:1.6;\n  width:100%;\n}\n\n.wbo-site a{\n  text-decoration:none;\n}\n\n.wbo-container{\n  width:min(1120px,92%);\n  margin:0 auto;\n}\n\n\/* HEADER *\/\n.wbo-header{\n  background:rgba(255,255,255,.97);\n  border-bottom:1px solid var(--wbo-border);\n  position:sticky;\n  top:0;\n  z-index:50;\n  backdrop-filter:blur(10px);\n}\n\n.wbo-nav{\n  min-height:76px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:24px;\n}\n\n.wbo-logo{\n  font-size:24px;\n  font-weight:800;\n  color:var(--wbo-navy);\n}\n\n.wbo-logo span{\n  color:var(--wbo-blue);\n}\n\n.wbo-navigation{\n  display:flex;\n  gap:26px;\n  align-items:center;\n}\n\n.wbo-navigation a{\n  font-weight:700;\n  color:#35465a;\n}\n\n.wbo-navigation a:hover{\n  color:var(--wbo-blue);\n}\n\n\/* BUTTONS *\/\n.wbo-btn{\n  display:inline-block;\n  padding:14px 22px;\n  border-radius:12px;\n  font-weight:800;\n  transition:.2s;\n  cursor:pointer;\n  border:0;\n}\n\n.wbo-btn-primary{\n  background:var(--wbo-blue);\n  color:#fff !important;\n  box-shadow:0 8px 20px rgba(22,119,255,.25);\n}\n\n.wbo-btn-primary:hover{\n  transform:translateY(-2px);\n  background:#0868ed;\n}\n\n.wbo-btn-outline{\n  border:2px solid var(--wbo-blue);\n  color:var(--wbo-blue) !important;\n  background:#fff;\n}\n\n.wbo-btn-outline:hover{\n  background:#eef5ff;\n}\n\n\/* HERO *\/\n.wbo-hero{\n  padding:100px 0 90px;\n  background:linear-gradient(\n    135deg,\n    #f5f9ff 0%,\n    #fff 55%,\n    #eef6ff 100%\n  );\n}\n\n.wbo-hero-grid{\n  display:grid;\n  grid-template-columns:1.1fr .9fr;\n  gap:60px;\n  align-items:center;\n}\n\n.wbo-eyebrow{\n  display:inline-block;\n  color:var(--wbo-blue);\n  font-weight:800;\n  margin-bottom:16px;\n}\n\n.wbo-hero h1{\n  font-size:clamp(42px,6vw,72px);\n  line-height:1.05;\n  letter-spacing:-2px;\n  color:var(--wbo-navy);\n  margin:0 0 24px;\n}\n\n.wbo-hero p{\n  font-size:20px;\n  color:var(--wbo-muted);\n  max-width:650px;\n  margin:0 0 30px;\n}\n\n.wbo-actions{\n  display:flex;\n  gap:14px;\n  flex-wrap:wrap;\n}\n\n.wbo-hero-card{\n  background:var(--wbo-navy);\n  color:#fff;\n  border-radius:28px;\n  padding:38px;\n  box-shadow:var(--wbo-shadow);\n  position:relative;\n  overflow:hidden;\n}\n\n.wbo-hero-card:after{\n  content:\"\";\n  position:absolute;\n  width:220px;\n  height:220px;\n  border-radius:50%;\n  background:rgba(22,119,255,.35);\n  right:-80px;\n  top:-80px;\n}\n\n.wbo-hero-card h2{\n  font-size:30px;\n  position:relative;\n  z-index:1;\n  margin:0 0 18px;\n  color:#fff;\n}\n\n.wbo-hero-card p{\n  font-size:17px;\n  color:#dbe8f7;\n  position:relative;\n  z-index:1;\n}\n\n.wbo-checklist{\n  list-style:none;\n  margin:25px 0 0;\n  padding:0;\n  position:relative;\n  z-index:1;\n}\n\n.wbo-checklist li{\n  margin:12px 0;\n  font-weight:700;\n}\n\n.wbo-checklist li:before{\n  content:\"\u2713\";\n  display:inline-grid;\n  place-items:center;\n  width:25px;\n  height:25px;\n  background:var(--wbo-blue);\n  border-radius:50%;\n  margin-right:10px;\n}\n\n\/* SECTIONS *\/\n.wbo-section{\n  padding:85px 0;\n}\n\n.wbo-section-head{\n  text-align:center;\n  max-width:720px;\n  margin:0 auto 45px;\n}\n\n.wbo-section-head h2{\n  font-size:42px;\n  color:var(--wbo-navy);\n  margin:0 0 12px;\n}\n\n.wbo-section-head p{\n  color:var(--wbo-muted);\n  font-size:18px;\n}\n\n\/* CARDS *\/\n.wbo-cards{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:22px;\n}\n\n.wbo-card{\n  padding:30px;\n  background:#fff;\n  border:1px solid var(--wbo-border);\n  border-radius:var(--wbo-radius);\n  box-shadow:var(--wbo-shadow);\n}\n\n.wbo-icon{\n  width:52px;\n  height:52px;\n  border-radius:14px;\n  background:#eaf3ff;\n  color:var(--wbo-blue);\n  display:grid;\n  place-items:center;\n  font-size:25px;\n  margin-bottom:20px;\n}\n\n.wbo-card h3{\n  font-size:23px;\n  margin:0 0 10px;\n  color:var(--wbo-navy);\n}\n\n.wbo-card p{\n  color:var(--wbo-muted);\n  margin:0;\n}\n\n\/* ABOUT *\/\n.wbo-about{\n  background:var(--wbo-light);\n}\n\n.wbo-about-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:55px;\n  align-items:center;\n}\n\n.wbo-about h2{\n  font-size:42px;\n  color:var(--wbo-navy);\n  line-height:1.15;\n  margin:0 0 18px;\n}\n\n.wbo-about p{\n  color:var(--wbo-muted);\n  font-size:18px;\n  margin:0 0 18px;\n}\n\n.wbo-numbers{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:14px;\n  margin-top:25px;\n}\n\n.wbo-number{\n  background:#fff;\n  padding:20px;\n  border-radius:14px;\n  border:1px solid var(--wbo-border);\n}\n\n.wbo-number strong{\n  font-size:30px;\n  color:var(--wbo-blue);\n  display:block;\n}\n\n.wbo-number span{\n  color:var(--wbo-muted);\n}\n\n\/* PROCESS *\/\n.wbo-process{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:22px;\n}\n\n.wbo-step{\n  padding:28px;\n  border-radius:18px;\n  background:var(--wbo-light);\n  border:1px solid var(--wbo-border);\n}\n\n.wbo-step-num{\n  font-size:15px;\n  font-weight:800;\n  color:var(--wbo-blue);\n  margin-bottom:12px;\n}\n\n.wbo-step h3{\n  font-size:22px;\n  color:var(--wbo-navy);\n  margin:0 0 8px;\n}\n\n.wbo-step p{\n  margin:0;\n}\n\n\/* CONTACT *\/\n.wbo-contact{\n  background:var(--wbo-navy);\n  color:#fff;\n}\n\n.wbo-contact-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:45px;\n  align-items:start;\n}\n\n.wbo-contact h2{\n  font-size:42px;\n  line-height:1.15;\n  margin:0 0 16px;\n  color:#fff;\n}\n\n.wbo-contact > .wbo-container > .wbo-contact-grid > div > p{\n  color:#d8e4f2;\n  font-size:18px;\n}\n\n.wbo-form{\n  background:#fff;\n  padding:28px;\n  border-radius:18px;\n}\n\n.wbo-form label{\n  display:block;\n  font-weight:700;\n  color:var(--wbo-navy);\n  margin:0 0 6px;\n}\n\n.wbo-form input,\n.wbo-form textarea{\n  width:100%;\n  padding:13px 14px;\n  border:1px solid #ccd7e4;\n  border-radius:10px;\n  font:inherit;\n  margin-bottom:16px;\n}\n\n.wbo-form textarea{\n  min-height:130px;\n  resize:vertical;\n}\n\n\/* FOOTER *\/\n.wbo-footer{\n  background:#091d30;\n  color:#b9c8d8;\n  padding:28px 0;\n}\n\n.wbo-footer-inner{\n  display:flex;\n  justify-content:space-between;\n  gap:20px;\n  flex-wrap:wrap;\n}\n\n.wbo-small{\n  font-size:14px;\n}\n\n\/* MOBILE *\/\n@media(max-width:800px){\n\n  .wbo-navigation{\n    display:none;\n  }\n\n  .wbo-nav{\n    min-height:68px;\n  }\n\n  .wbo-hero{\n    padding:70px 0;\n  }\n\n  .wbo-hero-grid,\n  .wbo-about-grid,\n  .wbo-contact-grid{\n    grid-template-columns:1fr;\n  }\n\n  .wbo-cards,\n  .wbo-process{\n    grid-template-columns:1fr;\n  }\n\n  .wbo-section{\n    padding:65px 0;\n  }\n\n  .wbo-section-head h2,\n  .wbo-about h2,\n  .wbo-contact h2{\n    font-size:34px;\n  }\n\n  .wbo-hero-card{\n    padding:28px;\n  }\n\n  .wbo-hero h1{\n    letter-spacing:-1px;\n  }\n}\n<\/style>\n\n\n<div class=\"wbo-site\">\n\n  <!-- HEADER -->\n  <header class=\"wbo-header\">\n    <div class=\"wbo-container wbo-nav\">\n\n      <a class=\"wbo-logo\" href=\"#wbo-top\">\n        Webbouw<span>Oostvoorne<\/span>\n      <\/a>\n\n      <nav class=\"wbo-navigation\">\n        <a href=\"#wbo-diensten\">Diensten<\/a>\n        <a href=\"#wbo-over\">Over ons<\/a>\n        <a href=\"#wbo-werkwijze\">Werkwijze<\/a>\n        <a href=\"#wbo-contact\" class=\"wbo-btn wbo-btn-primary\">\n          Contact\n        <\/a>\n      <\/nav>\n\n    <\/div>\n  <\/header>\n\n\n  <!-- HERO -->\n  <main id=\"wbo-top\">\n\n    <section class=\"wbo-hero\">\n      <div class=\"wbo-container wbo-hero-grid\">\n\n        <div>\n\n          <span class=\"wbo-eyebrow\">\n            Webdesign vanuit Oostvoorne\n          <\/span>\n\n          <h1>\n            Een website die er professioneel uitziet \u00e9n werkt.\n          <\/h1>\n\n          <p>\n            WebbouwOostvoorne helpt ondernemers met moderne, snelle en\n            duidelijke websites. Van eerste idee tot een website die klaar\n            is voor bezoekers.\n          <\/p>\n\n          <div class=\"wbo-actions\">\n\n            <a class=\"wbo-btn wbo-btn-primary\" href=\"#wbo-contact\">\n              Start jouw website\n            <\/a>\n\n            <a class=\"wbo-btn wbo-btn-outline\" href=\"#wbo-diensten\">\n              Bekijk diensten\n            <\/a>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"wbo-hero-card\">\n\n          <h2>\n            Jouw online visitekaartje\n          <\/h2>\n\n          <p>\n            Een sterke website geeft bezoekers vertrouwen en maakt het\n            makkelijk om contact met je op te nemen.\n          <\/p>\n\n          <ul class=\"wbo-checklist\">\n\n            <li>\n              Modern en professioneel ontwerp\n            <\/li>\n\n            <li>\n              Geschikt voor mobiel en tablet\n            <\/li>\n\n            <li>\n              Duidelijke structuur\n            <\/li>\n\n            <li>\n              WordPress-vriendelijk\n            <\/li>\n\n          <\/ul>\n\n        <\/div>\n\n      <\/div>\n    <\/section>\n\n\n    <!-- DIENSTEN -->\n    <section id=\"wbo-diensten\" class=\"wbo-section\">\n\n      <div class=\"wbo-container\">\n\n        <div class=\"wbo-section-head\">\n\n          <h2>\n            Wat we voor je kunnen doen\n          <\/h2>\n\n          <p>\n            Van een eenvoudige bedrijfswebsite tot een complete online\n            basis voor jouw onderneming.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"wbo-cards\">\n\n          <article class=\"wbo-card\">\n\n            <div class=\"wbo-icon\">\u2726<\/div>\n\n            <h3>\n              Webdesign\n            <\/h3>\n\n            <p>\n              Een frisse, professionele uitstraling die past bij jouw\n              bedrijf en doelgroep.\n            <\/p>\n\n          <\/article>\n\n\n          <article class=\"wbo-card\">\n\n            <div class=\"wbo-icon\">\u25a3<\/div>\n\n            <h3>\n              WordPress\n            <\/h3>\n\n            <p>\n              Een website die je eenvoudig kunt beheren en uitbreiden met\n              nieuwe pagina&#8217;s en berichten.\n            <\/p>\n\n          <\/article>\n\n\n          <article class=\"wbo-card\">\n\n            <div class=\"wbo-icon\">\u2197<\/div>\n\n            <h3>\n              Online groeien\n            <\/h3>\n\n            <p>\n              Heldere pagina&#8217;s, duidelijke knoppen en een structuur die\n              bezoekers naar actie leidt.\n            <\/p>\n\n          <\/article>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- OVER -->\n    <section id=\"wbo-over\" class=\"wbo-section wbo-about\">\n\n      <div class=\"wbo-container wbo-about-grid\">\n\n        <div>\n\n          <span class=\"wbo-eyebrow\">\n            WebbouwOostvoorne\n          <\/span>\n\n          <h2>\n            Persoonlijk, duidelijk en zonder onnodige poespas.\n          <\/h2>\n\n          <p>\n            Je website moet niet alleen mooi zijn. Bezoekers moeten direct\n            begrijpen wie je bent, wat je doet en hoe ze contact met je\n            kunnen opnemen.\n          <\/p>\n\n          <p>\n            Daarom bouwen we overzichtelijke websites met aandacht voor\n            gebruiksgemak, mobiel ontwerp en een professionele uitstraling.\n          <\/p>\n\n          <a class=\"wbo-btn wbo-btn-primary\" href=\"#wbo-contact\">\n            Neem contact op\n          <\/a>\n\n        <\/div>\n\n\n        <div class=\"wbo-numbers\">\n\n          <div class=\"wbo-number\">\n            <strong>100%<\/strong>\n            <span>Aandacht voor jouw website<\/span>\n          <\/div>\n\n          <div class=\"wbo-number\">\n            <strong>Mobiel<\/strong>\n            <span>Ontwerp voor kleine schermen<\/span>\n          <\/div>\n\n          <div class=\"wbo-number\">\n            <strong>Helder<\/strong>\n            <span>Logische navigatie en inhoud<\/span>\n          <\/div>\n\n          <div class=\"wbo-number\">\n            <strong>Online<\/strong>\n            <span>Klaar voor jouw bezoekers<\/span>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- WERKWIJZE -->\n    <section id=\"wbo-werkwijze\" class=\"wbo-section\">\n\n      <div class=\"wbo-container\">\n\n        <div class=\"wbo-section-head\">\n\n          <h2>\n            Zo gaan we te werk\n          <\/h2>\n\n          <p>\n            Een simpel proces, zodat je weet waar je aan toe bent.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"wbo-process\">\n\n          <div class=\"wbo-step\">\n\n            <div class=\"wbo-step-num\">\n              STAP 01\n            <\/div>\n\n            <h3>\n              Bespreken\n            <\/h3>\n\n            <p>\n              We bepalen samen wat je website nodig heeft en voor wie de\n              website bedoeld is.\n            <\/p>\n\n          <\/div>\n\n\n          <div class=\"wbo-step\">\n\n            <div class=\"wbo-step-num\">\n              STAP 02\n            <\/div>\n\n            <h3>\n              Bouwen\n            <\/h3>\n\n            <p>\n              De pagina&#8217;s, teksten, structuur en uitstraling worden\n              opgebouwd tot \u00e9\u00e9n geheel.\n            <\/p>\n\n          <\/div>\n\n\n          <div class=\"wbo-step\">\n\n            <div class=\"wbo-step-num\">\n              STAP 03\n            <\/div>\n\n            <h3>\n              Online\n            <\/h3>\n\n            <p>\n              Na controle staat je website klaar om bezoekers te ontvangen\n              en verder uit te bouwen.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- CONTACT -->\n    <section id=\"wbo-contact\" class=\"wbo-section wbo-contact\">\n\n      <div class=\"wbo-container wbo-contact-grid\">\n\n        <div>\n\n          <h2>\n            Klaar om jouw website aan te pakken?\n          <\/h2>\n\n          <p>\n            Stuur een bericht en vertel kort wat je nodig hebt. We kunnen\n            daarna samen de volgende stap bepalen.\n          <\/p>\n\n        <\/div>\n\n\n        <form\n          class=\"wbo-form\"\n          action=\"mailto:info@webbouwoostvoorne.nl\"\n          method=\"post\"\n          enctype=\"text\/plain\"\n        >\n\n          <label for=\"wbo-naam\">\n            Naam\n          <\/label>\n\n          <input\n            id=\"wbo-naam\"\n            name=\"Naam\"\n            type=\"text\"\n            placeholder=\"Je naam\"\n            required\n          >\n\n\n          <label for=\"wbo-email\">\n            E-mailadres\n          <\/label>\n\n          <input\n            id=\"wbo-email\"\n            name=\"E-mailadres\"\n            type=\"email\"\n            placeholder=\"jij@voorbeeld.nl\"\n            required\n          >\n\n\n          <label for=\"wbo-bericht\">\n            Bericht\n          <\/label>\n\n          <textarea\n            id=\"wbo-bericht\"\n            name=\"Bericht\"\n            placeholder=\"Waar kunnen we je mee helpen?\"\n            required\n          ><\/textarea>\n\n\n          <button\n            class=\"wbo-btn wbo-btn-primary\"\n            type=\"submit\"\n          >\n            Bericht versturen\n          <\/button>\n\n        <\/form>\n\n      <\/div>\n\n    <\/section>\n\n  <\/main>\n\n\n  <!-- FOOTER -->\n  <footer class=\"wbo-footer\">\n\n    <div class=\"wbo-container wbo-footer-inner\">\n\n      <div>\n        <strong>\n          WebbouwOostvoorne\n        <\/strong>\n      <\/div>\n\n      <div class=\"wbo-small\">\n        \u00a9 2026 WebbouwOostvoorne. Alle rechten voorbehouden.\n      <\/div>\n\n    <\/div>\n\n  <\/footer>\n\n<\/div>\n<\/details>\n\n\n<style>\n:root{<br \/>\n  --wbo-navy:#102a43;<br \/>\n  --wbo-blue:#1677ff;<br \/>\n  --wbo-light:#f5f8fc;<br \/>\n  --wbo-text:#182230;<br \/>\n  --wbo-muted:#607086;<br \/>\n  --wbo-white:#fff;<br \/>\n  --wbo-border:#e3eaf2;<br \/>\n  --wbo-shadow:0 12px 35px rgba(16,42,67,.10);<br \/>\n  --wbo-radius:18px;<br \/>\n}<\/p>\n<p>.wbo-site,<br \/>\n.wbo-site *{<br \/>\n  box-sizing:border-box;<br \/>\n}<\/p>\n<p>.wbo-site{<br \/>\n  font-family:Arial,Helvetica,sans-serif;<br \/>\n  color:var(--wbo-text);<br \/>\n  background:#fff;<br \/>\n  line-height:1.6;<br \/>\n  width:100%;<br \/>\n}<\/p>\n<p>.wbo-site a{<br \/>\n  text-decoration:none;<br \/>\n}<\/p>\n<p>.wbo-container{<br \/>\n  width:min(1120px,92%);<br \/>\n  margin:0 auto;<br \/>\n}<\/p>\n<p>\/* HEADER *\/<br \/>\n.wbo-header{<br \/>\n  background:rgba(255,255,255,.97);<br \/>\n  border-bottom:1px solid var(--wbo-border);<br \/>\n  position:sticky;<br \/>\n  top:0;<br \/>\n  z-index:50;<br \/>\n  backdrop-filter:blur(10px);<br \/>\n}<\/p>\n<p>.wbo-nav{<br \/>\n  min-height:76px;<br \/>\n  display:flex;<br \/>\n  align-items:center;<br \/>\n  justify-content:space-between;<br \/>\n  gap:24px;<br \/>\n}<\/p>\n<p>.wbo-logo{<br \/>\n  font-size:24px;<br \/>\n  font-weight:800;<br \/>\n  color:var(--wbo-navy);<br \/>\n}<\/p>\n<p>.wbo-logo span{<br \/>\n  color:var(--wbo-blue);<br \/>\n}<\/p>\n<p>.wbo-navigation{<br \/>\n  display:flex;<br \/>\n  gap:26px;<br \/>\n  align-items:center;<br \/>\n}<\/p>\n<p>.wbo-navigation a{<br \/>\n  font-weight:700;<br \/>\n  color:#35465a;<br \/>\n}<\/p>\n<p>.wbo-navigation a:hover{<br \/>\n  color:var(--wbo-blue);<br \/>\n}<\/p>\n<p>\/* BUTTONS *\/<br \/>\n.wbo-btn{<br \/>\n  display:inline-block;<br \/>\n  padding:14px 22px;<br \/>\n  border-radius:12px;<br \/>\n  font-weight:800;<br \/>\n  transition:.2s;<br \/>\n  cursor:pointer;<br \/>\n  border:0;<br \/>\n}<\/p>\n<p>.wbo-btn-primary{<br \/>\n  background:var(--wbo-blue);<br \/>\n  color:#fff !important;<br \/>\n  box-shadow:0 8px 20px rgba(22,119,255,.25);<br \/>\n}<\/p>\n<p>.wbo-btn-primary:hover{<br \/>\n  transform:translateY(-2px);<br \/>\n  background:#0868ed;<br \/>\n}<\/p>\n<p>.wbo-btn-outline{<br \/>\n  border:2px solid var(--wbo-blue);<br \/>\n  color:var(--wbo-blue) !important;<br \/>\n  background:#fff;<br \/>\n}<\/p>\n<p>.wbo-btn-outline:hover{<br \/>\n  background:#eef5ff;<br \/>\n}<\/p>\n<p>\/* HERO *\/<br \/>\n.wbo-hero{<br \/>\n  padding:100px 0 90px;<br \/>\n  background:linear-gradient(<br \/>\n    135deg,<br \/>\n    #f5f9ff 0%,<br \/>\n    #fff 55%,<br \/>\n    #eef6ff 100%<br \/>\n  );<br \/>\n}<\/p>\n<p>.wbo-hero-grid{<br \/>\n  display:grid;<br \/>\n  grid-template-columns:1.1fr .9fr;<br \/>\n  gap:60px;<br \/>\n  align-items:center;<br \/>\n}<\/p>\n<p>.wbo-eyebrow{<br \/>\n  display:inline-block;<br \/>\n  color:var(--wbo-blue);<br \/>\n  font-weight:800;<br \/>\n  margin-bottom:16px;<br \/>\n}<\/p>\n<p>.wbo-hero h1{<br \/>\n  font-size:clamp(42px,6vw,72px);<br \/>\n  line-height:1.05;<br \/>\n  letter-spacing:-2px;<br \/>\n  color:var(--wbo-navy);<br \/>\n  margin:0 0 24px;<br \/>\n}<\/p>\n<p>.wbo-hero p{<br \/>\n  font-size:20px;<br \/>\n  color:var(--wbo-muted);<br \/>\n  max-width:650px;<br \/>\n  margin:0 0 30px;<br \/>\n}<\/p>\n<p>.wbo-actions{<br \/>\n  display:flex;<br \/>\n  gap:14px;<br \/>\n  flex-wrap:wrap;<br \/>\n}<\/p>\n<p>.wbo-hero-card{<br \/>\n  background:var(--wbo-navy);<br \/>\n  color:#fff;<br \/>\n  border-radius:28px;<br \/>\n  padding:38px;<br \/>\n  box-shadow:var(--wbo-shadow);<br \/>\n  position:relative;<br \/>\n  overflow:hidden;<br \/>\n}<\/p>\n<p>.wbo-hero-card:after{<br \/>\n  content:\"\";<br \/>\n  position:absolute;<br \/>\n  width:220px;<br \/>\n  height:220px;<br \/>\n  border-radius:50%;<br \/>\n  background:rgba(22,119,255,.35);<br \/>\n  right:-80px;<br \/>\n  top:-80px;<br \/>\n}<\/p>\n<p>.wbo-hero-card h2{<br \/>\n  font-size:30px;<br \/>\n  position:relative;<br \/>\n  z-index:1;<br \/>\n  margin:0 0 18px;<br \/>\n  color:#fff;<br \/>\n}<\/p>\n<p>.wbo-hero-card p{<br \/>\n  font-size:17px;<br \/>\n  color:#dbe8f7;<br \/>\n  position:relative;<br \/>\n  z-index:1;<br \/>\n}<\/p>\n<p>.wbo-checklist{<br \/>\n  list-style:none;<br \/>\n  margin:25px 0 0;<br \/>\n  padding:0;<br \/>\n  position:relative;<br \/>\n  z-index:1;<br \/>\n}<\/p>\n<p>.wbo-checklist li{<br \/>\n  margin:12px 0;<br \/>\n  font-weight:700;<br \/>\n}<\/p>\n<p>.wbo-checklist li:before{<br \/>\n  content:\"\u2713\";<br \/>\n  display:inline-grid;<br \/>\n  place-items:center;<br \/>\n  width:25px;<br \/>\n  height:25px;<br \/>\n  background:var(--wbo-blue);<br \/>\n  border-radius:50%;<br \/>\n  margin-right:10px;<br \/>\n}<\/p>\n<p>\/* SECTIONS *\/<br \/>\n.wbo-section{<br \/>\n  padding:85px 0;<br \/>\n}<\/p>\n<p>.wbo-section-head{<br \/>\n  text-align:center;<br \/>\n  max-width:720px;<br \/>\n  margin:0 auto 45px;<br \/>\n}<\/p>\n<p>.wbo-section-head h2{<br \/>\n  font-size:42px;<br \/>\n  color:var(--wbo-navy);<br \/>\n  margin:0 0 12px;<br \/>\n}<\/p>\n<p>.wbo-section-head p{<br \/>\n  color:var(--wbo-muted);<br \/>\n  font-size:18px;<br \/>\n}<\/p>\n<p>\/* CARDS *\/<br \/>\n.wbo-cards{<br \/>\n  display:grid;<br \/>\n  grid-template-columns:repeat(3,1fr);<br \/>\n  gap:22px;<br \/>\n}<\/p>\n<p>.wbo-card{<br \/>\n  padding:30px;<br \/>\n  background:#fff;<br \/>\n  border:1px solid var(--wbo-border);<br \/>\n  border-radius:var(--wbo-radius);<br \/>\n  box-shadow:var(--wbo-shadow);<br \/>\n}<\/p>\n<p>.wbo-icon{<br \/>\n  width:52px;<br \/>\n  height:52px;<br \/>\n  border-radius:14px;<br \/>\n  background:#eaf3ff;<br \/>\n  color:var(--wbo-blue);<br \/>\n  display:grid;<br \/>\n  place-items:center;<br \/>\n  font-size:25px;<br \/>\n  margin-bottom:20px;<br \/>\n}<\/p>\n<p>.wbo-card h3{<br \/>\n  font-size:23px;<br \/>\n  margin:0 0 10px;<br \/>\n  color:var(--wbo-navy);<br \/>\n}<\/p>\n<p>.wbo-card p{<br \/>\n  color:var(--wbo-muted);<br \/>\n  margin:0;<br \/>\n}<\/p>\n<p>\/* ABOUT *\/<br \/>\n.wbo-about{<br \/>\n  background:var(--wbo-light);<br \/>\n}<\/p>\n<p>.wbo-about-grid{<br \/>\n  display:grid;<br \/>\n  grid-template-columns:1fr 1fr;<br \/>\n  gap:55px;<br \/>\n  align-items:center;<br \/>\n}<\/p>\n<p>.wbo-about h2{<br \/>\n  font-size:42px;<br \/>\n  color:var(--wbo-navy);<br \/>\n  line-height:1.15;<br \/>\n  margin:0 0 18px;<br \/>\n}<\/p>\n<p>.wbo-about p{<br \/>\n  color:var(--wbo-muted);<br \/>\n  font-size:18px;<br \/>\n  margin:0 0 18px;<br \/>\n}<\/p>\n<p>.wbo-numbers{<br \/>\n  display:grid;<br \/>\n  grid-template-columns:repeat(2,1fr);<br \/>\n  gap:14px;<br \/>\n  margin-top:25px;<br \/>\n}<\/p>\n<p>.wbo-number{<br \/>\n  background:#fff;<br \/>\n  padding:20px;<br \/>\n  border-radius:14px;<br \/>\n  border:1px solid var(--wbo-border);<br \/>\n}<\/p>\n<p>.wbo-number strong{<br \/>\n  font-size:30px;<br \/>\n  color:var(--wbo-blue);<br \/>\n  display:block;<br \/>\n}<\/p>\n<p>.wbo-number span{<br \/>\n  color:var(--wbo-muted);<br \/>\n}<\/p>\n<p>\/* PROCESS *\/<br \/>\n.wbo-process{<br \/>\n  display:grid;<br \/>\n  grid-template-columns:repeat(3,1fr);<br \/>\n  gap:22px;<br \/>\n}<\/p>\n<p>.wbo-step{<br \/>\n  padding:28px;<br \/>\n  border-radius:18px;<br \/>\n  background:var(--wbo-light);<br \/>\n  border:1px solid var(--wbo-border);<br \/>\n}<\/p>\n<p>.wbo-step-num{<br \/>\n  font-size:15px;<br \/>\n  font-weight:800;<br \/>\n  color:var(--wbo-blue);<br \/>\n  margin-bottom:12px;<br \/>\n}<\/p>\n<p>.wbo-step h3{<br \/>\n  font-size:22px;<br \/>\n  color:var(--wbo-navy);<br \/>\n  margin:0 0 8px;<br \/>\n}<\/p>\n<p>.wbo-step p{<br \/>\n  margin:0;<br \/>\n}<\/p>\n<p>\/* CONTACT *\/<br \/>\n.wbo-contact{<br \/>\n  background:var(--wbo-navy);<br \/>\n  color:#fff;<br \/>\n}<\/p>\n<p>.wbo-contact-grid{<br \/>\n  display:grid;<br \/>\n  grid-template-columns:1fr 1fr;<br \/>\n  gap:45px;<br \/>\n  align-items:start;<br \/>\n}<\/p>\n<p>.wbo-contact h2{<br \/>\n  font-size:42px;<br \/>\n  line-height:1.15;<br \/>\n  margin:0 0 16px;<br \/>\n  color:#fff;<br \/>\n}<\/p>\n<p>.wbo-contact > .wbo-container > .wbo-contact-grid > div > p{<br \/>\n  color:#d8e4f2;<br \/>\n  font-size:18px;<br \/>\n}<\/p>\n<p>.wbo-form{<br \/>\n  background:#fff;<br \/>\n  padding:28px;<br \/>\n  border-radius:18px;<br \/>\n}<\/p>\n<p>.wbo-form label{<br \/>\n  display:block;<br \/>\n  font-weight:700;<br \/>\n  color:var(--wbo-navy);<br \/>\n  margin:0 0 6px;<br \/>\n}<\/p>\n<p>.wbo-form input,<br \/>\n.wbo-form textarea{<br \/>\n  width:100%;<br \/>\n  padding:13px 14px;<br \/>\n  border:1px solid #ccd7e4;<br \/>\n  border-radius:10px;<br \/>\n  font:inherit;<br \/>\n  margin-bottom:16px;<br \/>\n}<\/p>\n<p>.wbo-form textarea{<br \/>\n  min-height:130px;<br \/>\n  resize:vertical;<br \/>\n}<\/p>\n<p>\/* FOOTER *\/<br \/>\n.wbo-footer{<br \/>\n  background:#091d30;<br \/>\n  color:#b9c8d8;<br \/>\n  padding:28px 0;<br \/>\n}<\/p>\n<p>.wbo-footer-inner{<br \/>\n  display:flex;<br \/>\n  justify-content:space-between;<br \/>\n  gap:20px;<br \/>\n  flex-wrap:wrap;<br \/>\n}<\/p>\n<p>.wbo-small{<br \/>\n  font-size:14px;<br \/>\n}<\/p>\n<p>\/* MOBILE *\/<br \/>\n@media(max-width:800px){<\/p>\n<p>  .wbo-navigation{<br \/>\n    display:none;<br \/>\n  }<\/p>\n<p>  .wbo-nav{<br \/>\n    min-height:68px;<br \/>\n  }<\/p>\n<p>  .wbo-hero{<br \/>\n    padding:70px 0;<br \/>\n  }<\/p>\n<p>  .wbo-hero-grid,<br \/>\n  .wbo-about-grid,<br \/>\n  .wbo-contact-grid{<br \/>\n    grid-template-columns:1fr;<br \/>\n  }<\/p>\n<p>  .wbo-cards,<br \/>\n  .wbo-process{<br \/>\n    grid-template-columns:1fr;<br \/>\n  }<\/p>\n<p>  .wbo-section{<br \/>\n    padding:65px 0;<br \/>\n  }<\/p>\n<p>  .wbo-section-head h2,<br \/>\n  .wbo-about h2,<br \/>\n  .wbo-contact h2{<br \/>\n    font-size:34px;<br \/>\n  }<\/p>\n<p>  .wbo-hero-card{<br \/>\n    padding:28px;<br \/>\n  }<\/p>\n<p>  .wbo-hero h1{<br \/>\n    letter-spacing:-1px;<br \/>\n  }<br \/>\n}<br \/>\n<\/style>\n<div class=\"wbo-site\">\n<p>  <!-- HEADER --><\/p>\n<header class=\"wbo-header\">\n<div class=\"wbo-container wbo-nav\">\n<p>      <a class=\"wbo-logo\" href=\"#wbo-top\"><br \/>\n        Webbouw<span>Oostvoorne<\/span><br \/>\n      <\/a><\/p>\n<nav class=\"wbo-navigation\">\n        <a href=\"#wbo-diensten\">Diensten<\/a><br \/>\n        <a href=\"#wbo-over\">Over ons<\/a><br \/>\n        <a href=\"#wbo-werkwijze\">Werkwijze<\/a><br \/>\n        <a href=\"#wbo-contact\" class=\"wbo-btn wbo-btn-primary\"><br \/>\n          Contact<br \/>\n        <\/a><br \/>\n      <\/nav>\n<\/p>\n<\/div>\n<\/header>\n<p>  <!-- HERO --><br \/>\n  <main id=\"wbo-top\"><\/p>\n<section class=\"wbo-hero\">\n<div class=\"wbo-container wbo-hero-grid\">\n<div>\n<p>          <span class=\"wbo-eyebrow\"><br \/>\n            Webdesign vanuit Oostvoorne<br \/>\n          <\/span><\/p>\n<h1>\n            Een website die er professioneel uitziet \u00e9n werkt.<br \/>\n          <\/h1>\n<p>\n            WebbouwOostvoorne helpt ondernemers met moderne, snelle en<br \/>\n            duidelijke websites. Van eerste idee tot een website die klaar<br \/>\n            is voor bezoekers.\n          <\/p>\n<div class=\"wbo-actions\">\n<p>            <a class=\"wbo-btn wbo-btn-primary\" href=\"#wbo-contact\"><br \/>\n              Start jouw website<br \/>\n            <\/a><\/p>\n<p>            <a class=\"wbo-btn wbo-btn-outline\" href=\"#wbo-diensten\"><br \/>\n              Bekijk diensten<br \/>\n            <\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"wbo-hero-card\">\n<h2>\n            Jouw online visitekaartje<br \/>\n          <\/h2>\n<p>\n            Een sterke website geeft bezoekers vertrouwen en maakt het<br \/>\n            makkelijk om contact met je op te nemen.\n          <\/p>\n<ul class=\"wbo-checklist\">\n<li>\n              Modern en professioneel ontwerp\n            <\/li>\n<li>\n              Geschikt voor mobiel en tablet\n            <\/li>\n<li>\n              Duidelijke structuur\n            <\/li>\n<li>\n              WordPress-vriendelijk\n            <\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/section>\n<p>    <!-- DIENSTEN --><\/p>\n<section id=\"wbo-diensten\" class=\"wbo-section\">\n<div class=\"wbo-container\">\n<div class=\"wbo-section-head\">\n<h2>\n            Wat we voor je kunnen doen<br \/>\n          <\/h2>\n<p>\n            Van een eenvoudige bedrijfswebsite tot een complete online<br \/>\n            basis voor jouw onderneming.\n          <\/p>\n<\/p>\n<\/div>\n<div class=\"wbo-cards\">\n<article class=\"wbo-card\">\n<div class=\"wbo-icon\">\u2726<\/div>\n<h3>\n              Webdesign<br \/>\n            <\/h3>\n<p>\n              Een frisse, professionele uitstraling die past bij jouw<br \/>\n              bedrijf en doelgroep.\n            <\/p>\n<\/article>\n<article class=\"wbo-card\">\n<div class=\"wbo-icon\">\u25a3<\/div>\n<h3>\n              WordPress<br \/>\n            <\/h3>\n<p>\n              Een website die je eenvoudig kunt beheren en uitbreiden met<br \/>\n              nieuwe pagina&#8217;s en berichten.\n            <\/p>\n<\/article>\n<article class=\"wbo-card\">\n<div class=\"wbo-icon\">\u2197<\/div>\n<h3>\n              Online groeien<br \/>\n            <\/h3>\n<p>\n              Heldere pagina&#8217;s, duidelijke knoppen en een structuur die<br \/>\n              bezoekers naar actie leidt.\n            <\/p>\n<\/article>\n<\/div>\n<\/div>\n<\/section>\n<p>    <!-- OVER --><\/p>\n<section id=\"wbo-over\" class=\"wbo-section wbo-about\">\n<div class=\"wbo-container wbo-about-grid\">\n<div>\n<p>          <span class=\"wbo-eyebrow\"><br \/>\n            WebbouwOostvoorne<br \/>\n          <\/span><\/p>\n<h2>\n            Persoonlijk, duidelijk en zonder onnodige poespas.<br \/>\n          <\/h2>\n<p>\n            Je website moet niet alleen mooi zijn. Bezoekers moeten direct<br \/>\n            begrijpen wie je bent, wat je doet en hoe ze contact met je<br \/>\n            kunnen opnemen.\n          <\/p>\n<p>\n            Daarom bouwen we overzichtelijke websites met aandacht voor<br \/>\n            gebruiksgemak, mobiel ontwerp en een professionele uitstraling.\n          <\/p>\n<p>          <a class=\"wbo-btn wbo-btn-primary\" href=\"#wbo-contact\"><br \/>\n            Neem contact op<br \/>\n          <\/a><\/p>\n<\/div>\n<div class=\"wbo-numbers\">\n<div class=\"wbo-number\">\n            <strong>100%<\/strong><br \/>\n            <span>Aandacht voor jouw website<\/span>\n          <\/div>\n<div class=\"wbo-number\">\n            <strong>Mobiel<\/strong><br \/>\n            <span>Ontwerp voor kleine schermen<\/span>\n          <\/div>\n<div class=\"wbo-number\">\n            <strong>Helder<\/strong><br \/>\n            <span>Logische navigatie en inhoud<\/span>\n          <\/div>\n<div class=\"wbo-number\">\n            <strong>Online<\/strong><br \/>\n            <span>Klaar voor jouw bezoekers<\/span>\n          <\/div>\n<\/p>\n<\/div>\n<\/div>\n<\/section>\n<p>    <!-- WERKWIJZE --><\/p>\n<section id=\"wbo-werkwijze\" class=\"wbo-section\">\n<div class=\"wbo-container\">\n<div class=\"wbo-section-head\">\n<h2>\n            Zo gaan we te werk<br \/>\n          <\/h2>\n<p>\n            Een simpel proces, zodat je weet waar je aan toe bent.\n          <\/p>\n<\/p>\n<\/div>\n<div class=\"wbo-process\">\n<div class=\"wbo-step\">\n<div class=\"wbo-step-num\">\n              STAP 01\n            <\/div>\n<h3>\n              Bespreken<br \/>\n            <\/h3>\n<p>\n              We bepalen samen wat je website nodig heeft en voor wie de<br \/>\n              website bedoeld is.\n            <\/p>\n<\/p>\n<\/div>\n<div class=\"wbo-step\">\n<div class=\"wbo-step-num\">\n              STAP 02\n            <\/div>\n<h3>\n              Bouwen<br \/>\n            <\/h3>\n<p>\n              De pagina&#8217;s, teksten, structuur en uitstraling worden<br \/>\n              opgebouwd tot \u00e9\u00e9n geheel.\n            <\/p>\n<\/p>\n<\/div>\n<div class=\"wbo-step\">\n<div class=\"wbo-step-num\">\n              STAP 03\n            <\/div>\n<h3>\n              Online<br \/>\n            <\/h3>\n<p>\n              Na controle staat je website klaar om bezoekers te ontvangen<br \/>\n              en verder uit te bouwen.\n            <\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p>    <!-- CONTACT --><\/p>\n<section id=\"wbo-contact\" class=\"wbo-section wbo-contact\">\n<div class=\"wbo-container wbo-contact-grid\">\n<div>\n<h2>\n            Klaar om jouw website aan te pakken?<br \/>\n          <\/h2>\n<p>\n            Stuur een bericht en vertel kort wat je nodig hebt. We kunnen<br \/>\n            daarna samen de volgende stap bepalen.\n          <\/p>\n<\/p>\n<\/div>\n<form\n          class=\"wbo-form\"\n          action=\"mailto:info@webbouwoostvoorne.nl\"\n          method=\"post\"\n          enctype=\"text\/plain\"\n        ><\/p>\n<p>          <label for=\"wbo-naam\"><br \/>\n            Naam<br \/>\n          <\/label><\/p>\n<p>          <input\n            id=\"wbo-naam\"\n            name=\"Naam\"\n            type=\"text\"\n            placeholder=\"Je naam\"\n            required\n          ><\/p>\n<p>          <label for=\"wbo-email\"><br \/>\n            E-mailadres<br \/>\n          <\/label><\/p>\n<p>          <input\n            id=\"wbo-email\"\n            name=\"E-mailadres\"\n            type=\"email\"\n            placeholder=\"jij@voorbeeld.nl\"\n            required\n          ><\/p>\n<p>          <label for=\"wbo-bericht\"><br \/>\n            Bericht<br \/>\n          <\/label><\/p>\n<p>          <textarea\n            id=\"wbo-bericht\"\n            name=\"Bericht\"\n            placeholder=\"Waar kunnen we je mee helpen?\"\n            required\n          ><\/textarea><\/p>\n<p>          <button\n            class=\"wbo-btn wbo-btn-primary\"\n            type=\"submit\"\n          ><br \/>\n            Bericht versturen<br \/>\n          <\/button><\/p>\n<\/form>\n<\/div>\n<\/section>\n<p>  <\/main><\/p>\n<p>  <!-- FOOTER --><\/p>\n<footer class=\"wbo-footer\">\n<div class=\"wbo-container wbo-footer-inner\">\n<div>\n        <strong><br \/>\n          WebbouwOostvoorne<br \/>\n        <\/strong>\n      <\/div>\n<div class=\"wbo-small\">\n        \u00a9 2026 WebbouwOostvoorne. Alle rechten voorbehouden.\n      <\/div>\n<\/p>\n<\/div>\n<\/footer>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Dit is de beste locale websitebouwer voor u!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<style>\n\/* ================================\n   WEBBOUWOOSTVOORNE\n   COMPLETE WORDPRESS WEBSITE\n================================ *\/\n\n#wbo-site{\n  --navy:#102a43;\n  --blue:#1677ff;\n  --blue-dark:#0868ed;\n  --light:#f5f8fc;\n  --text:#182230;\n  --muted:#607086;\n  --white:#fff;\n  --border:#e3eaf2;\n  --green:#18a66a;\n  font-family:Arial,Helvetica,sans-serif;\n  color:var(--text);\n  line-height:1.6;\n  overflow:hidden;\n}\n\n#wbo-site *{\n  box-sizing:border-box;\n}\n\n#wbo-site a{\n  text-decoration:none;\n}\n\n#wbo-site .wbo-container{\n  width:min(1120px,92%);\n  margin:0 auto;\n}\n\n\/* ================================\n   HEADER\n================================ *\/\n\n#wbo-site .wbo-header{\n  position:sticky;\n  top:0;\n  z-index:9999;\n  background:rgba(255,255,255,.97);\n  border-bottom:1px solid var(--border);\n  backdrop-filter:blur(10px);\n}\n\n#wbo-site .wbo-nav{\n  min-height:76px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:25px;\n}\n\n#wbo-site .wbo-logo{\n  font-size:24px;\n  font-weight:800;\n  color:var(--navy);\n}\n\n#wbo-site .wbo-logo span{\n  color:var(--blue);\n}\n\n#wbo-site .wbo-menu{\n  display:flex;\n  align-items:center;\n  gap:25px;\n}\n\n#wbo-site .wbo-menu a{\n  color:#35465a;\n  font-weight:700;\n  transition:.2s;\n}\n\n#wbo-site .wbo-menu a:hover{\n  color:var(--blue);\n}\n\n#wbo-site .wbo-menu-contact{\n  background:var(--blue)!important;\n  color:#fff!important;\n  padding:12px 18px;\n  border-radius:10px;\n}\n\n#wbo-site .wbo-menu-button{\n  display:none;\n  border:0;\n  background:none;\n  font-size:30px;\n  cursor:pointer;\n  color:var(--navy);\n}\n\n\/* ================================\n   BUTTONS\n================================ *\/\n\n#wbo-site .wbo-btn{\n  display:inline-block;\n  padding:14px 22px;\n  border-radius:12px;\n  font-weight:800;\n  cursor:pointer;\n  transition:.2s;\n  border:2px solid transparent;\n}\n\n#wbo-site .wbo-primary{\n  background:var(--blue);\n  color:#fff;\n  box-shadow:0 8px 20px rgba(22,119,255,.22);\n}\n\n#wbo-site .wbo-primary:hover{\n  background:var(--blue-dark);\n  transform:translateY(-2px);\n}\n\n#wbo-site .wbo-outline{\n  border-color:var(--blue);\n  color:var(--blue);\n  background:#fff;\n}\n\n#wbo-site .wbo-outline:hover{\n  background:#eef5ff;\n}\n\n\/* ================================\n   HERO\n================================ *\/\n\n#wbo-site .wbo-hero{\n  padding:100px 0 90px;\n  background:linear-gradient(\n    135deg,\n    #f5f9ff 0%,\n    #fff 55%,\n    #eef6ff 100%\n  );\n}\n\n#wbo-site .wbo-hero-grid{\n  display:grid;\n  grid-template-columns:1.1fr .9fr;\n  gap:60px;\n  align-items:center;\n}\n\n#wbo-site .wbo-eyebrow{\n  display:inline-block;\n  color:var(--blue);\n  font-weight:800;\n  margin-bottom:16px;\n}\n\n#wbo-site .wbo-hero h1{\n  font-size:clamp(42px,6vw,72px);\n  line-height:1.05;\n  letter-spacing:-2px;\n  color:var(--navy);\n  margin:0 0 24px;\n}\n\n#wbo-site .wbo-hero p{\n  font-size:20px;\n  color:var(--muted);\n  max-width:650px;\n  margin:0 0 30px;\n}\n\n#wbo-site .wbo-actions{\n  display:flex;\n  gap:14px;\n  flex-wrap:wrap;\n}\n\n#wbo-site .wbo-hero-card{\n  background:var(--navy);\n  color:#fff;\n  border-radius:28px;\n  padding:38px;\n  box-shadow:0 12px 35px rgba(16,42,67,.15);\n  position:relative;\n  overflow:hidden;\n}\n\n#wbo-site .wbo-hero-card:after{\n  content:\"\";\n  position:absolute;\n  width:220px;\n  height:220px;\n  border-radius:50%;\n  background:rgba(22,119,255,.35);\n  right:-80px;\n  top:-80px;\n}\n\n#wbo-site .wbo-hero-card h2{\n  font-size:30px;\n  position:relative;\n  z-index:1;\n  margin:0 0 18px;\n}\n\n#wbo-site .wbo-hero-card p{\n  font-size:17px;\n  color:#dbe8f7;\n  position:relative;\n  z-index:1;\n}\n\n#wbo-site .wbo-checklist{\n  list-style:none;\n  padding:0;\n  margin:25px 0 0;\n  position:relative;\n  z-index:1;\n}\n\n#wbo-site .wbo-checklist li{\n  margin:12px 0;\n  font-weight:700;\n}\n\n#wbo-site .wbo-checklist li:before{\n  content:\"\u2713\";\n  display:inline-grid;\n  place-items:center;\n  width:25px;\n  height:25px;\n  background:var(--blue);\n  border-radius:50%;\n  margin-right:10px;\n}\n\n\/* ================================\n   SECTIONS\n================================ *\/\n\n#wbo-site .wbo-section{\n  padding:85px 0;\n  scroll-margin-top:90px;\n}\n\n#wbo-site .wbo-section-head{\n  text-align:center;\n  max-width:720px;\n  margin:0 auto 45px;\n}\n\n#wbo-site .wbo-section-head h2{\n  font-size:42px;\n  color:var(--navy);\n  margin:0 0 12px;\n  line-height:1.15;\n}\n\n#wbo-site .wbo-section-head p{\n  color:var(--muted);\n  font-size:18px;\n}\n\n\/* ================================\n   DIENSTEN\n================================ *\/\n\n#wbo-site .wbo-cards{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:22px;\n}\n\n#wbo-site .wbo-card{\n  padding:30px;\n  background:#fff;\n  border:1px solid var(--border);\n  border-radius:18px;\n  box-shadow:0 12px 35px rgba(16,42,67,.08);\n}\n\n#wbo-site .wbo-icon{\n  width:52px;\n  height:52px;\n  border-radius:14px;\n  background:#eaf3ff;\n  color:var(--blue);\n  display:grid;\n  place-items:center;\n  font-size:25px;\n  margin-bottom:20px;\n}\n\n#wbo-site .wbo-card h3{\n  font-size:23px;\n  margin:0 0 10px;\n  color:var(--navy);\n}\n\n#wbo-site .wbo-card p{\n  color:var(--muted);\n  margin:0;\n}\n\n\/* ================================\n   PAKKETTEN\n================================ *\/\n\n#wbo-site .wbo-packages{\n  background:var(--light);\n}\n\n#wbo-site .wbo-package-grid{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:28px;\n  max-width:900px;\n  margin:auto;\n}\n\n#wbo-site .wbo-package{\n  background:#fff;\n  border:2px solid var(--border);\n  border-radius:22px;\n  padding:35px;\n  box-shadow:0 12px 35px rgba(16,42,67,.08);\n  position:relative;\n}\n\n#wbo-site .wbo-package.featured{\n  border-color:var(--blue);\n  transform:translateY(-8px);\n}\n\n#wbo-site .wbo-popular{\n  position:absolute;\n  top:-15px;\n  right:25px;\n  background:var(--blue);\n  color:#fff;\n  padding:7px 15px;\n  border-radius:20px;\n  font-size:13px;\n  font-weight:800;\n}\n\n#wbo-site .wbo-package h3{\n  color:var(--navy);\n  font-size:27px;\n  margin:0 0 8px;\n}\n\n#wbo-site .wbo-price{\n  font-size:43px;\n  font-weight:900;\n  color:var(--blue);\n  margin:10px 0;\n}\n\n#wbo-site .wbo-price small{\n  font-size:16px;\n  color:var(--muted);\n  font-weight:600;\n}\n\n#wbo-site .wbo-package-description{\n  color:var(--muted);\n  margin-bottom:22px;\n}\n\n#wbo-site .wbo-package ul{\n  list-style:none;\n  padding:0;\n  margin:0 0 25px;\n}\n\n#wbo-site .wbo-package li{\n  margin:12px 0;\n  color:#34475c;\n}\n\n#wbo-site .wbo-package li:before{\n  content:\"\u2713\";\n  color:var(--green);\n  font-weight:900;\n  margin-right:10px;\n}\n\n\/* ================================\n   OVER ONS\n================================ *\/\n\n#wbo-site .wbo-about{\n  background:#fff;\n}\n\n#wbo-site .wbo-about-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:55px;\n  align-items:center;\n}\n\n#wbo-site .wbo-about h2{\n  font-size:42px;\n  color:var(--navy);\n  line-height:1.15;\n  margin:0 0 18px;\n}\n\n#wbo-site .wbo-about p{\n  color:var(--muted);\n  font-size:18px;\n  margin:0 0 18px;\n}\n\n#wbo-site .wbo-numbers{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:14px;\n}\n\n#wbo-site .wbo-number{\n  background:var(--light);\n  padding:25px;\n  border-radius:14px;\n  border:1px solid var(--border);\n}\n\n#wbo-site .wbo-number strong{\n  font-size:30px;\n  color:var(--blue);\n  display:block;\n}\n\n#wbo-site .wbo-number span{\n  color:var(--muted);\n}\n\n\/* ================================\n   WERKWIJZE\n================================ *\/\n\n#wbo-site .wbo-process{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:22px;\n}\n\n#wbo-site .wbo-step{\n  padding:28px;\n  border-radius:18px;\n  background:var(--light);\n  border:1px solid var(--border);\n}\n\n#wbo-site .wbo-step-num{\n  font-size:15px;\n  font-weight:800;\n  color:var(--blue);\n  margin-bottom:12px;\n}\n\n#wbo-site .wbo-step h3{\n  font-size:22px;\n  color:var(--navy);\n  margin:0 0 8px;\n}\n\n#wbo-site .wbo-step p{\n  color:var(--muted);\n  margin:0;\n}\n\n\/* ================================\n   CONTACT\n================================ *\/\n\n#wbo-site .wbo-contact{\n  background:var(--navy);\n  color:#fff;\n}\n\n#wbo-site .wbo-contact-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:45px;\n  align-items:start;\n}\n\n#wbo-site .wbo-contact h2{\n  font-size:42px;\n  line-height:1.15;\n  margin:0 0 16px;\n}\n\n#wbo-site .wbo-contact-text{\n  color:#d8e4f2;\n  font-size:18px;\n}\n\n#wbo-site .wbo-form{\n  background:#fff;\n  padding:28px;\n  border-radius:18px;\n}\n\n#wbo-site .wbo-form label{\n  display:block;\n  font-weight:700;\n  color:var(--navy);\n  margin:0 0 6px;\n}\n\n#wbo-site .wbo-form input,\n#wbo-site .wbo-form textarea{\n  width:100%;\n  padding:13px 14px;\n  border:1px solid #ccd7e4;\n  border-radius:10px;\n  font:inherit;\n  margin-bottom:16px;\n}\n\n#wbo-site .wbo-form textarea{\n  min-height:130px;\n  resize:vertical;\n}\n\n\/* ================================\n   FOOTER\n================================ *\/\n\n#wbo-site .wbo-footer{\n  background:#091d30;\n  color:#b9c8d8;\n  padding:28px 0;\n}\n\n#wbo-site .wbo-footer-inner{\n  display:flex;\n  justify-content:space-between;\n  gap:20px;\n  flex-wrap:wrap;\n}\n\n#wbo-site .wbo-small{\n  font-size:14px;\n}\n\n\/* ================================\n   MOBIEL MENU\n================================ *\/\n\n@media(max-width:800px){\n\n  #wbo-site .wbo-menu-button{\n    display:block;\n  }\n\n  #wbo-site .wbo-menu{\n    display:none;\n    position:absolute;\n    top:76px;\n    left:0;\n    right:0;\n    background:#fff;\n    padding:25px;\n    border-bottom:1px solid var(--border);\n    box-shadow:0 12px 30px rgba(0,0,0,.08);\n    flex-direction:column;\n    align-items:stretch;\n    gap:0;\n  }\n\n  #wbo-site .wbo-menu.wbo-open{\n    display:flex;\n  }\n\n  #wbo-site .wbo-menu a{\n    display:block;\n    padding:15px 10px;\n    text-align:center;\n    border-bottom:1px solid #edf1f5;\n  }\n\n  #wbo-site .wbo-menu-contact{\n    margin-top:10px;\n  }\n\n  #wbo-site .wbo-hero-grid,\n  #wbo-site .wbo-about-grid,\n  #wbo-site .wbo-contact-grid{\n    grid-template-columns:1fr;\n  }\n\n  #wbo-site .wbo-cards,\n  #wbo-site .wbo-process{\n    grid-template-columns:1fr;\n  }\n\n  #wbo-site .wbo-package-grid{\n    grid-template-columns:1fr;\n  }\n\n  #wbo-site .wbo-package.featured{\n    transform:none;\n  }\n\n  #wbo-site .wbo-hero{\n    padding:70px 0;\n  }\n\n  #wbo-site .wbo-section{\n    padding:65px 0;\n  }\n\n  #wbo-site .wbo-section-head h2,\n  #wbo-site .wbo-about h2,\n  #wbo-site .wbo-contact h2{\n    font-size:34px;\n  }\n\n  #wbo-site .wbo-hero-card{\n    padding:28px;\n  }\n}\n<\/style>\n\n\n<div id=\"wbo-site\">\n\n<!-- ================================\n     HEADER \/ MENU\n================================ -->\n\n<header class=\"wbo-header\">\n  <div class=\"wbo-container wbo-nav\">\n\n    <a class=\"wbo-logo\" href=\"#wbo-home\">\n      Webbouw<span>Oostvoorne<\/span>\n    <\/a>\n\n    <button\n      class=\"wbo-menu-button\"\n      type=\"button\"\n      aria-label=\"Menu openen\"\n      onclick=\"wboToggleMenu()\">\n      \u2630\n    <\/button>\n\n    <nav class=\"wbo-menu\" id=\"wbo-menu\">\n\n      <a href=\"#wbo-home\" onclick=\"wboCloseMenu()\">Home<\/a>\n\n      <a href=\"#wbo-diensten\" onclick=\"wboCloseMenu()\">Diensten<\/a>\n\n      <a href=\"#wbo-pakketten\" onclick=\"wboCloseMenu()\">Pakketten<\/a>\n\n      <a href=\"#wbo-over\" onclick=\"wboCloseMenu()\">Over ons<\/a>\n\n      <a href=\"#wbo-werkwijze\" onclick=\"wboCloseMenu()\">Werkwijze<\/a>\n\n      <a\n        href=\"#wbo-contact\"\n        class=\"wbo-menu-contact\"\n        onclick=\"wboCloseMenu()\">\n        Contact\n      <\/a>\n\n    <\/nav>\n\n  <\/div>\n<\/header>\n\n\n<!-- ================================\n     HOME\n================================ -->\n\n<main id=\"wbo-home\">\n\n  <section class=\"wbo-hero\">\n\n    <div class=\"wbo-container wbo-hero-grid\">\n\n      <div>\n\n        <span class=\"wbo-eyebrow\">\n          Webdesign vanuit Oostvoorne\n        <\/span>\n\n        <h1>\n          Een website die er professioneel uitziet \u00e9n werkt.\n        <\/h1>\n\n        <p>\n          WebbouwOostvoorne helpt ondernemers met moderne,\n          snelle en duidelijke websites die vertrouwen uitstralen\n          en klanten helpen contact op te nemen.\n        <\/p>\n\n        <div class=\"wbo-actions\">\n\n          <a\n            class=\"wbo-btn wbo-primary\"\n            href=\"#wbo-pakketten\">\n            Bekijk pakketten\n          <\/a>\n\n          <a\n            class=\"wbo-btn wbo-outline\"\n            href=\"#wbo-diensten\">\n            Bekijk diensten\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"wbo-hero-card\">\n\n        <h2>\n          Jouw online visitekaartje\n        <\/h2>\n\n        <p>\n          Een professionele website geeft bezoekers vertrouwen\n          en maakt het makkelijk om contact met je op te nemen.\n        <\/p>\n\n        <ul class=\"wbo-checklist\">\n\n          <li>\n            Modern en professioneel ontwerp\n          <\/li>\n\n          <li>\n            Geschikt voor mobiel en tablet\n          <\/li>\n\n          <li>\n            Duidelijke structuur\n          <\/li>\n\n          <li>\n            WordPress-vriendelijk\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n<!-- ================================\n     DIENSTEN\n================================ -->\n\n<section\n  id=\"wbo-diensten\"\n  class=\"wbo-section\">\n\n  <div class=\"wbo-container\">\n\n    <div class=\"wbo-section-head\">\n\n      <span class=\"wbo-eyebrow\">\n        Onze diensten\n      <\/span>\n\n      <h2>\n        Alles wat je nodig hebt voor een professionele website\n      <\/h2>\n\n      <p>\n        Van ontwerp en bouw tot een website die klaar is\n        om online gevonden en gebruikt te worden.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"wbo-cards\">\n\n      <article class=\"wbo-card\">\n\n        <div class=\"wbo-icon\">\n          \u2726\n        <\/div>\n\n        <h3>\n          Webdesign\n        <\/h3>\n\n        <p>\n          Een moderne en professionele uitstraling die\n          past bij jouw onderneming en doelgroep.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"wbo-card\">\n\n        <div class=\"wbo-icon\">\n          \u25a3\n        <\/div>\n\n        <h3>\n          WordPress\n        <\/h3>\n\n        <p>\n          Een gebruiksvriendelijke WordPress-website\n          die je later eenvoudig kunt beheren en uitbreiden.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"wbo-card\">\n\n        <div class=\"wbo-icon\">\n          \u2197\n        <\/div>\n\n        <h3>\n          Online groeien\n        <\/h3>\n\n        <p>\n          Heldere pagina&#8217;s, duidelijke knoppen en een\n          structuur die bezoekers richting contact leidt.\n        <\/p>\n\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ================================\n     PAKKETTEN\n================================ -->\n\n<section\n  id=\"wbo-pakketten\"\n  class=\"wbo-section wbo-packages\">\n\n  <div class=\"wbo-container\">\n\n    <div class=\"wbo-section-head\">\n\n      <span class=\"wbo-eyebrow\">\n        Onze pakketten\n      <\/span>\n\n      <h2>\n        Kies het pakket dat bij jouw bedrijf past\n      <\/h2>\n\n      <p>\n        Duidelijke pakketten zonder ingewikkelde keuzes.\n        We bespreken vooraf wat jouw website nodig heeft.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"wbo-package-grid\">\n\n\n      <!-- STARTER -->\n\n      <div class=\"wbo-package\">\n\n        <h3>\n          Starter\n        <\/h3>\n\n        <div class=\"wbo-price\">\n          \u20ac499\n          <small>eenmalig<\/small>\n        <\/div>\n\n        <p class=\"wbo-package-description\">\n          Voor ondernemers die snel een professionele\n          basiswebsite online willen hebben.\n        <\/p>\n\n        <ul>\n\n          <li>\n            Professioneel webdesign\n          <\/li>\n\n          <li>\n            Tot 5 pagina&#8217;s\n          <\/li>\n\n          <li>\n            Mobielvriendelijk ontwerp\n          <\/li>\n\n          <li>\n            Contactformulier\n          <\/li>\n\n          <li>\n            WordPress-installatie\n          <\/li>\n\n          <li>\n            Basis SEO-structuur\n          <\/li>\n\n        <\/ul>\n\n        <a\n          class=\"wbo-btn wbo-outline\"\n          href=\"#wbo-contact\">\n          Starter kiezen\n        <\/a>\n\n      <\/div>\n\n\n      <!-- PROFESSIONEEL -->\n\n      <div class=\"wbo-package featured\">\n\n        <div class=\"wbo-popular\">\n          MEEST GEKOZEN\n        <\/div>\n\n        <h3>\n          Professioneel\n        <\/h3>\n\n        <div class=\"wbo-price\">\n          \u20ac899\n          <small>eenmalig<\/small>\n        <\/div>\n\n        <p class=\"wbo-package-description\">\n          Voor bedrijven die een uitgebreidere website\n          willen waarmee ze professioneel online voor de dag komen.\n        <\/p>\n\n        <ul>\n\n          <li>\n            Alles uit Starter\n          <\/li>\n\n          <li>\n            Tot 10 pagina&#8217;s\n          <\/li>\n\n          <li>\n            Uitgebreid maatwerk design\n          <\/li>\n\n          <li>\n            Sterke call-to-actions\n          <\/li>\n\n          <li>\n            Uitgebreidere SEO-basis\n          <\/li>\n\n          <li>\n            Extra optimalisatie voor mobiel\n          <\/li>\n\n        <\/ul>\n\n        <a\n          class=\"wbo-btn wbo-primary\"\n          href=\"#wbo-contact\">\n          Professioneel kiezen\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ================================\n     OVER ONS\n================================ -->\n\n<section\n  id=\"wbo-over\"\n  class=\"wbo-section wbo-about\">\n\n  <div class=\"wbo-container wbo-about-grid\">\n\n    <div>\n\n      <span class=\"wbo-eyebrow\">\n        WebbouwOostvoorne\n      <\/span>\n\n      <h2>\n        Persoonlijk, duidelijk en zonder onnodige poespas.\n      <\/h2>\n\n      <p>\n        Je website moet niet alleen mooi zijn.\n        Bezoekers moeten direct begrijpen wie je bent,\n        wat je doet en hoe ze contact met je kunnen opnemen.\n      <\/p>\n\n      <p>\n        Daarom bouwen we overzichtelijke websites met\n        aandacht voor gebruiksgemak, mobiel ontwerp en\n        een professionele uitstraling.\n      <\/p>\n\n      <a\n        class=\"wbo-btn wbo-primary\"\n        href=\"#wbo-contact\">\n        Neem contact op\n      <\/a>\n\n    <\/div>\n\n\n    <div class=\"wbo-numbers\">\n\n      <div class=\"wbo-number\">\n        <strong>100%<\/strong>\n        <span>\n          Aandacht voor jouw website\n        <\/span>\n      <\/div>\n\n      <div class=\"wbo-number\">\n        <strong>Mobiel<\/strong>\n        <span>\n          Ontwerp voor kleine schermen\n        <\/span>\n      <\/div>\n\n      <div class=\"wbo-number\">\n        <strong>Helder<\/strong>\n        <span>\n          Logische navigatie en inhoud\n        <\/span>\n      <\/div>\n\n      <div class=\"wbo-number\">\n        <strong>Online<\/strong>\n        <span>\n          Klaar voor jouw bezoekers\n        <\/span>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ================================\n     WERKWIJZE\n================================ -->\n\n<section\n  id=\"wbo-werkwijze\"\n  class=\"wbo-section\">\n\n  <div class=\"wbo-container\">\n\n    <div class=\"wbo-section-head\">\n\n      <span class=\"wbo-eyebrow\">\n        Onze werkwijze\n      <\/span>\n\n      <h2>\n        Zo bouwen we jouw website\n      <\/h2>\n\n      <p>\n        Een simpel proces, zodat je altijd weet\n        waar je aan toe bent.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"wbo-process\">\n\n\n      <div class=\"wbo-step\">\n\n        <div class=\"wbo-step-num\">\n          STAP 01\n        <\/div>\n\n        <h3>\n          Bespreken\n        <\/h3>\n\n        <p>\n          We bespreken jouw bedrijf, doelgroep,\n          wensen en wat de website moet bereiken.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"wbo-step\">\n\n        <div class=\"wbo-step-num\">\n          STAP 02\n        <\/div>\n\n        <h3>\n          Bouwen\n        <\/h3>\n\n        <p>\n          We bouwen de pagina&#8217;s, structuur,\n          teksten en uitstraling tot \u00e9\u00e9n geheel.\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"wbo-step\">\n\n        <div class=\"wbo-step-num\">\n          STAP 03\n        <\/div>\n\n        <h3>\n          Online\n        <\/h3>\n\n        <p>\n          Na controle zetten we de website online,\n          zodat bezoekers direct aan de slag kunnen.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ================================\n     CONTACT\n================================ -->\n\n<section\n  id=\"wbo-contact\"\n  class=\"wbo-section wbo-contact\">\n\n  <div class=\"wbo-container wbo-contact-grid\">\n\n\n    <div>\n\n      <span class=\"wbo-eyebrow\">\n        Contact\n      <\/span>\n\n      <h2>\n        Klaar om jouw website aan te pakken?\n      <\/h2>\n\n      <p class=\"wbo-contact-text\">\n        Vertel kort wat je nodig hebt.\n        Kies eventueel \u00e9\u00e9n van onze pakketten\n        en we nemen contact met je op.\n      <\/p>\n\n      <br>\n\n      <p class=\"wbo-contact-text\">\n        <strong>\n          WebbouwOostvoorne\n        <\/strong>\n        <br>\n        Websites voor ondernemers in Oostvoorne\n        en omgeving.\n      <\/p>\n\n    <\/div>\n\n\n    <form\n      class=\"wbo-form\"\n      onsubmit=\"wboSendMail(event)\">\n\n      <label for=\"wbo-naam\">\n        Naam\n      <\/label>\n\n      <input\n        id=\"wbo-naam\"\n        type=\"text\"\n        placeholder=\"Je naam\"\n        required>\n\n\n      <label for=\"wbo-email\">\n        E-mailadres\n      <\/label>\n\n      <input\n        id=\"wbo-email\"\n        type=\"email\"\n        placeholder=\"jij@voorbeeld.nl\"\n        required>\n\n\n      <label for=\"wbo-pakket\">\n        Interesse in\n      <\/label>\n\n      <select\n        id=\"wbo-pakket\"\n        style=\"width:100%;padding:13px 14px;border:1px solid #ccd7e4;border-radius:10px;font:inherit;margin-bottom:16px;\">\n\n        <option>\n          Ik weet het nog niet\n        <\/option>\n\n        <option>\n          Starter \u2013 \u20ac499\n        <\/option>\n\n        <option>\n          Professioneel \u2013 \u20ac899\n        <\/option>\n\n      <\/select>\n\n\n      <label for=\"wbo-bericht\">\n        Bericht\n      <\/label>\n\n      <textarea\n        id=\"wbo-bericht\"\n        placeholder=\"Vertel kort wat je nodig hebt...\"\n        required><\/textarea>\n\n\n      <button\n        class=\"wbo-btn wbo-primary\"\n        type=\"submit\">\n        Bericht versturen\n      <\/button>\n\n    <\/form>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ================================\n     FOOTER\n================================ -->\n\n<footer class=\"wbo-footer\">\n\n  <div class=\"wbo-container wbo-footer-inner\">\n\n    <div>\n      <strong>\n        WebbouwOostvoorne\n      <\/strong>\n    <\/div>\n\n    <div class=\"wbo-small\">\n      \u00a9 2026 WebbouwOostvoorne.\n      Alle rechten voorbehouden.\n    <\/div>\n\n  <\/div>\n\n<\/footer>\n\n<\/main>\n\n<\/div>\n\n\n<script>\n\n\/* ================================\n   MOBIEL MENU\n================================ *\/\n\nfunction wboToggleMenu(){\n\n  var menu = document.getElementById(\"wbo-menu\");\n\n  if(menu){\n    menu.classList.toggle(\"wbo-open\");\n  }\n\n}\n\n\n\/* ================================\n   MENU SLUITEN\n================================ *\/\n\nfunction wboCloseMenu(){\n\n  var menu = document.getElementById(\"wbo-menu\");\n\n  if(menu){\n    menu.classList.remove(\"wbo-open\");\n  }\n\n}\n\n\n\/* ================================\n   CONTACTFORMULIER\n================================ *\/\n\nfunction wboSendMail(event){\n\n  event.preventDefault();\n\n  var naam =\n    document.getElementById(\"wbo-naam\").value;\n\n  var email =\n    document.getElementById(\"wbo-email\").value;\n\n  var pakket =\n    document.getElementById(\"wbo-pakket\").value;\n\n  var bericht =\n    document.getElementById(\"wbo-bericht\").value;\n\n  var subject =\n    encodeURIComponent(\n      \"Nieuwe aanvraag via WebbouwOostvoorne\"\n    );\n\n  var body =\n    encodeURIComponent(\n      \"Naam: \" + naam +\n      \"\\nE-mail: \" + email +\n      \"\\nInteresse: \" + pakket +\n      \"\\n\\nBericht:\\n\" + bericht\n    );\n\n  window.location.href =\n    \"mailto:info@webbouwoostvoorne.nl?subject=\"\n    + subject\n    + \"&body=\"\n    + body;\n\n}\n\n<\/script>\n\n\n\n<style>\n\/* =========================================================\n   WEBBOUWOOSTVOORNE - COMPLETE WEBSITE\n   ========================================================= *\/\n\n:root{\n  --wbo-blue:#1677ff;\n  --wbo-dark:#102a43;\n  --wbo-text:#182230;\n  --wbo-muted:#607086;\n  --wbo-light:#f5f8fc;\n  --wbo-white:#ffffff;\n  --wbo-border:#e2eaf2;\n  --wbo-shadow:0 12px 35px rgba(16,42,67,.10);\n  --wbo-radius:18px;\n}\n\n.wbo-site,\n.wbo-site *{\n  box-sizing:border-box;\n}\n\n.wbo-site{\n  margin:0;\n  padding:0;\n  font-family:Arial,Helvetica,sans-serif;\n  color:var(--wbo-text);\n  background:#fff;\n  line-height:1.6;\n}\n\n.wbo-site a{\n  text-decoration:none;\n}\n\n.wbo-container{\n  width:min(1120px,92%);\n  margin:0 auto;\n}\n\n\/* HEADER *\/\n\n.wbo-header{\n  position:sticky;\n  top:0;\n  z-index:9999;\n  background:rgba(255,255,255,.97);\n  border-bottom:1px solid var(--wbo-border);\n  backdrop-filter:blur(10px);\n}\n\n.wbo-nav{\n  min-height:76px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:25px;\n}\n\n.wbo-logo{\n  font-size:24px;\n  font-weight:800;\n  color:var(--wbo-dark)!important;\n  white-space:nowrap;\n}\n\n.wbo-logo span{\n  color:var(--wbo-blue);\n}\n\n.wbo-menu{\n  display:flex;\n  align-items:center;\n  gap:25px;\n}\n\n.wbo-menu a{\n  color:#35465a!important;\n  font-weight:700;\n}\n\n.wbo-menu a:hover{\n  color:var(--wbo-blue)!important;\n}\n\n.wbo-menu-button{\n  background:var(--wbo-blue);\n  color:#fff!important;\n  padding:12px 19px;\n  border-radius:10px;\n}\n\n\/* MOBIEL MENU *\/\n\n.wbo-mobile-toggle{\n  display:none;\n}\n\n.wbo-mobile-label{\n  display:none;\n  font-size:30px;\n  cursor:pointer;\n  color:var(--wbo-dark);\n}\n\n.wbo-mobile-menu{\n  display:none;\n}\n\n\/* BUTTONS *\/\n\n.wbo-btn{\n  display:inline-block;\n  padding:14px 22px;\n  border-radius:12px;\n  font-weight:800;\n  cursor:pointer;\n  transition:.2s;\n}\n\n.wbo-btn-primary{\n  background:var(--wbo-blue);\n  color:#fff!important;\n  box-shadow:0 8px 20px rgba(22,119,255,.25);\n}\n\n.wbo-btn-primary:hover{\n  transform:translateY(-2px);\n  background:#0868ed;\n}\n\n.wbo-btn-outline{\n  border:2px solid var(--wbo-blue);\n  color:var(--wbo-blue)!important;\n  background:#fff;\n}\n\n.wbo-btn-outline:hover{\n  background:#eef5ff;\n}\n\n\/* HERO *\/\n\n.wbo-hero{\n  padding:100px 0 90px;\n  background:linear-gradient(\n    135deg,\n    #f5f9ff 0%,\n    #ffffff 55%,\n    #eef6ff 100%\n  );\n}\n\n.wbo-hero-grid{\n  display:grid;\n  grid-template-columns:1.1fr .9fr;\n  gap:60px;\n  align-items:center;\n}\n\n.wbo-eyebrow{\n  display:inline-block;\n  color:var(--wbo-blue);\n  font-weight:800;\n  margin-bottom:16px;\n}\n\n.wbo-hero h1{\n  font-size:clamp(42px,6vw,72px);\n  line-height:1.05;\n  letter-spacing:-2px;\n  color:var(--wbo-dark);\n  margin:0 0 24px;\n}\n\n.wbo-hero p{\n  font-size:20px;\n  color:var(--wbo-muted);\n  max-width:650px;\n  margin:0 0 30px;\n}\n\n.wbo-actions{\n  display:flex;\n  gap:14px;\n  flex-wrap:wrap;\n}\n\n.wbo-hero-card{\n  background:var(--wbo-dark);\n  color:#fff;\n  border-radius:28px;\n  padding:38px;\n  box-shadow:var(--wbo-shadow);\n}\n\n.wbo-hero-card h2{\n  font-size:30px;\n  margin:0 0 18px;\n}\n\n.wbo-hero-card p{\n  font-size:17px;\n  color:#dbe8f7;\n  margin-bottom:20px;\n}\n\n.wbo-checklist{\n  list-style:none;\n  padding:0;\n  margin:0;\n}\n\n.wbo-checklist li{\n  margin:12px 0;\n  font-weight:700;\n}\n\n.wbo-checklist li:before{\n  content:\"\u2713\";\n  display:inline-grid;\n  place-items:center;\n  width:25px;\n  height:25px;\n  background:var(--wbo-blue);\n  border-radius:50%;\n  margin-right:10px;\n}\n\n\/* SECTIONS *\/\n\n.wbo-section{\n  padding:85px 0;\n}\n\n.wbo-section-light{\n  background:var(--wbo-light);\n}\n\n.wbo-section-head{\n  text-align:center;\n  max-width:720px;\n  margin:0 auto 45px;\n}\n\n.wbo-section-head h2{\n  font-size:42px;\n  line-height:1.15;\n  color:var(--wbo-dark);\n  margin:0 0 12px;\n}\n\n.wbo-section-head p{\n  color:var(--wbo-muted);\n  font-size:18px;\n}\n\n\/* DIENSTEN *\/\n\n.wbo-cards{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:22px;\n}\n\n.wbo-card{\n  padding:30px;\n  background:#fff;\n  border:1px solid var(--wbo-border);\n  border-radius:var(--wbo-radius);\n  box-shadow:var(--wbo-shadow);\n}\n\n.wbo-icon{\n  width:52px;\n  height:52px;\n  border-radius:14px;\n  background:#eaf3ff;\n  color:var(--wbo-blue);\n  display:grid;\n  place-items:center;\n  font-size:25px;\n  margin-bottom:20px;\n}\n\n.wbo-card h3{\n  font-size:23px;\n  margin:0 0 10px;\n  color:var(--wbo-dark);\n}\n\n.wbo-card p{\n  color:var(--wbo-muted);\n  margin:0;\n}\n\n\/* PAKKETTEN *\/\n\n.wbo-packages{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:25px;\n  max-width:900px;\n  margin:auto;\n}\n\n.wbo-package{\n  background:#fff;\n  border:1px solid var(--wbo-border);\n  border-radius:22px;\n  padding:35px;\n  box-shadow:var(--wbo-shadow);\n  position:relative;\n}\n\n.wbo-package.featured{\n  border:2px solid var(--wbo-blue);\n}\n\n.wbo-package-badge{\n  position:absolute;\n  top:-14px;\n  right:25px;\n  background:var(--wbo-blue);\n  color:#fff;\n  padding:6px 13px;\n  border-radius:20px;\n  font-size:13px;\n  font-weight:800;\n}\n\n.wbo-package h3{\n  font-size:28px;\n  color:var(--wbo-dark);\n  margin:0 0 10px;\n}\n\n.wbo-price{\n  font-size:36px;\n  font-weight:800;\n  color:var(--wbo-blue);\n  margin:10px 0 20px;\n}\n\n.wbo-package p{\n  color:var(--wbo-muted);\n}\n\n.wbo-package ul{\n  list-style:none;\n  padding:0;\n  margin:22px 0;\n}\n\n.wbo-package li{\n  margin:11px 0;\n}\n\n.wbo-package li:before{\n  content:\"\u2713\";\n  color:var(--wbo-blue);\n  font-weight:800;\n  margin-right:9px;\n}\n\n\/* OVER ONS *\/\n\n.wbo-about-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:55px;\n  align-items:center;\n}\n\n.wbo-about h2{\n  font-size:42px;\n  line-height:1.15;\n  color:var(--wbo-dark);\n  margin:0 0 18px;\n}\n\n.wbo-about p{\n  color:var(--wbo-muted);\n  font-size:18px;\n  margin:0 0 18px;\n}\n\n.wbo-numbers{\n  display:grid;\n  grid-template-columns:repeat(2,1fr);\n  gap:14px;\n}\n\n.wbo-number{\n  background:#fff;\n  padding:25px;\n  border-radius:14px;\n  border:1px solid var(--wbo-border);\n}\n\n.wbo-number strong{\n  display:block;\n  font-size:30px;\n  color:var(--wbo-blue);\n}\n\n.wbo-number span{\n  color:var(--wbo-muted);\n}\n\n\/* WERKWIJZE *\/\n\n.wbo-process{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:22px;\n}\n\n.wbo-step{\n  padding:28px;\n  border-radius:18px;\n  background:var(--wbo-light);\n  border:1px solid var(--wbo-border);\n}\n\n.wbo-step-num{\n  font-size:15px;\n  font-weight:800;\n  color:var(--wbo-blue);\n  margin-bottom:12px;\n}\n\n.wbo-step h3{\n  font-size:22px;\n  color:var(--wbo-dark);\n  margin:0 0 8px;\n}\n\n.wbo-step p{\n  margin:0;\n  color:var(--wbo-muted);\n}\n\n\/* CONTACT *\/\n\n.wbo-contact{\n  background:var(--wbo-dark);\n  color:#fff;\n}\n\n.wbo-contact-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:45px;\n  align-items:center;\n}\n\n.wbo-contact h2{\n  font-size:42px;\n  line-height:1.15;\n  margin:0 0 16px;\n}\n\n.wbo-contact p{\n  color:#d8e4f2;\n  font-size:18px;\n}\n\n.wbo-contact-box{\n  background:#fff;\n  padding:32px;\n  border-radius:20px;\n}\n\n.wbo-contact-box h3{\n  color:var(--wbo-dark);\n  font-size:25px;\n  margin:0 0 10px;\n}\n\n.wbo-contact-box p{\n  color:var(--wbo-muted);\n  margin-bottom:22px;\n}\n\n.wbo-email{\n  display:block;\n  font-size:20px;\n  font-weight:800;\n  color:var(--wbo-blue)!important;\n  margin-bottom:20px;\n  word-break:break-word;\n}\n\n\/* FOOTER *\/\n\n.wbo-footer{\n  background:#091d30;\n  color:#b9c8d8;\n  padding:30px 0;\n}\n\n.wbo-footer-inner{\n  display:flex;\n  justify-content:space-between;\n  gap:20px;\n  flex-wrap:wrap;\n}\n\n.wbo-footer strong{\n  color:#fff;\n}\n\n.wbo-small{\n  font-size:14px;\n}\n\n\/* =========================================================\n   MOBIEL\n   ========================================================= *\/\n\n@media(max-width:800px){\n\n  .wbo-nav{\n    min-height:70px;\n  }\n\n  .wbo-menu{\n    display:none;\n  }\n\n  .wbo-mobile-label{\n    display:block;\n  }\n\n  .wbo-mobile-toggle:checked ~ .wbo-mobile-menu{\n    display:block;\n  }\n\n  .wbo-mobile-menu{\n    background:#fff;\n    border-top:1px solid var(--wbo-border);\n    padding:15px 0 25px;\n  }\n\n  .wbo-mobile-menu a{\n    display:block;\n    padding:15px 4%;\n    color:var(--wbo-dark)!important;\n    font-size:18px;\n    font-weight:700;\n    border-bottom:1px solid var(--wbo-border);\n  }\n\n  .wbo-mobile-menu a:last-child{\n    border-bottom:0;\n  }\n\n  .wbo-hero{\n    padding:65px 0;\n  }\n\n  .wbo-hero-grid,\n  .wbo-about-grid,\n  .wbo-contact-grid{\n    grid-template-columns:1fr;\n  }\n\n  .wbo-cards,\n  .wbo-process,\n  .wbo-packages{\n    grid-template-columns:1fr;\n  }\n\n  .wbo-section{\n    padding:65px 0;\n  }\n\n  .wbo-section-head h2,\n  .wbo-about h2,\n  .wbo-contact h2{\n    font-size:34px;\n  }\n\n  .wbo-hero h1{\n    font-size:44px;\n  }\n\n  .wbo-hero-card{\n    padding:28px;\n  }\n\n  .wbo-actions{\n    flex-direction:column;\n  }\n\n  .wbo-actions .wbo-btn{\n    text-align:center;\n  }\n\n  .wbo-numbers{\n    grid-template-columns:1fr 1fr;\n  }\n}\n\n\/* =========================================================\n   THEMA-HEADER VERBERGEN\n   Dit voorkomt het losse Twenty Twenty-Five menu\n   ========================================================= *\/\n\nbody:has(.wbo-site) .wp-site-blocks > header:not(.wbo-header),\nbody:has(.wbo-site) header.wp-block-template-part:not(.wbo-header),\nbody:has(.wbo-site) .wp-block-template-part > header:not(.wbo-header){\n  display:none!important;\n}\n\n\/* Ook ongewenste paginatitel verbergen *\/\nbody:has(.wbo-site) .entry-title,\nbody:has(.wbo-site) .wp-block-post-title{\n  display:none!important;\n}\n\n\/* =========================================================\n   EINDE CSS\n   ========================================================= *\/\n<\/style>\n\n\n<div class=\"wbo-site\">\n\n  <!-- =========================\n       HEADER\n       ========================= -->\n\n  <header class=\"wbo-header\">\n\n    <div class=\"wbo-container wbo-nav\">\n\n      <a href=\"#wbo-home\" class=\"wbo-logo\">\n        Webbouw<span>Oostvoorne<\/span>\n      <\/a>\n\n      <nav class=\"wbo-menu\">\n\n        <a href=\"#wbo-home\">Home<\/a>\n\n        <a href=\"#wbo-diensten\">Diensten<\/a>\n\n        <a href=\"#wbo-pakketten\">Pakketten<\/a>\n\n        <a href=\"#wbo-over\">Over ons<\/a>\n\n        <a href=\"#wbo-werkwijze\">Werkwijze<\/a>\n\n        <a href=\"#wbo-contact\" class=\"wbo-menu-button\">\n          Contact\n        <\/a>\n\n      <\/nav>\n\n      <label for=\"wbo-mobile-toggle\" class=\"wbo-mobile-label\">\n        \u2630\n      <\/label>\n\n    <\/div>\n\n    <input\n      type=\"checkbox\"\n      id=\"wbo-mobile-toggle\"\n      class=\"wbo-mobile-toggle\"\n    >\n\n    <div class=\"wbo-mobile-menu\">\n\n      <a href=\"#wbo-home\">Home<\/a>\n\n      <a href=\"#wbo-diensten\">Diensten<\/a>\n\n      <a href=\"#wbo-pakketten\">Pakketten<\/a>\n\n      <a href=\"#wbo-over\">Over ons<\/a>\n\n      <a href=\"#wbo-werkwijze\">Werkwijze<\/a>\n\n      <a href=\"#wbo-contact\">Contact<\/a>\n\n    <\/div>\n\n  <\/header>\n\n\n  <!-- =========================\n       HOME\n       ========================= -->\n\n  <main id=\"wbo-home\">\n\n    <section class=\"wbo-hero\">\n\n      <div class=\"wbo-container wbo-hero-grid\">\n\n        <div>\n\n          <span class=\"wbo-eyebrow\">\n            Webdesign vanuit Oostvoorne\n          <\/span>\n\n          <h1>\n            Een website die er professioneel uitziet \u00e9n werkt.\n          <\/h1>\n\n          <p>\n            WebbouwOostvoorne helpt ondernemers met moderne,\n            snelle en duidelijke websites. Van eerste idee tot\n            een professionele website die klaar is voor bezoekers.\n          <\/p>\n\n          <div class=\"wbo-actions\">\n\n            <a\n              href=\"#wbo-pakketten\"\n              class=\"wbo-btn wbo-btn-primary\"\n            >\n              Bekijk pakketten\n            <\/a>\n\n            <a\n              href=\"#wbo-diensten\"\n              class=\"wbo-btn wbo-btn-outline\"\n            >\n              Bekijk diensten\n            <\/a>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"wbo-hero-card\">\n\n          <h2>\n            Jouw online visitekaartje\n          <\/h2>\n\n          <p>\n            Een sterke website geeft bezoekers vertrouwen\n            en maakt het makkelijk om contact met je op te nemen.\n          <\/p>\n\n          <ul class=\"wbo-checklist\">\n\n            <li>\n              Modern en professioneel ontwerp\n            <\/li>\n\n            <li>\n              Geschikt voor mobiel en tablet\n            <\/li>\n\n            <li>\n              Duidelijke structuur\n            <\/li>\n\n            <li>\n              WordPress-vriendelijk\n            <\/li>\n\n          <\/ul>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         DIENSTEN\n         ========================= -->\n\n    <section\n      id=\"wbo-diensten\"\n      class=\"wbo-section\"\n    >\n\n      <div class=\"wbo-container\">\n\n        <div class=\"wbo-section-head\">\n\n          <h2>\n            Onze diensten\n          <\/h2>\n\n          <p>\n            Alles wat je nodig hebt voor een professionele\n            online uitstraling.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"wbo-cards\">\n\n          <article class=\"wbo-card\">\n\n            <div class=\"wbo-icon\">\n              \u2726\n            <\/div>\n\n            <h3>\n              Webdesign\n            <\/h3>\n\n            <p>\n              Een frisse, professionele website die past\n              bij jouw bedrijf en doelgroep.\n            <\/p>\n\n          <\/article>\n\n\n          <article class=\"wbo-card\">\n\n            <div class=\"wbo-icon\">\n              \u25a3\n            <\/div>\n\n            <h3>\n              WordPress websites\n            <\/h3>\n\n            <p>\n              Een gebruiksvriendelijke website die je later\n              eenvoudig kunt beheren en uitbreiden.\n            <\/p>\n\n          <\/article>\n\n\n          <article class=\"wbo-card\">\n\n            <div class=\"wbo-icon\">\n              \u2197\n            <\/div>\n\n            <h3>\n              Online optimalisatie\n            <\/h3>\n\n            <p>\n              Heldere teksten, duidelijke knoppen en een\n              structuur die bezoekers richting contact stuurt.\n            <\/p>\n\n          <\/article>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         PAKKETTEN\n         ========================= -->\n\n    <section\n      id=\"wbo-pakketten\"\n      class=\"wbo-section wbo-section-light\"\n    >\n\n      <div class=\"wbo-container\">\n\n        <div class=\"wbo-section-head\">\n\n          <span class=\"wbo-eyebrow\">\n            Onze pakketten\n          <\/span>\n\n          <h2>\n            Kies het pakket dat bij je past\n          <\/h2>\n\n          <p>\n            Duidelijke pakketten zonder ingewikkelde keuzes.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"wbo-packages\">\n\n\n          <!-- PAKKET 1 -->\n\n          <article class=\"wbo-package\">\n\n            <h3>\n              Start\n            <\/h3>\n\n            <p>\n              Voor ondernemers die snel een professionele\n              online basis nodig hebben.\n            <\/p>\n\n            <div class=\"wbo-price\">\n              \u20ac495\n            <\/div>\n\n            <ul>\n\n              <li>\n                Professioneel ontwerp\n              <\/li>\n\n              <li>\n                Tot 5 pagina&#8217;s\n              <\/li>\n\n              <li>\n                Mobielvriendelijk\n              <\/li>\n\n              <li>\n                Contactpagina\n              <\/li>\n\n              <li>\n                WordPress\n              <\/li>\n\n              <li>\n                Basis SEO\n              <\/li>\n\n            <\/ul>\n\n            <a\n              href=\"mailto:info@webbouwoostvoorne.nl?subject=Aanvraag%20pakket%20Start\"\n              class=\"wbo-btn wbo-btn-primary\"\n            >\n              Dit pakket aanvragen\n            <\/a>\n\n          <\/article>\n\n\n          <!-- PAKKET 2 -->\n\n          <article class=\"wbo-package featured\">\n\n            <div class=\"wbo-package-badge\">\n              MEEST GEKOZEN\n            <\/div>\n\n            <h3>\n              Groei\n            <\/h3>\n\n            <p>\n              Voor ondernemers die een complete website\n              willen waarmee ze professioneel kunnen groeien.\n            <\/p>\n\n            <div class=\"wbo-price\">\n              \u20ac895\n            <\/div>\n\n            <ul>\n\n              <li>\n                Alles uit Start\n              <\/li>\n\n              <li>\n                Tot 10 pagina&#8217;s\n              <\/li>\n\n              <li>\n                Uitgebreidere SEO-basis\n              <\/li>\n\n              <li>\n                Professionele call-to-actions\n              <\/li>\n\n              <li>\n                Diensten- en\/of pakketpagina\n              <\/li>\n\n              <li>\n                Extra optimalisatie voor mobiel\n              <\/li>\n\n            <\/ul>\n\n            <a\n              href=\"mailto:info@webbouwoostvoorne.nl?subject=Aanvraag%20pakket%20Groei\"\n              class=\"wbo-btn wbo-btn-primary\"\n            >\n              Dit pakket aanvragen\n            <\/a>\n\n          <\/article>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         OVER ONS\n         ========================= -->\n\n    <section\n      id=\"wbo-over\"\n      class=\"wbo-section wbo-section-light\"\n    >\n\n      <div class=\"wbo-container wbo-about-grid\">\n\n        <div class=\"wbo-about\">\n\n          <span class=\"wbo-eyebrow\">\n            WebbouwOostvoorne\n          <\/span>\n\n          <h2>\n            Persoonlijk, duidelijk en zonder onnodige poespas.\n          <\/h2>\n\n          <p>\n            Je website moet niet alleen mooi zijn.\n            Bezoekers moeten direct begrijpen wie je bent,\n            wat je doet en hoe ze contact met je kunnen opnemen.\n          <\/p>\n\n          <p>\n            Daarom bouwen we overzichtelijke websites met\n            aandacht voor gebruiksgemak, mobiel ontwerp en\n            een professionele uitstraling.\n          <\/p>\n\n          <a\n            href=\"#wbo-contact\"\n            class=\"wbo-btn wbo-btn-primary\"\n          >\n            Neem contact op\n          <\/a>\n\n        <\/div>\n\n\n        <div class=\"wbo-numbers\">\n\n          <div class=\"wbo-number\">\n            <strong>100%<\/strong>\n            <span>\n              Aandacht voor jouw website\n            <\/span>\n          <\/div>\n\n          <div class=\"wbo-number\">\n            <strong>Mobiel<\/strong>\n            <span>\n              Ontwerp voor kleine schermen\n            <\/span>\n          <\/div>\n\n          <div class=\"wbo-number\">\n            <strong>Helder<\/strong>\n            <span>\n              Logische navigatie en inhoud\n            <\/span>\n          <\/div>\n\n          <div class=\"wbo-number\">\n            <strong>Online<\/strong>\n            <span>\n              Klaar voor jouw bezoekers\n            <\/span>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         WERKWIJZE\n         ========================= -->\n\n    <section\n      id=\"wbo-werkwijze\"\n      class=\"wbo-section\"\n    >\n\n      <div class=\"wbo-container\">\n\n        <div class=\"wbo-section-head\">\n\n          <h2>\n            Zo gaan we te werk\n          <\/h2>\n\n          <p>\n            Een simpel proces, zodat je precies weet\n            waar je aan toe bent.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"wbo-process\">\n\n\n          <div class=\"wbo-step\">\n\n            <div class=\"wbo-step-num\">\n              STAP 01\n            <\/div>\n\n            <h3>\n              Bespreken\n            <\/h3>\n\n            <p>\n              We bepalen samen wat je website nodig heeft\n              en voor wie de website bedoeld is.\n            <\/p>\n\n          <\/div>\n\n\n          <div class=\"wbo-step\">\n\n            <div class=\"wbo-step-num\">\n              STAP 02\n            <\/div>\n\n            <h3>\n              Bouwen\n            <\/h3>\n\n            <p>\n              De pagina&#8217;s, teksten, structuur en uitstraling\n              worden opgebouwd tot \u00e9\u00e9n geheel.\n            <\/p>\n\n          <\/div>\n\n\n          <div class=\"wbo-step\">\n\n            <div class=\"wbo-step-num\">\n              STAP 03\n            <\/div>\n\n            <h3>\n              Online\n            <\/h3>\n\n            <p>\n              Na controle staat je website klaar om\n              bezoekers te ontvangen.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- =========================\n         CONTACT\n         ========================= -->\n\n    <section\n      id=\"wbo-contact\"\n      class=\"wbo-section wbo-contact\"\n    >\n\n      <div class=\"wbo-container wbo-contact-grid\">\n\n        <div>\n\n          <h2>\n            Klaar om jouw website aan te pakken?\n          <\/h2>\n\n          <p>\n            Stuur een bericht en vertel kort wat je nodig hebt.\n            We kunnen daarna samen de volgende stap bepalen.\n          <\/p>\n\n        <\/div>\n\n\n        <div class=\"wbo-contact-box\">\n\n          <h3>\n            Neem contact op\n          <\/h3>\n\n          <p>\n            Klik hieronder om direct een e-mail te sturen.\n          <\/p>\n\n          <a\n            href=\"mailto:info@webbouwoostvoorne.nl?subject=Website%20aanvraag%20WebbouwOostvoorne\"\n            class=\"wbo-email\"\n          >\n            info@webbouwoostvoorne.nl\n          <\/a>\n\n          <a\n            href=\"mailto:info@webbouwoostvoorne.nl?subject=Website%20aanvraag%20WebbouwOostvoorne\"\n            class=\"wbo-btn wbo-btn-primary\"\n          >\n            Offerte aanvragen\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n  <\/main>\n\n\n  <!-- =========================\n       FOOTER\n       ========================= -->\n\n  <footer class=\"wbo-footer\">\n\n    <div class=\"wbo-container wbo-footer-inner\">\n\n      <div>\n        <strong>\n          WebbouwOostvoorne\n        <\/strong>\n      <\/div>\n\n      <div class=\"wbo-small\">\n        \u00a9 2026 WebbouwOostvoorne. Alle rechten voorbehouden.\n      <\/div>\n\n    <\/div>\n\n  <\/footer>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>WebbouwOostvoorne Diensten Over ons Werkwijze Contact Webdesign vanuit Oostvoorne Een website die er professioneel uitziet \u00e9n werkt. WebbouwOostvoorne helpt ondernemers met moderne, snelle en duidelijke websites. Van eerste idee tot een website die klaar is voor bezoekers. Start jouw website Bekijk diensten Jouw online visitekaartje Een sterke website geeft bezoekers vertrouwen en maakt het makkelijk [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":4,"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/webbouwoostvoorne.nl\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}