Contact – Cosvisser<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n background: #fff;\n color: #000;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow-x: hidden;\n }\n\n .container {\n width: 100%;\n max-width: 620px;\n padding: 56px 22px;\n animation: pageIn 700ms ease forwards;\n }\n\n .eyebrow {\n font-size: 11px;\n letter-spacing: 4px;\n text-transform: uppercase;\n margin-bottom: 18px;\n opacity: 0;\n animation: fadeUp 600ms ease forwards;\n }\n\n h1 {\n position: relative;\n font-size: clamp(48px, 10vw, 96px);\n line-height: 0.9;\n font-weight: 700;\n margin: 0 0 28px;\n letter-spacing: -4px;\n opacity: 0;\n animation: fadeUp 700ms ease 120ms forwards;\n }\n\n h1::after {\n content: \"\";\n position: absolute;\n width: 32px;\n height: 32px;\n right: 8px;\n top: -18px;\n border: 2px solid #000;\n border-radius: 50%;\n transform: scale(0.4);\n opacity: 0;\n animation: popIn 500ms ease 500ms forwards;\n }\n\n p {\n max-width: 440px;\n opacity: 0;\n line-height: 1.55;\n margin: 0 0 42px;\n animation: fadeUp 700ms ease 220ms forwards;\n }\n\n form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n opacity: 0;\n animation: fadeUp 700ms ease 340ms forwards;\n }\n\n .field {\n position: relative;\n }\n\n input,\n textarea {\n width: 100%;\n border: none;\n border-bottom: 1px solid #000;\n padding: 14px 0;\n font-size: 15px;\n outline: none;\n color: #000;\n background: transparent;\n transition: padding-left 180ms ease;\n }\n\n textarea {\n resize: none;\n min-height: 120px;\n line-height: 1.45;\n }\n\n input:focus,\n textarea:focus {\n padding-left: 10px;\n }\n\n .field::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0;\n height: 2px;\n background: #000;\n transition: width 260ms ease;\n }\n\n .field:focus-within::after {\n width: 100%;\n }\n\n button {\n position: relative;\n width: fit-content;\n margin-top: 12px;\n padding: 0 0 8px;\n background: none;\n border: none;\n color: #000;\n text-align: left;\n font-size: 12px;\n letter-spacing: 2px;\n cursor: pointer;\n text-transform: uppercase;\n transition: letter-spacing 220ms ease, transform 220ms ease;\n }\n\n button::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 1px;\n background: #000;\n transform: scaleX(0.25);\n transform-origin: left;\n transition: transform 220ms ease;\n }\n\n button:hover {\n letter-spacing: 4px;\n transform: translateX(4px);\n }\n\n button:hover::after {\n transform: scaleX(1);\n }\n\n .bottom {\n margin-top: 58px;\n padding-top: 22px;\n border-top: 1px solid rgba(0,0,0,0.12);\n display: flex;\n justify-content: space-between;\n gap: 18px;\n font-size: 13px;\n opacity: 0;\n animation: fadeUp 700ms ease 460ms forwards;\n }\n\n a {\n position: relative;\n color: #000;\n text-decoration: none;\n opacity: 0.78;\n transition: opacity 180ms ease, transform 180ms ease;\n }\n\n .contact-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n width: fit-content;\n }\n\n .contact-link svg {\n width: 15px;\n height: 15px;\n stroke: currentColor;\n flex-shrink: 0;\n transition: transform 180ms ease;\n }\n\n .contact-link:hover svg {\n transform: translateY(-1px) scale(1.05);\n }\n\n a::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: -4px;\n width: 100%;\n height: 1px;\n background: #000;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 200ms ease;\n }\n\n a:hover {\n opacity: 1;\n transform: translateY(-1px);\n }\n\n a:hover::after {\n transform: scaleX(1);\n }\n\n .footer {\n margin-top: 46px;\n text-align: center;\n font-size: 11px;\n opacity: 0;\n animation: fadeUp 700ms ease 560ms forwards;\n }\n\n .doodle {\n position: fixed;\n right: -40px;\n bottom: 34px;\n width: 180px;\n height: 80px;\n pointer-events: none;\n opacity: 0.9;\n }\n\n .doodle svg path {\n stroke-dasharray: 420;\n stroke-dashoffset: 420;\n animation: drawLine 1400ms ease 650ms forwards;\n }\n\n @keyframes pageIn {\n from { transform: scale(0.985); }\n to { transform: scale(1); }\n }\n\n @keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(14px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes popIn {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes drawLine {\n to { stroke-dashoffset: 0; }\n }\n\n @media (max-width: 520px) {\n body {\n align-items: flex-start;\n }\n\n .container {\n padding-top: 42px;\n }\n\n .bottom {\n flex-direction: column;\n }\n\n h1 {\n letter-spacing: -2px;\n }\n\n h1::after {\n width: 22px;\n height: 22px;\n right: 0;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"eyebrow\">Cosvisser<\/div>\n \n <p>Heb je een vraag, idee of samenwerking? Stuur gerust een bericht.<\/p>\n\n <form id=\"contactForm\">\n <div class=\"field\">\n <input type=\"text\" name=\"name\" placeholder=\"Naam\" required \/>\n <\/div>\n\n <div class=\"field\">\n <input type=\"email\" name=\"email\" placeholder=\"Email\" required \/>\n <\/div>\n\n <div class=\"field\">\n <textarea name=\"message\" placeholder=\"Bericht\" required><\/textarea>\n <\/div>\n\n <button type=\"submit\">\u2709 Verstuur email<\/button>\n <\/form>\n\n <div class=\"bottom\">\n <a class=\"contact-link\" href=\"mailto:info@cosvisser.nl\" aria-label=\"Email Cosvisser\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 6h16v12H4V6Z\" stroke-width=\"1.8\"\/>\n <path d=\"M4 7l8 6 8-6\" stroke-width=\"1.8\"\/>\n <\/svg>\n <span>info@cosvisser.nl<\/span>\n <\/a>\n\n <a class=\"contact-link\" href=\"https:\/\/www.instagram.com\/cosvisser\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram Cosvisser\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"5\" stroke-width=\"1.8\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3.5\" stroke-width=\"1.8\"\/>\n <circle cx=\"16.8\" cy=\"7.2\" r=\"0.9\" fill=\"currentColor\"\/>\n <\/svg>\n <span>@cosvisser<\/span>\n <\/a>\n <\/div>\n\n <div class=\"footer\">\n \u00a9 <span id=\"year\"><\/span> Cosvisser\n <\/div>\n <\/div>\n\n <div class=\"doodle\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 180 80\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M4 60 C36 18, 55 91, 88 41 C116 0, 120 83, 176 16\" stroke=\"black\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n\n <script>\n document.getElementById(\"year\").textContent = new Date().getFullYear();\n\n document.getElementById(\"contactForm\").addEventListener(\"submit\", function(e) {\n e.preventDefault();\n\n var name = this.name.value;\n var email = this.email.value;\n var message = this.message.value;\n\n var subject = encodeURIComponent(\"Contact form - \" + name);\n var body = encodeURIComponent(\n \"Naam: \" + name + \"\\nEmail: \" + email + \"\\n\\nBericht:\\n\" + message\n );\n\n window.location.href = \"mailto:info@cosvisser.nl?subject=\" + subject + \"&body=\" + body;\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contact – Cosvisser Cosvisser Heb je een vraag, idee of samenwerking? Stuur gerust een bericht. \u2709 Verstuur email info@cosvisser.nl @cosvisser \u00a9 Cosvisser<\/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-90","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":7,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages\/90\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":90,"date":"2025-10-02T15:33:17","date_gmt":"2025-10-02T15:33:17","guid":{"rendered":"https:\/\/cosvisser.nl\/?page_id=90"},"modified":"2026-05-11T23:55:35","modified_gmt":"2026-05-11T23:55:35","slug":"contact","status":"publish","type":"page","link":"https:\/\/cosvisser.nl\/?page_id=90","title":{"rendered":"contact."},"content":{"rendered":"\n\n\n\n \n \n Contact – Cosvisser<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n background: #fff;\n color: #000;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow-x: hidden;\n }\n\n .container {\n width: 100%;\n max-width: 620px;\n padding: 56px 22px;\n animation: pageIn 700ms ease forwards;\n }\n\n .eyebrow {\n font-size: 11px;\n letter-spacing: 4px;\n text-transform: uppercase;\n margin-bottom: 18px;\n opacity: 0;\n animation: fadeUp 600ms ease forwards;\n }\n\n h1 {\n position: relative;\n font-size: clamp(48px, 10vw, 96px);\n line-height: 0.9;\n font-weight: 700;\n margin: 0 0 28px;\n letter-spacing: -4px;\n opacity: 0;\n animation: fadeUp 700ms ease 120ms forwards;\n }\n\n h1::after {\n content: \"\";\n position: absolute;\n width: 32px;\n height: 32px;\n right: 8px;\n top: -18px;\n border: 2px solid #000;\n border-radius: 50%;\n transform: scale(0.4);\n opacity: 0;\n animation: popIn 500ms ease 500ms forwards;\n }\n\n p {\n max-width: 440px;\n opacity: 0;\n line-height: 1.55;\n margin: 0 0 42px;\n animation: fadeUp 700ms ease 220ms forwards;\n }\n\n form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n opacity: 0;\n animation: fadeUp 700ms ease 340ms forwards;\n }\n\n .field {\n position: relative;\n }\n\n input,\n textarea {\n width: 100%;\n border: none;\n border-bottom: 1px solid #000;\n padding: 14px 0;\n font-size: 15px;\n outline: none;\n color: #000;\n background: transparent;\n transition: padding-left 180ms ease;\n }\n\n textarea {\n resize: none;\n min-height: 120px;\n line-height: 1.45;\n }\n\n input:focus,\n textarea:focus {\n padding-left: 10px;\n }\n\n .field::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0;\n height: 2px;\n background: #000;\n transition: width 260ms ease;\n }\n\n .field:focus-within::after {\n width: 100%;\n }\n\n button {\n position: relative;\n width: fit-content;\n margin-top: 12px;\n padding: 0 0 8px;\n background: none;\n border: none;\n color: #000;\n text-align: left;\n font-size: 12px;\n letter-spacing: 2px;\n cursor: pointer;\n text-transform: uppercase;\n transition: letter-spacing 220ms ease, transform 220ms ease;\n }\n\n button::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 1px;\n background: #000;\n transform: scaleX(0.25);\n transform-origin: left;\n transition: transform 220ms ease;\n }\n\n button:hover {\n letter-spacing: 4px;\n transform: translateX(4px);\n }\n\n button:hover::after {\n transform: scaleX(1);\n }\n\n .bottom {\n margin-top: 58px;\n padding-top: 22px;\n border-top: 1px solid rgba(0,0,0,0.12);\n display: flex;\n justify-content: space-between;\n gap: 18px;\n font-size: 13px;\n opacity: 0;\n animation: fadeUp 700ms ease 460ms forwards;\n }\n\n a {\n position: relative;\n color: #000;\n text-decoration: none;\n opacity: 0.78;\n transition: opacity 180ms ease, transform 180ms ease;\n }\n\n .contact-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n width: fit-content;\n }\n\n .contact-link svg {\n width: 15px;\n height: 15px;\n stroke: currentColor;\n flex-shrink: 0;\n transition: transform 180ms ease;\n }\n\n .contact-link:hover svg {\n transform: translateY(-1px) scale(1.05);\n }\n\n a::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: -4px;\n width: 100%;\n height: 1px;\n background: #000;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 200ms ease;\n }\n\n a:hover {\n opacity: 1;\n transform: translateY(-1px);\n }\n\n a:hover::after {\n transform: scaleX(1);\n }\n\n .footer {\n margin-top: 46px;\n text-align: center;\n font-size: 11px;\n opacity: 0;\n animation: fadeUp 700ms ease 560ms forwards;\n }\n\n .doodle {\n position: fixed;\n right: -40px;\n bottom: 34px;\n width: 180px;\n height: 80px;\n pointer-events: none;\n opacity: 0.9;\n }\n\n .doodle svg path {\n stroke-dasharray: 420;\n stroke-dashoffset: 420;\n animation: drawLine 1400ms ease 650ms forwards;\n }\n\n @keyframes pageIn {\n from { transform: scale(0.985); }\n to { transform: scale(1); }\n }\n\n @keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(14px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes popIn {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes drawLine {\n to { stroke-dashoffset: 0; }\n }\n\n @media (max-width: 520px) {\n body {\n align-items: flex-start;\n }\n\n .container {\n padding-top: 42px;\n }\n\n .bottom {\n flex-direction: column;\n }\n\n h1 {\n letter-spacing: -2px;\n }\n\n h1::after {\n width: 22px;\n height: 22px;\n right: 0;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <div class=\"eyebrow\">Cosvisser<\/div>\n \n <p>Heb je een vraag, idee of samenwerking? Stuur gerust een bericht.<\/p>\n\n <form id=\"contactForm\">\n <div class=\"field\">\n <input type=\"text\" name=\"name\" placeholder=\"Naam\" required \/>\n <\/div>\n\n <div class=\"field\">\n <input type=\"email\" name=\"email\" placeholder=\"Email\" required \/>\n <\/div>\n\n <div class=\"field\">\n <textarea name=\"message\" placeholder=\"Bericht\" required><\/textarea>\n <\/div>\n\n <button type=\"submit\">\u2709 Verstuur email<\/button>\n <\/form>\n\n <div class=\"bottom\">\n <a class=\"contact-link\" href=\"mailto:info@cosvisser.nl\" aria-label=\"Email Cosvisser\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 6h16v12H4V6Z\" stroke-width=\"1.8\"\/>\n <path d=\"M4 7l8 6 8-6\" stroke-width=\"1.8\"\/>\n <\/svg>\n <span>info@cosvisser.nl<\/span>\n <\/a>\n\n <a class=\"contact-link\" href=\"https:\/\/www.instagram.com\/cosvisser\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram Cosvisser\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"5\" stroke-width=\"1.8\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3.5\" stroke-width=\"1.8\"\/>\n <circle cx=\"16.8\" cy=\"7.2\" r=\"0.9\" fill=\"currentColor\"\/>\n <\/svg>\n <span>@cosvisser<\/span>\n <\/a>\n <\/div>\n\n <div class=\"footer\">\n \u00a9 <span id=\"year\"><\/span> Cosvisser\n <\/div>\n <\/div>\n\n <div class=\"doodle\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 180 80\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M4 60 C36 18, 55 91, 88 41 C116 0, 120 83, 176 16\" stroke=\"black\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/div>\n\n <script>\n document.getElementById(\"year\").textContent = new Date().getFullYear();\n\n document.getElementById(\"contactForm\").addEventListener(\"submit\", function(e) {\n e.preventDefault();\n\n var name = this.name.value;\n var email = this.email.value;\n var message = this.message.value;\n\n var subject = encodeURIComponent(\"Contact form - \" + name);\n var body = encodeURIComponent(\n \"Naam: \" + name + \"\\nEmail: \" + email + \"\\n\\nBericht:\\n\" + message\n );\n\n window.location.href = \"mailto:info@cosvisser.nl?subject=\" + subject + \"&body=\" + body;\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contact – Cosvisser Cosvisser Heb je een vraag, idee of samenwerking? Stuur gerust een bericht. \u2709 Verstuur email info@cosvisser.nl @cosvisser \u00a9 Cosvisser<\/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-90","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":7,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/cosvisser.nl\/index.php?rest_route=\/wp\/v2\/pages\/90\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/cosvisser.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}