{"id":1968,"date":"2026-05-21T18:12:41","date_gmt":"2026-05-21T18:12:41","guid":{"rendered":"https:\/\/abline.ae\/?page_id=1968"},"modified":"2026-05-21T18:13:30","modified_gmt":"2026-05-21T18:13:30","slug":"start-your-design","status":"publish","type":"page","link":"https:\/\/abline.ae\/en\/start-your-design\/","title":{"rendered":"Start your design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1968\" class=\"elementor elementor-1968\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-c058be8 e-flex e-con-boxed e-con e-parent\" data-id=\"c058be8\" 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-893a60d elementor-widget elementor-widget-shortcode\" data-id=\"893a60d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <style>\n        .dukk-design-page,\n        .dukk-design-page * {\n            box-sizing: border-box;\n        }\n\n        .dukk-design-page {\n            direction: ltr;\n            background: linear-gradient(135deg, #fff7f9, #f8e8ee);\n            padding: 70px 20px;\n            border-radius: 24px;\n            overflow: visible;\n            font-family: inherit;\n        }\n\n        .dukk-container {\n            max-width: 1120px;\n            margin: 0 auto;\n        }\n\n        .dukk-hero {\n            text-align: center;\n            margin-bottom: 45px;\n        }\n\n        .dukk-hero h1 {\n            font-size: 46px;\n            line-height: 1.25;\n            color: #2f1e24;\n            margin: 0 0 14px;\n            font-weight: 800;\n        }\n\n        .dukk-hero p {\n            font-size: 18px;\n            line-height: 1.8;\n            color: #5f5055;\n            max-width: 720px;\n            margin: 0 auto;\n        }\n\n        .dukk-steps {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 22px;\n            margin-bottom: 40px;\n        }\n\n        .dukk-step {\n            background: #fff;\n            padding: 36px 24px;\n            border-radius: 22px;\n            text-align: center;\n            box-shadow: 0 14px 35px rgba(60, 30, 40, .08);\n        }\n\n        .dukk-step span {\n            display: block;\n            font-size: 36px;\n            line-height: 1;\n            margin-bottom: 18px;\n        }\n\n        .dukk-step h3 {\n            font-size: 22px;\n            line-height: 1.35;\n            margin: 0 0 12px;\n            color: #3b2630;\n            font-weight: 700;\n        }\n\n        .dukk-step p {\n            font-size: 15px;\n            line-height: 1.7;\n            color: #5f5055;\n            margin: 0;\n        }\n\n        .dukk-form {\n            background: #fff;\n            padding: 38px;\n            border-radius: 28px;\n            box-shadow: 0 18px 45px rgba(60, 30, 40, .09);\n            overflow: visible;\n        }\n\n        .dukk-upload {\n            display: block;\n            border: 2px dashed #d99caf;\n            background: #fff8fa;\n            border-radius: 22px;\n            padding: 38px 24px;\n            text-align: center;\n            cursor: pointer;\n            margin-bottom: 30px;\n        }\n\n        .dukk-upload-icon {\n            font-size: 44px;\n            line-height: 1;\n            margin-bottom: 12px;\n        }\n\n        .dukk-upload strong {\n            display: block;\n            color: #3b2630;\n            font-size: 20px;\n            line-height: 1.5;\n            margin-bottom: 6px;\n        }\n\n        .dukk-upload small {\n            display: block;\n            font-size: 14px;\n            line-height: 1.7;\n            color: #5f5055;\n        }\n\n        .dukk-upload input {\n            display: none !important;\n        }\n\n        .dukk-preview {\n            display: none;\n            margin-top: 18px;\n        }\n\n        .dukk-preview img {\n            max-width: 220px;\n            height: auto;\n            border-radius: 16px;\n            box-shadow: 0 8px 25px rgba(0,0,0,.12);\n        }\n\n        .dukk-grid {\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: 22px;\n            align-items: start;\n        }\n\n        .dukk-field {\n            margin-bottom: 22px;\n            overflow: visible;\n            min-width: 0;\n        }\n\n        .dukk-field label {\n            display: block;\n            margin-bottom: 9px;\n            color: #2f1e24;\n            font-size: 15px;\n            line-height: 1.4;\n            font-weight: 700;\n        }\n\n        .dukk-field input,\n        .dukk-field select,\n        .dukk-field textarea {\n            width: 100% !important;\n            max-width: 100%;\n            min-height: 58px !important;\n            height: 58px !important;\n            border: 1px solid #ead6dc !important;\n            border-radius: 14px !important;\n            background: #fffbfc !important;\n            color: #2f1e24 !important;\n            font-size: 15px !important;\n            font-weight: 400 !important;\n            box-shadow: none !important;\n            outline: none !important;\n            margin: 0 !important;\n        }\n\n        .dukk-field input {\n            padding: 0 18px !important;\n            line-height: 58px !important;\n        }\n\n        .dukk-field select {\n            padding: 0 18px !important;\n            line-height: normal !important;\n            appearance: auto !important;\n            -webkit-appearance: menulist !important;\n            -moz-appearance: menulist !important;\n            display: block !important;\n            overflow: visible !important;\n            text-indent: 0 !important;\n        }\n\n        .dukk-field select option {\n            color: #2f1e24;\n            background: #fff;\n            font-size: 15px;\n        }\n\n        .dukk-field textarea {\n            min-height: 135px !important;\n            height: 135px !important;\n            padding: 18px !important;\n            line-height: 1.7 !important;\n            resize: vertical;\n        }\n\n        .dukk-field input::placeholder,\n        .dukk-field textarea::placeholder {\n            color: #8b7b81 !important;\n            opacity: 1 !important;\n        }\n\n        .dukk-extras {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 14px;\n        }\n\n        .dukk-extra-card {\n            background: #fff1f5;\n            border: 1px solid #f2d7df;\n            padding: 16px 10px;\n            border-radius: 18px;\n            cursor: pointer;\n            text-align: center;\n            color: #3b2630;\n            min-height: 104px;\n            display: flex !important;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            font-size: 14px;\n            line-height: 1.4;\n            font-weight: 700;\n            margin: 0 !important;\n        }\n\n        .dukk-extra-card input {\n            width: 16px !important;\n            height: 16px !important;\n            min-height: 16px !important;\n            padding: 0 !important;\n            margin: 0 !important;\n            line-height: 1 !important;\n        }\n\n        .dukk-extra-card span {\n            display: block;\n            font-size: 26px;\n            line-height: 1;\n        }\n\n        .dukk-submit {\n            width: 100%;\n            border: none !important;\n            background: #8d4358 !important;\n            color: #fff !important;\n            padding: 18px 24px !important;\n            min-height: 58px;\n            font-size: 18px;\n            line-height: 1.4;\n            border-radius: 999px !important;\n            cursor: pointer;\n            margin-top: 14px;\n            font-weight: 700;\n            transition: .3s ease;\n        }\n\n        .dukk-submit:hover {\n            background: #6f3043 !important;\n            transform: translateY(-2px);\n        }\n\n        .dukk-success {\n            max-width: 1120px;\n            margin: 0 auto 24px;\n            background: #e8fff1;\n            color: #20663f;\n            padding: 18px;\n            border-radius: 16px;\n            text-align: center;\n            font-weight: 700;\n        }\n\n        @media (max-width: 768px) {\n            .dukk-design-page {\n                padding: 45px 14px;\n            }\n\n            .dukk-hero h1 {\n                font-size: 32px;\n            }\n\n            .dukk-hero p {\n                font-size: 16px;\n            }\n\n            .dukk-steps,\n            .dukk-grid,\n            .dukk-extras {\n                grid-template-columns: 1fr;\n            }\n\n            .dukk-form {\n                padding: 24px;\n            }\n        }\n    <\/style>\n\n    <div class=\"dukk-design-page\">\n        <div class=\"dukk-container\">\n\n            <div class=\"dukk-hero\">\n                <h1>Create Your Own Design \u2728<\/h1>\n                <p>\n                    Upload your inspiration image or describe your dream design,\n                    and our team will turn it into a beautiful custom piece made just for you.\n                <\/p>\n            <\/div>\n\n            <div class=\"dukk-steps\">\n                <div class=\"dukk-step\">\n                    <span>\ud83d\udcf8<\/span>\n                    <h3>Upload Your Idea<\/h3>\n                    <p>Share your inspiration image or concept.<\/p>\n                <\/div>\n\n                <div class=\"dukk-step\">\n                    <span>\ud83c\udfa8<\/span>\n                    <h3>Customize Details<\/h3>\n                    <p>Select size, colors, fabric, and extras.<\/p>\n                <\/div>\n\n                <div class=\"dukk-step\">\n                    <span>\ud83d\udc8c<\/span>\n                    <h3>We Contact You<\/h3>\n                    <p>Our team reviews your request and confirms details.<\/p>\n                <\/div>\n            <\/div>\n\n            <form class=\"dukk-form\" method=\"post\" enctype=\"multipart\/form-data\">\n                <input type=\"hidden\" id=\"dukk_design_nonce\" name=\"dukk_design_nonce\" value=\"3ae08ad436\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/1968\" \/>\n                <label class=\"dukk-upload\">\n                    <div class=\"dukk-upload-icon\">\u2601\ufe0f<\/div>\n                    <strong>Drag & Drop Your Image Here<\/strong>\n                    <small>or click to upload<\/small>\n                    <small>JPG \/ PNG \/ WEBP<\/small>\n\n                    <input type=\"file\" name=\"design_image\" id=\"dukkImage\" accept=\"image\/*\">\n\n                    <div class=\"dukk-preview\" id=\"dukkPreview\">\n                        <img decoding=\"async\" src=\"\" alt=\"Preview\">\n                    <\/div>\n                <\/label>\n\n                <div class=\"dukk-grid\">\n                    <div class=\"dukk-field\">\n                        <label>Full Name<\/label>\n                        <input type=\"text\" name=\"customer_name\" placeholder=\"Enter your full name\" required>\n                    <\/div>\n\n                    <div class=\"dukk-field\">\n                        <label>Phone \/ WhatsApp<\/label>\n                        <input type=\"text\" name=\"customer_phone\" placeholder=\"Enter your phone number\" required>\n                    <\/div>\n\n                    <div class=\"dukk-field\">\n                        <label>City<\/label>\n                        <input type=\"text\" name=\"customer_city\" placeholder=\"Enter your city\">\n                    <\/div>\n\n                    <div class=\"dukk-field\">\n                        <label>Preferred Size<\/label>\n                        <select name=\"design_size\">\n                            <option value=\"\">Select Size<\/option>\n                            <option value=\"S\">S<\/option>\n                            <option value=\"M\">M<\/option>\n                            <option value=\"L\">L<\/option>\n                            <option value=\"XL\">XL<\/option>\n                            <option value=\"Custom Measurements\">Custom Measurements<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <div class=\"dukk-field\">\n                        <label>Preferred Color<\/label>\n                        <input type=\"text\" name=\"design_color\" placeholder=\"Example: Pink, Beige, Black\">\n                    <\/div>\n\n                    <div class=\"dukk-field\">\n                        <label>Fabric Type<\/label>\n                        <select name=\"design_fabric\">\n                            <option value=\"\">Select Fabric<\/option>\n                            <option value=\"Satin\">Satin<\/option>\n                            <option value=\"Silk\">Silk<\/option>\n                            <option value=\"Crepe\">Crepe<\/option>\n                            <option value=\"Cotton\">Cotton<\/option>\n                            <option value=\"Not Sure\">Not Sure<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n\n                <div class=\"dukk-field\">\n                    <label>Extra Options<\/label>\n\n                    <div class=\"dukk-extras\">\n                        <label class=\"dukk-extra-card\">\n                            <input type=\"checkbox\" name=\"design_extras[]\" value=\"Embroidery\">\n                            <span>\ud83e\udea1<\/span>\n                            Embroidery\n                        <\/label>\n\n                        <label class=\"dukk-extra-card\">\n                            <input type=\"checkbox\" name=\"design_extras[]\" value=\"Add Name\">\n                            <span>\ud83d\udd20<\/span>\n                            Add Name\n                        <\/label>\n\n                        <label class=\"dukk-extra-card\">\n                            <input type=\"checkbox\" name=\"design_extras[]\" value=\"Gift Wrapping\">\n                            <span>\ud83c\udf81<\/span>\n                            Gift Wrapping\n                        <\/label>\n\n                        <label class=\"dukk-extra-card\">\n                            <input type=\"checkbox\" name=\"design_extras[]\" value=\"Special Modifications\">\n                            <span>\ud83d\udc57<\/span>\n                            Special Modifications\n                        <\/label>\n                    <\/div>\n                <\/div>\n\n                <div class=\"dukk-field\">\n                    <label>Design Notes<\/label>\n                    <textarea name=\"design_notes\" placeholder=\"Describe your design idea, modifications, or any important notes...\"><\/textarea>\n                <\/div>\n\n                <button type=\"submit\" class=\"dukk-submit\">\n                    \u2728 Submit Custom Request\n                <\/button>\n            <\/form>\n\n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function () {\n            const input = document.getElementById('dukkImage');\n            const preview = document.getElementById('dukkPreview');\n            const img = preview.querySelector('img');\n\n            if (!input || !preview || !img) return;\n\n            input.addEventListener('change', function () {\n                const file = this.files[0];\n\n                if (!file) return;\n\n                const reader = new FileReader();\n\n                reader.onload = function (e) {\n                    img.src = e.target.result;\n                    preview.style.display = 'block';\n                };\n\n                reader.readAsDataURL(file);\n            });\n        });\n    <\/script>\n\n    <\/div>\n\t\t\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1968","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/pages\/1968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/comments?post=1968"}],"version-history":[{"count":4,"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/pages\/1968\/revisions"}],"predecessor-version":[{"id":1973,"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/pages\/1968\/revisions\/1973"}],"wp:attachment":[{"href":"https:\/\/abline.ae\/en\/wp-json\/wp\/v2\/media?parent=1968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}