API tools faq
paste
Advertisement
myarkqub

About Us

myarkqub
Nov 1st, 2020
2,162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.50 KB | None | 0 0
raw download clone embed print report
  1. <br><br>
  2. <div class="w3-container">
  3.     <div class="signboard">
  4.         <div class="signboard_">ABOUT US</div>
  5.     </div>
  6.     <br>
  7.     <div class="pointer_y1">Background <br>Information</div>
  8. </div>
  9. <br><br>
  10. <div class="w3-container">
  11.     <center><span data-lang="81">Counselling Unit is a body under Student Affairs Department, established in 1984. On 11
  12.         October 1998 the status has been raised to Counselling and Career Centre. The transformation
  13.         makes Counselling and Career Centre activities more focused and able to undertake a wider
  14.         role from its service viewpoint.</span></center>
  15. </div>
  16. <br>
  17.  
  18. <style>
  19.     .counselorimg {
  20.         width: 10%;
  21.         height: auto;
  22.     }
  23.  
  24.     /* ni untuk organisation chart */
  25.  
  26.     .tree ul {
  27.         padding-top: 20px;
  28.         position: relative;
  29.         transition: all 0.5s;
  30.         -webkit-animation: all 0.5s;
  31.         -moz-animation: all 0.5;
  32.     }
  33.  
  34.     .tree li {
  35.         float: left;
  36.         text-align: center;
  37.         list-style-type: none;
  38.         position: relative;
  39.         padding: 20px 5px 0 5px;
  40.         transition: all 0.5s;
  41.         -webkit-animation: all 0.5s;
  42.         -moz-animation: all 0.5;
  43.     }
  44.  
  45.     .tree li::before,
  46.     .tree li::after {
  47.         content: '';
  48.         position: absolute;
  49.         top: 0;
  50.         right: 50%;
  51.         border-top: 1px solid #ccc;
  52.         width: 50%;
  53.         height: 20px;
  54.     }
  55.  
  56.     .tree li::after {
  57.         right: auto;
  58.         left: 50%;
  59.         border-left: 1px solid #ccc;
  60.     }
  61.  
  62.     .tree li:only-child::after,
  63.     .tree li:only-child::before {
  64.         display: none;
  65.     }
  66.  
  67.     .tree li:only-child {
  68.         padding-top: 0;
  69.     }
  70.  
  71.     .tree li:first-child::before,
  72.     .tree li:last-child::after {
  73.         border: 0 none;
  74.     }
  75.  
  76.     .tree li:last-child::before {
  77.         border-right: 1px solid #ccc;
  78.         border-radius: 0 5px 0 0;
  79.         -webkit-border-radius: 0 5px 0 0;
  80.         -moz-border-radius: 0 5px 0 0;
  81.     }
  82.  
  83.     .tree li:first-child::after {
  84.         border-radius: 5px 0 0 0;
  85.         -webkit-border-radius: 5px 0 0 0;
  86.         -moz-border-radius: 5px 0 0 0;
  87.     }
  88.  
  89.     .tree ul ul::before {
  90.         content: '';
  91.         position: absolute;
  92.         top: 0;
  93.         left: 50%;
  94.         border-left: 1px solid #ccc;
  95.         width: 0;
  96.         height: 20px;
  97.     }
  98.  
  99.     .tree li a {
  100.         border: 1px solid #ccc;
  101.         padding: 5px 10px;
  102.         text-decoration: none;
  103.         color: #666;
  104.         font-family: arial, verdana, tahoma;
  105.         font-size: 11px;
  106.         display: inline-block;
  107.         border-radius: 5px;
  108.         -webkit-border-radius: 5px;
  109.         -moz-border-radius: 5px;
  110.         transition: all 0.5s;
  111.         -webkit-transition: all 0.5s;
  112.         -moz-transition: all 0.5s;
  113.     }
  114.  
  115.     .tree li a:hover,
  116.     .tree li a:hover+ul li a {
  117.         background: #c8e4f8;
  118.         color: #000;
  119.         border: 1px solid #94a0b4;
  120.     }
  121.  
  122.     .tree li a:hover+ul li::after,
  123.     .tree li a:hover+ul li::before,
  124.     .tree li a:hover+ul::before,
  125.     .tree li a:hover+ul ul::before {
  126.         border-color: #94a0b4;
  127.     }
  128.  
  129.     .eresource {
  130.         transition: width 2s;
  131.     }
  132.  
  133.     .eresource:hover {
  134.         padding-left: 18px !important;
  135.         width: auto !important;
  136.     }
  137. </style>
  138. <div class="w3-container">
  139.     <div class="pointer_y1">Organisation <br>Chart</div>
  140. </div>
  141. <center>
  142.     <div align="center" class="tree" style="height:450px;">
  143.         <ul>
  144.             <li><a class="counselor" data-id="1">
  145.                     <img src="images/v2/image 14.png" style="width: 60px;height: auto"><br>
  146.  
  147.                 </a>
  148.                 <ul>
  149.                     <li>
  150.                         <ul>
  151.                             <li><a class="counselor" data-id="3"><img src="images/v2/image 13.png"
  152.                                        style="width: 60px;height: auto"><br></a></li>
  153.                             <li><a class="counselor" data-id="4"><img src="images/v2/image 7.png"
  154.                                        style="width: 60px;height: auto"><br></a></li>
  155.                             <li><a class="counselor" data-id="5"><img src="images/v2/image 2.png"
  156.                                        style="width: 60px;height: auto"><br></a></li>
  157.                             <li><a class="counselor" data-id="6"><img src="images/v2/image 10.png"
  158.                                        style="width: 60px;height: auto"><br></a></li>
  159.                             <li><a class="counselor" data-id="10"><img src="images/v2/image 5.png"
  160.                                        style="width: 60px;height: auto"><br></a>
  161.                                 <ul>
  162.                                     <li height="260"><a class="counselor" data-id="13"><img src="images/v2/image 1.png"
  163.                                                style="width: 60px;height: auto"><br></a></li>
  164.                                     <li><a class="counselor" data-id="14"><img src="images/v2/image 4.png"
  165.                                                style="width: 60px;height: auto"><br></a></li>
  166.                                 </ul>
  167.                             </li>
  168.                             <li><a class="counselor" data-id="7"><img src="images/v2/image 11.png"
  169.                                        style="width: 60px;height: auto"><br></a></li>
  170.                             <li><a class="counselor" data-id="8"><img src="images/v2/image 6.png"
  171.                                        style="width: 60px;height: auto"><br></a></li>
  172.                             <li><a class="counselor" data-id="9"><img src="images/v2/image 8.png"
  173.                                        style="width: 60px;height: auto"><br></a></li>
  174.                             <li><a class="counselor" data-id="11"><img src="images/v2/image 12.png"
  175.                                        style="width: 60px;height: auto"><br></a></li>
  176.                             <li><a class="counselor" data-id="12"><img src="images/v2/image 9.png"
  177.                                        style="width: 60px;height: auto"><br></a></li>
  178.                         </ul>
  179.                     </li>
  180.                     <li><a class="counselor" data-id="2"><img src="images/v2/image 3.png"
  181.                                style="width:60px; height: auto"><br></a></li>
  182.                 </ul>
  183.             </li>
  184.         </ul>
  185.     </div>
  186. </center>
  187. <script>
  188.     $(document).ready(function () {
  189.         $(".counselor").click(function () {
  190.             $("#info_counselor").show();
  191.             let infos = "";
  192.             if ($(this).data("id") == "1") {
  193.                 infos = "<center><img src='images/v2/image 14.png' class='counselorimg'><br>DR. SITI ROZAINA KAMSANI<br>Pengarah Pusat Kaunseling<br>Tel : 04-928 4058<br>e-mail:  rozaina@uum.edu.my</center>";
  194.             }
  195.             if ($(this).data("id") == "2") {
  196.                 infos = "<center><img src='images/v2/image 3.png' class='counselorimg'><br>PUAN BADARIAH MOHD ZAHIR <br> Setiausaha Pejabat (N29)<br>Tel : 04-928 4060<br>Email: badariah@uum.edu.my</center>";
  197.             }
  198.             if ($(this).data("id") == "3") {
  199.                 infos = "<center><img src='images/v2/image 13.png' class='counselorimg'><br>TUAN SHAHRIN HJ AHMAD<br>Pegawai Psikologi Kanan<br>Tel : 04-928 4061<br>E-mail : shahrin@uum.edu.my</center>";
  200.             }
  201.             if ($(this).data("id") == "4") {
  202.                 infos = "<center><img src='images/v2/image 7.png' class='counselorimg'><br>PUAN FAEZAH NAYAN<br>Pegawai Psikologi Kanan<br>Tel : 04-928 4064<br>e-mail: faezah@uum.edu.my</center>";
  203.             }
  204.             if ($(this).data("id") == "5") {
  205.                 infos = "<center><img src='images/v2/image 2.png' class='counselorimg'><br>PUAN ASMA MAT<br>Pegawai Psikologi Kanan<br>Tel : 04-928 4071<br>Email: m.asma@uum.edu.my</center>";
  206.             }
  207.             if ($(this).data("id") == "6") {
  208.                 infos = "<center><img src='images/v2/image 10.png' class='counselorimg'><br>PUAN NOORUL’ADILAH CHE HAMZAH<br>Pegawai Psikologi Kanan<br>Tel : 04-928 4062<br>e-mail : n.adilah@uum.edu.my</center>";
  209.             }
  210.             if ($(this).data("id") == "7") {
  211.                 infos = "<center><img src='images/v2/image 11.png' class='counselorimg'><br>PUAN NURLY AZIYANI AHMAD<br>Pegawai Psikologi Kanan<br>Tel : 04-928 4063<br>e-mail: nurly@uum.edu.my</center>";
  212.             }
  213.             if ($(this).data("id") == "8") {
  214.                 infos = "<center><img src='images/v2/image 6.png' class='counselorimg'><br>TUAN MOHD. KHAIRONE MD. KHATIDIN<br>Pegawai Psikologi Kanan<br>Tel : 04-928 4072<br>e-mail: khairone@uum.edu.my</center>";
  215.             }
  216.             if ($(this).data("id") == "9") {
  217.                 infos = "<center><img src='images/v2/image 8.png' class='counselorimg'><br>PUAN NUR FARAH JOHARI<br>Pegawai Psikologi<br>Tel : 04-928 4169<br>e-mail: nurfarah.johari@uum.edu.my</center>";
  218.             }
  219.             if ($(this).data("id") == "10") {
  220.                 infos = "<center><img src='images/v2/image 5.png' class='counselorimg'><br>TUAN HAIRIL ANUAR MAT AKIR <br> Penolong Pengarah Kanan <br> Tel: 04-928 4059<br> Email: hairil@uum.edu.my</center>";
  221.             }
  222.             if ($(this).data("id") == "11") {
  223.                 infos = "<center><img src='images/v2/image 12.png' class='counselorimg'><br>PUAN SAFINAS HANOUM OMAR ANWAR <br> Pegawai Psikologi Kanan (S44) <br> Tel : 04-928 4144<br>Email: hsafinas@uum.edu.my</center>";
  224.             }
  225.             if ($(this).data("id") == "12") {
  226.                 infos = "<center><img src='images/v2/image 9.png' class='counselorimg'><br>TUAN MUHAMMAD NOOR FITRI AHMAD<br>Pegawai Psikologi <br>Tel : 04-928 4102<br>Email: mnfitri@uum.edu.my</center>";
  227.             }
  228.             if ($(this).data("id") == "13") {
  229.                 infos = "<center> <img src='images/v2/image 1.png' class='counselorimg'><br>PUAN MASTURA YUSOF<br>Pembantu Tadbir P/O Kanan <br> Tel : 04-928 4065 <br> Email: mas246@uum.edu.my (N-26)<br></center>";
  230.             }
  231.             if ($(this).data("id") == "14") {
  232.                 infos = "<center><img src='images/v2/image 4.png' class='counselorimg'><br>PUAN NOOR ZAINI ARIFFIN<br>Pembantu Tadbir P/O (N22)<br>Tel : 04-928 4068<br> Email: n.zaini@uum.edu.my</center>";
  233.             }
  234.             $("#counselor_info").html(infos);
  235.         })
  236.  
  237.         $(".close_counselor").click(function () {
  238.             $("#info_counselor").hide();
  239.         })
  240.     })
  241. </script>
  242.  
  243. <div class="w3-container">
  244.     <div class="pointer_y1">Service <br>Offered</div>
  245. </div>
  246. <script src="language.js"></script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!