Dise\u00f1o y animacion<\/title>\r\n <style>\r\n * ,*:before, *:after{\r\n padding: 0;\r\n margin: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n:root {\r\n --color-bg-1: #f0f5f5;\r\n --color-bg-2:#e7e9ef;\r\n --color-btn:#07284A;\r\n --color-header-step: #07284A; \r\n --color-border-input: #080808;\r\n}\r\n\r\n\/*Contenedor Principal*\/\r\n.root {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 90vh;\r\n font-size: 16px;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n background-image: linear-gradient(var(--color-bg-1),\r\n var(--color-bg-2));\r\n overflow: hidden;\r\n}\r\n\r\n\/*Formulario*\/\r\n.form-register {\r\n padding: 20px 15px;\r\n width: 100%;\r\n max-width: 400px;\r\n\r\n}\r\n\r\n\/*barra*\/\r\n.progressbar {\r\n display: flex;\r\n list-style: none;\r\n margin-bottom: 15px;\r\n counter-reset: step;\r\n \r\n \r\n}\r\n\r\n.progressbar_option {\r\n width: 100%;\r\n text-align: center;\r\n font-size: .7rem;\r\n text-transform: uppercase;\r\n position: relative;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n \r\n}\r\n\r\n.progressbar_option:before {\r\n display: flex;\r\n content: counter(step);\r\n counter-increment: step;\r\n width: 20px;\r\n height: 20px;\r\n background-color: #f9ffd1 ;\r\n margin: 0 auto 5px;\r\n border-radius: 50%;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n z-index: 2 ;\r\n}\r\n\r\n.progressbar_option:after {\r\n display: block;\r\n content: '';\r\n width: 100%;\r\n height: 2px;\r\n background-color: white;\r\n position: absolute;\r\n top: 10px;\r\n left: -50%;\r\n z-index: 1;\r\n}\r\n\r\n.progressbar_option:first-child:after {\r\n content: none;\r\n \r\n}\r\n\r\n.progressbar_option.active:before, .progressbar_option.active:after{\r\n background-color: #07284A;\r\n \r\n\r\n}\r\n\r\n\/*Titulo del formulario*\/\r\n.form-register_title{\r\n font-size: 1.4rem;\r\n text-align: center;\r\n margin-bottom: 15px;\r\n\r\n}\r\n\r\n\/*body del formulario*\/\r\n.form-register_body {\r\n display: flex;\r\n align-items: flex-start;\r\n\r\n}\r\n\r\n.step {\r\n background-color: white;\r\n box-shadow: 5px 5px 5px 2px var(--color-shadow);\r\n border-radius: 10%;\r\n min-width: 100%;\r\n opacity: 0;\r\n transition: all .2s linear;\r\n}\r\n.step.active {\r\n opacity:2;\r\n\r\n}\r\n.step.to-left{\r\n margin-left: -100%;\r\n}\r\n.step.inactive {\r\n animation-name: scale;\r\n animation-duration: .2s;\r\n animation-direction: alternative;\r\n animation-iteration-count: 2;\r\n}\r\n@keyframes scale {\r\n from {\r\n transform: scale(1);\r\n }\r\n to {\r\n transform: scale(1.1)\r\n }\r\n}\r\n\r\n\/*header de step*\/\r\n.step_header {\r\n padding: 20px 15px;\r\n background-color: var(--color-header-step);\r\n border-radius: 3px 3px 0 0;\r\n}\r\n\r\n.step_title {\r\n font-size: 1.1rem;\r\n text-align: center;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n \r\n}\r\n\r\n\/*body de step*\/\r\n\r\n.step_body{\r\n padding: 20px 35px 0;\r\n\r\n}\r\n\r\n.step_input{\r\n display: block;\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 10px;\r\n border-radius: 3px;\r\n border: 1px solid var(--color-border-input);\r\n}\r\n\r\n\r\n.step_footer{\r\n padding: 20px 15px;\r\n text-align: center;\r\n}\r\n\r\n.step_button{\r\n display: inline-block;\r\n padding: 10px;\r\n background-color: var(--color-btn);\r\n border: none;\r\n color: white;\r\n border-radius: 15%;\r\n cursor: pointer;\r\n}\r\n\r\n.img {\r\n border: 2px;\r\n border-radius: 24px;\r\n padding: 10px;\r\n}\r\n <\/style>\r\n\r\n<\/head>\r\n<body>\r\n <div class=\"root\">\r\n <form method=\"POST\" action=\"https:\/\/bechaprastudio.com\/disenioanswers.php\" class=\"form-register\">\r\n <div class=\"form-register_header\">\r\n <h1 class=\"form-register_title\"> REGISTRO<\/h1> <br>\r\n <ul class=\"progressbar\">\r\n <li class=\"progressbar_option active\"><b><\/b><\/li>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br> \r\n <\/ul>\r\n <br> <br>\r\n <\/div>\r\n <div class=\"form-register_body\"> \r\n <div class=\"step active\" id=\"step-1\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b><FONT COLOR=\"white\">INFORMACI\u00d3N DE CONTACTO Y EMPRESA <small> (Paso 1)<\/small><\/FONT><\/b><\/small><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Email<\/h5>\r\n <input type=\"text\" placeholder=\"ejemplo@bechapra.com\" class=\"step_input\" class=\"step_input\" name=\"email\"> \r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Tel\u00e9fono<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"Telefono\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Nombre de la empresa<\/h5>\r\n <input type=\"text\" placeholder=\"Nombre de la empresa\" class=\"step_input\" name=\"nombre_empresa\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">P\u00e1gina web<\/h5>\r\n <input type=\"text\" placeholder=\"ejemplo: bechapra.com\" class=\"step_input\" name=\"pagina\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <select class=\"form-select\" aria-label=\"Small select example\" style=\"width: 100%;\"> <center>\r\n <option selected>\u00bfCuenta con manual de Marca?<\/option>\r\n <option value=\"1\">Si<\/option>\r\n <option value=\"2\">No<\/option>\r\n <\/select><\/center> <\/div>\r\n <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Redes Sociales<\/h5>\r\n <input type=\"text\" placeholder=\"enlace: www.facebook.com\" class=\"step_input\" name=\"redes\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"2\" data-step=\"1\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-2\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b> <font color=\"white\">SELECCI\u00d3N DE SERVICIOS <small> (Paso 2)<\/small><\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Eliga una opcion<\/h5>\r\n <select class=\"form-select\" style=\"width: 100%;\"><center>\r\n <option value=\"null\">Servicio unico que necesitas<\/option>\r\n <option value=\"1\">Dise\u00f1o 3D<\/option>\r\n <option value=\"2\">Animacion 2D<\/option>\r\n <option value=\"3\">Dise\u00f1o Digital<\/option>\r\n <\/select><\/center>\r\n <\/div>\r\n\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"1\" data-step=\"2\">Regresar<\/button>\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"3\" data-step=\"2\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-3\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b><font color=\"white\">DETALLES DEL PROYECTO<\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Descripci\u00f3n del proyecto<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"Descripcion\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Ideas o concepto clave<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"concepto\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"2\" data-step=\"3\">Regresar<\/button>\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"4\" data-step=\"3\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-4\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b><font color=\"white\">PREFERENCIAS DE DISE\u00d1O<\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Elementos a incluir<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"Elementos_incluir\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"3\" data-step=\"4\">Regresar<\/button>\r\n <button type=\"submit\" class=\"step_button\">Registrar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <script>\r\n let form = document.querySelector('.form-register');\r\nlet progressOptions = document.querySelectorAll('.progressbar_option');\r\n\r\nform.addEventListener('click', function(e) {\r\n let element = e.target;\r\n let isButtonNext = element.classList.contains('step_button--next');\r\n let isButtonBack = element.classList.contains('step_button--back');\r\n if (isButtonNext || isButtonBack) {\r\n let currentStep = document.getElementById('step-' + element.dataset.step);\r\n let jumpStep = document.getElementById('step-' + element.dataset.to_step);\r\n currentStep.addEventListener('animationend', function callback() {\r\n currentStep.classList.remove('active');\r\n jumpStep.classList.add('active');\r\n if (isButtonNext) {\r\n currentStep.classList.add('to-left');\r\n progressOptions[element.dataset.to_step - 1].classList.add('active');\r\n } else {\r\n jumpStep.classList.remove('to-left');\r\n progressOptions[element.dataset.step - 1].classList.remove('active');\r\n }\r\n currentStep.removeEventListener('animationend', callback);\r\n });\r\n currentStep.classList.add('inactive');\r\n jumpStep.classList.remove('inactive');\r\n }\r\n});\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1o y animacion REGISTRO INFORMACI\u00d3N DE CONTACTO Y EMPRESA (Paso 1) Email Tel\u00e9fono Nombre de la empresa P\u00e1gina web \u00bfCuenta con manual de Marca?SiNo Redes Sociales Siguiente SELECCI\u00d3N DE SERVICIOS (Paso 2) Eliga una opcion Servicio unico que necesitasDise\u00f1o 3DAnimacion 2DDise\u00f1o Digital Regresar Siguiente DETALLES DEL PROYECTO Descripci\u00f3n del proyecto Ideas o concepto clave Regresar Siguiente PREFERENCIAS DE DISE\u00d1O Elementos a incluir Regresar Registrar<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-370","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/370"}],"collection":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=370"}],"version-history":[{"count":24,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/370\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/370\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Dise\u00f1o y animacion<\/title>\r\n <style>\r\n * ,*:before, *:after{\r\n padding: 0;\r\n margin: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n:root {\r\n --color-bg-1: #f0f5f5;\r\n --color-bg-2:#e7e9ef;\r\n --color-btn:#07284A;\r\n --color-header-step: #07284A; \r\n --color-border-input: #080808;\r\n}\r\n\r\n\/*Contenedor Principal*\/\r\n.root {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 90vh;\r\n font-size: 16px;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n background-image: linear-gradient(var(--color-bg-1),\r\n var(--color-bg-2));\r\n overflow: hidden;\r\n}\r\n\r\n\/*Formulario*\/\r\n.form-register {\r\n padding: 20px 15px;\r\n width: 100%;\r\n max-width: 400px;\r\n\r\n}\r\n\r\n\/*barra*\/\r\n.progressbar {\r\n display: flex;\r\n list-style: none;\r\n margin-bottom: 15px;\r\n counter-reset: step;\r\n \r\n \r\n}\r\n\r\n.progressbar_option {\r\n width: 100%;\r\n text-align: center;\r\n font-size: .7rem;\r\n text-transform: uppercase;\r\n position: relative;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n \r\n}\r\n\r\n.progressbar_option:before {\r\n display: flex;\r\n content: counter(step);\r\n counter-increment: step;\r\n width: 20px;\r\n height: 20px;\r\n background-color: #f9ffd1 ;\r\n margin: 0 auto 5px;\r\n border-radius: 50%;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n z-index: 2 ;\r\n}\r\n\r\n.progressbar_option:after {\r\n display: block;\r\n content: '';\r\n width: 100%;\r\n height: 2px;\r\n background-color: white;\r\n position: absolute;\r\n top: 10px;\r\n left: -50%;\r\n z-index: 1;\r\n}\r\n\r\n.progressbar_option:first-child:after {\r\n content: none;\r\n \r\n}\r\n\r\n.progressbar_option.active:before, .progressbar_option.active:after{\r\n background-color: #07284A;\r\n \r\n\r\n}\r\n\r\n\/*Titulo del formulario*\/\r\n.form-register_title{\r\n font-size: 1.4rem;\r\n text-align: center;\r\n margin-bottom: 15px;\r\n\r\n}\r\n\r\n\/*body del formulario*\/\r\n.form-register_body {\r\n display: flex;\r\n align-items: flex-start;\r\n\r\n}\r\n\r\n.step {\r\n background-color: white;\r\n box-shadow: 5px 5px 5px 2px var(--color-shadow);\r\n border-radius: 10%;\r\n min-width: 100%;\r\n opacity: 0;\r\n transition: all .2s linear;\r\n}\r\n.step.active {\r\n opacity:2;\r\n\r\n}\r\n.step.to-left{\r\n margin-left: -100%;\r\n}\r\n.step.inactive {\r\n animation-name: scale;\r\n animation-duration: .2s;\r\n animation-direction: alternative;\r\n animation-iteration-count: 2;\r\n}\r\n@keyframes scale {\r\n from {\r\n transform: scale(1);\r\n }\r\n to {\r\n transform: scale(1.1)\r\n }\r\n}\r\n\r\n\/*header de step*\/\r\n.step_header {\r\n padding: 20px 15px;\r\n background-color: var(--color-header-step);\r\n border-radius: 3px 3px 0 0;\r\n}\r\n\r\n.step_title {\r\n font-size: 1.1rem;\r\n text-align: center;\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n \r\n}\r\n\r\n\/*body de step*\/\r\n\r\n.step_body{\r\n padding: 20px 35px 0;\r\n\r\n}\r\n\r\n.step_input{\r\n display: block;\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 10px;\r\n border-radius: 3px;\r\n border: 1px solid var(--color-border-input);\r\n}\r\n\r\n\r\n.step_footer{\r\n padding: 20px 15px;\r\n text-align: center;\r\n}\r\n\r\n.step_button{\r\n display: inline-block;\r\n padding: 10px;\r\n background-color: var(--color-btn);\r\n border: none;\r\n color: white;\r\n border-radius: 15%;\r\n cursor: pointer;\r\n}\r\n\r\n.img {\r\n border: 2px;\r\n border-radius: 24px;\r\n padding: 10px;\r\n}\r\n <\/style>\r\n\r\n<\/head>\r\n<body>\r\n <div class=\"root\">\r\n <form method=\"POST\" action=\"https:\/\/bechaprastudio.com\/disenioanswers.php\" class=\"form-register\">\r\n <div class=\"form-register_header\">\r\n <h1 class=\"form-register_title\"> REGISTRO<\/h1> <br>\r\n <ul class=\"progressbar\">\r\n <li class=\"progressbar_option active\"><b><\/b><\/li>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br>\r\n <li class=\"progressbar_option\"><b><\/b><\/li> <br> \r\n <\/ul>\r\n <br> <br>\r\n <\/div>\r\n <div class=\"form-register_body\"> \r\n <div class=\"step active\" id=\"step-1\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b><FONT COLOR=\"white\">INFORMACI\u00d3N DE CONTACTO Y EMPRESA <small> (Paso 1)<\/small><\/FONT><\/b><\/small><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Email<\/h5>\r\n <input type=\"text\" placeholder=\"ejemplo@bechapra.com\" class=\"step_input\" class=\"step_input\" name=\"email\"> \r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Tel\u00e9fono<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"Telefono\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Nombre de la empresa<\/h5>\r\n <input type=\"text\" placeholder=\"Nombre de la empresa\" class=\"step_input\" name=\"nombre_empresa\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">P\u00e1gina web<\/h5>\r\n <input type=\"text\" placeholder=\"ejemplo: bechapra.com\" class=\"step_input\" name=\"pagina\">\r\n <\/div>\r\n <div class=\"step_body\">\r\n <select class=\"form-select\" aria-label=\"Small select example\" style=\"width: 100%;\"> <center>\r\n <option selected>\u00bfCuenta con manual de Marca?<\/option>\r\n <option value=\"1\">Si<\/option>\r\n <option value=\"2\">No<\/option>\r\n <\/select><\/center> <\/div>\r\n <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Redes Sociales<\/h5>\r\n <input type=\"text\" placeholder=\"enlace: www.facebook.com\" class=\"step_input\" name=\"redes\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"2\" data-step=\"1\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-2\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b> <font color=\"white\">SELECCI\u00d3N DE SERVICIOS <small> (Paso 2)<\/small><\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Eliga una opcion<\/h5>\r\n <select class=\"form-select\" style=\"width: 100%;\"><center>\r\n <option value=\"null\">Servicio unico que necesitas<\/option>\r\n <option value=\"1\">Dise\u00f1o 3D<\/option>\r\n <option value=\"2\">Animacion 2D<\/option>\r\n <option value=\"3\">Dise\u00f1o Digital<\/option>\r\n <\/select><\/center>\r\n <\/div>\r\n\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"1\" data-step=\"2\">Regresar<\/button>\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"3\" data-step=\"2\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-3\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b><font color=\"white\">DETALLES DEL PROYECTO<\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Descripci\u00f3n del proyecto<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"Descripcion\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Ideas o concepto clave<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"concepto\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"2\" data-step=\"3\">Regresar<\/button>\r\n <button type=\"button\" class=\"step_button step_button--next\" data-to_step=\"4\" data-step=\"3\">Siguiente<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"step\" id=\"step-4\">\r\n <div class=\"step_header\">\r\n <h2 class=\"step_title\"> <b><font color=\"white\">PREFERENCIAS DE DISE\u00d1O<\/font><\/b><\/h2>\r\n <\/div> <br>\r\n <div class=\"step_body\">\r\n <h5 class=\"step_sub\" style=\"margin-bottom: 6px;\">Elementos a incluir<\/h5>\r\n <input type=\"text\" class=\"step_input\" name=\"Elementos_incluir\">\r\n <\/div>\r\n <div class=\"step_footer\">\r\n <button type=\"button\" class=\"step_button step_button--back\" data-to_step=\"3\" data-step=\"4\">Regresar<\/button>\r\n <button type=\"submit\" class=\"step_button\">Registrar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <script>\r\n let form = document.querySelector('.form-register');\r\nlet progressOptions = document.querySelectorAll('.progressbar_option');\r\n\r\nform.addEventListener('click', function(e) {\r\n let element = e.target;\r\n let isButtonNext = element.classList.contains('step_button--next');\r\n let isButtonBack = element.classList.contains('step_button--back');\r\n if (isButtonNext || isButtonBack) {\r\n let currentStep = document.getElementById('step-' + element.dataset.step);\r\n let jumpStep = document.getElementById('step-' + element.dataset.to_step);\r\n currentStep.addEventListener('animationend', function callback() {\r\n currentStep.classList.remove('active');\r\n jumpStep.classList.add('active');\r\n if (isButtonNext) {\r\n currentStep.classList.add('to-left');\r\n progressOptions[element.dataset.to_step - 1].classList.add('active');\r\n } else {\r\n jumpStep.classList.remove('to-left');\r\n progressOptions[element.dataset.step - 1].classList.remove('active');\r\n }\r\n currentStep.removeEventListener('animationend', callback);\r\n });\r\n currentStep.classList.add('inactive');\r\n jumpStep.classList.remove('inactive');\r\n }\r\n});\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1o y animacion REGISTRO INFORMACI\u00d3N DE CONTACTO Y EMPRESA (Paso 1) Email Tel\u00e9fono Nombre de la empresa P\u00e1gina web \u00bfCuenta con manual de Marca?SiNo Redes Sociales Siguiente SELECCI\u00d3N DE SERVICIOS (Paso 2) Eliga una opcion Servicio unico que necesitasDise\u00f1o 3DAnimacion 2DDise\u00f1o Digital Regresar Siguiente DETALLES DEL PROYECTO Descripci\u00f3n del proyecto Ideas o concepto clave Regresar Siguiente PREFERENCIAS DE DISE\u00d1O Elementos a incluir Regresar Registrar<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-370","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/370"}],"collection":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=370"}],"version-history":[{"count":24,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/370\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/pages\/370\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/bechaprastudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}