Typing Effect<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head><br \/>\n<body><\/p>\n<div class=\"main-container\">\n<div id=\"text\" class=\"typing\">\n <span style=\"color: #ff0000;\">M<\/span>ark of <span style=\"color: #ff0000;\">Archi<\/span>tecture & <span style=\"color: #ff0000;\">In<\/span>terior <span style=\"color: #ff0000;\">De<\/span>sign\n <\/div>\n<div id=\"marchindeContainer\" class=\"marchinde-container\">\n <span id=\"marchinde\" class=\"marchinde\">Marchinde<\/span><br \/>\n <span class=\"line red\">Design Studio<\/span><br \/>\n <span class=\"line green\">Build Construction<\/span><br \/>\n <span class=\"line yellow\">Furniture Store<\/span><br \/>\n <span class=\"line blue\">More<\/span>\n <\/div>\n<\/p>\n<\/div>\n<p> <script src=\"script.js\"><\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n\n\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typing Effect<\/title>\n <style>\n .main-container {\n display: flex;\n flex-direction: column; \/* \u0110\u1eb7t chi\u1ec1u d\u1ecdc *\/\n justify-content: center;\n align-items: center;\n height: 24 px; \/* Chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u cao c\u1ee7a m\u00e0n h\u00ecnh *\/\n font-family: 'Courier New', Courier, monospace;\n font-size: 24px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef m\u1eb7c \u0111\u1ecbnh *\/\n color: white; \/* \u0110\u1ed5i m\u00e0u ch\u1eef th\u00e0nh tr\u1eafng *\/\n margin: 0;\n background-color: transparent; \/* Lo\u1ea1i b\u1ecf m\u00e0u n\u1ec1n *\/\n text-align: center; \/* C\u0103n gi\u1eefa n\u1ed9i dung *\/\n }\n\n .typing {\n border-right: 2px solid #ff0000; \/* M\u00e0u \u0111\u1ecf *\/\n white-space: nowrap;\n overflow: hidden;\n animation: typing 4s steps(37, end), blink 0.75s step-end infinite;\n }\n\n @keyframes typing {\n from { width: 0; }\n to { width: 37ch; }\n }\n\n @keyframes blink {\n 50% { border-color: transparent; }\n }\n\n .fade-out {\n animation: fadeOut 2s forwards; \/* Th\u1eddi gian x\u00f3a ch\u1eef *\/\n }\n\n @keyframes fadeOut {\n from { width: 37ch; }\n to { width: 0; \/* \u0110\u01b0a v\u1ec1 0 \u0111\u1ec3 x\u00f3a ch\u1eef ho\u00e0n to\u00e0n *\/ }\n }\n\n .marchinde-container {\n display: none; \/* \u1ea8n container ch\u1ee9a Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef *\/\n font-size: 24px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef cho Marchinde *\/\n color: white; \/* \u0110\u1ed5i m\u00e0u ch\u1eef th\u00e0nh tr\u1eafng *\/\n }\n\n .marchinde {\n display: inline; \/* \u0110\u1ec3 ch\u1eef Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef c\u00f9ng hi\u1ec3n th\u1ecb tr\u00ean m\u1ed9t d\u00f2ng *\/\n margin-right: 5px; \/* Gi\u1ea3m kho\u1ea3ng c\u00e1ch gi\u1eefa Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef kh\u00e1c xu\u1ed1ng m\u1ed9t n\u1eeda *\/\n animation: blink 1s step-end infinite; \/* Thay \u0111\u1ed5i th\u1eddi gian nh\u1ea5p nh\u00e1y *\/\n }\n\n .blink {\n animation: blinkEffect 0.5s infinite; \/* Th\u00eam hi\u1ec7u \u1ee9ng nh\u1ea5p nh\u00e1y *\/\n }\n\n @keyframes blinkEffect {\n 50% { opacity: 0; }\n }\n\n @keyframes colorChange {\n 0% { color: black; }\n 50% { color: red; }\n 100% { color: black; }\n }\n\n .line {\n display: none; \/* \u1ea8n c\u00e1c d\u00f2ng ch\u1eef *\/\n margin-left: 10px; \/* Th\u00eam kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c d\u00f2ng *\/\n }\n\n .red { color: #ff0000; } \/* M\u00e0u \u0111\u1ecf *\/\n .green { color: #34a853; } \/* M\u00e0u xanh l\u00e1 *\/\n .yellow { color: #fbbc05; } \/* M\u00e0u v\u00e0ng *\/\n .blue { color: #4285f4; } \/* M\u00e0u xanh da tr\u1eddi *\/\n\n \/* Quy t\u1eafc cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng *\/\n @media (max-width: 600px) {\n .main-container {\n font-size: 18px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef nh\u1ecf h\u01a1n tr\u00ean mobile *\/\n }\n\n .marchinde-container {\n font-size: 18px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef cho Marchinde nh\u1ecf h\u01a1n *\/\n }\n\n .line {\n font-size: 18px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef cho d\u00f2ng nh\u1ecf h\u01a1n *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"main-container\">\n <div id=\"text\" class=\"typing\">\n <span style=\"color: #ff0000;\">M<\/span>ark of <span style=\"color: #ff0000;\">Archi<\/span>tecture & <span style=\"color: #ff0000;\">In<\/span>terior <span style=\"color: #ff0000;\">De<\/span>sign\n <\/div>\n\n <div id=\"marchindeContainer\" class=\"marchinde-container\">\n <span id=\"marchinde\" class=\"marchinde\">Marchinde<\/span>\n <span class=\"line red\">Design Studio<\/span>\n <span class=\"line green\">Build Construction<\/span>\n <span class=\"line yellow\">Furniture Store<\/span>\n <span class=\"line blue\">More<\/span>\n <\/div>\n <\/div>\n\n <script>\n const textElement = document.getElementById('text');\n const marchindeContainer = document.getElementById('marchindeContainer');\n const marchindeElement = document.getElementById('marchinde');\n const lines = marchindeContainer.getElementsByClassName('line');\n\n \/\/ Th\u1eddi gian \u0111\u1ec3 d\u1ec5 d\u00e0ng thay \u0111\u1ed5i\n const typingDuration = 4000; \n const blinkDuration = 500;\n const fadeOutDuration = 2000;\n const lineDisplayDuration = 2000; \/\/ Th\u1eddi gian hi\u1ec3n th\u1ecb m\u1ed7i d\u00f2ng ch\u1eef\n const lineFadeOutDuration = 1500; \/\/ Th\u1eddi gian x\u00f3a t\u1eebng d\u00f2ng ch\u1eef\n const intervalDuration = 20000; \/\/ Th\u1eddi gian l\u1eb7p l\u1ea1i to\u00e0n b\u1ed9\n\n function startAnimation() {\n textElement.classList.remove('fade-out', 'blink'); \/\/ X\u00f3a c\u00e1c l\u1edbp nh\u1ea5p nh\u00e1y v\u00e0 fade-out\n marchindeContainer.style.display = 'none'; \/\/ \u1ea8n container ch\u1ee9a Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef\n textElement.style.display = 'block';\n textElement.classList.add('typing');\n\n \/\/ Sau khi animation ho\u00e0n t\u1ea5t, b\u1eaft \u0111\u1ea7u nh\u1ea5p nh\u00e1y\n setTimeout(() => {\n textElement.classList.add('blink'); \/\/ Th\u00eam l\u1edbp nh\u1ea5p nh\u00e1y\n }, typingDuration); \/\/ Th\u1eddi gian \u0111\u1ec3 typing xong\n\n \/\/ Sau khi nh\u1ea5p nh\u00e1y, b\u1eaft \u0111\u1ea7u x\u00f3a ch\u1eef\n setTimeout(() => {\n textElement.classList.remove('blink'); \/\/ X\u00f3a l\u1edbp nh\u1ea5p nh\u00e1y\n textElement.classList.add('fade-out'); \/\/ B\u1eaft \u0111\u1ea7u hi\u1ec7u \u1ee9ng x\u00f3a\n }, typingDuration + blinkDuration); \/\/ Th\u1eddi gian nh\u1ea5p nh\u00e1y tr\u01b0\u1edbc khi x\u00f3a\n\n \/\/ Sau khi x\u00f3a d\u1ea7n, hi\u1ec3n th\u1ecb \"Marchinde\" v\u00e0 c\u00e1c d\u00f2ng ch\u1eef v\u1edbi \u0111\u1ed9 tr\u1ec5 1 gi\u00e2y\n setTimeout(() => {\n textElement.style.display = 'none';\n marchindeContainer.style.display = 'block'; \/\/ Hi\u1ec3n th\u1ecb container ch\u1ee9a Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef\n setTimeout(() => {\n displayNextLine(0); \/\/ B\u1eaft \u0111\u1ea7u hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef \u0111\u1ea7u ti\u00ean\n }, 1000); \/\/ \u0110\u1ed9 tr\u1ec5 1 gi\u00e2y tr\u01b0\u1edbc khi hi\u1ec3n th\u1ecb c\u00e1c d\u00f2ng ch\u1eef\n }, typingDuration + fadeOutDuration); \/\/ Th\u1eddi gian \u0111\u1ec3 x\u00f3a ch\u1eef\n }\n\n \/\/ H\u00e0m \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c d\u00f2ng ch\u1eef l\u1ea7n l\u01b0\u1ee3t\n function displayNextLine(index) {\n if (index < lines.length) {\n const currentLine = lines[index];\n currentLine.style.display = 'inline'; \/\/ Hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef\n setTimeout(() => {\n currentLine.classList.add('blink'); \/\/ Th\u00eam l\u1edbp nh\u1ea5p nh\u00e1y cho d\u00f2ng ch\u1eef\n }, 0); \/\/ Ngay l\u1eadp t\u1ee9c b\u1eaft \u0111\u1ea7u nh\u1ea5p nh\u00e1y\n\n setTimeout(() => {\n currentLine.classList.remove('blink'); \/\/ X\u00f3a l\u1edbp nh\u1ea5p nh\u00e1y\n currentLine.classList.add('fade-out'); \/\/ Th\u00eam l\u1edbp x\u00f3a cho d\u00f2ng ch\u1eef\n }, lineDisplayDuration); \/\/ Th\u1eddi gian hi\u1ec3n th\u1ecb t\u1eebng d\u00f2ng ch\u1eef\n\n \/\/ Sau khi x\u00f3a d\u00f2ng ch\u1eef hi\u1ec7n t\u1ea1i, ti\u1ebfp t\u1ee5c v\u1edbi d\u00f2ng ti\u1ebfp theo\n setTimeout(() => {\n currentLine.style.display = 'none'; \/\/ \u1ea8n d\u00f2ng ch\u1eef hi\u1ec7n t\u1ea1i\n displayNextLine(index + 1); \/\/ Hi\u1ec3n th\u1ecb d\u00f2ng ti\u1ebfp theo\n }, lineDisplayDuration + lineFadeOutDuration); \/\/ T\u1ed5ng th\u1eddi gian hi\u1ec3n th\u1ecb v\u00e0 x\u00f3a\n } else {\n \/\/ Sau khi \u0111\u00e3 hi\u1ec3n th\u1ecb t\u1ea5t c\u1ea3 c\u00e1c d\u00f2ng ch\u1eef, b\u1eaft \u0111\u1ea7u l\u1ea1i animation\n setTimeout(startAnimation, 1000); \/\/ Th\u00eam \u0111\u1ed9 tr\u1ec5 1 gi\u00e2y tr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u l\u1ea1i\n }\n }\n\n \/\/ B\u1eaft \u0111\u1ea7u animation l\u1ea7n \u0111\u1ea7u ti\u00ean\n startAnimation();\n\n \/\/ L\u1eb7p l\u1ea1i to\u00e0n b\u1ed9 sau 20 gi\u00e2y\n setInterval(startAnimation, intervalDuration); \/\/ Th\u1eddi gian l\u1eb7p l\u1ea1i l\u00e0 20 gi\u00e2y\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typing Effect<\/title>\n <style>\n textbodymarchindev3 {\n margin: 0;\n padding: 0;\n background: black;\n }\n\n .textcontainermarchindev3 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 40px;\n font-family: 'Courier New', Courier, monospace;\n font-size: 24px;\n color: white;\n margin: 0;\n text-align: center;\n }\n\n .marchindetypingv3 {\n border-right: 2px solid #ff0000;\n white-space: nowrap;\n overflow: hidden;\n animation: typing 2s steps(40, end), blink 0.5s step-end 2;\n }\n\n @keyframes typing {\n from { width: 0; }\n to { width: 40ch; }\n }\n\n @keyframes blink {\n 50% { border-color: transparent; }\n }\n\n @keyframes removeWhite {\n 0% { color: white; }\n 100% { color: black; }\n }\n\n .red { color: #ff0000; }\n\n .white { color: white; }\n\n @media (max-width: 600px) {\n .textcontainermarchindev3 {\n font-size: 18px;\n }\n }\n <\/style>\n<\/head>\n<textbodymarchindev3>\n <div class=\"textcontainermarchindev3\">\n <div id=\"text\" class=\"marchindetypingv3\">\n <span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign\n <\/div>\n <\/div>\n\n <script>\n const textElement = document.getElementById('text');\n\n function startAnimation() {\n textElement.innerHTML = '<span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign';\n textElement.classList.add('marchindetypingv3');\n\n setTimeout(() => {\n textElement.classList.remove('marchindetypingv3');\n textElement.classList.add('removeWhite');\n }, 2000);\n\n setTimeout(() => {\n const redText = document.querySelectorAll('.red');\n let finalText = '';\n redText.forEach(el => finalText += el.textContent);\n textElement.innerHTML = `<span class=\"white\">${finalText}<\/span>`;\n textElement.classList.add('blink');\n }, 4000);\n\n setTimeout(() => {\n textElement.innerHTML = 'Marchinde';\n textElement.classList.remove('blink');\n }, 6000);\n }\n\n startAnimation();\n setInterval(startAnimation, 10000); \/\/ L\u1eb7p l\u1ea1i to\u00e0n b\u1ed9 sau 10 gi\u00e2y\n <\/script>\n<\/textbodymarchindev3>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typing Effect 2<\/title>\n <style>\n textbodymarchindev3 {\n margin: 0;\n padding: 0;\n background: black;\n }\n\n .textcontainermarchindev3 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 50px;\n font-family: 'Courier New', Courier, monospace;\n font-size: 24px;\n color: white;\n margin: 0;\n text-align: center;\n }\n\n .marchindetypingv3 {\n border-right: 2px solid #ff0000;\n white-space: nowrap;\n overflow: hidden;\n animation: typing 2s steps(40, end), blink 0.5s step-end 2;\n }\n\n @keyframes typing {\n from { width: 0; }\n to { width: 40ch; }\n }\n\n @keyframes blink {\n 50% { border-color: transparent; }\n }\n\n @keyframes removeWhite {\n 0% { color: white; }\n 100% { color: black; }\n }\n\n .red { color: #ff0000; }\n\n .white { color: white; }\n\n @media (max-width: 600px) {\n .textcontainermarchindev3 {\n font-size: 18px;\n }\n }\n <\/style>\n<\/head>\n<textbodymarchindev3>\n <div class=\"textcontainermarchindev3\">\n <div id=\"text2\" class=\"marchindetypingv3\">\n <span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign\n <\/div>\n <\/div>\n\n <script>\n const textElement2 = document.getElementById('text2');\n\n function startAnimation2() {\n textElement2.innerHTML = '<span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign';\n textElement2.classList.add('marchindetypingv3');\n\n setTimeout(() => {\n textElement2.classList.remove('marchindetypingv3');\n textElement2.classList.add('removeWhite');\n }, 2000);\n\n setTimeout(() => {\n const redText2 = document.querySelectorAll('.red');\n let finalText2 = '';\n redText2.forEach(el => finalText2 += el.textContent);\n textElement2.innerHTML = `<span class=\"white\">${finalText2}<\/span>`;\n textElement2.classList.add('blink');\n }, 4000);\n\n setTimeout(() => {\n textElement2.innerHTML = 'Marchinde';\n textElement2.classList.remove('blink');\n }, 6000);\n }\n\n startAnimation2();\n setInterval(startAnimation2, 10000); \/\/ L\u1eb7p l\u1ea1i to\u00e0n b\u1ed9 sau 10 gi\u00e2y\n <\/script>\n<\/textbodymarchindev3>\n<\/html>\n\n\n <\/div>\n <\/div>\n \n<style>\n#text-box-681719793 {\n width: 99%;\n}\n#text-box-681719793 .text-box-content {\n font-size: 100%;\n}\n<\/style>\n <\/div>\n \n\n <\/div>\n <\/div>\n\n \n<style>\n#banner-969963754 {\n padding-top: 100%;\n}\n#banner-969963754 .overlay {\n background-color: rgba(109, 106, 106, 0.5);\n}\n<\/style>\n <\/div>\n\n\n\n <\/div>\n\n <div class=\"loading-spin dark large centered\"><\/div>\n\n\t<\/div>\n\n\n\n\t<section class=\"section\" id=\"section_364472605\">\n\t\t<div class=\"section-bg fill\" >\n\t\t\t\t\t\t\t\t\t\n\t\t\t\n\n\t\t<\/div>\n\n\t\t\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n\n\t<div id=\"gap-1381653140\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1381653140 {\n padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n\n<div class=\"row\" id=\"row-971830140\">\n\n\n\t<div id=\"col-302721641\" class=\"col small-12 large-12\" >\n\t\t\t\t<div class=\"col-inner\" >\n\t\t\t\n\t\t\t\n\n<div class=\"row row-collapse align-equal\" id=\"row-1937589744\">\n\n\n\t<div id=\"col-637928823\" class=\"col medium-12 small-12 large-6\" >\n\t\t\t\t<div class=\"col-inner\" >\n\t\t\t\n\t\t\t\n\n\n <div class=\"banner has-hover\" id=\"banner-1422439295\">\n <div class=\"banner-inner fill\">\n <div class=\"banner-bg fill\" >\n \n <\/div>\n\t\t\n <div class=\"banner-layers container\">\n <div class=\"fill banner-link\"><\/div> \n\n <div id=\"text-box-461028553\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n <div class=\"text-box-content text dark\">\n \n <div class=\"text-inner text-center\">\n \n\n\n <\/div>\n <\/div>\n \n<style>\n#text-box-461028553 {\n width: 60%;\n}\n#text-box-461028553 .text-box-content {\n font-size: 100%;\n}\n@media (min-width:550px) {\n #text-box-461028553 {\n width: 60%;\n }\n}\n<\/style>\n <\/div>\n \n\n <\/div>\n <\/div>\n\n \n<style>\n#banner-1422439295 {\n padding-top: 99.99%;\n background-color: rgb(255, 255, 255);\n}\n@media (min-width:550px) {\n #banner-1422439295 {\n padding-top: 500px;\n }\n}\n<\/style>\n <\/div>\n\n\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1354295185\" class=\"col medium-12 small-12 large-6\" >\n\t\t\t\t<div class=\"col-inner\" >\n\t\t\t\n\t\t\t\n\n\t<div id=\"gap-162392350\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-162392350 {\n padding-top: 15px;\n}\n<\/style>\n\t<\/div>\n\t\n\n<h2>Get in touch<\/h2>\n\t<div id=\"gap-1327762266\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1327762266 {\n padding-top: 15px;\n}\n<\/style>\n\t<\/div>\n\t\n\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f9466-o1\" lang=\"vi\" dir=\"ltr\" data-wpcf7-id=\"9466\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/vi\/wp-json\/wp\/v2\/pages\/8558#wpcf7-f9466-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Form li\u00ean h\u1ec7\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"9466\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"vi\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f9466-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div style=\"display: none\"><p><span class=\"wpcf7-form-control-wrap\" data-name=\"devvn\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"devvn\"><\/span><\/p><\/div><div style=\"display: flex; justify-content: space-between;\">\n\t<div style=\"width: 48%;\">\n\t\t<p>[text* ten id:ten placeholder \"T\u00ean\" class:input-colored]\n\t\t<\/p>\n\t<\/div>\n\t<div style=\"width: 48%;\">\n\t\t<p>[tel* sodienthoai id:sodienthoai placeholder \"S\u1ed1 \u0111i\u1ec7n tho\u1ea1i\" class:input-colored]\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<p><br \/>\n[email* email id:email placeholder \"Email\" class:input-colored]\n<\/p>\n<p><br \/>\n[textarea* yeucau id:yeucau placeholder \"Th\u00f4ng tin y\u00eau c\u1ea7u\" class:input-colored]\n<\/p>\n<p><br \/>\n[quiz* spamquestion \"1+1=?|2\" class:input-colored]\n<\/p>\n<p><br \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"G\u1eedi \u0111i\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n\n\n\t\t<\/div>\n\t\t\t\t\n<style>\n#col-1354295185 > .col-inner {\n padding: 30px 30px 10px 30px;\n}\n@media (min-width:550px) {\n #col-1354295185 > .col-inner {\n padding: 60px 60px 40px 60px;\n }\n}\n@media (min-width:850px) {\n #col-1354295185 > .col-inner {\n padding: 60px 60px 30px 60px;\n }\n}\n<\/style>\n\t<\/div>\n\n\t\n\n\n<style>\n#row-1937589744 > .col > .col-inner {\n background-color: rgb(255, 255, 255);\n}\n<\/style>\n<\/div>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n<\/div>\n\n\n<meta charset=\"UTF-8\">\n <meta name=\"viewport\" contenttextv5=\"width=device-width, initial-scale=1.0\">\n <title>Animated Text<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Lato\" rel=\"stylesheet\">\n <style>\n body {\n width: 100%;\n height: 50%;\n position: fixed;\n font-family: 'Lato', sans-serif;\n background-color: #34495e;\n }\n\n .contenttextv5 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 160px;\n overflow: hidden;\n font-size: 20px;\n line-height: 40px;\n color: #ecf0f1;\n }\n\n .contenttextv5__container {\n font-weight: 600;\n overflow: hidden;\n height: 40px;\n padding: 0 40px;\n position: relative;\n }\n\n .contenttextv5__container:before {\n contenttextv5: '';\n position: absolute;\n top: 0;\n left: 0;\n color: #16a085;\n font-size: 42px;\n line-height: 40px;\n animation: opacity 2s infinite;\n }\n\n .contenttextv5__container:after {\n contenttextv5: '';\n position: absolute;\n top: 0;\n right: 0;\n color: #16a085;\n font-size: 42px;\n line-height: 40px;\n animation: opacity 2s infinite;\n }\n\n .contenttextv5__container__text {\n display: inline;\n float: left;\n margin: 0;\n }\n\n .contenttextv5__container__list {\n margin-top: 0;\n padding-left: 110px;\n text-align: left;\n list-style: none;\n animation: change 10s infinite;\n }\n\n .contenttextv5__container__list__item {\n line-height: 40px;\n margin: 0;\n }\n\n .contenttextv5__container__list__item:nth-child(1) {\n color: #ff0000; \/* M\u00e0u \u0111\u1ecf cho ch\u1eef \"Design\" *\/\n }\n\n .contenttextv5__container__list__item:nth-child(2) {\n color: #34a853; \/* M\u00e0u v\u00e0ng cho ch\u1eef \"Build\" *\/\n }\n\n .contenttextv5__container__list__item:nth-child(3) {\n color: #fbbc05; \/* M\u00e0u t\u00edm cho ch\u1eef \"Store\" *\/\n }\n\n .contenttextv5__container__list__item:nth-child(4) {\n color: #4285f4; \/* M\u00e0u h\u1ed3ng cho ch\u1eef \"More\" *\/\n }\n\n @keyframes opacity {\n 0%, 100% {opacity: 0;}\n 50% {opacity: 1;}\n }\n\n @keyframes change {\n 0%, 12.66%, 100% {transform: translate3d(0, 0, 0);}\n 16.66%, 29.32% {transform: translate3d(0, -25%, 0);}\n 33.32%, 45.98% {transform: translate3d(0, -50%, 0);}\n 49.98%, 62.64% {transform: translate3d(0, -75%, 0);}\n 66.64%, 79.3% {transform: translate3d(0, -50%, 0);}\n 83.3%, 95.96% {transform: translate3d(0, -25%, 0);}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"contenttextv5\">\n <div class=\"contenttextv5__container\">\n <p class=\"contenttextv5__container__text\">\n Marchinde\n <\/p>\n <ul class=\"contenttextv5__container__list\">\n <li class=\"contenttextv5__container__list__item\">Design<\/li>\n <li class=\"contenttextv5__container__list__item\">Build<\/li>\n <li class=\"contenttextv5__container__list__item\">Store<\/li>\n <li class=\"contenttextv5__container__list__item\">More<\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n\n\t\t<\/div>\n\n\t\t\n<style>\n#section_364472605 {\n padding-top: 60px;\n padding-bottom: 60px;\n background-color: rgb(34, 54, 44);\n}\n<\/style>\n\t<\/section>\n\t\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-single-page-nav-transparent-light.php","meta":{"footnotes":""},"class_list":["post-8558","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/8558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/comments?post=8558"}],"version-history":[{"count":30,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/8558\/revisions"}],"predecessor-version":[{"id":9519,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/8558\/revisions\/9519"}],"wp:attachment":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/media?parent=8558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n \n\n\n

