{"id":24,"date":"2026-09-01T10:01:32","date_gmt":"2026-09-01T10:01:32","guid":{"rendered":"https:\/\/ldlwebsites.com\/?page_id=24"},"modified":"2026-09-01T10:52:02","modified_gmt":"2026-09-01T10:52:02","slug":"homepage","status":"publish","type":"page","link":"https:\/\/ldlwebsites.com\/","title":{"rendered":"homepage"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n\n LDL Websites \u2014 Websites vanaf \u20ac450<\/title>\n\n <meta\n name=\"description\"\n content=\"Professionele websites vanaf \u20ac450. Volledig gebouwd, ge\u00efnstalleerd, mobiel geoptimaliseerd en voorbereid voor Google.\"\n >\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap\"\n rel=\"stylesheet\"\n >\n\n <style>\n\n \/* ======================================================\n WORDPRESS \/ ELEMENTOR\n HIDE PAGE TITLE + SITE TITLE + THEME HEADER + FOOTER\n ====================================================== *\/\n\n .entry-title,\n .page-title,\n .site-title,\n .site-description,\n .wp-block-post-title,\n .elementor-page-title,\n .ast-page-title,\n .page-header,\n .entry-header,\n .site-header,\n header.site-header,\n #masthead,\n #site-header,\n .elementor-location-header,\n .theme-page-header,\n .breadcrumbs,\n .breadcrumb,\n #breadcrumbs,\n .site-footer,\n footer.site-footer,\n #colophon,\n .elementor-location-footer {\n display: none !important;\n }\n\n body,\n .site,\n .site-content,\n .content-area,\n .entry-content,\n main,\n #content,\n #primary {\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n max-width: 100% !important;\n }\n\n .entry-content > * {\n max-width: none !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n\n\n \/* ======================================================\n ROOT\n ====================================================== *\/\n\n :root {\n --bg: #050607;\n --panel: #0a0b0d;\n --panel2: #0d0f12;\n --text: #f3f4f5;\n --muted: #7e848d;\n --line: rgba(255,255,255,0.08);\n --blue: #0b6cff;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n min-height: 100vh;\n font-family: \"DM Sans\", sans-serif;\n color: var(--text);\n background: #050607;\n overflow-x: hidden;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n\n \/* ======================================================\n BACKGROUND GRAIN\n ====================================================== *\/\n\n .grain {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 100;\n opacity: 0.025;\n\n background-image:\n url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\n }\n\n\n \/* ======================================================\n PAGE SHELL\n ====================================================== *\/\n\n .site-shell {\n width: calc(100% - 20px);\n margin: 10px;\n\n border-radius: 34px 34px 0 0;\n overflow: hidden;\n\n border: 1px solid rgba(255,255,255,0.07);\n\n background: #050607;\n\n position: relative;\n }\n\n\n \/* ======================================================\n MINI NAV\n ====================================================== *\/\n\n .topbar {\n height: 68px;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 0 5.5%;\n\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n z-index: 20;\n\n border-bottom: 1px solid rgba(255,255,255,0.06);\n\n background: rgba(2,9,19,0.22);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: 9px;\n\n font-size: 13px;\n font-weight: 600;\n }\n\n .brand-mark {\n width: 24px;\n height: 24px;\n\n border: 1px solid rgba(255,255,255,0.35);\n border-radius: 50%;\n\n display: grid;\n place-items: center;\n\n font-size: 9px;\n }\n\n .top-note {\n color: rgba(255,255,255,0.55);\n font-size: 10px;\n letter-spacing: 0.04em;\n }\n\n\n \/* ======================================================\n HERO\n ====================================================== *\/\n\n .hero {\n min-height: 92vh;\n\n position: relative;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n\n padding: 120px 25px 90px;\n\n overflow: hidden;\n }\n\n\n .hero-image {\n position: absolute;\n inset: 0;\n\n background-image:\n linear-gradient(\n 180deg,\n rgba(0,18,45,0.46) 0%,\n rgba(0,30,67,0.44) 38%,\n rgba(4,7,10,0.93) 100%\n ),\n linear-gradient(\n 90deg,\n rgba(0,30,80,0.20),\n rgba(0,80,170,0.18)\n ),\n url(\"https:\/\/ldlwebsites.com\/wp-content\/uploads\/2026\/09\/Coding-Workspace-Close-Up.png\");\n\n background-size: cover;\n background-position: center;\n\n filter:\n saturate(0.72)\n contrast(1.05);\n\n transform: scale(1.03);\n\n animation: heroZoom 16s ease-in-out infinite alternate;\n }\n\n\n @keyframes heroZoom {\n from {\n transform: scale(1.03);\n }\n\n to {\n transform: scale(1.08);\n }\n }\n\n\n .hero-glow {\n position: absolute;\n\n width: 850px;\n height: 650px;\n\n top: -230px;\n left: 50%;\n\n transform: translateX(-50%);\n\n border-radius: 50%;\n\n background: rgba(0,113,255,0.25);\n\n filter: blur(130px);\n\n pointer-events: none;\n }\n\n\n .hero-content {\n position: relative;\n z-index: 5;\n\n max-width: 900px;\n }\n\n\n .label {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n padding: 7px 11px;\n\n border: 1px solid rgba(255,255,255,0.10);\n border-radius: 100px;\n\n background: rgba(7,10,15,0.35);\n backdrop-filter: blur(10px);\n\n color: rgba(255,255,255,0.68);\n\n font-size: 9px;\n\n text-transform: uppercase;\n letter-spacing: 0.08em;\n\n margin-bottom: 25px;\n }\n\n\n .label-dot {\n width: 5px;\n height: 5px;\n\n border-radius: 50%;\n\n background: #49e27a;\n\n box-shadow: 0 0 12px rgba(73,226,122,0.7);\n }\n\n\n .hero h1 {\n font-family: \"Instrument Serif\", serif;\n\n font-size: clamp(62px, 7.5vw, 118px);\n\n font-weight: 400;\n\n line-height: 0.88;\n\n letter-spacing: -0.045em;\n\n text-shadow: 0 15px 50px rgba(0,0,0,0.35);\n }\n\n\n .hero h1 span {\n color: rgba(205,219,239,0.78);\n }\n\n\n .hero-copy {\n max-width: 560px;\n\n margin: 28px auto 0;\n\n color: rgba(255,255,255,0.70);\n\n font-size: 13px;\n line-height: 1.65;\n }\n\n\n .contact-button {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n\n margin-top: 30px;\n\n padding: 13px 18px;\n\n background: #f3f3ef;\n color: #060708;\n\n border-radius: 100px;\n\n font-size: 11px;\n font-weight: 600;\n\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n }\n\n\n .contact-button:hover {\n transform: translateY(-3px);\n\n box-shadow:\n 0 15px 40px rgba(0,0,0,0.35),\n 0 0 30px rgba(255,255,255,0.08);\n }\n\n\n .contact-icon {\n width: 22px;\n height: 22px;\n\n display: grid;\n place-items: center;\n\n background: #0b0b0b;\n color: white;\n\n border-radius: 50%;\n\n font-size: 10px;\n }\n\n\n \/* ======================================================\n HERO BOTTOM\n ====================================================== *\/\n\n .hero-bottom {\n position: absolute;\n\n bottom: 28px;\n left: 50%;\n\n transform: translateX(-50%);\n\n z-index: 7;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n gap: 28px;\n\n width: 90%;\n\n color: rgba(255,255,255,0.42);\n\n font-size: 9px;\n\n text-transform: uppercase;\n\n letter-spacing: 0.06em;\n }\n\n\n \/* ======================================================\n INTRO\n ====================================================== *\/\n\n .intro {\n padding: 130px 6% 95px;\n\n text-align: center;\n\n background: #050607;\n }\n\n\n .section-label {\n display: inline-block;\n\n margin-bottom: 22px;\n\n color: #555a61;\n\n font-size: 9px;\n\n text-transform: uppercase;\n\n letter-spacing: 0.1em;\n }\n\n\n .intro h2 {\n max-width: 760px;\n\n margin: 0 auto;\n\n font-family: \"Instrument Serif\", serif;\n\n font-size: clamp(42px, 5vw, 72px);\n\n line-height: 0.98;\n\n font-weight: 400;\n\n letter-spacing: -0.03em;\n }\n\n\n .intro h2 span {\n color: #747c87;\n }\n\n\n \/* ======================================================\n SERVICES\n ====================================================== *\/\n\n .services {\n width: min(1050px, calc(100% - 40px));\n\n margin: 0 auto;\n\n display: grid;\n\n grid-template-columns: repeat(3,1fr);\n\n gap: 12px;\n\n padding-bottom: 120px;\n }\n\n\n .service {\n min-height: 235px;\n\n padding: 27px;\n\n border: 1px solid rgba(255,255,255,0.07);\n\n border-radius: 20px;\n\n background:\n linear-gradient(\n 145deg,\n rgba(255,255,255,0.035),\n rgba(255,255,255,0.008)\n );\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n transform 0.35s ease,\n border-color 0.35s ease,\n background 0.35s ease;\n }\n\n\n .service:hover {\n transform: translateY(-6px);\n\n border-color: rgba(255,255,255,0.15);\n\n background:\n linear-gradient(\n 145deg,\n rgba(0,92,255,0.08),\n rgba(255,255,255,0.015)\n );\n }\n\n\n .service-icon {\n width: 34px;\n height: 34px;\n\n display: grid;\n place-items: center;\n\n border-radius: 9px;\n\n border: 1px solid rgba(255,255,255,0.08);\n\n color: #7d8da2;\n\n background: rgba(255,255,255,0.02);\n }\n\n\n .service h3 {\n font-family: \"Instrument Serif\", serif;\n\n font-size: 28px;\n\n font-weight: 400;\n\n margin-bottom: 8px;\n }\n\n\n .service p {\n color: #6d737b;\n\n font-size: 11px;\n\n line-height: 1.6;\n }\n\n\n \/* ======================================================\n FEATURE IMAGE\n ====================================================== *\/\n\n .visual-section {\n width: min(1050px, calc(100% - 40px));\n\n height: 520px;\n\n margin: 0 auto 130px;\n\n position: relative;\n\n border: 1px solid rgba(255,255,255,0.07);\n\n border-radius: 24px;\n\n overflow: hidden;\n }\n\n\n .visual-image {\n position: absolute;\n inset: 0;\n\n background:\n linear-gradient(\n 90deg,\n rgba(1,5,12,0.85) 0%,\n rgba(0,35,90,0.42) 55%,\n rgba(0,65,140,0.36) 100%\n ),\n url(\"https:\/\/ldlwebsites.com\/wp-content\/uploads\/2026\/09\/Coding-Workspace-Close-Up.png\");\n\n background-size: cover;\n background-position: center;\n\n filter:\n saturate(0.65)\n brightness(0.7);\n }\n\n\n .visual-copy {\n position: absolute;\n\n left: 55px;\n bottom: 55px;\n\n z-index: 2;\n\n max-width: 480px;\n }\n\n\n .visual-copy h2 {\n font-family: \"Instrument Serif\", serif;\n\n font-size: clamp(40px,5vw,65px);\n\n line-height: 0.95;\n\n font-weight: 400;\n\n letter-spacing: -0.035em;\n }\n\n\n .visual-copy p {\n margin-top: 18px;\n\n max-width: 400px;\n\n color: rgba(255,255,255,0.58);\n\n font-size: 11px;\n\n line-height: 1.7;\n }\n\n\n \/* ======================================================\n PRICE\n ====================================================== *\/\n\n .price {\n padding: 100px 20px 135px;\n\n text-align: center;\n\n background:\n radial-gradient(\n circle at center,\n rgba(0,77,180,0.16),\n transparent 40%\n );\n }\n\n\n .price h2 {\n font-family: \"Instrument Serif\", serif;\n\n font-size: clamp(65px,8vw,120px);\n\n font-weight: 400;\n\n line-height: 0.9;\n\n letter-spacing: -0.05em;\n }\n\n\n .price h2 span {\n color: #6f7f94;\n }\n\n\n .price p {\n max-width: 500px;\n\n margin: 25px auto 0;\n\n color: #70757c;\n\n font-size: 11px;\n\n line-height: 1.7;\n }\n\n\n \/* ======================================================\n FOOTER\n ====================================================== *\/\n\n .custom-footer {\n border-top: 1px solid rgba(255,255,255,0.06);\n\n padding: 28px 6%;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n color: #44484e;\n\n font-size: 9px;\n\n letter-spacing: 0.04em;\n }\n\n\n .legal-info {\n border-top: 1px solid rgba(255,255,255,0.06);\n padding: 17px 6% 25px;\n\n display: flex;\n flex-wrap: wrap;\n gap: 8px 24px;\n\n background: #050607;\n\n color: #8f96a0;\n\n font-size: 9px;\n line-height: 1.65;\n letter-spacing: 0.02em;\n }\n\n .legal-info strong {\n color: #b8bec6;\n font-weight: 500;\n }\n\n\n \/* ======================================================\n REVEAL ANIMATION\n ====================================================== *\/\n\n .reveal {\n opacity: 0;\n transform: translateY(35px);\n\n transition:\n opacity 0.8s ease,\n transform 0.8s ease;\n }\n\n\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n\n \/* ======================================================\n MOBILE\n ====================================================== *\/\n\n @media(max-width: 800px) {\n\n .site-shell {\n width: calc(100% - 10px);\n margin: 5px;\n\n border-radius: 24px 24px 0 0;\n }\n\n\n .topbar {\n padding: 0 22px;\n }\n\n\n .top-note {\n display: none;\n }\n\n\n .hero {\n min-height: 90vh;\n\n padding-left: 20px;\n padding-right: 20px;\n }\n\n\n .hero h1 {\n font-size: clamp(56px,16vw,85px);\n }\n\n\n .hero-bottom {\n gap: 12px;\n\n flex-wrap: wrap;\n }\n\n\n .services {\n grid-template-columns: 1fr;\n }\n\n\n .visual-section {\n height: 470px;\n }\n\n\n .visual-copy {\n left: 28px;\n right: 28px;\n bottom: 35px;\n }\n\n\n .custom-footer {\n flex-direction: column;\n\n gap: 8px;\n\n align-items: flex-start;\n }\n\n .legal-info {\n flex-direction: column;\n gap: 4px;\n }\n\n }\n\n\n\n \/* ======================================================\n CONTACT OP HOMEPAGE\n ====================================================== *\/\n\n .home-contact {\n width: min(1050px, calc(100% - 40px));\n margin: 0 auto 120px;\n scroll-margin-top: 30px;\n }\n\n .home-contact-intro {\n padding: 0 0 48px;\n text-align: center;\n }\n\n .home-contact-intro h2 {\n max-width: 760px;\n margin: 0 auto;\n font-family: \"Instrument Serif\", serif;\n font-size: clamp(44px, 5.5vw, 78px);\n font-weight: 400;\n line-height: 0.96;\n letter-spacing: -0.035em;\n color: #f3f4f5;\n }\n\n .home-contact-intro h2 span {\n color: #747c87;\n }\n\n .home-contact-intro p {\n max-width: 560px;\n margin: 20px auto 0;\n color: #747b84;\n font-size: 12px;\n line-height: 1.7;\n }\n\n .home-contact-grid {\n display: grid;\n grid-template-columns: 0.82fr 1.18fr;\n gap: 14px;\n }\n\n .home-contact-info,\n .home-contact-form {\n border: 1px solid rgba(255,255,255,0.075);\n border-radius: 23px;\n background:\n linear-gradient(\n 145deg,\n rgba(255,255,255,0.035),\n rgba(255,255,255,0.008)\n );\n }\n\n .home-contact-info {\n min-height: 590px;\n padding: 38px;\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n .home-contact-info::after {\n content: \"\";\n position: absolute;\n width: 380px;\n height: 380px;\n left: -190px;\n bottom: -200px;\n border-radius: 50%;\n background: rgba(0,94,255,0.20);\n filter: blur(90px);\n pointer-events: none;\n }\n\n .home-contact-label {\n color: #656d76;\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 0.12em;\n margin-bottom: 17px;\n }\n\n .home-contact-info h3 {\n max-width: 350px;\n font-family: \"Instrument Serif\", serif;\n font-size: 43px;\n line-height: 0.98;\n font-weight: 400;\n letter-spacing: -0.025em;\n }\n\n .home-contact-info p {\n max-width: 350px;\n margin-top: 20px;\n color: #777e86;\n font-size: 12px;\n line-height: 1.7;\n }\n\n .home-contact-direct {\n position: relative;\n z-index: 3;\n }\n\n .home-contact-email-label {\n margin-bottom: 9px;\n color: #626971;\n font-size: 9px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n .home-contact-email {\n display: inline-block;\n font-family: \"Instrument Serif\", serif;\n font-size: clamp(23px,2.5vw,32px);\n color: #f4f4f4;\n transition: opacity 0.3s ease;\n }\n\n .home-contact-email:hover {\n opacity: 0.65;\n }\n\n .home-contact-availability {\n margin-top: 25px;\n display: flex;\n align-items: center;\n gap: 8px;\n color: #6f767e;\n font-size: 10px;\n }\n\n .home-contact-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: #53df80;\n box-shadow: 0 0 12px rgba(83,223,128,0.6);\n }\n\n .home-contact-form {\n padding: 38px;\n }\n\n .home-contact-form-head {\n margin-bottom: 32px;\n }\n\n .home-contact-form-head h3 {\n margin-top: 7px;\n font-family: \"Instrument Serif\", serif;\n font-size: 41px;\n font-weight: 400;\n line-height: 1;\n }\n\n .home-contact-form-head p {\n margin-top: 12px;\n color: #707780;\n font-size: 11px;\n line-height: 1.6;\n }\n\n .home-contact-fields {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n\n .home-contact-field {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .home-contact-field.full {\n grid-column: 1 \/ -1;\n }\n\n .home-contact-field label {\n color: #6c737b;\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n\n .home-contact-field input,\n .home-contact-field textarea,\n .home-contact-field select {\n width: 100%;\n padding: 15px 16px;\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 11px;\n background: #090b0e;\n color: #eeeeee;\n outline: none;\n transition: 0.25s ease;\n font: inherit;\n }\n\n .home-contact-field input:focus,\n .home-contact-field textarea:focus,\n .home-contact-field select:focus {\n border-color: rgba(90,140,255,0.45);\n background: #0b0e12;\n }\n\n .home-contact-field input::placeholder,\n .home-contact-field textarea::placeholder {\n color: #3f444a;\n }\n\n .home-contact-field textarea {\n min-height: 150px;\n resize: vertical;\n }\n\n .home-contact-field select {\n appearance: none;\n -webkit-appearance: none;\n }\n\n .home-contact-submit-row {\n margin-top: 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n }\n\n .home-contact-note {\n max-width: 310px;\n color: #51575e;\n font-size: 9px;\n line-height: 1.55;\n }\n\n .home-contact-submit {\n border: none;\n padding: 13px 17px;\n border-radius: 100px;\n background: #f2f2ef;\n color: #070809;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-size: 11px;\n font-weight: 600;\n transition: 0.3s ease;\n }\n\n .home-contact-submit:hover {\n transform: translateY(-3px);\n background: white;\n box-shadow:\n 0 15px 40px rgba(0,0,0,0.35),\n 0 0 35px rgba(40,105,255,0.16);\n }\n\n .home-contact-submit-arrow {\n width: 22px;\n height: 22px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n background: #090909;\n color: white;\n font-size: 10px;\n }\n\n @media(max-width: 800px) {\n .home-contact {\n margin-bottom: 90px;\n }\n\n .home-contact-grid {\n grid-template-columns: 1fr;\n }\n\n .home-contact-info {\n min-height: 440px;\n }\n\n .home-contact-fields {\n grid-template-columns: 1fr;\n }\n\n .home-contact-field.full {\n grid-column: auto;\n }\n\n .home-contact-submit-row {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n <\/style>\n<\/head>\n\n<body>\n\n<div class=\"grain\"><\/div>\n\n<div class=\"site-shell\">\n\n\n <!-- TOPBAR -->\n\n <div class=\"topbar\">\n\n <div class=\"brand\">\n\n <span class=\"brand-mark\">\n \u2726\n <\/span>\n\n LDL Websites\n\n <\/div>\n\n <div class=\"top-note\">\n Digital design studio \u00b7 Belgium\n <\/div>\n\n <\/div>\n\n\n <!-- HERO -->\n\n <section class=\"hero\">\n\n <div class=\"hero-image\"><\/div>\n\n <div class=\"hero-glow\"><\/div>\n\n\n <div class=\"hero-content\">\n\n <div class=\"label\">\n\n <span class=\"label-dot\"><\/span>\n\n Beschikbaar voor nieuwe projecten\n\n <\/div>\n\n\n <h1>\n\n Websites vanaf<br>\n\n <span>\u20ac450.<\/span>\n\n <\/h1>\n\n\n <p class=\"hero-copy\">\n\n Volledig ontworpen en ge\u00efnstalleerd.\n\n Mobiel klaar, basis SEO ingesteld\n en voorbereid voor Google.\n\n <\/p>\n\n\n <!-- ENIGE LINK OP DE WEBSITE -->\n\n <a\n class=\"contact-button\"\n href=\"#contact\"\n >\n\n Bespreek je website\n\n <span class=\"contact-icon\">\n \u2197\n <\/span>\n\n <\/a>\n\n <\/div>\n\n\n <div class=\"hero-bottom\">\n\n <span>Design<\/span>\n\n <span>Development<\/span>\n\n <span>Responsive<\/span>\n\n <span>SEO<\/span>\n\n <span>Google Ready<\/span>\n\n <\/div>\n\n <\/section>\n\n\n\n <!-- INTRO -->\n\n <section class=\"intro reveal\">\n\n <span class=\"section-label\">\n LDL Websites\n <\/span>\n\n <h2>\n\n Van idee naar een website\n\n <span>\n die volledig klaarstaat.\n <\/span>\n\n <\/h2>\n\n <\/section>\n\n\n\n <!-- SERVICES -->\n\n <section class=\"services\">\n\n\n <div class=\"service reveal\">\n\n <div class=\"service-icon\">\n \u2726\n <\/div>\n\n <div>\n\n <h3>\n Volledig gebouwd\n <\/h3>\n\n <p>\n Design, ontwikkeling en installatie.\n Wij zetten de volledige website online.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <div class=\"service reveal\">\n\n <div class=\"service-icon\">\n \u25c7\n <\/div>\n\n <div>\n\n <h3>\n SEO & Google\n <\/h3>\n\n <p>\n Technische basis SEO en pagina's\n voorbereid om ge\u00efndexeerd te worden.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <div class=\"service reveal\">\n\n <div class=\"service-icon\">\n \u25cb\n <\/div>\n\n <div>\n\n <h3>\n Elk scherm\n <\/h3>\n\n <p>\n Geoptimaliseerd voor desktop,\n tablet en smartphone.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n <\/section>\n\n\n\n <!-- IMAGE SECTION -->\n\n <section class=\"visual-section reveal\">\n\n <div class=\"visual-image\"><\/div>\n\n\n <div class=\"visual-copy\">\n\n <span class=\"section-label\">\n Van ontwerp tot launch\n <\/span>\n\n <h2>\n Jij levert het idee.<br>\n Wij bouwen de rest.\n <\/h2>\n\n <p>\n Geen ingewikkelde technische stappen.\n We bouwen, installeren en leveren jouw website\n volledig gebruiksklaar op.\n <\/p>\n\n <\/div>\n\n <\/section>\n\n\n\n <!-- PRICE -->\n\n <section class=\"price reveal\">\n\n <span class=\"section-label\">\n Simpel geprijsd\n <\/span>\n\n <h2>\n Vanaf <span>\u20ac450<\/span>\n <\/h2>\n\n <p>\n Professioneel webdesign zonder onnodige agencykosten.\n De uiteindelijke prijs hangt af van de omvang\n en functies van jouw website.\n <\/p>\n\n <\/section>\n\n\n\n\n\n <!-- CONTACT -->\n\n <section id=\"contact\" class=\"home-contact\">\n\n <div class=\"home-contact-intro\">\n <span class=\"section-label\">Contact<\/span>\n\n <h2>\n Heb je een idee?\n <span>Vertel het ons.<\/span>\n <\/h2>\n\n <p>\n Van een eenvoudige professionele bedrijfswebsite tot een volledig\n nieuwe digitale uitstraling. Vertel ons wat je nodig hebt en we bekijken\n samen wat mogelijk is.\n <\/p>\n <\/div>\n\n <div class=\"home-contact-grid\">\n\n <div class=\"home-contact-info\">\n\n <div>\n <div class=\"home-contact-label\">Contact<\/div>\n\n <h3>\n Een goed project begint met een gesprek.\n <\/h3>\n\n <p>\n Heb je al een duidelijk idee of weet je nog niet exact wat je nodig hebt?\n Geen probleem. Stuur ons je vraag en we nemen contact met je op.\n <\/p>\n <\/div>\n\n <div class=\"home-contact-direct\">\n\n <div class=\"home-contact-email-label\">\n Mail ons rechtstreeks\n <\/div>\n\n <a\n href=\"mailto:info@ldlwebsites.com\"\n class=\"home-contact-email\"\n >\n info@ldlwebsites.com\n <\/a>\n\n <div class=\"home-contact-availability\">\n <span class=\"home-contact-dot\"><\/span>\n Beschikbaar voor nieuwe projecten\n <\/div>\n\n <\/div>\n\n <\/div>\n\n\n <div class=\"home-contact-form\">\n\n <div class=\"home-contact-form-head\">\n\n <div class=\"home-contact-label\">\n Projectaanvraag\n <\/div>\n\n <h3>\n Vertel ons wat je zoekt.\n <\/h3>\n\n <p>\n Vul hieronder kort je gegevens en projectidee in.\n <\/p>\n\n <\/div>\n\n\n <form id=\"homeContactForm\">\n\n <div class=\"home-contact-fields\">\n\n <div class=\"home-contact-field\">\n <label for=\"home-name\">Naam<\/label>\n <input\n id=\"home-name\"\n type=\"text\"\n placeholder=\"Jouw naam\"\n required\n >\n <\/div>\n\n <div class=\"home-contact-field\">\n <label for=\"home-email\">E-mailadres<\/label>\n <input\n id=\"home-email\"\n type=\"email\"\n placeholder=\"naam@bedrijf.be\"\n required\n >\n <\/div>\n\n <div class=\"home-contact-field\">\n <label for=\"home-company\">Bedrijf<\/label>\n <input\n id=\"home-company\"\n type=\"text\"\n placeholder=\"Bedrijfsnaam\"\n >\n <\/div>\n\n <div class=\"home-contact-field\">\n <label for=\"home-project\">Type project<\/label>\n\n <select id=\"home-project\">\n <option>Nieuwe website<\/option>\n <option>Bestaande website vernieuwen<\/option>\n <option>Webshop<\/option>\n <option>Landing page<\/option>\n <option>Anders<\/option>\n <\/select>\n <\/div>\n\n <div class=\"home-contact-field full\">\n <label for=\"home-budget\">Indicatief budget<\/label>\n\n <select id=\"home-budget\">\n <option>Vanaf \u20ac450<\/option>\n <option>\u20ac450 \u2013 \u20ac750<\/option>\n <option>\u20ac750 \u2013 \u20ac1.500<\/option>\n <option>\u20ac1.500+<\/option>\n <option>Nog niet bepaald<\/option>\n <\/select>\n <\/div>\n\n <div class=\"home-contact-field full\">\n <label for=\"home-message\">\n Vertel ons over je project\n <\/label>\n\n <textarea\n id=\"home-message\"\n placeholder=\"Wat voor website wil je laten maken? Wat doet je bedrijf? Zijn er websites waarvan je de stijl mooi vindt?\"\n required\n ><\/textarea>\n <\/div>\n\n <\/div>\n\n\n <div class=\"home-contact-submit-row\">\n\n <div class=\"home-contact-note\">\n Door je aanvraag te versturen geef je ons toestemming\n om contact met je op te nemen over je project.\n <\/div>\n\n <button\n class=\"home-contact-submit\"\n type=\"submit\"\n >\n Verstuur aanvraag\n <span class=\"home-contact-submit-arrow\">\u2197<\/span>\n <\/button>\n\n <\/div>\n\n <\/form>\n\n <\/div>\n\n <\/div>\n\n <\/section>\n\n\n <!-- CUSTOM FOOTER -->\n\n <div class=\"custom-footer\">\n\n <span>\n \u00a9 2026 LDL Websites\n <\/span>\n\n <span>\n Websites \u00b7 Design \u00b7 Development\n <\/span>\n\n <\/div>\n\n\n <div class=\"legal-info\">\n\n <span>\n <strong>Ondernemingsnummer:<\/strong> 0821.474.192\n <\/span>\n\n <span>\n <strong>BTW-nummer:<\/strong> BE 0821.474.192\n <\/span>\n\n <span>\n <strong>Maatschappelijke zetel:<\/strong> Zepperen-Dorp 5\/201, 3800 Sint-Truiden\n <\/span>\n\n <\/div>\n\n\n<\/div>\n\n\n<script>\n\n \/* SCROLL REVEAL *\/\n\n const observer =\n new IntersectionObserver(\n\n entries => {\n\n entries.forEach(entry => {\n\n if(entry.isIntersecting) {\n\n entry.target.classList.add(\"visible\");\n\n }\n\n });\n\n },\n\n {\n threshold: 0.12\n }\n\n );\n\n\n document\n .querySelectorAll(\".reveal\")\n .forEach(el => observer.observe(el));\n\n\n\n \/* SUBTLE PARALLAX HERO *\/\n\n const heroImage =\n document.querySelector(\".hero-image\");\n\n\n window.addEventListener(\"scroll\", () => {\n\n const scroll =\n window.scrollY;\n\n if(scroll < window.innerHeight) {\n\n heroImage.style.transform =\n `scale(1.05) translateY(${scroll * 0.08}px)`;\n\n }\n\n });\n\n\n\n \/* CONTACTFORMULIER OP HOMEPAGE *\/\n\n const homeContactForm =\n document.getElementById(\"homeContactForm\");\n\n if(homeContactForm) {\n\n homeContactForm.addEventListener(\"submit\", function(e) {\n\n e.preventDefault();\n\n const name =\n document.getElementById(\"home-name\").value;\n\n const email =\n document.getElementById(\"home-email\").value;\n\n const company =\n document.getElementById(\"home-company\").value;\n\n const project =\n document.getElementById(\"home-project\").value;\n\n const budget =\n document.getElementById(\"home-budget\").value;\n\n const message =\n document.getElementById(\"home-message\").value;\n\n const subject =\n encodeURIComponent(\n \"Nieuwe website aanvraag van \" + name\n );\n\n const body =\n encodeURIComponent(\n`Hallo LDL Websites,\n\nIk zou graag informatie ontvangen over een website.\n\nNaam:\n${name}\n\nE-mail:\n${email}\n\nBedrijf:\n${company || \"Niet ingevuld\"}\n\nType project:\n${project}\n\nIndicatief budget:\n${budget}\n\nMijn vraag \/ project:\n\n${message}\n\nMet vriendelijke groet,\n\n${name}`\n );\n\n window.location.href =\n \"mailto:info@ldlwebsites.com?subject=\" +\n subject +\n \"&body=\" +\n body;\n\n });\n\n }\n\n\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>LDL Websites \u2014 Websites vanaf \u20ac450 \u2726 LDL Websites Digital design studio \u00b7 Belgium Beschikbaar voor nieuwe projecten Websites vanaf \u20ac450. Volledig ontworpen en ge\u00efnstalleerd. Mobiel klaar, basis SEO ingesteld en voorbereid voor Google. Bespreek je website \u2197 Design Development Responsive SEO Google Ready LDL Websites Van idee naar een website die volledig klaarstaat. \u2726 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":14,"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/pages\/24\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/ldlwebsites.com\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}