{"id":4645,"date":"2025-05-17T15:53:51","date_gmt":"2025-05-17T15:53:51","guid":{"rendered":"https:\/\/markishii.com\/divi\/?page_id=4645"},"modified":"2025-05-18T16:19:13","modified_gmt":"2025-05-18T16:19:13","slug":"home","status":"publish","type":"page","link":"https:\/\/markishii.com\/divi\/","title":{"rendered":"Home"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;100%&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<style><!-- [et_pb_line_break_holder] -->        * {<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->  margin: 0;<!-- [et_pb_line_break_holder] -->  padding: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->body {<!-- [et_pb_line_break_holder] -->  font-family: sans-serif;<!-- [et_pb_line_break_holder] -->  padding: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.carousel-container {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->  gap: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.image-panel {<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.carousel-image {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  aspect-ratio: 3 \/ 2;<!-- [et_pb_line_break_holder] -->  transition: opacity 0.4s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.carousel-image img {<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  height: 100%;<!-- [et_pb_line_break_holder] -->  object-fit: cover;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.carousel-image.active {<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->  opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.nav-panel {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->  gap: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.topic {<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  padding: 10px;<!-- [et_pb_line_break_holder] -->  border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->  transition: background 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.topic:hover {<!-- [et_pb_line_break_holder] -->  background: #f0f0f0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* --- Responsive Layout --- *\/<!-- [et_pb_line_break_holder] -->@media (min-width: 768px) {<!-- [et_pb_line_break_holder] -->  .carousel-container {<!-- [et_pb_line_break_holder] -->    flex-direction: row;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .image-panel {<!-- [et_pb_line_break_holder] -->    width: 66.66%;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .nav-panel {<!-- [et_pb_line_break_holder] -->    width: 33.33%;<!-- [et_pb_line_break_holder] -->    height: auto; \/* Will match image panel height via JS *\/<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"carousel-container\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"image-panel\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"carousel-image active\" data-topic=\"1\"><!-- [et_pb_line_break_holder] -->        <img decoding=\"async\" src=\"image1.jpg\" alt=\"Image 1\" \/><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"carousel-image\" data-topic=\"2\"><!-- [et_pb_line_break_holder] -->        <img decoding=\"async\" src=\"image2.jpg\" alt=\"Image 2\" \/><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"carousel-image\" data-topic=\"3\"><!-- [et_pb_line_break_holder] -->        <img decoding=\"async\" src=\"image3.jpg\" alt=\"Image 3\" \/><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"nav-panel\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"topic\" data-topic=\"1\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<h3>Topic 1<\/h3>\n<p><!-- [et_pb_line_break_holder] -->        <pee>Description for Topic 1.<\/pee><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"topic\" data-topic=\"2\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<h3>Topic 2<\/h3>\n<p><!-- [et_pb_line_break_holder] -->        <pee>Description for Topic 2.<\/pee><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<div class=\"topic\" data-topic=\"3\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<h3>Topic 3<\/h3>\n<p><!-- [et_pb_line_break_holder] -->        <pee>Description for Topic 3.<\/pee><!-- [et_pb_line_break_holder] -->      <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <script><!-- [et_pb_line_break_holder] -->  document.addEventListener(\"DOMContentLoaded\", function () {<!-- [et_pb_line_break_holder] -->  const topics = document.querySelectorAll(\".topic\");<!-- [et_pb_line_break_holder] -->  const images = document.querySelectorAll(\".carousel-image\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  topics.forEach(topic => {<!-- [et_pb_line_break_holder] -->    topic.addEventListener(\"click\", () => {<!-- [et_pb_line_break_holder] -->      const selected = topic.getAttribute(\"data-topic\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      images.forEach(img => {<!-- [et_pb_line_break_holder] -->        img.classList.remove(\"active\");<!-- [et_pb_line_break_holder] -->        if (img.getAttribute(\"data-topic\") === selected) {<!-- [et_pb_line_break_holder] -->          img.classList.add(\"active\");<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Match nav-panel height to image-panel height after images load<!-- [et_pb_line_break_holder] -->  const matchHeight = () => {<!-- [et_pb_line_break_holder] -->    if (window.innerWidth >= 768) {<!-- [et_pb_line_break_holder] -->      const imagePanel = document.querySelector('.image-panel');<!-- [et_pb_line_break_holder] -->      const navPanel = document.querySelector('.nav-panel');<!-- [et_pb_line_break_holder] -->      navPanel.style.height = imagePanel.offsetHeight + 'px';<!-- [et_pb_line_break_holder] -->    } else {<!-- [et_pb_line_break_holder] -->      document.querySelector('.nav-panel').style.height = 'auto';<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  window.addEventListener('load', matchHeight);<!-- [et_pb_line_break_holder] -->  window.addEventListener('resize', matchHeight);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/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":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"difl_page_category":[],"class_list":["post-4645","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/pages\/4645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/comments?post=4645"}],"version-history":[{"count":7,"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/pages\/4645\/revisions"}],"predecessor-version":[{"id":4652,"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/pages\/4645\/revisions\/4652"}],"wp:attachment":[{"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/media?parent=4645"}],"wp:term":[{"taxonomy":"difl_page_category","embeddable":true,"href":"https:\/\/markishii.com\/divi\/wp-json\/wp\/v2\/difl_page_category?post=4645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}