{"id":3393,"date":"2026-02-23T15:14:04","date_gmt":"2026-02-23T15:14:04","guid":{"rendered":"https:\/\/kiyaya.nl\/?page_id=3393"},"modified":"2026-02-23T15:15:18","modified_gmt":"2026-02-23T15:15:18","slug":"verticale-banner","status":"publish","type":"page","link":"https:\/\/kiyaya.nl\/en\/verticale-banner\/","title":{"rendered":"Verticale banner"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3393\" class=\"elementor elementor-3393\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1e4622 e-flex e-con-boxed e-con e-parent\" data-id=\"d1e4622\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb9f45f elementor-widget elementor-widget-shortcode\" data-id=\"cb9f45f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div id=\"kbb-69e1a095b62a4\"\n     class=\"kbb-banner\"\n     style=\"width:100%;max-width:570px;\">\n\n  <div class=\"kbb-banner-shadow\"\n       style=\"border-radius:0px;box-shadow:0 12px 43px #ea4220;\">\n\n    <div class=\"kbb-banner-inner\"\n         style=\"width:570px;                height:1200px;                position:relative;                overflow:hidden;                border-radius:0px;background:linear-gradient(133deg,#000cf2,#2190d1);border:none;box-shadow:inset 0 0 0 13px #22d3ee,inset 0 0 42.6px #000000,inset 0 0 99.4px #000000,inset 0 0 156.2px #000000;\">\n\n      \n      \n        \n          <div class=\"kbb-layer kbb-layer-image\" style=\"left:47px;top:332px;width:522px;height:868px;opacity:1;border-radius:16px;border:0px solid transparent;box-shadow:none;\">\n                          <img decoding=\"async\" src=\"https:\/\/kiyaya.nl\/wp-content\/uploads\/2026\/02\/ChatGPT-Image-Feb-14-2026-01_18_17-PM.png\" alt=\"\"\n                   style=\"width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;\" \/>\n                      <\/div>\n\n        \n      \n        \n          <div class=\"kbb-layer kbb-layer-text\" style=\"left:109px;top:151px;width:351px;height:173px;opacity:1;border-radius:16px;border:0px solid transparent;box-shadow:none;\">\n            <div class=\"kbb-text\" style=\"font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-size:48px;color:#ffffff;\">Hooray!<\/div>\n          <\/div>\n\n        \n      \n    <\/div><!-- \/.kbb-banner-inner -->\n  <\/div><!-- \/.kbb-banner-shadow -->\n<\/div><!-- \/.kbb-banner -->\n\n<script>\n(function(){\n  var container = document.getElementById('kbb-69e1a095b62a4');\n  if(!container) return;\n\n  var shadowWrap = container.querySelector('.kbb-banner-shadow');\n  var inner = container.querySelector('.kbb-banner-inner');\n  if(!shadowWrap || !inner) return;\n\n  var originalWidth  = 570;\n  var originalHeight = 1200;\n\n  function resizeBanner(){\n    var rect = container.getBoundingClientRect();\n    var containerWidth = rect ? rect.width : container.offsetWidth;\n    if(!containerWidth || !originalWidth) return;\n\n    var scale = containerWidth \/ originalWidth;\n    if(!isFinite(scale) || scale <= 0) return;\n\n    \/\/ Clamp to 3 decimals to avoid subpixel rounding gaps\n    scale = Math.round(scale * 1000) \/ 1000;\n\n    inner.style.transformOrigin = 'top left';\n    inner.style.transform = 'scale(' + scale + ')';\n\n    \/\/ Because transforms don't affect layout, we set the wrapper height explicitly\n    var scaledW = Math.round(originalWidth  * scale);\n    var scaledH = Math.round(originalHeight * scale);\n\n    shadowWrap.style.width  = scaledW + 'px';\n    shadowWrap.style.height = scaledH + 'px';\n    container.style.height  = scaledH + 'px';\n  }\n\n  function init(){\n    resizeBanner();\n    if (window.requestAnimationFrame) window.requestAnimationFrame(resizeBanner);\n    setTimeout(resizeBanner, 50);\n    setTimeout(resizeBanner, 250);\n  }\n\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n\n  window.addEventListener('resize', resizeBanner);\n  window.addEventListener('load', resizeBanner);\n})();\n<\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3393","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/pages\/3393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/comments?post=3393"}],"version-history":[{"count":4,"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/pages\/3393\/revisions"}],"predecessor-version":[{"id":3397,"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/pages\/3393\/revisions\/3397"}],"wp:attachment":[{"href":"https:\/\/kiyaya.nl\/en\/wp-json\/wp\/v2\/media?parent=3393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}