\n $\"Marchinde$

<\/div> \n <\/div>\n\t\t\n

<\/div> \n\n

\n \n

\n \n\n

\n
\n
\n
\n
\n Typing Effect<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head><br \/>\n<body><\/p>\n<div class=\"main-container\">\n<div id=\"text\" class=\"typing\">\n <span style=\"color: #ff0000;\">M<\/span>ark of <span style=\"color: #ff0000;\">Archi<\/span>tecture & <span style=\"color: #ff0000;\">In<\/span>terior <span style=\"color: #ff0000;\">De<\/span>sign\n <\/div>\n<div id=\"marchindeContainer\" class=\"marchinde-container\">\n <span id=\"marchinde\" class=\"marchinde\">Marchinde<\/span><br \/>\n <span class=\"line red\">Design Studio<\/span><br \/>\n <span class=\"line green\">Build Construction<\/span><br \/>\n <span class=\"line yellow\">Furniture Store<\/span><br \/>\n <span class=\"line blue\">More<\/span>\n <\/div>\n<\/p>\n<\/div>\n<p> <script src=\"script.js\"><\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n\n\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typing Effect<\/title>\n <style>\n .main-container {\n display: flex;\n flex-direction: column; \/* \u0110\u1eb7t chi\u1ec1u d\u1ecdc *\/\n justify-content: center;\n align-items: center;\n height: 24 px; \/* Chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u cao c\u1ee7a m\u00e0n h\u00ecnh *\/\n font-family: 'Courier New', Courier, monospace;\n font-size: 24px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef m\u1eb7c \u0111\u1ecbnh *\/\n color: white; \/* \u0110\u1ed5i m\u00e0u ch\u1eef th\u00e0nh tr\u1eafng *\/\n margin: 0;\n background-color: transparent; \/* Lo\u1ea1i b\u1ecf m\u00e0u n\u1ec1n *\/\n text-align: center; \/* C\u0103n gi\u1eefa n\u1ed9i dung *\/\n }\n\n .typing {\n border-right: 2px solid #ff0000; \/* M\u00e0u \u0111\u1ecf *\/\n white-space: nowrap;\n overflow: hidden;\n animation: typing 4s steps(37, end), blink 0.75s step-end infinite;\n }\n\n @keyframes typing {\n from { width: 0; }\n to { width: 37ch; }\n }\n\n @keyframes blink {\n 50% { border-color: transparent; }\n }\n\n .fade-out {\n animation: fadeOut 2s forwards; \/* Th\u1eddi gian x\u00f3a ch\u1eef *\/\n }\n\n @keyframes fadeOut {\n from { width: 37ch; }\n to { width: 0; \/* \u0110\u01b0a v\u1ec1 0 \u0111\u1ec3 x\u00f3a ch\u1eef ho\u00e0n to\u00e0n *\/ }\n }\n\n .marchinde-container {\n display: none; \/* \u1ea8n container ch\u1ee9a Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef *\/\n font-size: 24px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef cho Marchinde *\/\n color: white; \/* \u0110\u1ed5i m\u00e0u ch\u1eef th\u00e0nh tr\u1eafng *\/\n }\n\n .marchinde {\n display: inline; \/* \u0110\u1ec3 ch\u1eef Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef c\u00f9ng hi\u1ec3n th\u1ecb tr\u00ean m\u1ed9t d\u00f2ng *\/\n margin-right: 5px; \/* Gi\u1ea3m kho\u1ea3ng c\u00e1ch gi\u1eefa Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef kh\u00e1c xu\u1ed1ng m\u1ed9t n\u1eeda *\/\n animation: blink 1s step-end infinite; \/* Thay \u0111\u1ed5i th\u1eddi gian nh\u1ea5p nh\u00e1y *\/\n }\n\n .blink {\n animation: blinkEffect 0.5s infinite; \/* Th\u00eam hi\u1ec7u \u1ee9ng nh\u1ea5p nh\u00e1y *\/\n }\n\n @keyframes blinkEffect {\n 50% { opacity: 0; }\n }\n\n @keyframes colorChange {\n 0% { color: black; }\n 50% { color: red; }\n 100% { color: black; }\n }\n\n .line {\n display: none; \/* \u1ea8n c\u00e1c d\u00f2ng ch\u1eef *\/\n margin-left: 10px; \/* Th\u00eam kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c d\u00f2ng *\/\n }\n\n .red { color: #ff0000; } \/* M\u00e0u \u0111\u1ecf *\/\n .green { color: #34a853; } \/* M\u00e0u xanh l\u00e1 *\/\n .yellow { color: #fbbc05; } \/* M\u00e0u v\u00e0ng *\/\n .blue { color: #4285f4; } \/* M\u00e0u xanh da tr\u1eddi *\/\n\n \/* Quy t\u1eafc cho thi\u1ebft b\u1ecb di \u0111\u1ed9ng *\/\n @media (max-width: 600px) {\n .main-container {\n font-size: 18px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef nh\u1ecf h\u01a1n tr\u00ean mobile *\/\n }\n\n .marchinde-container {\n font-size: 18px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef cho Marchinde nh\u1ecf h\u01a1n *\/\n }\n\n .line {\n font-size: 18px; \/* K\u00edch th\u01b0\u1edbc ch\u1eef cho d\u00f2ng nh\u1ecf h\u01a1n *\/\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"main-container\">\n <div id=\"text\" class=\"typing\">\n <span style=\"color: #ff0000;\">M<\/span>ark of <span style=\"color: #ff0000;\">Archi<\/span>tecture & <span style=\"color: #ff0000;\">In<\/span>terior <span style=\"color: #ff0000;\">De<\/span>sign\n <\/div>\n\n <div id=\"marchindeContainer\" class=\"marchinde-container\">\n <span id=\"marchinde\" class=\"marchinde\">Marchinde<\/span>\n <span class=\"line red\">Design Studio<\/span>\n <span class=\"line green\">Build Construction<\/span>\n <span class=\"line yellow\">Furniture Store<\/span>\n <span class=\"line blue\">More<\/span>\n <\/div>\n <\/div>\n\n <script>\n const textElement = document.getElementById('text');\n const marchindeContainer = document.getElementById('marchindeContainer');\n const marchindeElement = document.getElementById('marchinde');\n const lines = marchindeContainer.getElementsByClassName('line');\n\n \/\/ Th\u1eddi gian \u0111\u1ec3 d\u1ec5 d\u00e0ng thay \u0111\u1ed5i\n const typingDuration = 4000; \n const blinkDuration = 500;\n const fadeOutDuration = 2000;\n const lineDisplayDuration = 2000; \/\/ Th\u1eddi gian hi\u1ec3n th\u1ecb m\u1ed7i d\u00f2ng ch\u1eef\n const lineFadeOutDuration = 1500; \/\/ Th\u1eddi gian x\u00f3a t\u1eebng d\u00f2ng ch\u1eef\n const intervalDuration = 20000; \/\/ Th\u1eddi gian l\u1eb7p l\u1ea1i to\u00e0n b\u1ed9\n\n function startAnimation() {\n textElement.classList.remove('fade-out', 'blink'); \/\/ X\u00f3a c\u00e1c l\u1edbp nh\u1ea5p nh\u00e1y v\u00e0 fade-out\n marchindeContainer.style.display = 'none'; \/\/ \u1ea8n container ch\u1ee9a Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef\n textElement.style.display = 'block';\n textElement.classList.add('typing');\n\n \/\/ Sau khi animation ho\u00e0n t\u1ea5t, b\u1eaft \u0111\u1ea7u nh\u1ea5p nh\u00e1y\n setTimeout(() => {\n textElement.classList.add('blink'); \/\/ Th\u00eam l\u1edbp nh\u1ea5p nh\u00e1y\n }, typingDuration); \/\/ Th\u1eddi gian \u0111\u1ec3 typing xong\n\n \/\/ Sau khi nh\u1ea5p nh\u00e1y, b\u1eaft \u0111\u1ea7u x\u00f3a ch\u1eef\n setTimeout(() => {\n textElement.classList.remove('blink'); \/\/ X\u00f3a l\u1edbp nh\u1ea5p nh\u00e1y\n textElement.classList.add('fade-out'); \/\/ B\u1eaft \u0111\u1ea7u hi\u1ec7u \u1ee9ng x\u00f3a\n }, typingDuration + blinkDuration); \/\/ Th\u1eddi gian nh\u1ea5p nh\u00e1y tr\u01b0\u1edbc khi x\u00f3a\n\n \/\/ Sau khi x\u00f3a d\u1ea7n, hi\u1ec3n th\u1ecb \"Marchinde\" v\u00e0 c\u00e1c d\u00f2ng ch\u1eef v\u1edbi \u0111\u1ed9 tr\u1ec5 1 gi\u00e2y\n setTimeout(() => {\n textElement.style.display = 'none';\n marchindeContainer.style.display = 'block'; \/\/ Hi\u1ec3n th\u1ecb container ch\u1ee9a Marchinde v\u00e0 c\u00e1c d\u00f2ng ch\u1eef\n setTimeout(() => {\n displayNextLine(0); \/\/ B\u1eaft \u0111\u1ea7u hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef \u0111\u1ea7u ti\u00ean\n }, 1000); \/\/ \u0110\u1ed9 tr\u1ec5 1 gi\u00e2y tr\u01b0\u1edbc khi hi\u1ec3n th\u1ecb c\u00e1c d\u00f2ng ch\u1eef\n }, typingDuration + fadeOutDuration); \/\/ Th\u1eddi gian \u0111\u1ec3 x\u00f3a ch\u1eef\n }\n\n \/\/ H\u00e0m \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c d\u00f2ng ch\u1eef l\u1ea7n l\u01b0\u1ee3t\n function displayNextLine(index) {\n if (index < lines.length) {\n const currentLine = lines[index];\n currentLine.style.display = 'inline'; \/\/ Hi\u1ec3n th\u1ecb d\u00f2ng ch\u1eef\n setTimeout(() => {\n currentLine.classList.add('blink'); \/\/ Th\u00eam l\u1edbp nh\u1ea5p nh\u00e1y cho d\u00f2ng ch\u1eef\n }, 0); \/\/ Ngay l\u1eadp t\u1ee9c b\u1eaft \u0111\u1ea7u nh\u1ea5p nh\u00e1y\n\n setTimeout(() => {\n currentLine.classList.remove('blink'); \/\/ X\u00f3a l\u1edbp nh\u1ea5p nh\u00e1y\n currentLine.classList.add('fade-out'); \/\/ Th\u00eam l\u1edbp x\u00f3a cho d\u00f2ng ch\u1eef\n }, lineDisplayDuration); \/\/ Th\u1eddi gian hi\u1ec3n th\u1ecb t\u1eebng d\u00f2ng ch\u1eef\n\n \/\/ Sau khi x\u00f3a d\u00f2ng ch\u1eef hi\u1ec7n t\u1ea1i, ti\u1ebfp t\u1ee5c v\u1edbi d\u00f2ng ti\u1ebfp theo\n setTimeout(() => {\n currentLine.style.display = 'none'; \/\/ \u1ea8n d\u00f2ng ch\u1eef hi\u1ec7n t\u1ea1i\n displayNextLine(index + 1); \/\/ Hi\u1ec3n th\u1ecb d\u00f2ng ti\u1ebfp theo\n }, lineDisplayDuration + lineFadeOutDuration); \/\/ T\u1ed5ng th\u1eddi gian hi\u1ec3n th\u1ecb v\u00e0 x\u00f3a\n } else {\n \/\/ Sau khi \u0111\u00e3 hi\u1ec3n th\u1ecb t\u1ea5t c\u1ea3 c\u00e1c d\u00f2ng ch\u1eef, b\u1eaft \u0111\u1ea7u l\u1ea1i animation\n setTimeout(startAnimation, 1000); \/\/ Th\u00eam \u0111\u1ed9 tr\u1ec5 1 gi\u00e2y tr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u l\u1ea1i\n }\n }\n\n \/\/ B\u1eaft \u0111\u1ea7u animation l\u1ea7n \u0111\u1ea7u ti\u00ean\n startAnimation();\n\n \/\/ L\u1eb7p l\u1ea1i to\u00e0n b\u1ed9 sau 20 gi\u00e2y\n setInterval(startAnimation, intervalDuration); \/\/ Th\u1eddi gian l\u1eb7p l\u1ea1i l\u00e0 20 gi\u00e2y\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typing Effect<\/title>\n <style>\n textbodymarchindev3 {\n margin: 0;\n padding: 0;\n background: black;\n }\n\n .textcontainermarchindev3 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 40px;\n font-family: 'Courier New', Courier, monospace;\n font-size: 24px;\n color: white;\n margin: 0;\n text-align: center;\n }\n\n .marchindetypingv3 {\n border-right: 2px solid #ff0000;\n white-space: nowrap;\n overflow: hidden;\n animation: typing 2s steps(40, end), blink 0.5s step-end 2;\n }\n\n @keyframes typing {\n from { width: 0; }\n to { width: 40ch; }\n }\n\n @keyframes blink {\n 50% { border-color: transparent; }\n }\n\n @keyframes removeWhite {\n 0% { color: white; }\n 100% { color: black; }\n }\n\n .red { color: #ff0000; }\n\n .white { color: white; }\n\n @media (max-width: 600px) {\n .textcontainermarchindev3 {\n font-size: 18px;\n }\n }\n <\/style>\n<\/head>\n<textbodymarchindev3>\n <div class=\"textcontainermarchindev3\">\n <div id=\"text\" class=\"marchindetypingv3\">\n <span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign\n <\/div>\n <\/div>\n\n <script>\n const textElement = document.getElementById('text');\n\n function startAnimation() {\n textElement.innerHTML = '<span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign';\n textElement.classList.add('marchindetypingv3');\n\n setTimeout(() => {\n textElement.classList.remove('marchindetypingv3');\n textElement.classList.add('removeWhite');\n }, 2000);\n\n setTimeout(() => {\n const redText = document.querySelectorAll('.red');\n let finalText = '';\n redText.forEach(el => finalText += el.textContent);\n textElement.innerHTML = `<span class=\"white\">${finalText}<\/span>`;\n textElement.classList.add('blink');\n }, 4000);\n\n setTimeout(() => {\n textElement.innerHTML = 'Marchinde';\n textElement.classList.remove('blink');\n }, 6000);\n }\n\n startAnimation();\n setInterval(startAnimation, 10000); \/\/ L\u1eb7p l\u1ea1i to\u00e0n b\u1ed9 sau 10 gi\u00e2y\n <\/script>\n<\/textbodymarchindev3>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"vi\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Typing Effect 2<\/title>\n <style>\n textbodymarchindev3 {\n margin: 0;\n padding: 0;\n background: black;\n }\n\n .textcontainermarchindev3 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 50px;\n font-family: 'Courier New', Courier, monospace;\n font-size: 24px;\n color: white;\n margin: 0;\n text-align: center;\n }\n\n .marchindetypingv3 {\n border-right: 2px solid #ff0000;\n white-space: nowrap;\n overflow: hidden;\n animation: typing 2s steps(40, end), blink 0.5s step-end 2;\n }\n\n @keyframes typing {\n from { width: 0; }\n to { width: 40ch; }\n }\n\n @keyframes blink {\n 50% { border-color: transparent; }\n }\n\n @keyframes removeWhite {\n 0% { color: white; }\n 100% { color: black; }\n }\n\n .red { color: #ff0000; }\n\n .white { color: white; }\n\n @media (max-width: 600px) {\n .textcontainermarchindev3 {\n font-size: 18px;\n }\n }\n <\/style>\n<\/head>\n<textbodymarchindev3>\n <div class=\"textcontainermarchindev3\">\n <div id=\"text2\" class=\"marchindetypingv3\">\n <span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign\n <\/div>\n <\/div>\n\n <script>\n const textElement2 = document.getElementById('text2');\n\n function startAnimation2() {\n textElement2.innerHTML = '<span class=\"red\">M<\/span>ark of <span class=\"red\">Arch<\/span>itecture & <span class=\"red\">In<\/span>terior <span class=\"red\">De<\/span>sign';\n textElement2.classList.add('marchindetypingv3');\n\n setTimeout(() => {\n textElement2.classList.remove('marchindetypingv3');\n textElement2.classList.add('removeWhite');\n }, 2000);\n\n setTimeout(() => {\n const redText2 = document.querySelectorAll('.red');\n let finalText2 = '';\n redText2.forEach(el => finalText2 += el.textContent);\n textElement2.innerHTML = `<span class=\"white\">${finalText2}<\/span>`;\n textElement2.classList.add('blink');\n }, 4000);\n\n setTimeout(() => {\n textElement2.innerHTML = 'Marchinde';\n textElement2.classList.remove('blink');\n }, 6000);\n }\n\n startAnimation2();\n setInterval(startAnimation2, 10000); \/\/ L\u1eb7p l\u1ea1i to\u00e0n b\u1ed9 sau 10 gi\u00e2y\n <\/script>\n<\/textbodymarchindev3>\n<\/html>\n\n\n <\/div>\n <\/div>\n \n<style>\n#text-box-681719793 {\n width: 99%;\n}\n#text-box-681719793 .text-box-content {\n font-size: 100%;\n}\n<\/style>\n <\/div>\n \n\n <\/div>\n <\/div>\n\n \n<style>\n#banner-969963754 {\n padding-top: 100%;\n}\n#banner-969963754 .overlay {\n background-color: rgba(109, 106, 106, 0.5);\n}\n<\/style>\n <\/div>\n\n\n\n <\/div>\n\n <div class=\"loading-spin dark large centered\"><\/div>\n\n\t<\/div>\n\n\n\n\t<section class=\"section\" id=\"section_364472605\">\n\t\t<div class=\"section-bg fill\" >\n\t\t\t\t\t\t\t\t\t\n\t\t\t\n\n\t\t<\/div>\n\n\t\t\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n\n\t<div id=\"gap-1381653140\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1381653140 {\n padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n\n<div class=\"row\" id=\"row-971830140\">\n\n\n\t<div id=\"col-302721641\" class=\"col small-12 large-12\" >\n\t\t\t\t<div class=\"col-inner\" >\n\t\t\t\n\t\t\t\n\n<div class=\"row row-collapse align-equal\" id=\"row-1937589744\">\n\n\n\t<div id=\"col-637928823\" class=\"col medium-12 small-12 large-6\" >\n\t\t\t\t<div class=\"col-inner\" >\n\t\t\t\n\t\t\t\n\n\n <div class=\"banner has-hover\" id=\"banner-1422439295\">\n <div class=\"banner-inner fill\">\n <div class=\"banner-bg fill\" >\n \n <\/div>\n\t\t\n <div class=\"banner-layers container\">\n <div class=\"fill banner-link\"><\/div> \n\n <div id=\"text-box-461028553\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n <div class=\"text-box-content text dark\">\n \n <div class=\"text-inner text-center\">\n \n\n\n <\/div>\n <\/div>\n \n<style>\n#text-box-461028553 {\n width: 60%;\n}\n#text-box-461028553 .text-box-content {\n font-size: 100%;\n}\n@media (min-width:550px) {\n #text-box-461028553 {\n width: 60%;\n }\n}\n<\/style>\n <\/div>\n \n\n <\/div>\n <\/div>\n\n \n<style>\n#banner-1422439295 {\n padding-top: 99.99%;\n background-color: rgb(255, 255, 255);\n}\n@media (min-width:550px) {\n #banner-1422439295 {\n padding-top: 500px;\n }\n}\n<\/style>\n <\/div>\n\n\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1354295185\" class=\"col medium-12 small-12 large-6\" >\n\t\t\t\t<div class=\"col-inner\" >\n\t\t\t\n\t\t\t\n\n\t<div id=\"gap-162392350\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-162392350 {\n padding-top: 15px;\n}\n<\/style>\n\t<\/div>\n\t\n\n<h2>Get in touch<\/h2>\n\t<div id=\"gap-1327762266\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1327762266 {\n padding-top: 15px;\n}\n<\/style>\n\t<\/div>\n\t\n\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f9466-o1\" lang=\"vi\" dir=\"ltr\" data-wpcf7-id=\"9466\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/vi\/wp-json\/wp\/v2\/pages\/8558#wpcf7-f9466-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Form li\u00ean h\u1ec7\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"9466\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"vi\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f9466-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div style=\"display: none\"><p><span class=\"wpcf7-form-control-wrap\" data-name=\"devvn\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"devvn\"><\/span><\/p><\/div><div style=\"display: flex; justify-content: space-between;\">\n\t<div style=\"width: 48%;\">\n\t\t<p>[text* ten id:ten placeholder \"T\u00ean\" class:input-colored]\n\t\t<\/p>\n\t<\/div>\n\t<div style=\"width: 48%;\">\n\t\t<p>[tel* sodienthoai id:sodienthoai placeholder \"S\u1ed1 \u0111i\u1ec7n tho\u1ea1i\" class:input-colored]\n\t\t<\/p>\n\t<\/div>\n<\/div>\n<p><br \/>\n[email* email id:email placeholder \"Email\" class:input-colored]\n<\/p>\n<p><br \/>\n[textarea* yeucau id:yeucau placeholder \"Th\u00f4ng tin y\u00eau c\u1ea7u\" class:input-colored]\n<\/p>\n<p><br \/>\n[quiz* spamquestion \"1+1=?|2\" class:input-colored]\n<\/p>\n<p><br \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"G\u1eedi \u0111i\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n\n\n\t\t<\/div>\n\t\t\t\t\n<style>\n#col-1354295185 > .col-inner {\n padding: 30px 30px 10px 30px;\n}\n@media (min-width:550px) {\n #col-1354295185 > .col-inner {\n padding: 60px 60px 40px 60px;\n }\n}\n@media (min-width:850px) {\n #col-1354295185 > .col-inner {\n padding: 60px 60px 30px 60px;\n }\n}\n<\/style>\n\t<\/div>\n\n\t\n\n\n<style>\n#row-1937589744 > .col > .col-inner {\n background-color: rgb(255, 255, 255);\n}\n<\/style>\n<\/div>\n\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n<\/div>\n\n\n<meta charset=\"UTF-8\">\n <meta name=\"viewport\" contenttextv5=\"width=device-width, initial-scale=1.0\">\n <title>Animated Text<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css?family=Lato\" rel=\"stylesheet\">\n <style>\n body {\n width: 100%;\n height: 50%;\n position: fixed;\n font-family: 'Lato', sans-serif;\n background-color: #34495e;\n }\n\n .contenttextv5 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 160px;\n overflow: hidden;\n font-size: 20px;\n line-height: 40px;\n color: #ecf0f1;\n }\n\n .contenttextv5__container {\n font-weight: 600;\n overflow: hidden;\n height: 40px;\n padding: 0 40px;\n position: relative;\n }\n\n .contenttextv5__container:before {\n contenttextv5: '';\n position: absolute;\n top: 0;\n left: 0;\n color: #16a085;\n font-size: 42px;\n line-height: 40px;\n animation: opacity 2s infinite;\n }\n\n .contenttextv5__container:after {\n contenttextv5: '';\n position: absolute;\n top: 0;\n right: 0;\n color: #16a085;\n font-size: 42px;\n line-height: 40px;\n animation: opacity 2s infinite;\n }\n\n .contenttextv5__container__text {\n display: inline;\n float: left;\n margin: 0;\n }\n\n .contenttextv5__container__list {\n margin-top: 0;\n padding-left: 110px;\n text-align: left;\n list-style: none;\n animation: change 10s infinite;\n }\n\n .contenttextv5__container__list__item {\n line-height: 40px;\n margin: 0;\n }\n\n .contenttextv5__container__list__item:nth-child(1) {\n color: #ff0000; \/* M\u00e0u \u0111\u1ecf cho ch\u1eef \"Design\" *\/\n }\n\n .contenttextv5__container__list__item:nth-child(2) {\n color: #34a853; \/* M\u00e0u v\u00e0ng cho ch\u1eef \"Build\" *\/\n }\n\n .contenttextv5__container__list__item:nth-child(3) {\n color: #fbbc05; \/* M\u00e0u t\u00edm cho ch\u1eef \"Store\" *\/\n }\n\n .contenttextv5__container__list__item:nth-child(4) {\n color: #4285f4; \/* M\u00e0u h\u1ed3ng cho ch\u1eef \"More\" *\/\n }\n\n @keyframes opacity {\n 0%, 100% {opacity: 0;}\n 50% {opacity: 1;}\n }\n\n @keyframes change {\n 0%, 12.66%, 100% {transform: translate3d(0, 0, 0);}\n 16.66%, 29.32% {transform: translate3d(0, -25%, 0);}\n 33.32%, 45.98% {transform: translate3d(0, -50%, 0);}\n 49.98%, 62.64% {transform: translate3d(0, -75%, 0);}\n 66.64%, 79.3% {transform: translate3d(0, -50%, 0);}\n 83.3%, 95.96% {transform: translate3d(0, -25%, 0);}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"contenttextv5\">\n <div class=\"contenttextv5__container\">\n <p class=\"contenttextv5__container__text\">\n Marchinde\n <\/p>\n <ul class=\"contenttextv5__container__list\">\n <li class=\"contenttextv5__container__list__item\">Design<\/li>\n <li class=\"contenttextv5__container__list__item\">Build<\/li>\n <li class=\"contenttextv5__container__list__item\">Store<\/li>\n <li class=\"contenttextv5__container__list__item\">More<\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\n\n\t\t<\/div>\n\n\t\t\n<style>\n#section_364472605 {\n padding-top: 60px;\n padding-bottom: 60px;\n background-color: rgb(34, 54, 44);\n}\n<\/style>\n\t<\/section>\n\t\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-single-page-nav-transparent-light.php","meta":{"footnotes":""},"class_list":["post-8558","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/8558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/comments?post=8558"}],"version-history":[{"count":30,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/8558\/revisions"}],"predecessor-version":[{"id":9519,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/8558\/revisions\/9519"}],"wp:attachment":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/media?parent=8558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}