{"id":1689,"date":"2024-11-29T07:27:42","date_gmt":"2024-11-29T07:27:42","guid":{"rendered":"http:\/\/www.tumandalay.edu.mm\/?page_id=1689"},"modified":"2025-09-22T04:27:10","modified_gmt":"2025-09-22T04:27:10","slug":"css-testing","status":"publish","type":"page","link":"http:\/\/www.tum.edu.mm\/?page_id=1689","title":{"rendered":"About Us"},"content":{"rendered":"\n<div id=\"wp-block-themeisle-blocks-advanced-columns-6197f12e\" class=\"wp-block-themeisle-blocks-advanced-columns alignfull has-1-columns has-desktop-equal-layout has-tablet-equal-layout has-mobile-collapsedRows-layout has-vertical-unset\"><div class=\"wp-block-themeisle-blocks-advanced-columns-overlay\"><\/div><div class=\"innerblocks-wrap\">\n<div id=\"wp-block-themeisle-blocks-advanced-column-ad2b4d1a\" class=\"wp-block-themeisle-blocks-advanced-column\">\n<h1 style=\"\n  font-size: 40px;\n  font-weight: 800;\n  color: #003366;\n  margin-bottom: 30px;\n  text-align: center;\n  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n\">\n  Technological University, Mandalay\n<\/h1>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-top\" style=\"grid-template-columns:auto 15%\"><div class=\"wp-block-media-text__content\">\n<h3 class=\"wp-block-heading\">Motto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong><span class=\"highlight\">\u201cThe Road To Knowledge Has No End<\/span><\/strong><strong><span class=\"highlight\">\u201d<\/span><\/strong><\/p>\n<\/blockquote>\n<\/div><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"518\" height=\"518\" src=\"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/09\/tum-logo-518x518-1.png\" alt=\"\" class=\"wp-image-2316 size-full\" srcset=\"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/09\/tum-logo-518x518-1.png 518w, http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/09\/tum-logo-518x518-1-300x300.png 300w, http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/09\/tum-logo-518x518-1-150x150.png 150w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/figure><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>About Us<\/title>\n    <style>\n      \/* General Styles *\/\n      body {\n        font-family: \"Segoe UI\", \"Helvetica Neue\", sans-serif;\n        margin: 0;\n        padding: 0;\n        color: #2c3e50;\n      }\n      \/* Page Title *\/\n      .page-title {\n        text-align: center;\n        font-size: 40px;\n        font-weight: 800;\n        color: #003366;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        margin: 40px 20px 20px 20px;\n      }\n      \/* Content Blocks *\/\n      .content-block {\n        display: flex;\n        justify-content: center;\n        padding: 20px;\n      }\n\n      .content-inner {\n        backdrop-filter: blur(12px);\n        background: rgba(255, 255, 255, 0.92);\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        border-radius: 20px;\n        padding: 40px 35px;\n        max-width: 900px;\n        width: 100%;\n        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);\n      }\n\n      .content-inner h2 {\n        font-size: 32px;\n        font-weight: 700;\n        margin-top: 0;\n        margin-bottom: 24px;\n        text-align: center;\n        text-transform: uppercase;\n        letter-spacing: 1.2px;\n        color: #003366;\n      }\n\n      .content-inner p,\n      .content-inner ul {\n        font-size: 18px;\n        line-height: 1.8;\n        margin: 0;\n        padding-left: 20px;\n        text-align: justify;\n        color: #222;\n      }\n\n      .content-inner ul {\n        list-style-type: disc;\n      }\n\n      \/* Image Slider Container *\/\n      .slider-container {\n        max-width: 900px;\n        margin: 40px auto;\n        position: relative;\n        border-radius: 10px;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n        overflow: hidden;\n        aspect-ratio: 16 \/ 9;\n      }\n\n      .slider-wrapper {\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n\n      .slide {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        transition: opacity 1s ease;\n        pointer-events: none;\n      }\n\n      .slide.active {\n        opacity: 1;\n        pointer-events: auto;\n        z-index: 1;\n      }\n\n      .slide img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        border-radius: 10px;\n        display: block;\n      }\n\n      .caption {\n        position: absolute;\n        bottom: 15px;\n        left: 20px;\n        color: #fff;\n        background: rgba(0, 0, 0, 0.5);\n        padding: 8px 15px;\n        border-radius: 5px;\n        font-size: 14px;\n      }\n\n      .slider-nav {\n        position: absolute;\n        top: 50%;\n        width: 100%;\n        pointer-events: none;\n        transform: translateY(-50%);\n        z-index: 10; \/* <-- Add this *\/\n      }\n\n      .slider-nav button {\n        background: rgba(255, 111, 0, 0.8);\n        border: none;\n        padding: 10px;\n        border-radius: 50%;\n        cursor: pointer;\n        width: 45px;\n        height: 45px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: auto;\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 2;\n      }\n\n      .slider-nav button:hover {\n        background: rgba(230, 92, 0, 0.9);\n      }\n\n      #prevBtn {\n        left: 15px;\n      }\n\n      #nextBtn {\n        right: 15px;\n      }\n\n      .slider-nav svg {\n        fill: white;\n        width: 20px;\n        height: 20px;\n      }\n\n      \/* Table Styling *\/\n      .table-container {\n        width: 100%;\n        overflow-x: auto;\n        margin: 20px 0;\n      }\n\n      table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 16px;\n        min-width: 600px; \/* ensures columns don\u2019t squish too much *\/\n        border-radius: 8px;\n        overflow: hidden;\n      }\n\n      table thead {\n        background: #003366;\n        color: #fff;\n      }\n\n      table th,\n      table td {\n        border: 1px solid #ccc;\n        padding: 8px 12px;\n        text-align: center;\n      }\n\n      table th {\n        font-weight: bold;\n      }\n\n      table tbody tr:nth-child(even) {\n        background: #f2f6fa;\n      }\n\n      \/* Smaller font tweaks *\/\n      @media (max-width: 768px) {\n        table {\n          font-size: 14px;\n          min-width: 500px;\n        }\n      }\n\n      @media (max-width: 480px) {\n        table {\n          font-size: 13px;\n          min-width: 400px;\n        }\n      }\n      \/** Custom Details and Summary **\/\n      \/* Style the <details> element *\/\n      .custom-details {\n        background-color: #ffffff; \/* Light background *\/\n        border: 1px solid #ccc; \/* Subtle border *\/\n        border-radius: 6px; \/* Rounded corners *\/\n        padding: 10px 15px; \/* Some padding *\/\n        margin: 10px 0; \/* Space between items *\/\n        transition: background-color 0.3s ease;\n      }\n\n      \/*Change background on hover *\/\n      .custom-details:hover {\n        background-color: #f1f1f1;\n      }\n\n      \/* Style the <summary> element *\/\n      .custom-details summary {\n        font-weight: bold;\n        font-size: 1.1em;\n        cursor: pointer; \/* Indicates it's clickable *\/\n        list-style: none; \/* Remove default triangle *\/\n        position: relative;\n        padding-left: 20px; \/* Space for custom arrow *\/\n      }\n\n      \/* Custom arrow using ::before *\/\n      .custom-details summary::before {\n        content: \"\u25b6\"; \/* Right-pointing triangle *\/\n        position: absolute;\n        left: 0;\n        transition: transform 0.3s ease;\n      }\n\n      \/* Rotate arrow when open *\/\n      .custom-details[open] summary::before {\n        transform: rotate(90deg); \/* Downward pointing *\/\n      }\n\n      \/* Style the content inside details *\/\n      .custom-details div {\n        margin-top: 10px;\n        line-height: 1.5;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <div class=\"content-block\">\n      <div class=\"content-inner\">\n        <h2>Vision<\/h2>\n        <p>\n          Our vision is to produce engineers and architects who can create a\n          better future for a wide range of technologies based on research and\n          innovation, standing as an international standard technological\n          university at the local level by following the rules and regulations.\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"content-block\">\n      <div class=\"content-inner\">\n        <h2>Mission<\/h2>\n        <ul>\n          <li>\n            To implement lifelong learning opportunities in accordance with the\n            provisions of the National Education Law, Higher Education Law and\n            Rules and Regulations\n          <\/li>\n          <li>\n            To be implemented as a university that can create job opportunities\n            by extensive research in collaboration with local and foreign\n            universities, research organizations and factories\n          <\/li>\n          <li>\n            To produce brilliant, qualified and leadership national benefit\n            engineers\/architects, who follow the code of ethic, with research\n            and creativity through excellent engineering and architectural\n            processes in line with international quality standards\n          <\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n\n    <div class=\"content-block\">\n      <div class=\"content-inner\">\n        <h2>\u1021\u101b\u100a\u103a\u1021\u101e\u103d\u1031\u1038\u1006\u102d\u102f\u1004\u103a\u101b\u102c\u1019\u1030\u101d\u102b\u1012<\/h2>\n        <ul>\n          <li>\n            \u1021\u101b\u100a\u103a\u1021\u1001\u103b\u1004\u103a\u1038\u1015\u103c\u100a\u1037\u103a\u101d\u104d \u1000\u103b\u103d\u1019\u103a\u1038\u1000\u103b\u1004\u103a\u1015\u102d\u102f\u1004\u103a\u1014\u102d\u102f\u1004\u103a\u101e\u1031\u102c \u101e\u102f\u1010\u1031\u101e\u1014\u1015\u103c\u102f\u1019\u103e\u102f\u1014\u103e\u1004\u1037\u103a \u1006\u1014\u103a\u1038\u101e\u1005\u103a\n            \u1010\u102e\u1011\u103d\u1004\u103a\u1019\u103e\u102f\u1021\u1031\u102c\u1000\u103a\u1010\u103d\u1004\u103a\u101c\u1030\u1019\u103e\u102f\u1015\u1010\u103a\u101d\u1014\u103a\u1038\u1000\u103b\u1004\u103a\u1014\u103e\u1004\u1037\u103a \u1021\u101c\u102f\u1015\u103a\u1001\u103d\u1004\u103a\u1021\u102c\u1038\n            \u1010\u102d\u102f\u1000\u103a\u101b\u102d\u102f\u1000\u103a\u1021\u1000\u103b\u102d\u102f\u1038\u1015\u103c\u102f\u1014\u102d\u102f\u1004\u103a\u1019\u100a\u1037\u103a \u1021\u1004\u103a\u1002\u103b\u1004\u103a\u1014\u102e\u101a\u102c\u104a \u1017\u102d\u101e\u102f\u1000\u102c \u1018\u103d\u1032\u1037\u101b\u1015\u100a\u102c\u101b\u103e\u1004\u103a\u1019\u103b\u102c\u1038\n            \u1019\u103d\u1031\u1038\u1011\u102f\u1010\u103a\u1015\u1031\u1038\u101b\u1014\u103a\u104b\n          <\/li>\n          <li>\n            \u101e\u102e\u1021\u102d\u102f\u101b\u102e\u1014\u103e\u1004\u1037\u103a\u101c\u1000\u103a\u1010\u103d\u1031\u1037\u1015\u1031\u102b\u1004\u103a\u1038\u1005\u1015\u103a\u101e\u100a\u1037\u103a \u101e\u1004\u103a\u1000\u103c\u102c\u1038\u101e\u1004\u103a\u101a\u1030\u1019\u103e\u102f\n            \u1015\u1010\u103a\u101d\u1014\u103a\u1038\u1000\u103b\u1004\u103a\u1000\u1031\u102c\u1004\u103a\u1038\u1019\u103b\u102c\u1038 \u1016\u1031\u102c\u103a\u1006\u1031\u102c\u1004\u103a\u101c\u103b\u1000\u103a\u1014\u102d\u102f\u1004\u103a\u1004\u1036\u1010\u1031\u102c\u103a\u1016\u103d\u1036\u1037\u1016\u103c\u102d\u102f\u1038\n            \u1010\u102d\u102f\u1038\u1010\u1000\u103a\u101b\u1031\u1038\u1021\u102c\u1038 \u1021\u1011\u1031\u102c\u1000\u103a\u1000\u1030\u1015\u103c\u102f\u1014\u102d\u102f\u1004\u103a\u1019\u100a\u1037\u103a \u1021\u1004\u103a\u1002\u103b\u1004\u103a\u1014\u102e\u101a\u102c\u104a \u1017\u102d\u101e\u102f\u1000\u102c\n            \u1018\u103d\u1032\u1037\u101b\u1015\u100a\u102c\u101b\u103e\u1004\u103a\u1019\u103b\u102c\u1038 \u1019\u103d\u1031\u1038\u1011\u102f\u1010\u103a\u1015\u1031\u1038\u101b\u1014\u103a\u104b\n          <\/li>\n          <li>\n            \u1021\u101b\u100a\u103a\u1021\u101e\u103d\u1031\u1038 \u1005\u102e\u1019\u1036\u1001\u1014\u1037\u103a\u1001\u103d\u1032\u1019\u103e\u102f\u1005\u1014\u1005\u103a\u1016\u103c\u1005\u103a\u101e\u1031\u102c ISO 9001:2015 Standard\n            \u1005\u1036\u1014\u103e\u102f\u1014\u103a\u1038\u1019\u103b\u102c\u1038\u1014\u103e\u1004\u1037\u103a\u1021\u100a\u102e \u1015\u103c\u1014\u103a\u101c\u100a\u103a \u101e\u102f\u1036\u1038\u101e\u1015\u103a\u1001\u103c\u1004\u103a\u1038 \u1021\u1005\u1009\u103a \u1010\u102d\u102f\u1038\u1010\u1000\u103a\u1021\u1031\u102c\u1004\u103a\n            \u1006\u1031\u102c\u1004\u103a\u101b\u103d\u1000\u103a\u1001\u103c\u1004\u103a\u1038\u1021\u102c\u1038\u1016\u103c\u1004\u1037\u103a \u1000\u1031\u102c\u1004\u103a\u1038\u1019\u103d\u1014\u103a\u101e\u1031\u102c \u101d\u1014\u103a\u1006\u1031\u102c\u1004\u103a\u1019\u103e\u102f\u1014\u103e\u1004\u1037\u103a \u1000\u103b\u1031\u102c\u1004\u103a\u1038\u101e\u102c\u1038\u104a\n            \u1000\u103b\u1031\u102c\u1004\u103a\u1038\u101e\u1030\u1019\u103b\u102c\u1038\u104f \u1005\u102d\u1010\u103a\u1000\u103b\u1031\u1014\u1015\u103a\u1019\u103e\u102f\u1000\u102d\u102f \u101b\u101b\u103e\u102d\u1005\u1031\u101b\u1014\u103a\u104b\n          <\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n\n    <!-- Scripts -->\n    <script>\n      (function () {\n        const images = [\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/mech-field-trip-2024-2025.png.png\",\n            caption: \"Field Trip (2024-2025)\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/Fitting-Shop-Practical-Class.png\",\n            caption: \"Fitting Shop Practical Class\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/Lathe-Machine-Practical-Class.png\",\n            caption: \"Lathe Machine Practical Class\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/mech-student-autocad-drawing-training.png\",\n            caption: \"Student AutoCAD Drawing Training\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/Solid-Mechanics-Lab.png\",\n            caption: \"Solid Mechanics Lab\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/Welding-Shop-Practical-Class.png\",\n            caption: \"Welding Shop Practical Class\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/2024-2025-Academic-Year-Mechanical-\u1019\u1031\u1002\u103b\u102c\u1018\u1031\u102c\u101c\u102f\u1036\u1038-\u1021\u102c\u1038\u1000\u1005\u102c\u1038\u101e\u1019\u102c\u1038\u1019\u103b\u102c\u1038.png\",\n            caption: \"Mechanical Major \u1018\u1031\u102c\u101c\u102f\u1036\u1038\u1021\u102c\u1038\u1000\u1005\u102c\u1038\u101e\u1019\u102c\u1038\u1019\u103b\u102c\u1038 (2024-2025)\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/2024-2025-Mechanical-major-students-\u1011\u1019\u1014\u1032\u1011\u102d\u102f\u1038-\u1015\u103c\u102d\u102f\u1004\u103a\u1015\u103d\u1032.png\",\n            caption: \"Mechanical Major Students \u1011\u1019\u1014\u1032\u1011\u102d\u102f\u1038\u1015\u103c\u102d\u102f\u1004\u103a\u1015\u103d\u1032(2024-2025)\",\n          },\n          {\n            src: \"http:\/\/www.tum.edu.mm\/wp-content\/uploads\/2025\/08\/2024-2025-Mechanical-Fresher-Welcome.png\",\n            caption: \"Mechanical Fresher Welcome(2024-2025)\",\n          },\n        ];\n\n        const wrapper = document.getElementById(\"sliderWrapper\");\n        let currentIndex = 0;\n        let intervalId;\n\n        images.forEach((img, idx) => {\n          const slide = document.createElement(\"div\");\n          slide.className = \"slide\";\n          if (idx === 0) slide.classList.add(\"active\");\n          slide.innerHTML = `\n        <img decoding=\"async\" src=\"${img.src}\" alt=\"Slide ${idx + 1}\">\n        <div class=\"caption\">${img.caption}<\/div>\n      `;\n          wrapper.appendChild(slide);\n        });\n\n        const slides = wrapper.querySelectorAll(\".slide\");\n\n        function showSlide(index) {\n          slides.forEach((s) => s.classList.remove(\"active\"));\n          slides[index].classList.add(\"active\");\n          currentIndex = index;\n        }\n\n        function nextSlide() {\n          let next = (currentIndex + 1) % slides.length;\n          showSlide(next);\n        }\n\n        function prevSlide() {\n          let prev = (currentIndex - 1 + slides.length) % slides.length;\n          showSlide(prev);\n        }\n\n        function autoPlay() {\n          intervalId = setInterval(nextSlide, 5000);\n        }\n\n        function resetAutoPlay() {\n          clearInterval(intervalId);\n          autoPlay();\n        }\n\n        document.getElementById(\"nextBtn\").addEventListener(\"click\", () => {\n          nextSlide();\n          resetAutoPlay();\n        });\n\n        document.getElementById(\"prevBtn\").addEventListener(\"click\", () => {\n          prevSlide();\n          resetAutoPlay();\n        });\n\n        \/\/ Swipe support\n        let touchStartX = 0;\n        let touchEndX = 0;\n\n        wrapper.addEventListener(\"touchstart\", (e) => {\n          touchStartX = e.changedTouches[0].screenX;\n        });\n\n        wrapper.addEventListener(\"touchend\", (e) => {\n          touchEndX = e.changedTouches[0].screenX;\n          handleSwipe();\n        });\n\n        function handleSwipe() {\n          if (touchEndX < touchStartX - 50) {\n            nextSlide();\n            resetAutoPlay();\n          } else if (touchEndX > touchStartX + 50) {\n            prevSlide();\n            resetAutoPlay();\n          }\n        }\n\n        autoPlay();\n      })();\n    <\/script>\n  <\/body>\n<\/html>\n\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-1689","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"educenter-slider":false,"educenter-large":false,"educenter-gallery":false,"educenter-team":false},"uagb_author_info":{"display_name":"TUMadmin","author_link":"http:\/\/www.tum.edu.mm\/?author=2"},"uagb_comment_info":0,"uagb_excerpt":null,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"TUMadmin","author_link":"http:\/\/www.tum.edu.mm\/?author=2"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":null,"_links":{"self":[{"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=\/wp\/v2\/pages\/1689"}],"collection":[{"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1689"}],"version-history":[{"count":11,"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=\/wp\/v2\/pages\/1689\/revisions"}],"predecessor-version":[{"id":2405,"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=\/wp\/v2\/pages\/1689\/revisions\/2405"}],"wp:attachment":[{"href":"http:\/\/www.tum.edu.mm\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}