{"id":10,"date":"2026-08-29T21:21:43","date_gmt":"2026-08-29T21:21:43","guid":{"rendered":"https:\/\/kevintermaat.nl\/?page_id=10"},"modified":"2026-09-05T22:03:31","modified_gmt":"2026-09-05T22:03:31","slug":"elementor-10","status":"publish","type":"page","link":"https:\/\/kevintermaat.nl\/index.php\/elementor-10\/","title":{"rendered":"Elementor #10"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f18b14 e-flex e-con-boxed e-con e-parent\" data-id=\"8f18b14\" 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-7eccfd8 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"7eccfd8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Cormorant+Garamond:ital,wght@1,600;1,700&family=Inter:wght@400;500;600;700;800&family=Bricolage+Grotesque:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n*{\r\n    box-sizing:border-box;\r\n}\r\n\r\nhtml{\r\n    scroll-behavior:smooth;\r\n}\r\n\r\nbody{\r\n    margin:0;\r\n    background:#17181c;\r\n    color:#fff;\r\n}\r\n\r\n\/* =========================================================\r\n   HERO\r\n========================================================= *\/\r\n\r\n.kevin-hero{\r\n    --mint:#79d6cf;\r\n    --purple:#bd84e7;\r\n    --pink:#e9799c;\r\n    --gold:#e1b95f;\r\n\r\n    position:relative;\r\n\r\n    left:50%;\r\n\r\n    width:100vw;\r\n    max-width:none;\r\n\r\n    min-height:100vh;\r\n\r\n    margin:0;\r\n\r\n    transform:translateX(-50%);\r\n\r\n    overflow:hidden;\r\n\r\n    color:#fff;\r\n\r\n    font-family:\"Inter\",sans-serif;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 5% 45%,\r\n            rgba(121,214,207,.10),\r\n            transparent 28%\r\n        ),\r\n        radial-gradient(\r\n            circle at 82% 25%,\r\n            rgba(189,132,231,.09),\r\n            transparent 29%\r\n        ),\r\n        radial-gradient(\r\n            circle at 85% 82%,\r\n            rgba(233,121,156,.06),\r\n            transparent 30%\r\n        ),\r\n        linear-gradient(\r\n            145deg,\r\n            #1b1d21,\r\n            #16171a 56%,\r\n            #201a20\r\n        );\r\n}\r\n\r\n.kevin-hero::before{\r\n    content:\"CREATE\";\r\n\r\n    position:absolute;\r\n\r\n    top:5%;\r\n    right:-5%;\r\n\r\n    color:transparent;\r\n\r\n    -webkit-text-stroke:\r\n        1px rgba(255,255,255,.025);\r\n\r\n    font-family:\"Anton\",sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            230px,\r\n            29vw,\r\n            570px\r\n        );\r\n\r\n    line-height:.8;\r\n\r\n    pointer-events:none;\r\n}\r\n\r\n.kevin-hero::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    left:-100px;\r\n    bottom:-120px;\r\n\r\n    width:300px;\r\n    height:300px;\r\n\r\n    border-radius:\r\n        45% 55% 63% 37% \/\r\n        49% 38% 62% 51%;\r\n\r\n    background:\r\n        rgba(121,214,207,.08);\r\n\r\n    pointer-events:none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.kevin-header{\r\n    position:absolute;\r\n\r\n    z-index:50;\r\n\r\n    top:0;\r\n    left:0;\r\n    right:0;\r\n\r\n    height:90px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:space-between;\r\n\r\n    padding:0 4vw;\r\n}\r\n\r\n.kevin-logo{\r\n    color:#fff;\r\n\r\n    text-decoration:none;\r\n\r\n    font-family:\r\n        \"Cormorant Garamond\",\r\n        serif;\r\n\r\n    font-size:30px;\r\n\r\n    font-weight:700;\r\n\r\n    font-style:italic;\r\n}\r\n\r\n.kevin-logo img{\r\n    display:block;\r\n\r\n    max-width:190px;\r\n    max-height:55px;\r\n\r\n    object-fit:contain;\r\n}\r\n\r\n.kevin-logo-fallback{\r\n    display:block;\r\n}\r\n\r\n.kevin-nav{\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:45px;\r\n}\r\n\r\n.kevin-nav a{\r\n    position:relative;\r\n\r\n    color:#fff;\r\n\r\n    text-decoration:none;\r\n\r\n    font-family:\r\n        \"Bricolage Grotesque\",\r\n        sans-serif;\r\n\r\n    font-size:9px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1.5px;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.kevin-nav a::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    left:0;\r\n    right:100%;\r\n    bottom:-7px;\r\n\r\n    height:2px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--mint),\r\n            var(--purple)\r\n        );\r\n\r\n    transition:.3s;\r\n}\r\n\r\n.kevin-nav a:hover::after{\r\n    right:0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO INNER\r\n========================================================= *\/\r\n\r\n.kevin-hero-inner{\r\n    position:relative;\r\n\r\n    z-index:10;\r\n\r\n    width:100%;\r\n\r\n    min-height:100vh;\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        .72fr\r\n        1.28fr;\r\n\r\n    align-items:center;\r\n\r\n    gap:70px;\r\n\r\n    padding:\r\n        130px\r\n        4vw\r\n        70px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT\r\n========================================================= *\/\r\n\r\n.hero-copy{\r\n    position:relative;\r\n\r\n    z-index:20;\r\n\r\n    padding-left:38px;\r\n}\r\n\r\n.hero-kicker{\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:15px;\r\n\r\n    margin-bottom:18px;\r\n\r\n    font-family:\r\n        \"Bricolage Grotesque\",\r\n        sans-serif;\r\n\r\n    font-size:10px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:2px;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.hero-kicker::before{\r\n    content:\"\";\r\n\r\n    width:38px;\r\n    height:5px;\r\n\r\n    border-radius:50%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--mint),\r\n            var(--purple)\r\n        );\r\n}\r\n\r\n.hero-number{\r\n    position:absolute;\r\n\r\n    right:8%;\r\n    top:5px;\r\n\r\n    color:\r\n        rgba(255,255,255,.35);\r\n\r\n    font-family:\r\n        \"Cormorant Garamond\",\r\n        serif;\r\n\r\n    font-size:18px;\r\n\r\n    font-style:italic;\r\n}\r\n\r\n.hero-title{\r\n    margin:0;\r\n\r\n    font-family:\r\n        \"Anton\",\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            70px,\r\n            6.3vw,\r\n            125px\r\n        );\r\n\r\n    font-weight:400;\r\n\r\n    line-height:.80;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.hero-title span{\r\n    position:relative;\r\n\r\n    display:block;\r\n\r\n    width:max-content;\r\n\r\n    margin-top:10px;\r\n\r\n    font-family:\r\n        \"Cormorant Garamond\",\r\n        serif;\r\n\r\n    font-size:\r\n        clamp(\r\n            55px,\r\n            5vw,\r\n            94px\r\n        );\r\n\r\n    font-weight:700;\r\n\r\n    font-style:italic;\r\n\r\n    text-transform:none;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            #eeeae2,\r\n            var(--mint),\r\n            var(--purple)\r\n        );\r\n\r\n    -webkit-background-clip:text;\r\n    background-clip:text;\r\n\r\n    color:transparent;\r\n}\r\n\r\n.hero-title span::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    left:2%;\r\n    right:1%;\r\n    bottom:-6px;\r\n\r\n    height:4px;\r\n\r\n    border-radius:50%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(255,255,255,.4),\r\n            var(--mint),\r\n            var(--purple)\r\n        );\r\n\r\n    transform:\r\n        rotate(-1deg);\r\n}\r\n\r\n.hero-text{\r\n    max-width:500px;\r\n\r\n    margin-top:45px;\r\n\r\n    color:#b1b4b8;\r\n\r\n    font-size:14px;\r\n\r\n    font-weight:600;\r\n\r\n    line-height:1.8;\r\n}\r\n\r\n.hero-button{\r\n    display:inline-flex;\r\n\r\n    align-items:center;\r\n    justify-content:space-between;\r\n\r\n    gap:50px;\r\n\r\n    min-width:245px;\r\n\r\n    margin-top:32px;\r\n\r\n    padding:\r\n        18px\r\n        21px;\r\n\r\n    color:#fff;\r\n\r\n    text-decoration:none;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.16);\r\n\r\n    background:\r\n        rgba(255,255,255,.018);\r\n\r\n    font-family:\r\n        \"Bricolage Grotesque\",\r\n        sans-serif;\r\n\r\n    font-size:10px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1.4px;\r\n\r\n    text-transform:uppercase;\r\n\r\n    transition:.3s;\r\n}\r\n\r\n.hero-button:hover{\r\n    transform:\r\n        translateY(-3px);\r\n\r\n    background:\r\n        rgba(255,255,255,.07);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROJECT COLLAGE\r\n========================================================= *\/\r\n\r\n.hero-projects{\r\n    position:relative;\r\n\r\n    width:100%;\r\n\r\n    height:735px;\r\n}\r\n\r\n.hero-card{\r\n    position:absolute;\r\n\r\n    overflow:visible;\r\n}\r\n\r\n.hero-card-visual{\r\n    position:relative;\r\n\r\n    width:100%;\r\n    height:100%;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#090c10;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.07);\r\n\r\n    box-shadow:\r\n        0 28px 65px rgba(0,0,0,.32);\r\n\r\n    transition:\r\n        transform .45s cubic-bezier(.2,.8,.2,1),\r\n        box-shadow .45s ease;\r\n}\r\n\r\n.hero-card img{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    display:block;\r\n\r\n    object-fit:cover;\r\n\r\n    transition:\r\n        transform .6s cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   POSITIONS\r\n========================================================= *\/\r\n\r\n\/*\r\n   Website iets breder gemaakt\r\n   en in een bredere verhouding.\r\n*\/\r\n\r\n.card-websites{\r\n    top:42px;\r\n    left:0;\r\n\r\n    width:52%;\r\n    height:255px;\r\n\r\n    transform:\r\n        rotate(-2deg);\r\n}\r\n\r\n.card-art{\r\n    top:52px;\r\n    right:0;\r\n\r\n    width:37%;\r\n    height:270px;\r\n\r\n    transform:\r\n        rotate(3deg);\r\n}\r\n\r\n.card-youtube{\r\n    left:3%;\r\n    bottom:54px;\r\n\r\n    width:47%;\r\n    height:270px;\r\n\r\n    transform:\r\n        rotate(1deg);\r\n}\r\n\r\n.card-products{\r\n    right:1%;\r\n    bottom:45px;\r\n\r\n    width:40%;\r\n    height:255px;\r\n\r\n    transform:\r\n        rotate(-1deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GTA WEBSITE IMAGE\r\n========================================================= *\/\r\n\r\n.card-websites .hero-card-visual{\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    background:\r\n        #100b17;\r\n}\r\n\r\n\/*\r\n   BELANGRIJK:\r\n\r\n   contain i.p.v. cover.\r\n\r\n   Daardoor wordt GTA.png nooit\r\n   afgesneden.\r\n*\/\r\n\r\n.card-websites img{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    object-fit:contain;\r\n\r\n    object-position:\r\n        center center;\r\n\r\n    display:block;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABELS\r\n========================================================= *\/\r\n\r\n.hero-label{\r\n    position:absolute;\r\n\r\n    z-index:20;\r\n\r\n    left:22px;\r\n    bottom:-21px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:12px;\r\n\r\n    min-width:145px;\r\n\r\n    padding:\r\n        14px\r\n        20px;\r\n\r\n    background:#111419;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.14);\r\n\r\n    color:#fff;\r\n\r\n    font-family:\r\n        \"Bricolage Grotesque\",\r\n        sans-serif;\r\n\r\n    font-size:11px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1px;\r\n\r\n    text-transform:uppercase;\r\n\r\n    box-shadow:\r\n        0 14px 28px rgba(0,0,0,.30);\r\n}\r\n\r\n.hero-label-dot{\r\n    width:9px;\r\n    height:9px;\r\n\r\n    border-radius:50%;\r\n}\r\n\r\n.card-websites .hero-label-dot{\r\n    background:\r\n        var(--mint);\r\n\r\n    box-shadow:\r\n        0 0 12px var(--mint);\r\n}\r\n\r\n.card-art .hero-label-dot{\r\n    background:\r\n        var(--purple);\r\n\r\n    box-shadow:\r\n        0 0 12px var(--purple);\r\n}\r\n\r\n.card-youtube .hero-label-dot{\r\n    background:\r\n        var(--pink);\r\n\r\n    box-shadow:\r\n        0 0 12px var(--pink);\r\n}\r\n\r\n.card-products .hero-label-dot{\r\n    background:\r\n        var(--gold);\r\n\r\n    box-shadow:\r\n        0 0 12px var(--gold);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NOTES\r\n========================================================= *\/\r\n\r\n.hero-note{\r\n    position:absolute;\r\n\r\n    z-index:30;\r\n\r\n    color:\r\n        rgba(255,255,255,.30);\r\n\r\n    font-family:\r\n        \"Cormorant Garamond\",\r\n        serif;\r\n\r\n    font-size:17px;\r\n\r\n    font-weight:700;\r\n\r\n    font-style:italic;\r\n}\r\n\r\n.note-one{\r\n    top:13px;\r\n    left:43%;\r\n}\r\n\r\n.note-two{\r\n    right:6%;\r\n    bottom:3px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESKTOP HOVER\r\n========================================================= *\/\r\n\r\n@media\r\n(hover:hover)\r\nand\r\n(pointer:fine)\r\nand\r\n(min-width:1025px){\r\n\r\n    .hero-card:hover\r\n    .hero-card-visual{\r\n        transform:\r\n            translateY(-7px);\r\n\r\n        box-shadow:\r\n            0 38px 80px\r\n            rgba(0,0,0,.40);\r\n    }\r\n\r\n    .card-websites:hover img,\r\n    .card-art:hover img,\r\n    .card-youtube:hover img,\r\n    .card-products:hover img{\r\n        transform:\r\n            scale(1.035);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1100px){\r\n\r\n    .kevin-hero-inner{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .hero-copy{\r\n        padding-left:0;\r\n    }\r\n\r\n    .hero-projects{\r\n        max-width:950px;\r\n\r\n        margin:\r\n            20px\r\n            auto\r\n            0;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:700px){\r\n\r\n    .kevin-header{\r\n        height:75px;\r\n\r\n        padding:\r\n            0\r\n            20px;\r\n    }\r\n\r\n    .kevin-nav{\r\n        display:none;\r\n    }\r\n\r\n    .kevin-logo{\r\n        font-size:24px;\r\n    }\r\n\r\n    .kevin-hero-inner{\r\n        display:block;\r\n\r\n        min-height:0;\r\n\r\n        padding:\r\n            120px\r\n            20px\r\n            70px;\r\n    }\r\n\r\n    .hero-copy{\r\n        padding:0;\r\n    }\r\n\r\n    .hero-number{\r\n        display:none;\r\n    }\r\n\r\n    .hero-projects{\r\n        height:auto;\r\n\r\n        display:grid;\r\n\r\n        grid-template-columns:1fr;\r\n\r\n        gap:48px;\r\n\r\n        margin-top:70px;\r\n    }\r\n\r\n    .hero-card{\r\n        position:relative;\r\n\r\n        top:auto!important;\r\n        right:auto!important;\r\n        bottom:auto!important;\r\n        left:auto!important;\r\n\r\n        width:100%!important;\r\n        height:260px!important;\r\n\r\n        transform:none!important;\r\n    }\r\n\r\n    .card-websites{\r\n        height:auto!important;\r\n\r\n        aspect-ratio:16 \/ 9;\r\n    }\r\n\r\n    .hero-note{\r\n        display:none;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<section\r\n    class=\"kevin-hero\"\r\n    id=\"top\"\r\n>\r\n\r\n    <!-- HEADER -->\r\n\r\n    <header class=\"kevin-header\">\r\n\r\n        <a\r\n            class=\"kevin-logo\"\r\n            href=\"#top\"\r\n        >\r\n\r\n            <img decoding=\"async\"\r\n                src=\"PLAK-HIER-JE-LOGO-URL.png\"\r\n                alt=\"Kevin ter Maat\"\r\n                onerror=\"this.style.display='none';this.nextElementSibling.style.display='block';\"\r\n            >\r\n\r\n            <span\r\n                class=\"kevin-logo-fallback\"\r\n            >\r\n                Kevin ter Maat\r\n            <\/span>\r\n\r\n        <\/a>\r\n\r\n\r\n        <nav class=\"kevin-nav\">\r\n\r\n            <a href=\"#werk\">\r\n                WERK\r\n            <\/a>\r\n\r\n            <a href=\"#over\">\r\n                OVER MIJ\r\n            <\/a>\r\n\r\n            <a href=\"#diensten\">\r\n                DIENSTEN\r\n            <\/a>\r\n\r\n            <a href=\"#contact\">\r\n                CONTACT\r\n            <\/a>\r\n\r\n        <\/nav>\r\n\r\n    <\/header>\r\n\r\n\r\n    <div class=\"kevin-hero-inner\">\r\n\r\n\r\n        <!-- LEFT -->\r\n\r\n        <div class=\"hero-copy\">\r\n\r\n            <div class=\"hero-kicker\">\r\n                CREATIVE PORTFOLIO\r\n            <\/div>\r\n\r\n\r\n            <div class=\"hero-number\">\r\n                No. 01\r\n            <\/div>\r\n\r\n\r\n            <h1 class=\"hero-title\">\r\n\r\n                CREATIVITEIT\r\n\r\n                <span>\r\n                    zonder grenzen.\r\n                <\/span>\r\n\r\n            <\/h1>\r\n\r\n\r\n            <div class=\"hero-text\">\r\n\r\n                Ik ontwerp, ontwikkel en cre\u00eber.<br>\r\n\r\n                Van websites tot video's,\r\n                van producten tot kunst.<br>\r\n\r\n                Idee\u00ebn omzetten in iets echts.\r\n\r\n            <\/div>\r\n\r\n\r\n            <a\r\n                href=\"#werk\"\r\n                class=\"hero-button\"\r\n            >\r\n\r\n                BEKIJK MIJN WERK\r\n\r\n                <span>\r\n                    \u2192\r\n                <\/span>\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- PROJECTS -->\r\n\r\n        <div class=\"hero-projects\">\r\n\r\n\r\n            <!-- WEBSITES -->\r\n\r\n            <div\r\n                class=\"hero-card card-websites\"\r\n            >\r\n\r\n                <div class=\"hero-card-visual\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/kevintermaat.nl\/wp-content\/uploads\/2026\/08\/GTA.png\"\r\n                        alt=\"Grand Theft Auto Clips website\"\r\n                    >\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"hero-label\">\r\n\r\n                    <span\r\n                        class=\"hero-label-dot\"\r\n                    ><\/span>\r\n\r\n                    WEBSITES\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- KUNST -->\r\n\r\n            <div\r\n                class=\"hero-card card-art\"\r\n            >\r\n\r\n                <div class=\"hero-card-visual\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/kevintermaat.nl\/wp-content\/uploads\/2026\/08\/IMG_6288-scaled.jpg\"\r\n                        alt=\"Kunst\"\r\n                    >\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"hero-label\">\r\n\r\n                    <span\r\n                        class=\"hero-label-dot\"\r\n                    ><\/span>\r\n\r\n                    KUNST\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- YOUTUBE -->\r\n\r\n            <div\r\n                class=\"hero-card card-youtube\"\r\n            >\r\n\r\n                <div class=\"hero-card-visual\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/kevintermaat.nl\/wp-content\/uploads\/2026\/08\/Stats.png\"\r\n                        alt=\"YouTube\"\r\n                    >\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"hero-label\">\r\n\r\n                    <span\r\n                        class=\"hero-label-dot\"\r\n                    ><\/span>\r\n\r\n                    YOUTUBE\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- PRODUCTEN -->\r\n\r\n            <div\r\n                class=\"hero-card card-products\"\r\n            >\r\n\r\n                <div class=\"hero-card-visual\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/kevintermaat.nl\/wp-content\/uploads\/2026\/08\/Schermafbeelding-2026-08-29-225940.png\"\r\n                        alt=\"Producten\"\r\n                    >\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"hero-label\">\r\n\r\n                    <span\r\n                        class=\"hero-label-dot\"\r\n                    ><\/span>\r\n\r\n                    PRODUCTEN\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"hero-note note-one\">\r\n                explore \/ create\r\n            <\/div>\r\n\r\n\r\n            <div class=\"hero-note note-two\">\r\n                selected pieces\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4edaf2b e-con e-atomic-element e-flexbox-base e-006a326 \" data-id=\"4edaf2b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4edaf2b\">\n    \t\t<div class=\"elementor-element elementor-element-acb0d3e elementor-widget elementor-widget-html\" data-id=\"acb0d3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Cormorant+Garamond:ital,wght@1,500;1,600;1,700&family=Inter:wght@400;500;600;700;800;900&family=Bricolage+Grotesque:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n*{\r\n    box-sizing:border-box;\r\n}\r\n\r\nhtml{\r\n    scroll-behavior:smooth;\r\n}\r\n\r\n.kevin-about-section{\r\n    --mint:#79d6cf;\r\n    --purple:#bd84e7;\r\n    --pink:#e9799c;\r\n    --gold:#e1b95f;\r\n\r\n    position:relative;\r\n    left:50%;\r\n    width:100vw;\r\n    max-width:none;\r\n    min-height:100vh;\r\n    margin:0;\r\n    transform:translateX(-50%);\r\n    overflow:hidden;\r\n    color:#fff;\r\n    font-family:\"Inter\",sans-serif;\r\n\r\n    background:\r\n        radial-gradient(ellipse at 8% 28%,rgba(121,214,207,.12),transparent 30%),\r\n        radial-gradient(ellipse at 88% 68%,rgba(189,132,231,.14),transparent 32%),\r\n        linear-gradient(145deg,#1d1e23 0%,#17181c 52%,#211c24 100%);\r\n\r\n    border-top:1px solid rgba(255,255,255,.06);\r\n}\r\n\r\n.kevin-about-section::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    opacity:.22;\r\n    pointer-events:none;\r\n    background-image:\r\n        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),\r\n        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);\r\n    background-size:90px 90px;\r\n}\r\n\r\n.about-background-word{\r\n    position:absolute;\r\n    right:-2vw;\r\n    bottom:-6vw;\r\n    font-family:\"Anton\",sans-serif;\r\n    font-size:clamp(180px,24vw,470px);\r\n    line-height:.8;\r\n    color:transparent;\r\n    -webkit-text-stroke:1px rgba(255,255,255,.035);\r\n    text-transform:uppercase;\r\n    transform:rotate(-4deg);\r\n    pointer-events:none;\r\n}\r\n\r\n.kevin-about-inner{\r\n    position:relative;\r\n    z-index:10;\r\n    width:100%;\r\n    min-height:100vh;\r\n    padding:120px 5vw 110px;\r\n    display:grid;\r\n    grid-template-columns:minmax(0,1fr) minmax(430px,.75fr);\r\n    gap:clamp(70px,7vw,140px);\r\n    align-items:center;\r\n}\r\n\r\n.about-content{\r\n    max-width:850px;\r\n}\r\n\r\n.about-kicker{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:16px;\r\n    margin-bottom:30px;\r\n    color:#ececef;\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n    font-size:13px;\r\n    font-weight:800;\r\n    letter-spacing:2px;\r\n    text-transform:uppercase;\r\n}\r\n\r\n.about-kicker::before{\r\n    content:\"\";\r\n    width:52px;\r\n    height:5px;\r\n    background:linear-gradient(90deg,var(--mint),var(--purple));\r\n    border-radius:50%;\r\n}\r\n\r\n.about-title{\r\n    margin:0;\r\n    font-family:\"Anton\",sans-serif;\r\n    font-size:clamp(82px,8vw,155px);\r\n    font-weight:400;\r\n    line-height:.82;\r\n    text-transform:uppercase;\r\n}\r\n\r\n.about-title span{\r\n    display:block;\r\n}\r\n\r\n.about-script{\r\n    display:block;\r\n    margin-top:12px;\r\n    font-family:\"Cormorant Garamond\",serif;\r\n    font-size:clamp(46px,5vw,88px);\r\n    font-weight:700;\r\n    font-style:italic;\r\n    line-height:1;\r\n    background:linear-gradient(90deg,#f4efe8,var(--mint) 48%,var(--purple));\r\n    -webkit-background-clip:text;\r\n    background-clip:text;\r\n    color:transparent;\r\n}\r\n\r\n.about-intro{\r\n    max-width:710px;\r\n    margin-top:45px;\r\n    color:#d5d6d8;\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n    font-size:clamp(19px,1.4vw,27px);\r\n    font-weight:700;\r\n    line-height:1.5;\r\n}\r\n\r\n.about-text{\r\n    max-width:690px;\r\n    margin-top:25px;\r\n    color:#aeb0b4;\r\n    font-size:15px;\r\n    font-weight:500;\r\n    line-height:1.9;\r\n}\r\n\r\n.about-text strong{\r\n    color:#fff;\r\n}\r\n\r\n.about-quote{\r\n    position:relative;\r\n    max-width:650px;\r\n    margin-top:38px;\r\n    padding-left:27px;\r\n    color:#eee;\r\n    font-family:\"Cormorant Garamond\",serif;\r\n    font-size:clamp(23px,2vw,34px);\r\n    font-weight:600;\r\n    font-style:italic;\r\n}\r\n\r\n.about-quote::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    left:0;\r\n    top:4px;\r\n    width:5px;\r\n    height:100%;\r\n    background:linear-gradient(var(--mint),var(--purple));\r\n}\r\n\r\n.about-categories{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:12px;\r\n    margin-top:46px;\r\n}\r\n\r\n.about-category{\r\n    padding:14px 19px;\r\n    border:1px solid rgba(255,255,255,.13);\r\n    background:rgba(255,255,255,.035);\r\n    color:#eee;\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n    font-size:12px;\r\n    font-weight:800;\r\n    letter-spacing:1.2px;\r\n    text-transform:uppercase;\r\n}\r\n\r\n.about-category:nth-child(1){\r\n    border-bottom:3px solid var(--mint);\r\n}\r\n\r\n.about-category:nth-child(2){\r\n    border-bottom:3px solid var(--pink);\r\n}\r\n\r\n.about-category:nth-child(3){\r\n    border-bottom:3px solid var(--gold);\r\n}\r\n\r\n.about-category:nth-child(4){\r\n    border-bottom:3px solid var(--purple);\r\n}\r\n\r\n.about-photo-area{\r\n    position:relative;\r\n    min-height:700px;\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n}\r\n\r\n.about-photo-back{\r\n    position:absolute;\r\n    width:82%;\r\n    height:72%;\r\n    background:linear-gradient(135deg,rgba(121,214,207,.20),rgba(189,132,231,.15));\r\n    border:1px solid rgba(255,255,255,.08);\r\n    transform:rotate(7deg) translate(35px,20px);\r\n}\r\n\r\n.about-photo-card{\r\n    position:relative;\r\n    width:min(100%,520px);\r\n    height:650px;\r\n    z-index:10;\r\n    transform:rotate(-4deg);\r\n    background:#111216;\r\n    border:1px solid rgba(255,255,255,.16);\r\n    box-shadow:0 40px 90px rgba(0,0,0,.45);\r\n}\r\n\r\n.about-photo{\r\n    width:100%;\r\n    height:100%;\r\n    overflow:hidden;\r\n    position:relative;\r\n}\r\n\r\n.about-photo img{\r\n    display:block;\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    object-position:center;\r\n}\r\n\r\n.about-photo-fallback{\r\n    position:absolute;\r\n    inset:0;\r\n    display:none;\r\n    align-items:center;\r\n    justify-content:center;\r\n    color:rgba(255,255,255,.32);\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n    font-size:16px;\r\n    font-weight:800;\r\n    letter-spacing:3px;\r\n    background:linear-gradient(145deg,#25262c,#17181c);\r\n}\r\n\r\n.about-photo-label{\r\n    position:absolute;\r\n    z-index:30;\r\n    left:-35px;\r\n    bottom:55px;\r\n    padding:17px 25px;\r\n    background:rgba(21,22,26,.98);\r\n    border:1px solid rgba(255,255,255,.13);\r\n    color:#fff;\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n    font-size:14px;\r\n    font-weight:800;\r\n    letter-spacing:1.3px;\r\n    text-transform:uppercase;\r\n}\r\n\r\n.about-photo-label::before{\r\n    content:\"\";\r\n    display:inline-block;\r\n    width:9px;\r\n    height:9px;\r\n    margin-right:12px;\r\n    border-radius:50%;\r\n    background:var(--mint);\r\n    box-shadow:0 0 13px var(--mint);\r\n}\r\n\r\n.about-photo-number{\r\n    position:absolute;\r\n    z-index:30;\r\n    top:-35px;\r\n    right:-15px;\r\n    color:rgba(255,255,255,.45);\r\n    font-family:\"Cormorant Garamond\",serif;\r\n    font-size:42px;\r\n    font-style:italic;\r\n    font-weight:700;\r\n}\r\n\r\n.about-photo-note{\r\n    position:absolute;\r\n    z-index:30;\r\n    right:-20px;\r\n    bottom:-20px;\r\n    color:rgba(255,255,255,.55);\r\n    font-family:\"Cormorant Garamond\",serif;\r\n    font-size:26px;\r\n    font-weight:700;\r\n    font-style:italic;\r\n}\r\n\r\n.back-to-top-wrap{\r\n    position:relative;\r\n    z-index:20;\r\n    width:100%;\r\n    display:flex;\r\n    justify-content:center;\r\n    padding:0 20px 50px;\r\n}\r\n\r\n.back-to-top{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:14px;\r\n    padding:16px 24px;\r\n    border:1px solid rgba(255,255,255,.14);\r\n    background:rgba(255,255,255,.025);\r\n    color:#fff;\r\n    text-decoration:none;\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n    font-size:11px;\r\n    font-weight:800;\r\n    letter-spacing:1.6px;\r\n    text-transform:uppercase;\r\n    transition:.3s;\r\n}\r\n\r\n.back-to-top:hover{\r\n    transform:translateY(-4px);\r\n    background:rgba(255,255,255,.06);\r\n    border-color:rgba(255,255,255,.28);\r\n}\r\n\r\n.back-to-top span{\r\n    font-size:18px;\r\n}\r\n\r\n@media(max-width:1000px){\r\n    .kevin-about-inner{\r\n        grid-template-columns:1fr;\r\n        padding:100px 35px 100px;\r\n        gap:95px;\r\n    }\r\n}\r\n\r\n@media(max-width:650px){\r\n    .kevin-about-inner{\r\n        padding:80px 21px;\r\n        gap:75px;\r\n    }\r\n\r\n    .about-title{\r\n        font-size:clamp(70px,22vw,100px);\r\n    }\r\n\r\n    .about-script{\r\n        font-size:clamp(42px,13vw,65px);\r\n    }\r\n\r\n    .about-photo-area{\r\n        min-height:520px;\r\n    }\r\n\r\n    .about-photo-card{\r\n        width:90%;\r\n        height:480px;\r\n    }\r\n}\r\n\r\n<\/style>\r\n\r\n<section class=\"kevin-about-section\" id=\"over\">\r\n\r\n    <div class=\"about-background-word\">\r\n        ABOUT\r\n    <\/div>\r\n\r\n    <div class=\"kevin-about-inner\">\r\n\r\n        <div class=\"about-content\">\r\n\r\n            <div class=\"about-kicker\">\r\n                EVEN VOORSTELLEN\r\n            <\/div>\r\n\r\n            <h2 class=\"about-title\">\r\n                <span>WIE BEN<\/span>\r\n                <span>IK?<\/span>\r\n            <\/h2>\r\n\r\n            <div class=\"about-script\">\r\n                maker, ontwerper & creator.\r\n            <\/div>\r\n\r\n            <div class=\"about-intro\">\r\n                Ik ben Kevin ter Maat.\r\n                Ik maak graag dingen die opvallen \u2014\r\n                digitaal \u00e9n fysiek.\r\n            <\/div>\r\n\r\n            <div class=\"about-text\">\r\n\r\n                Van <strong>websites en YouTube-content<\/strong>\r\n                tot <strong>producten, ontwerpen en kunst<\/strong>.\r\n                Ik vind het vooral interessant om verschillende\r\n                creatieve werelden met elkaar te combineren.\r\n\r\n                <br><br>\r\n\r\n                Een idee hoeft voor mij niet binnen \u00e9\u00e9n hokje te passen.\r\n                Het kan beginnen als een schets, veranderen in een ontwerp\r\n                en uiteindelijk eindigen als iets wat je daadwerkelijk\r\n                kunt bekijken, gebruiken of vasthouden.\r\n\r\n            <\/div>\r\n\r\n            <div class=\"about-quote\">\r\n                \u201cHoe kunnen we dit n\u00e9t even anders doen?\u201d\r\n            <\/div>\r\n\r\n            <div class=\"about-categories\">\r\n\r\n                <div class=\"about-category\">\r\n                    Websites\r\n                <\/div>\r\n\r\n                <div class=\"about-category\">\r\n                    YouTube\r\n                <\/div>\r\n\r\n                <div class=\"about-category\">\r\n                    Producten\r\n                <\/div>\r\n\r\n                <div class=\"about-category\">\r\n                    Kunst\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"about-photo-area\">\r\n\r\n            <div class=\"about-photo-back\"><\/div>\r\n\r\n            <div class=\"about-photo-card\">\r\n\r\n                <div class=\"about-photo\">\r\n\r\n                    <img decoding=\"async\"\r\n                        src=\"PLAK-HIER-JE-FOTO-URL.jpg\"\r\n                        alt=\"Kevin ter Maat\"\r\n                        onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\"\r\n                    >\r\n\r\n                    <div class=\"about-photo-fallback\">\r\n                        JOUW FOTO\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"about-photo-label\">\r\n                    KEVIN TER MAAT\r\n                <\/div>\r\n\r\n                <div class=\"about-photo-number\">\r\n                    02\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"about-photo-note\">\r\n                that's me \u2192\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"back-to-top-wrap\">\r\n        <a href=\"#top\" class=\"back-to-top\">\r\n            TERUG NAAR BOVEN\r\n            <span>\u2191<\/span>\r\n        <\/a>\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9892776 e-con e-atomic-element e-flexbox-base e-9deb7c3 \" data-id=\"9892776\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9892776\">\n    \t\t<div class=\"elementor-element elementor-element-e5fc795 elementor-widget elementor-widget-html\" data-id=\"e5fc795\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Cormorant+Garamond:ital,wght@1,600;1,700&family=Inter:wght@400;500;600;700;800&family=Bricolage+Grotesque:wght@600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n*{\r\n    box-sizing:border-box;\r\n}\r\n\r\nhtml{\r\n    scroll-behavior:smooth;\r\n}\r\n\r\n\/* =========================================================\r\n   MAIN\r\n========================================================= *\/\r\n\r\n.kevin-work{\r\n    --red:#ef7477;\r\n    --gold:#e2bc6a;\r\n    --mint:#66cfc7;\r\n    --purple:#b56be0;\r\n\r\n    position:relative;\r\n    left:50%;\r\n\r\n    width:100vw;\r\n    max-width:none;\r\n\r\n    transform:translateX(-50%);\r\n\r\n    overflow:hidden;\r\n\r\n    color:#fff;\r\n\r\n    font-family:\"Inter\",sans-serif;\r\n\r\n    background:\r\n        radial-gradient(circle at 8% 10%,rgba(102,207,199,.045),transparent 25%),\r\n        radial-gradient(circle at 92% 35%,rgba(181,107,224,.045),transparent 27%),\r\n        linear-gradient(145deg,#10151c,#0b1016 60%,#10141a);\r\n}\r\n\r\n.kevin-work::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n    inset:0;\r\n\r\n    pointer-events:none;\r\n\r\n    opacity:.12;\r\n\r\n    background-image:\r\n        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),\r\n        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);\r\n\r\n    background-size:90px 90px;\r\n}\r\n\r\n.kw-inner{\r\n    position:relative;\r\n    z-index:5;\r\n\r\n    width:100%;\r\n\r\n    padding:95px 4.5vw 80px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.kw-header{\r\n    display:flex;\r\n\r\n    align-items:flex-end;\r\n\r\n    gap:55px;\r\n\r\n    margin-bottom:60px;\r\n}\r\n\r\n.kw-kicker{\r\n    margin-bottom:18px;\r\n\r\n    color:var(--mint);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:11px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:4px;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.kw-title{\r\n    margin:0;\r\n\r\n    font-family:\"Anton\",sans-serif;\r\n\r\n    font-size:clamp(64px,5.8vw,108px);\r\n\r\n    font-weight:400;\r\n\r\n    line-height:.78;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.kw-title span{\r\n    display:block;\r\n\r\n    margin-top:8px;\r\n\r\n    font-family:\"Cormorant Garamond\",serif;\r\n\r\n    font-size:clamp(55px,5vw,90px);\r\n\r\n    font-weight:700;\r\n\r\n    font-style:italic;\r\n\r\n    text-transform:none;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--mint),\r\n            var(--purple)\r\n        );\r\n\r\n    -webkit-background-clip:text;\r\n    background-clip:text;\r\n\r\n    color:transparent;\r\n}\r\n\r\n.kw-header-line{\r\n    width:1px;\r\n    height:115px;\r\n\r\n    background:rgba(255,255,255,.18);\r\n}\r\n\r\n.kw-header-text{\r\n    max-width:285px;\r\n\r\n    color:#9fa6ad;\r\n\r\n    font-size:15px;\r\n\r\n    line-height:1.55;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n.kw-grid{\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        repeat(2,minmax(0,1fr));\r\n\r\n    gap:18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PANEL\r\n========================================================= *\/\r\n\r\n.kw-panel{\r\n    position:relative;\r\n\r\n    min-width:0;\r\n\r\n    height:640px;\r\n\r\n    padding:30px;\r\n\r\n    overflow:hidden;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.14);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(17,23,30,.97),\r\n            rgba(9,14,20,.98)\r\n        );\r\n}\r\n\r\n.kw-panel-head{\r\n    display:flex;\r\n\r\n    justify-content:space-between;\r\n\r\n    align-items:flex-start;\r\n\r\n    gap:20px;\r\n\r\n    margin-bottom:26px;\r\n}\r\n\r\n.kw-number{\r\n    margin-bottom:6px;\r\n\r\n    font-family:\"Cormorant Garamond\",serif;\r\n\r\n    font-size:17px;\r\n\r\n    font-weight:700;\r\n\r\n    font-style:italic;\r\n}\r\n\r\n.kw-panel h3{\r\n    margin:0;\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:32px;\r\n\r\n    font-weight:800;\r\n\r\n    line-height:1;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.kw-sub{\r\n    margin-top:7px;\r\n\r\n    color:#9da4aa;\r\n\r\n    font-family:\"Cormorant Garamond\",serif;\r\n\r\n    font-size:21px;\r\n\r\n    font-weight:700;\r\n\r\n    font-style:italic;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTONS\r\n========================================================= *\/\r\n\r\n.kw-button{\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    min-height:50px;\r\n\r\n    padding:0 23px;\r\n\r\n    text-decoration:none;\r\n\r\n    background:\r\n        rgba(255,255,255,.018);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:10px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1.6px;\r\n\r\n    text-transform:uppercase;\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        background .25s ease;\r\n}\r\n\r\n.kw-button:hover{\r\n    transform:translateY(-3px);\r\n\r\n    background:\r\n        rgba(255,255,255,.06);\r\n}\r\n\r\n.kw-youtube .kw-number{\r\n    color:var(--red);\r\n}\r\n\r\n.kw-art .kw-number{\r\n    color:var(--gold);\r\n}\r\n\r\n.kw-websites .kw-number{\r\n    color:var(--mint);\r\n}\r\n\r\n.kw-products .kw-number{\r\n    color:var(--purple);\r\n}\r\n\r\n.kw-youtube .kw-button{\r\n    color:var(--red);\r\n\r\n    border:\r\n        1px solid rgba(239,116,119,.45);\r\n}\r\n\r\n.kw-art .kw-button{\r\n    color:var(--gold);\r\n\r\n    border:\r\n        1px solid rgba(226,188,106,.45);\r\n}\r\n\r\n.kw-websites .kw-button{\r\n    color:var(--mint);\r\n\r\n    border:\r\n        1px solid rgba(102,207,199,.45);\r\n}\r\n\r\n.kw-products .kw-button{\r\n    color:#ca7deb;\r\n\r\n    border:\r\n        1px solid rgba(181,107,224,.45);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROWS\r\n========================================================= *\/\r\n\r\n.kw-arrow{\r\n    width:44px;\r\n    height:58px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    padding:0;\r\n\r\n    background:\r\n        rgba(255,255,255,.015);\r\n\r\n    color:#fff;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.16);\r\n\r\n    cursor:pointer;\r\n\r\n    font-size:27px;\r\n\r\n    transition:.25s;\r\n}\r\n\r\n.kw-arrow:hover{\r\n    background:\r\n        rgba(255,255,255,.065);\r\n}\r\n\r\n.kw-art .kw-arrow{\r\n    color:var(--gold);\r\n\r\n    border-color:\r\n        rgba(226,188,106,.35);\r\n}\r\n\r\n.kw-websites .kw-arrow{\r\n    color:var(--mint);\r\n\r\n    border-color:\r\n        rgba(102,207,199,.35);\r\n}\r\n\r\n.kw-products .kw-arrow{\r\n    color:#c87bec;\r\n\r\n    border-color:\r\n        rgba(181,107,224,.38);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DOTS\r\n========================================================= *\/\r\n\r\n.kw-dots{\r\n    position:absolute;\r\n\r\n    left:50%;\r\n    bottom:-16px;\r\n\r\n    display:flex;\r\n\r\n    gap:10px;\r\n\r\n    transform:translateX(-50%);\r\n}\r\n\r\n.kw-dot{\r\n    width:15px;\r\n    height:6px;\r\n\r\n    padding:0;\r\n\r\n    border:0;\r\n\r\n    border-radius:20px;\r\n\r\n    background:\r\n        rgba(255,255,255,.22);\r\n\r\n    cursor:pointer;\r\n\r\n    transition:.25s;\r\n}\r\n\r\n.kw-dot.active{\r\n    width:21px;\r\n}\r\n\r\n.kw-art .kw-dot.active{\r\n    background:var(--gold);\r\n}\r\n\r\n.kw-websites .kw-dot.active{\r\n    background:var(--mint);\r\n}\r\n\r\n.kw-products .kw-dot.active{\r\n    background:var(--purple);\r\n}\r\n\r\n.kw-youtube .kw-dot.active{\r\n    background:var(--red);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   YOUTUBE\r\n========================================================= *\/\r\n\r\n.kw-channel{\r\n    margin:\r\n        -5px\r\n        0\r\n        14px\r\n        58px;\r\n}\r\n\r\n.kw-channel small{\r\n    display:block;\r\n\r\n    color:var(--red);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:8px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1.5px;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.kw-channel strong{\r\n    display:block;\r\n\r\n    margin-top:4px;\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:18px;\r\n\r\n    font-weight:800;\r\n}\r\n\r\n.kw-youtube-slider{\r\n    position:relative;\r\n\r\n    height:435px;\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        44px\r\n        minmax(0,1fr)\r\n        44px;\r\n\r\n    gap:14px;\r\n\r\n    align-items:center;\r\n}\r\n\r\n.kw-youtube-window{\r\n    height:100%;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n.kw-youtube-track{\r\n    display:flex;\r\n\r\n    height:100%;\r\n\r\n    transition:\r\n        transform .5s\r\n        cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.kw-youtube-slide{\r\n    min-width:100%;\r\n\r\n    height:100%;\r\n}\r\n\r\n.kw-video{\r\n    height:100%;\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0,1fr)\r\n        180px;\r\n\r\n    background:#090e14;\r\n}\r\n\r\n.kw-video-image{\r\n    position:relative;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n.kw-video-image img{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    display:block;\r\n\r\n    object-fit:cover;\r\n\r\n    transition:\r\n        transform .55s\r\n        cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.kw-video-image::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    inset:0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            to top,\r\n            rgba(0,0,0,.78),\r\n            transparent 62%\r\n        );\r\n}\r\n\r\n.kw-video-tag{\r\n    position:absolute;\r\n\r\n    z-index:5;\r\n\r\n    top:15px;\r\n    left:15px;\r\n\r\n    padding:8px 10px;\r\n\r\n    background:\r\n        rgba(0,0,0,.67);\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.10);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:8px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1.3px;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n.kw-play{\r\n    position:absolute;\r\n\r\n    z-index:5;\r\n\r\n    top:50%;\r\n    left:50%;\r\n\r\n    width:72px;\r\n    height:72px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    transform:\r\n        translate(-50%,-50%);\r\n\r\n    border:\r\n        2px solid #fff;\r\n\r\n    border-radius:50%;\r\n\r\n    background:\r\n        rgba(255,255,255,.06);\r\n\r\n    backdrop-filter:\r\n        blur(5px);\r\n}\r\n\r\n.kw-video-title{\r\n    position:absolute;\r\n\r\n    z-index:5;\r\n\r\n    left:18px;\r\n    right:18px;\r\n    bottom:18px;\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:14px;\r\n\r\n    font-weight:800;\r\n\r\n    line-height:1.4;\r\n}\r\n\r\n.kw-video-stats{\r\n    display:grid;\r\n\r\n    grid-template-rows:\r\n        repeat(3,1fr);\r\n\r\n    padding:10px 18px;\r\n\r\n    background:#0c1117;\r\n}\r\n\r\n.kw-stat{\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n\r\n    justify-content:center;\r\n\r\n    border-bottom:\r\n        1px solid rgba(255,255,255,.08);\r\n}\r\n\r\n.kw-stat:last-child{\r\n    border-bottom:0;\r\n}\r\n\r\n.kw-stat strong{\r\n    font-size:28px;\r\n\r\n    font-weight:500;\r\n}\r\n\r\n.kw-stat span{\r\n    margin-top:4px;\r\n\r\n    color:#879099;\r\n\r\n    font-size:10px;\r\n}\r\n\r\n.kw-youtube-placeholder{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    background:#11171d;\r\n\r\n    color:\r\n        rgba(255,255,255,.28);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-weight:800;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DOUBLE SLIDER\r\n========================================================= *\/\r\n\r\n.kw-double{\r\n    position:relative;\r\n\r\n    height:475px;\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        44px\r\n        minmax(0,1fr)\r\n        44px;\r\n\r\n    align-items:center;\r\n\r\n    gap:14px;\r\n}\r\n\r\n.kw-window{\r\n    height:100%;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n.kw-track{\r\n    height:100%;\r\n\r\n    display:flex;\r\n\r\n    gap:16px;\r\n\r\n    transition:\r\n        transform .5s\r\n        cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n.kw-item{\r\n    flex:\r\n        0 0\r\n        calc((100% - 16px) \/ 2);\r\n\r\n    min-width:\r\n        calc((100% - 16px) \/ 2);\r\n\r\n    height:100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ART\r\n========================================================= *\/\r\n\r\n.kw-art-item{\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n}\r\n\r\n.kw-art-image{\r\n    flex:1;\r\n\r\n    min-height:0;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#0a0d11;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.07);\r\n}\r\n\r\n.kw-art-image img{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    display:block;\r\n\r\n    object-fit:cover;\r\n\r\n    transition:\r\n        transform .55s\r\n        cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   META\r\n========================================================= *\/\r\n\r\n.kw-meta{\r\n    min-height:64px;\r\n\r\n    padding-top:13px;\r\n}\r\n\r\n.kw-meta strong{\r\n    display:block;\r\n\r\n    color:#fff;\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:13px;\r\n\r\n    font-weight:800;\r\n}\r\n\r\n.kw-meta span{\r\n    display:block;\r\n\r\n    margin-top:5px;\r\n\r\n    color:#737c84;\r\n\r\n    font-size:9px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PLACEHOLDERS\r\n========================================================= *\/\r\n\r\n.kw-placeholder{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #171d23,\r\n            #0d1217\r\n        );\r\n\r\n    color:\r\n        rgba(255,255,255,.25);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:10px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1px;\r\n\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIVE WEBSITE\r\n========================================================= *\/\r\n\r\n.kw-site-item{\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n}\r\n\r\n.kw-browser{\r\n    flex:1;\r\n\r\n    min-height:0;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#0b1016;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.07);\r\n}\r\n\r\n.kw-browser-top{\r\n    height:30px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:6px;\r\n\r\n    padding:0 8px;\r\n\r\n    background:#22282f;\r\n}\r\n\r\n.kw-browser-dots{\r\n    display:flex;\r\n\r\n    gap:5px;\r\n\r\n    flex-shrink:0;\r\n}\r\n\r\n.kw-browser-dots span{\r\n    width:5px;\r\n    height:5px;\r\n\r\n    border-radius:50%;\r\n\r\n    background:\r\n        rgba(255,255,255,.32);\r\n}\r\n\r\n.kw-domain{\r\n    min-width:0;\r\n\r\n    margin-left:3px;\r\n\r\n    overflow:hidden;\r\n\r\n    color:\r\n        rgba(255,255,255,.38);\r\n\r\n    font-size:8px;\r\n\r\n    white-space:nowrap;\r\n\r\n    text-overflow:ellipsis;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMPORTANT LIVE PREVIEW FIX\r\n========================================================= *\/\r\n\r\n.kw-live{\r\n    position:relative;\r\n\r\n    width:100%;\r\n\r\n    height:\r\n        calc(100% - 30px);\r\n\r\n    overflow:hidden;\r\n\r\n    background:#0b1117;\r\n}\r\n\r\n\r\n\/*\r\n    Virtuele desktoppagina.\r\n\r\n    De breedte blijft altijd 1280px.\r\n    JavaScript schaalt hem vervolgens naar\r\n    EXACT de beschikbare breedte van het vak.\r\n\r\n    Daardoor:\r\n    - geen mobiele layout\r\n    - geen zwart vlak rechts\r\n    - homepage gebruikt volledige breedte\r\n*\/\r\n\r\n.kw-live iframe{\r\n    position:absolute;\r\n\r\n    top:0;\r\n    left:0;\r\n\r\n    width:1280px;\r\n    height:1600px;\r\n\r\n    max-width:none;\r\n\r\n    border:0;\r\n\r\n    margin:0;\r\n    padding:0;\r\n\r\n    transform-origin:top left;\r\n\r\n    pointer-events:none;\r\n\r\n    background:#fff;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n.kw-live-lock{\r\n    position:absolute;\r\n\r\n    z-index:10;\r\n\r\n    inset:0;\r\n\r\n    background:transparent;\r\n}\r\n\r\n.kw-live-loading{\r\n    position:absolute;\r\n\r\n    z-index:9;\r\n\r\n    inset:0;\r\n\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    gap:10px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #171d23,\r\n            #0d1217\r\n        );\r\n\r\n    color:\r\n        rgba(255,255,255,.38);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:9px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1.2px;\r\n\r\n    text-transform:uppercase;\r\n\r\n    transition:\r\n        opacity .35s ease;\r\n}\r\n\r\n.kw-live-loading.hidden{\r\n    opacity:0;\r\n\r\n    pointer-events:none;\r\n}\r\n\r\n.kw-live-loader{\r\n    width:22px;\r\n    height:22px;\r\n\r\n    border-radius:50%;\r\n\r\n    border:\r\n        2px solid rgba(255,255,255,.10);\r\n\r\n    border-top-color:var(--mint);\r\n\r\n    animation:\r\n        kwLoader .8s linear infinite;\r\n}\r\n\r\n@keyframes kwLoader{\r\n    to{\r\n        transform:rotate(360deg);\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PRODUCTS\r\n========================================================= *\/\r\n\r\n.kw-product-item{\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n}\r\n\r\n.kw-product-image{\r\n    position:relative;\r\n\r\n    flex:1;\r\n\r\n    min-height:0;\r\n\r\n    overflow:hidden;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #dededc,\r\n            #c5c5c3\r\n        );\r\n}\r\n\r\n.kw-product-image img{\r\n    width:100%;\r\n    height:100%;\r\n\r\n    display:block;\r\n\r\n    object-fit:cover;\r\n\r\n    transition:\r\n        transform .55s\r\n        cubic-bezier(.2,.8,.2,1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESKTOP HOVER\r\n========================================================= *\/\r\n\r\n@media\r\n(hover:hover)\r\nand\r\n(pointer:fine)\r\nand\r\n(min-width:1025px){\r\n\r\n    .kw-video-image img:hover,\r\n    .kw-art-image img:hover,\r\n    .kw-product-image img:hover{\r\n        transform:scale(1.09);\r\n    }\r\n\r\n    .kw-browser{\r\n        transition:\r\n            transform .35s ease,\r\n            border-color .35s ease;\r\n    }\r\n\r\n    .kw-site-item:hover .kw-browser{\r\n        transform:scale(1.018);\r\n\r\n        border-color:\r\n            rgba(102,207,199,.25);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACK TOP\r\n========================================================= *\/\r\n\r\n.kw-back{\r\n    display:flex;\r\n\r\n    justify-content:center;\r\n\r\n    margin-top:58px;\r\n}\r\n\r\n.kw-back a{\r\n    display:inline-flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    min-width:285px;\r\n\r\n    min-height:52px;\r\n\r\n    padding:0 28px;\r\n\r\n    color:#fff;\r\n\r\n    text-decoration:none;\r\n\r\n    background:\r\n        rgba(255,255,255,.015);\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.15);\r\n\r\n    font-family:\"Bricolage Grotesque\",sans-serif;\r\n\r\n    font-size:10px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:2px;\r\n\r\n    text-transform:uppercase;\r\n\r\n    transition:.3s;\r\n}\r\n\r\n.kw-back a:hover{\r\n    background:\r\n        rgba(255,255,255,.06);\r\n\r\n    transform:\r\n        translateY(-3px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1024px){\r\n\r\n    .kw-grid{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .kw-panel{\r\n        height:640px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:700px){\r\n\r\n    .kw-inner{\r\n        padding:\r\n            70px\r\n            15px\r\n            60px;\r\n    }\r\n\r\n    .kw-header{\r\n        display:block;\r\n    }\r\n\r\n    .kw-header-line{\r\n        display:none;\r\n    }\r\n\r\n    .kw-header-text{\r\n        margin-top:25px;\r\n    }\r\n\r\n    .kw-panel{\r\n        height:auto;\r\n\r\n        min-height:610px;\r\n\r\n        padding:\r\n            22px\r\n            15px;\r\n    }\r\n\r\n    .kw-panel-head{\r\n        display:block;\r\n    }\r\n\r\n    .kw-button{\r\n        width:max-content;\r\n\r\n        margin-top:15px;\r\n    }\r\n\r\n    .kw-channel{\r\n        margin:\r\n            15px\r\n            0;\r\n    }\r\n\r\n    .kw-double,\r\n    .kw-youtube-slider{\r\n        grid-template-columns:\r\n            30px\r\n            minmax(0,1fr)\r\n            30px;\r\n\r\n        gap:7px;\r\n    }\r\n\r\n    .kw-arrow{\r\n        width:30px;\r\n\r\n        height:48px;\r\n    }\r\n\r\n    .kw-double{\r\n        height:420px;\r\n    }\r\n\r\n    .kw-youtube-slider{\r\n        height:420px;\r\n    }\r\n\r\n    .kw-track{\r\n        gap:8px;\r\n    }\r\n\r\n    .kw-item{\r\n        flex:\r\n            0 0\r\n            calc((100% - 8px) \/ 2);\r\n\r\n        min-width:\r\n            calc((100% - 8px) \/ 2);\r\n    }\r\n\r\n    .kw-video{\r\n        grid-template-columns:1fr;\r\n\r\n        grid-template-rows:\r\n            1fr\r\n            80px;\r\n    }\r\n\r\n    .kw-video-stats{\r\n        grid-template-columns:\r\n            repeat(3,1fr);\r\n\r\n        grid-template-rows:1fr;\r\n\r\n        padding:0;\r\n    }\r\n\r\n    .kw-stat{\r\n        align-items:center;\r\n\r\n        padding:0;\r\n\r\n        border-bottom:0;\r\n    }\r\n\r\n    .kw-stat:not(:last-child){\r\n        border-right:\r\n            1px solid rgba(255,255,255,.08);\r\n    }\r\n\r\n    .kw-stat strong{\r\n        font-size:17px;\r\n    }\r\n\r\n    .kw-stat span{\r\n        font-size:7px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<section class=\"kevin-work\" id=\"werk\">\r\n\r\n<div class=\"kw-inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         HEADER\r\n    ====================================================== -->\r\n\r\n    <div class=\"kw-header\">\r\n\r\n        <div>\r\n\r\n            <div class=\"kw-kicker\">\r\n                SELECTED WORK\r\n            <\/div>\r\n\r\n            <h2 class=\"kw-title\">\r\n                MIJN\r\n                <span>werk.<\/span>\r\n            <\/h2>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"kw-header-line\"><\/div>\r\n\r\n\r\n        <div class=\"kw-header-text\">\r\n\r\n            Vier disciplines.<br>\r\n            Vier werelden waarin<br>\r\n            creativiteit en functionaliteit<br>\r\n            samenkomen.\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         GRID\r\n    ====================================================== -->\r\n\r\n    <div class=\"kw-grid\">\r\n\r\n\r\n        <!-- =================================================\r\n             01 YOUTUBE\r\n        ================================================== -->\r\n\r\n        <section class=\"kw-panel kw-youtube\">\r\n\r\n            <div class=\"kw-panel-head\">\r\n\r\n                <div>\r\n\r\n                    <div class=\"kw-number\">\r\n                        01 \/ 04\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        YOUTUBE\r\n                    <\/h3>\r\n\r\n                    <div class=\"kw-sub\">\r\n                        stories in motion.\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <a\r\n                    href=\"#\"\r\n                    onclick=\"return false;\"\r\n                    class=\"kw-button\"\r\n                >\r\n                    ALLE KANALEN \u2192\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"kw-channel\">\r\n\r\n                <small>\r\n                    CURRENT CHANNEL\r\n                <\/small>\r\n\r\n                <strong>\r\n                    Grand Theft Auto Clips\r\n                <\/strong>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n                class=\"kw-youtube-slider\"\r\n                data-kw-youtube\r\n            >\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-youtube-prev\"\r\n                    aria-label=\"Vorig YouTube kanaal\"\r\n                >\r\n                    \u2039\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-youtube-window\">\r\n\r\n                    <div class=\"kw-youtube-track\">\r\n\r\n\r\n                        <!-- YOUTUBE 01 -->\r\n\r\n                        <div class=\"kw-youtube-slide\">\r\n\r\n                            <div class=\"kw-video\">\r\n\r\n\r\n                                <div class=\"kw-video-image\">\r\n\r\n                                    <img decoding=\"async\"\r\n                                        src=\"https:\/\/kevintermaat.nl\/wp-content\/uploads\/2026\/08\/Stats.png\"\r\n                                        alt=\"Best presterende video\"\r\n                                    >\r\n\r\n\r\n                                    <div class=\"kw-video-tag\">\r\n                                        BEST PRESTERENDE VIDEO\r\n                                    <\/div>\r\n\r\n\r\n                                    <div class=\"kw-play\">\r\n                                        \u25b6\r\n                                    <\/div>\r\n\r\n\r\n                                    <div class=\"kw-video-title\">\r\n                                        Titel van de best presterende video\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n\r\n\r\n                                <div class=\"kw-video-stats\">\r\n\r\n                                    <div class=\"kw-stat\">\r\n                                        <strong>\u2014<\/strong>\r\n                                        <span>Subscribers<\/span>\r\n                                    <\/div>\r\n\r\n                                    <div class=\"kw-stat\">\r\n                                        <strong>\u2014<\/strong>\r\n                                        <span>Views<\/span>\r\n                                    <\/div>\r\n\r\n                                    <div class=\"kw-stat\">\r\n                                        <strong>\u2014<\/strong>\r\n                                        <span>Videos<\/span>\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <!-- YOUTUBE 02 -->\r\n\r\n                        <div class=\"kw-youtube-slide\">\r\n\r\n                            <div class=\"kw-youtube-placeholder\">\r\n                                YOUTUBE KANAAL 02\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <!-- YOUTUBE 03 -->\r\n\r\n                        <div class=\"kw-youtube-slide\">\r\n\r\n                            <div class=\"kw-youtube-placeholder\">\r\n                                YOUTUBE KANAAL 03\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <!-- YOUTUBE 04 -->\r\n\r\n                        <div class=\"kw-youtube-slide\">\r\n\r\n                            <div class=\"kw-youtube-placeholder\">\r\n                                YOUTUBE KANAAL 04\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-youtube-next\"\r\n                    aria-label=\"Volgend YouTube kanaal\"\r\n                >\r\n                    \u203a\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-dots\"><\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/section>\r\n\r\n\r\n        <!-- =================================================\r\n             02 KUNST\r\n        ================================================== -->\r\n\r\n        <section class=\"kw-panel kw-art\">\r\n\r\n            <div class=\"kw-panel-head\">\r\n\r\n                <div>\r\n\r\n                    <div class=\"kw-number\">\r\n                        02 \/ 04\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        KUNST\r\n                    <\/h3>\r\n\r\n                    <div class=\"kw-sub\">\r\n                        digital museum.\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <a\r\n                    href=\"#\"\r\n                    onclick=\"return false;\"\r\n                    class=\"kw-button\"\r\n                >\r\n                    DIGITAAL MUSEUM \u2192\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n                class=\"kw-double\"\r\n                data-kw-double\r\n            >\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-prev\"\r\n                    aria-label=\"Vorige kunstwerken\"\r\n                >\r\n                    \u2039\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-window\">\r\n\r\n                    <div class=\"kw-track\">\r\n\r\n\r\n                        <article class=\"kw-item kw-art-item\">\r\n\r\n                            <div class=\"kw-art-image\">\r\n\r\n                                <img decoding=\"async\"\r\n                                    src=\"https:\/\/kevintermaat.nl\/wp-content\/uploads\/2026\/08\/IMG_6288-scaled.jpg\"\r\n                                    alt=\"Artwork 01\"\r\n                                >\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Artwork No. 01\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Kevin ter Maat\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <article class=\"kw-item kw-art-item\">\r\n\r\n                            <div class=\"kw-art-image\">\r\n\r\n                                <div class=\"kw-placeholder\">\r\n                                    ARTWORK 02\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Artwork No. 02\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Kevin ter Maat\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <article class=\"kw-item kw-art-item\">\r\n\r\n                            <div class=\"kw-art-image\">\r\n\r\n                                <div class=\"kw-placeholder\">\r\n                                    ARTWORK 03\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Artwork No. 03\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Kevin ter Maat\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <article class=\"kw-item kw-art-item\">\r\n\r\n                            <div class=\"kw-art-image\">\r\n\r\n                                <div class=\"kw-placeholder\">\r\n                                    ARTWORK 04\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Artwork No. 04\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Kevin ter Maat\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-next\"\r\n                    aria-label=\"Volgende kunstwerken\"\r\n                >\r\n                    \u203a\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-dots\"><\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/section>\r\n\r\n\r\n        <!-- =================================================\r\n             03 WEBSITES\r\n        ================================================== -->\r\n\r\n        <section class=\"kw-panel kw-websites\">\r\n\r\n            <div class=\"kw-panel-head\">\r\n\r\n                <div>\r\n\r\n                    <div class=\"kw-number\">\r\n                        03 \/ 04\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        WEBSITES\r\n                    <\/h3>\r\n\r\n                    <div class=\"kw-sub\">\r\n                        built for the web.\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <a\r\n                    href=\"#\"\r\n                    onclick=\"return false;\"\r\n                    class=\"kw-button\"\r\n                >\r\n                    ALLE WEBSITES \u2192\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n                class=\"kw-double\"\r\n                data-kw-double\r\n            >\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-prev\"\r\n                    aria-label=\"Vorige websites\"\r\n                >\r\n                    \u2039\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-window\">\r\n\r\n                    <div class=\"kw-track\">\r\n\r\n\r\n                        <!-- =================================================\r\n                             GTA CLIPS\r\n                        ================================================== -->\r\n\r\n                        <article class=\"kw-item kw-site-item\">\r\n\r\n                            <div class=\"kw-browser\">\r\n\r\n                                <div class=\"kw-browser-top\">\r\n\r\n                                    <div class=\"kw-browser-dots\">\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                    <\/div>\r\n\r\n                                    <div class=\"kw-domain\">\r\n                                        grandtheftautoclips.com\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n\r\n\r\n                                <div class=\"kw-live\">\r\n\r\n                                    <div class=\"kw-live-loading\">\r\n\r\n                                        <div class=\"kw-live-loader\"><\/div>\r\n\r\n                                        WEBSITE LADEN\r\n\r\n                                    <\/div>\r\n\r\n\r\n                                    <iframe\r\n                                        src=\"https:\/\/grandtheftautoclips.com\/\"\r\n                                        title=\"Grand Theft Auto Clips\"\r\n                                        scrolling=\"no\"\r\n                                        loading=\"lazy\"\r\n                                        tabindex=\"-1\"\r\n                                    ><\/iframe>\r\n\r\n\r\n                                    <div\r\n                                        class=\"kw-live-lock\"\r\n                                        aria-hidden=\"true\"\r\n                                    ><\/div>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Grand Theft Auto Clips\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    grandtheftautoclips.com\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <!-- =================================================\r\n                             ACHTERHOEKBALLONVAARTEN\r\n                        ================================================== -->\r\n\r\n                        <article class=\"kw-item kw-site-item\">\r\n\r\n                            <div class=\"kw-browser\">\r\n\r\n                                <div class=\"kw-browser-top\">\r\n\r\n                                    <div class=\"kw-browser-dots\">\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                    <\/div>\r\n\r\n                                    <div class=\"kw-domain\">\r\n                                        achterhoekballonvaarten.nl\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n\r\n\r\n                                <div class=\"kw-live\">\r\n\r\n                                    <div class=\"kw-live-loading\">\r\n\r\n                                        <div class=\"kw-live-loader\"><\/div>\r\n\r\n                                        WEBSITE LADEN\r\n\r\n                                    <\/div>\r\n\r\n\r\n                                    <iframe\r\n                                        src=\"https:\/\/achterhoekballonvaarten.nl\/\"\r\n                                        title=\"Achterhoek Ballonvaarten\"\r\n                                        scrolling=\"no\"\r\n                                        loading=\"lazy\"\r\n                                        tabindex=\"-1\"\r\n                                    ><\/iframe>\r\n\r\n\r\n                                    <div\r\n                                        class=\"kw-live-lock\"\r\n                                        aria-hidden=\"true\"\r\n                                    ><\/div>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Achterhoek Ballonvaarten\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    achterhoekballonvaarten.nl\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <!-- =================================================\r\n                             WAZOOPINS\r\n                        ================================================== -->\r\n\r\n                        <article class=\"kw-item kw-site-item\">\r\n\r\n                            <div class=\"kw-browser\">\r\n\r\n                                <div class=\"kw-browser-top\">\r\n\r\n                                    <div class=\"kw-browser-dots\">\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                    <\/div>\r\n\r\n                                    <div class=\"kw-domain\">\r\n                                        wazoopins.com\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n\r\n\r\n                                <div class=\"kw-live\">\r\n\r\n                                    <div class=\"kw-live-loading\">\r\n\r\n                                        <div class=\"kw-live-loader\"><\/div>\r\n\r\n                                        WEBSITE LADEN\r\n\r\n                                    <\/div>\r\n\r\n\r\n                                    <iframe\r\n                                        src=\"https:\/\/wazoopins.com\/\"\r\n                                        title=\"Wazoo Pins\"\r\n                                        scrolling=\"no\"\r\n                                        loading=\"lazy\"\r\n                                        tabindex=\"-1\"\r\n                                    ><\/iframe>\r\n\r\n\r\n                                    <div\r\n                                        class=\"kw-live-lock\"\r\n                                        aria-hidden=\"true\"\r\n                                    ><\/div>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Wazoo Pins\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    wazoopins.com\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <!-- =================================================\r\n                             WEBSITE 04\r\n                        ================================================== -->\r\n\r\n                        <article class=\"kw-item kw-site-item\">\r\n\r\n                            <div class=\"kw-browser\">\r\n\r\n                                <div class=\"kw-browser-top\">\r\n\r\n                                    <div class=\"kw-browser-dots\">\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                        <span><\/span>\r\n                                    <\/div>\r\n\r\n                                    <div class=\"kw-domain\">\r\n                                        website 04\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n\r\n\r\n                                <div class=\"kw-live\">\r\n\r\n                                    <div class=\"kw-placeholder\">\r\n                                        WEBSITE 04\r\n                                    <\/div>\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Website No. 04\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Later toevoegen\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-next\"\r\n                    aria-label=\"Volgende websites\"\r\n                >\r\n                    \u203a\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-dots\"><\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/section>\r\n\r\n\r\n        <!-- =================================================\r\n             04 PRODUCTEN\r\n        ================================================== -->\r\n\r\n        <section class=\"kw-panel kw-products\">\r\n\r\n            <div class=\"kw-panel-head\">\r\n\r\n                <div>\r\n\r\n                    <div class=\"kw-number\">\r\n                        04 \/ 04\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        PRODUCTEN\r\n                    <\/h3>\r\n\r\n                    <div class=\"kw-sub\">\r\n                        ideas made physical.\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <a\r\n                    href=\"#\"\r\n                    onclick=\"return false;\"\r\n                    class=\"kw-button\"\r\n                >\r\n                    ALLE PRODUCTEN \u2192\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n                class=\"kw-double\"\r\n                data-kw-double\r\n            >\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-prev\"\r\n                    aria-label=\"Vorige producten\"\r\n                >\r\n                    \u2039\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-window\">\r\n\r\n                    <div class=\"kw-track\">\r\n\r\n\r\n                        <article class=\"kw-item kw-product-item\">\r\n\r\n                            <div class=\"kw-product-image\">\r\n\r\n                                <img decoding=\"async\"\r\n                                    src=\"https:\/\/kevintermaat.nl\/wp-content\/uploads\/2026\/08\/Schermafbeelding-2026-08-29-225940.png\"\r\n                                    alt=\"Product 01\"\r\n                                >\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Product No. 01\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Productontwikkeling\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <article class=\"kw-item kw-product-item\">\r\n\r\n                            <div class=\"kw-product-image\">\r\n\r\n                                <div class=\"kw-placeholder\">\r\n                                    PRODUCT 02\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Product No. 02\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Productontwikkeling\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <article class=\"kw-item kw-product-item\">\r\n\r\n                            <div class=\"kw-product-image\">\r\n\r\n                                <div class=\"kw-placeholder\">\r\n                                    PRODUCT 03\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Product No. 03\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Productontwikkeling\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n\r\n                        <article class=\"kw-item kw-product-item\">\r\n\r\n                            <div class=\"kw-product-image\">\r\n\r\n                                <div class=\"kw-placeholder\">\r\n                                    PRODUCT 04\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div class=\"kw-meta\">\r\n\r\n                                <strong>\r\n                                    Product No. 04\r\n                                <\/strong>\r\n\r\n                                <span>\r\n                                    Productontwikkeling\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/article>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <button\r\n                    class=\"kw-arrow kw-next\"\r\n                    aria-label=\"Volgende producten\"\r\n                >\r\n                    \u203a\r\n                <\/button>\r\n\r\n\r\n                <div class=\"kw-dots\"><\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/section>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         BACK TO TOP\r\n    ====================================================== -->\r\n\r\n    <div class=\"kw-back\">\r\n\r\n        <a href=\"#top\">\r\n            TERUG NAAR BOVEN \u2191\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\",function(){\r\n\r\n    const workSection =\r\n        document.querySelector(\".kevin-work\");\r\n\r\n    if(!workSection){\r\n        return;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LIVE WEBSITE SCALE\r\n    ===================================================== *\/\r\n\r\n    function scaleLiveSites(){\r\n\r\n        workSection\r\n        .querySelectorAll(\".kw-live\")\r\n        .forEach(function(container){\r\n\r\n            const iframe =\r\n                container.querySelector(\"iframe\");\r\n\r\n            if(!iframe){\r\n                return;\r\n            }\r\n\r\n\r\n            \/*\r\n             * Dit is de desktop viewport\r\n             * die de externe website krijgt.\r\n             *\/\r\n\r\n            const desktopWidth = 1280;\r\n\r\n\r\n            \/*\r\n             * ALLEEN breedte gebruiken.\r\n             *\r\n             * Dus:\r\n             *\r\n             * preview breedte 500px\r\n             * 500 \/ 1280 = 0.390625\r\n             *\r\n             * iframe wordt exact zover\r\n             * teruggeschaald.\r\n             *\/\r\n\r\n            const scale =\r\n                container.clientWidth \/\r\n                desktopWidth;\r\n\r\n\r\n            iframe.style.transform =\r\n                \"scale(\" +\r\n                scale +\r\n                \")\";\r\n\r\n\r\n            \/*\r\n             * Expliciet linksboven houden.\r\n             *\/\r\n\r\n            iframe.style.left =\r\n                \"0px\";\r\n\r\n            iframe.style.top =\r\n                \"0px\";\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       IFRAME LOADING\r\n    ===================================================== *\/\r\n\r\n    workSection\r\n    .querySelectorAll(\".kw-live iframe\")\r\n    .forEach(function(iframe){\r\n\r\n        iframe.addEventListener(\r\n            \"load\",\r\n            function(){\r\n\r\n                const parent =\r\n                    iframe.parentElement;\r\n\r\n\r\n                const loading =\r\n                    parent.querySelector(\r\n                        \".kw-live-loading\"\r\n                    );\r\n\r\n\r\n                scaleLiveSites();\r\n\r\n\r\n                if(loading){\r\n\r\n                    loading.classList.add(\r\n                        \"hidden\"\r\n                    );\r\n\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n    });\r\n\r\n\r\n    \/*\r\n     * Fallback zodat het laadscherm\r\n     * niet eeuwig blijft staan.\r\n     *\/\r\n\r\n    window.setTimeout(\r\n        function(){\r\n\r\n            workSection\r\n            .querySelectorAll(\r\n                \".kw-live-loading\"\r\n            )\r\n            .forEach(function(loading){\r\n\r\n                loading.classList.add(\r\n                    \"hidden\"\r\n                );\r\n\r\n            });\r\n\r\n        },\r\n        5000\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       YOUTUBE SLIDER\r\n    ===================================================== *\/\r\n\r\n    workSection\r\n    .querySelectorAll(\"[data-kw-youtube]\")\r\n    .forEach(function(slider){\r\n\r\n        const track =\r\n            slider.querySelector(\r\n                \".kw-youtube-track\"\r\n            );\r\n\r\n        const slides =\r\n            Array.from(\r\n                slider.querySelectorAll(\r\n                    \".kw-youtube-slide\"\r\n                )\r\n            );\r\n\r\n        const prev =\r\n            slider.querySelector(\r\n                \".kw-youtube-prev\"\r\n            );\r\n\r\n        const next =\r\n            slider.querySelector(\r\n                \".kw-youtube-next\"\r\n            );\r\n\r\n        const dotsWrap =\r\n            slider.querySelector(\r\n                \".kw-dots\"\r\n            );\r\n\r\n\r\n        let current = 0;\r\n\r\n\r\n        \/* CREATE DOTS *\/\r\n\r\n        slides.forEach(\r\n            function(slide,index){\r\n\r\n                const dot =\r\n                    document.createElement(\r\n                        \"button\"\r\n                    );\r\n\r\n                dot.className =\r\n                    \"kw-dot\";\r\n\r\n\r\n                if(index === 0){\r\n\r\n                    dot.classList.add(\r\n                        \"active\"\r\n                    );\r\n\r\n                }\r\n\r\n\r\n                dot.addEventListener(\r\n                    \"click\",\r\n                    function(){\r\n\r\n                        current =\r\n                            index;\r\n\r\n                        updateYoutube();\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                dotsWrap.appendChild(\r\n                    dot\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        function updateYoutube(){\r\n\r\n            track.style.transform =\r\n                \"translateX(-\" +\r\n                (\r\n                    current *\r\n                    100\r\n                )\r\n                +\r\n                \"%)\";\r\n\r\n\r\n            dotsWrap\r\n            .querySelectorAll(\".kw-dot\")\r\n            .forEach(\r\n                function(dot,index){\r\n\r\n                    dot.classList.toggle(\r\n                        \"active\",\r\n                        index === current\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n\r\n\r\n        prev.addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n                current--;\r\n\r\n                if(current < 0){\r\n\r\n                    current =\r\n                        slides.length - 1;\r\n\r\n                }\r\n\r\n                updateYoutube();\r\n\r\n            }\r\n        );\r\n\r\n\r\n        next.addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n                current++;\r\n\r\n                if(\r\n                    current >=\r\n                    slides.length\r\n                ){\r\n\r\n                    current = 0;\r\n\r\n                }\r\n\r\n                updateYoutube();\r\n\r\n            }\r\n        );\r\n\r\n\r\n        updateYoutube();\r\n\r\n    });\r\n\r\n\r\n    \/* =====================================================\r\n       DOUBLE SLIDERS\r\n       ART \/ WEBSITES \/ PRODUCTS\r\n    ===================================================== *\/\r\n\r\n    workSection\r\n    .querySelectorAll(\"[data-kw-double]\")\r\n    .forEach(function(slider){\r\n\r\n        const windowElement =\r\n            slider.querySelector(\r\n                \".kw-window\"\r\n            );\r\n\r\n        const track =\r\n            slider.querySelector(\r\n                \".kw-track\"\r\n            );\r\n\r\n        const items =\r\n            Array.from(\r\n                track.children\r\n            );\r\n\r\n        const prev =\r\n            slider.querySelector(\r\n                \".kw-prev\"\r\n            );\r\n\r\n        const next =\r\n            slider.querySelector(\r\n                \".kw-next\"\r\n            );\r\n\r\n        const dotsWrap =\r\n            slider.querySelector(\r\n                \".kw-dots\"\r\n            );\r\n\r\n\r\n        let current = 0;\r\n\r\n\r\n        function gapSize(){\r\n\r\n            return (\r\n                window.innerWidth <= 700\r\n                ?\r\n                8\r\n                :\r\n                16\r\n            );\r\n\r\n        }\r\n\r\n\r\n        function maxIndex(){\r\n\r\n            \/*\r\n             * Altijd twee items zichtbaar.\r\n             *\r\n             * 4 items:\r\n             *\r\n             * 01 + 02\r\n             * 02 + 03\r\n             * 03 + 04\r\n             *\/\r\n\r\n            return Math.max(\r\n                0,\r\n                items.length - 2\r\n            );\r\n\r\n        }\r\n\r\n\r\n        function createDots(){\r\n\r\n            dotsWrap.innerHTML =\r\n                \"\";\r\n\r\n\r\n            for(\r\n                let i = 0;\r\n                i <= maxIndex();\r\n                i++\r\n            ){\r\n\r\n                const dot =\r\n                    document.createElement(\r\n                        \"button\"\r\n                    );\r\n\r\n\r\n                dot.className =\r\n                    \"kw-dot\";\r\n\r\n\r\n                if(i === current){\r\n\r\n                    dot.classList.add(\r\n                        \"active\"\r\n                    );\r\n\r\n                }\r\n\r\n\r\n                dot.addEventListener(\r\n                    \"click\",\r\n                    function(){\r\n\r\n                        current = i;\r\n\r\n                        updateSlider();\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                dotsWrap.appendChild(\r\n                    dot\r\n                );\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        function updateSlider(){\r\n\r\n            const gap =\r\n                gapSize();\r\n\r\n\r\n            const width =\r\n                windowElement.clientWidth;\r\n\r\n\r\n            const itemWidth =\r\n                (\r\n                    width -\r\n                    gap\r\n                )\r\n                \/\r\n                2;\r\n\r\n\r\n            const distance =\r\n                current *\r\n                (\r\n                    itemWidth +\r\n                    gap\r\n                );\r\n\r\n\r\n            track.style.transform =\r\n                \"translateX(-\" +\r\n                distance +\r\n                \"px)\";\r\n\r\n\r\n            dotsWrap\r\n            .querySelectorAll(\r\n                \".kw-dot\"\r\n            )\r\n            .forEach(\r\n                function(dot,index){\r\n\r\n                    dot.classList.toggle(\r\n                        \"active\",\r\n                        index === current\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n            \/*\r\n             * Heel belangrijk:\r\n             * opnieuw websites schalen nadat\r\n             * de slider verplaatst is.\r\n             *\/\r\n\r\n            window.requestAnimationFrame(\r\n                scaleLiveSites\r\n            );\r\n\r\n        }\r\n\r\n\r\n        prev.addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n                current--;\r\n\r\n\r\n                if(current < 0){\r\n\r\n                    current =\r\n                        maxIndex();\r\n\r\n                }\r\n\r\n\r\n                updateSlider();\r\n\r\n            }\r\n        );\r\n\r\n\r\n        next.addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n                current++;\r\n\r\n\r\n                if(\r\n                    current >\r\n                    maxIndex()\r\n                ){\r\n\r\n                    current = 0;\r\n\r\n                }\r\n\r\n\r\n                updateSlider();\r\n\r\n            }\r\n        );\r\n\r\n\r\n        createDots();\r\n        updateSlider();\r\n\r\n    });\r\n\r\n\r\n    \/* =====================================================\r\n       RESIZE\r\n    ===================================================== *\/\r\n\r\n    let resizeTimer;\r\n\r\n\r\n    window.addEventListener(\r\n        \"resize\",\r\n        function(){\r\n\r\n            clearTimeout(\r\n                resizeTimer\r\n            );\r\n\r\n\r\n            resizeTimer =\r\n                setTimeout(\r\n                    function(){\r\n\r\n                        scaleLiveSites();\r\n\r\n\r\n                        workSection\r\n                        .querySelectorAll(\r\n                            \"[data-kw-double]\"\r\n                        )\r\n                        .forEach(\r\n                            function(slider){\r\n\r\n                                \/*\r\n                                 * Trigger update door\r\n                                 * huidige actieve dot\r\n                                 * opnieuw aan te klikken.\r\n                                 *\/\r\n\r\n                                const activeDot =\r\n                                    slider.querySelector(\r\n                                        \".kw-dot.active\"\r\n                                    );\r\n\r\n\r\n                                if(activeDot){\r\n\r\n                                    activeDot.click();\r\n\r\n                                }\r\n\r\n                            }\r\n                        );\r\n\r\n                    },\r\n                    100\r\n                );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* FIRST SCALE *\/\r\n\r\n    scaleLiveSites();\r\n\r\n});\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kevin ter Maat WERK OVER MIJ DIENSTEN CONTACT CREATIVE PORTFOLIO No. 01 CREATIVITEIT zonder grenzen. Ik ontwerp, ontwikkel en cre\u00eber. Van websites tot video&#8217;s, van producten tot kunst. Idee\u00ebn omzetten in iets echts. BEKIJK MIJN WERK \u2192 WEBSITES KUNST YOUTUBE PRODUCTEN explore \/ create selected pieces ABOUT EVEN VOORSTELLEN WIE BEN IK? maker, ontwerper &#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":46,"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/kevintermaat.nl\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}