{"id":1011,"date":"2024-04-01T17:03:00","date_gmt":"2024-04-01T17:03:00","guid":{"rendered":"https:\/\/takaipro.com\/?page_id=1011"},"modified":"2024-04-01T22:23:32","modified_gmt":"2024-04-01T22:23:32","slug":"test","status":"publish","type":"page","link":"https:\/\/takaipro.com\/index.php\/test\/","title":{"rendered":"Test"},"content":{"rendered":"\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n  \/* Custom CSS for the grid container *\/\n  .grid-container {\n    position: relative;\n    width: 100%; \/* Adjust the width as needed *\/\n    height: 800px; \/* Adjust the height as needed *\/\n    margin: auto; \/* Center the grid on the page *\/\n    overflow: hidden; \/* Add this line to hide content outside the container *\/\n  }\n\n  .content-overlay {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    z-index: 10; \/* Ensure the content is above the grid *\/\n  }\n\n  \/* Custom CSS for the slider content *\/\n  .slider-content {\n    position: absolute;\n    top: 0;\n    right: 0;\n    text-align: center;\n    z-index: 10;\n    transition: transform 2s ease-in-out;\n    transform: translate(100%, -100%); \/* Initial position *\/\n  }\n\n  .slider-content.active {\n    transform: translate(-50%, -50%); \/* Move the active slide to the center *\/\n  }\n\n  .slider-content h1,\n  .slider-content p {\n    font-size: 1.5rem;\n    color: #fff; \/* Adjust the color as needed *\/\n    margin: 0;\n  }\n\n  .slider-content img {\n    max-width: 80%; \/* Adjust the size as needed *\/\n    height: auto;\n    margin-bottom: 1rem;\n  }\n\n  \/* Custom CSS for the horizontal lines *\/\n  .horizontal-line {\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background-color: black;\n    top: 0;\n    left: 0;\n  }\n\n  \/* Custom CSS for the vertical lines *\/\n  .vertical-line {\n    position: absolute;\n    width: 2px;\n    height: 100%;\n    background-color: black;\n    top: 0;\n    left: 0;\n  }\n\n  \/* Custom CSS for the dots *\/\n  .dot {\n    width: 10px;\n    height: 10px;\n    background-color: red;\n    border-radius: 50%;\n    position: absolute;\n    top: 50%; \/* Position dot in the middle vertically *\/\n    transform: translate(-50%, -50%); \/* Center dot *\/\n  }\n\n  \/* Keyframes for dot animation *\/\n  @keyframes moveDotHorizontal {\n    0% { left: 0; }\n    100% { left: calc(100% - 10px); }\n  }\n\n  @keyframes moveDotVertical {\n    0% { top: 0; }\n    100% { top: calc(100% - 10px); }\n  }\n<\/style>\n<\/head>\n<body>\n  <div class=\"grid-container\">\n    <!-- Slider content -->\n    <div class=\"slider-content active\" id=\"slider1\">\n      <h1>Heading 1<\/h1>\n      <img decoding=\"async\" src=\"image1.jpg\" alt=\"Image 1\">\n      <p>Text 1<\/p>\n    <\/div>\n    <div class=\"slider-content\" id=\"slider2\">\n      <h1>Heading 2<\/h1>\n      <img decoding=\"async\" src=\"image2.jpg\" alt=\"Image 2\">\n      <p>Text 2<\/p>\n    <\/div>\n    <div class=\"slider-content\" id=\"slider3\">\n      <h1>Heading 3<\/h1>\n      <img decoding=\"async\" src=\"image3.jpg\" alt=\"Image 3\">\n      <p>Text 3<\/p>\n    <\/div>\n    <!-- Create horizontal lines -->\n    <div class=\"horizontal-line\" style=\"top: 0%;\"><\/div>\n    <div class=\"horizontal-line\" style=\"top: 20%;\"><\/div>\n    <div class=\"horizontal-line\" style=\"top: 40%;\"><\/div>\n    <div class=\"horizontal-line\" style=\"top: 60%;\"><\/div>\n    <div class=\"horizontal-line\" style=\"top: 80%;\"><\/div>\n\n    <!-- Create vertical lines -->\n    <div class=\"vertical-line\" style=\"left: 0%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 10%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 20%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 30%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 40%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 50%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 60%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 70%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 80%;\"><\/div>\n    <div class=\"vertical-line\" style=\"left: 90%;\"><\/div>\n  <\/div>\n  <script>\n    const sliders = document.getElementsByClassName('slider-content');\n    let currentIndex = 0;\n\n    function showSlide(index) {\n      for (let i = 0; i < sliders.length; i++) {\n        sliders[i].classList.remove('active');\n      }\n      sliders[index].classList.add('active');\n    }\n\n    showSlide(currentIndex);\n\n    setInterval(() => {\n      currentIndex = (currentIndex + 1) % sliders.length;\n      showSlide(currentIndex);\n    }, 5000);\n  <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Heading 1 Text 1 Heading 2 Text 2 Heading 3 Text 3<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/pages\/1011"}],"collection":[{"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/comments?post=1011"}],"version-history":[{"count":59,"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/pages\/1011\/revisions"}],"predecessor-version":[{"id":1266,"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/pages\/1011\/revisions\/1266"}],"wp:attachment":[{"href":"https:\/\/takaipro.com\/index.php\/wp-json\/wp\/v2\/media?parent=1011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}