CETis 102 Organizational Chart

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Organigrama CETis 102</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" media="screen">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-

theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-

DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link href="css/organigrama.css" rel="stylesheet">
<script language="JavaScript">
var id,pause=0,position=0;
function scorrevole() {
var i,k,msg=" CENTRO DE ESTUDIOS TECNOLGICOS INDUSTRIAL Y DE

SERVICIOS ";
k=(100/msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg;
document.form2.scorrevole.value=msg.substring(position,position+100);
if(position++==100) position=0;
id=setTimeout("scorrevole()",100); }
</script>
<style>
input[type=text], input[type=password] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 80%;
button:hover {
opacity: 0.8;
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
img.avatar {
width: 30%;
border-radius: 50%;
margin-left: 140px;
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top:30px;
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 2% auto 19% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
.enai{
margin-top: 40px;
margin-left: 60px;
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.content{
/* background-image: url(tec1.jpg);*/
background-color: cornflowerblue;
width: 100%;
height: 150%;
body{
background: cornflowerblue;
height:250 px;
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
@keyframes animatezoom {
from {transform: scale(0)}

to {transform: scale(1)}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
.cancelbtn {
width: 100%;
.enaii {
font-family: Arial;
font-size: 18pt;
font-weight: bold;
input{
border: none;
}
</style>
</head>
<br>
<body bgcolor="white"
onload="scorrevole(),document.getElementById('#').style.display='block'" ">
<div class="tec">
<img src="img/dgeti.jpg" style="margin-left: 83px; margin-bottom: -95px;width: 11%;height:

17.5%">
</div>
<br>
<div align="center">
<form name=form2>
<input type="text" name="scorrevole" size="90" class="enaii" style=" margin-

left: 195px; background-color:cornflowerblue; border: none; ">
</form>
</div>
<div class="content" >
<h3 class="subtitulo" style="margin-left:400px; padding:-20px">ESTRUCTURA RGANICA</h3>
<br><br><br>
<figure class="org-chart cf">
<ul class="administration">
<li>
<ul class="director">
<li>
<a onclick="document.getElementById('id02').style.display='block'"
href="#"><span>Director</span></a>
<ul class="subdirector " ></ul>
<ul class="departments cf ">
<li ><a onclick="document.getElementById('id03').style.display='block'"href="#"

><span>Sub Director</span></a></li>
<li class="department dep-a">
<a href="#" onclick="document.getElementById('id12').style.display='block'"

><span>Depto. Planeacin y Evaluacin</span></a>
<ul class="sections">
<li class="section"><a onclick="document.getElementById('id12').style.display='block'"

href="#"><span>Departamento de vinculacin y extencin</span></a></li>

href="#"><span>Departamento de servicios escolares</span></a></li>
<li class="section"><a
onclick="document.getElementById('id10').style.display='block'" href="#"><span>Departamento
de servicios escolares y de innovacin y calidad</span></a></li>

href="#"><span>Departamento de planeacin, programacin y evaluacin</span></a></li>
</ul>
</li>
<li class="department dep-b">
<a href="#" onclick="document.getElementById('id11').style.display='block'"

><span>Depto. Servicios Docentes</span></a>

href="#"><span>Jfe. Oficina de Personal</span></a></li>

href="#"><span>Jfe. Oficina de Recursos Financieros</span></a></li>

href="#"><span>Divisin en Ingeniera en Administracin</span></a></li>

href="#"><span>Divisin de Gastronoma</span></a></li>

href="#"><span>Divisin de Ingeniera en Logstica</span></a></li>
</ul>
</li>
<li class="department dep-c">
<a href="#"
onclick="document.getElementById('id13').style.display='block'"><span>Jfe. de Oficina de
Servicios Escolares</span></a>

href="#"><span>Jfe. Oficina Control Escolar</span></a></li>

href="#"><span>Jfe. Orientacin Educativo</span></a></li>

href="#"><span>Departamento de Recursos Financieros</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</figure>
<div id="id01" class="modal" >
<form class="modal-content animate" style=" background-color:skyblue;">
<div class="enai">
<h3 style="margin-left:60px;font-weight: bold;;">Intruccin para interactuar :</h3>
<h4 style="margin-left:90px;">Dar click en los recuardros !!!</h4>
<a href="#" style="margin-left:250px; font-weight: bold; font-size: 2em;color:

#000;"><span onclick="document.getElementById('id01').style.display='none'">Empecemos
--></span></a>
</div>
<span onclick="document.getElementById('id01').style.display='none'" class="close"

title="Cerrar">×</span>
</form>
</div>

<div class="enai">
<img src="img/person.png" alt="Avatar" class="avatar img-responsive">
<h3 style="margin-left:85px;font-weight: bold;;">Alfonso Flores Coello</h3>
<h3 style="margin-left:105px;">Director del Plantel </h3>
</div>

</form>
</div>
<div class="enai">
<img src="img/person.png" alt="Avatar" class="avatar img-responsive">
<h3 style="margin-left:35px;font-weight: bold;;">Oscar Joaquin Reyes

Jimenez</h3>
<h3 style="margin-left:85px;">Sub Director del Plantel </h3>
</div>

</form>
</div>
<form class="modal-content animate" action=" " style=" background-color:skyblue;">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" style=" width: 50px;

height: 10px; left: 0px;bottom: -33px ;;"><a href="#info8" aria-controls="home" style=" width:
50px; height: 35px;;" role="tab" data-toggle="tab" class="glyphicon glyphicon-user"></a></li>
<li role="presentation" style="width: 55px; height: 30px; left:

-10px; bottom: -33px; ;"><a href="#info9" aria-controls="profile" style=" width: 50px; height:
35px;;" role="tab" data-toggle="tab" class="glyphicon glyphicon-user"></a></li>
<li role="presentation" style="width: 55px; height: 30px; left: -20px; bottom:

-33px; ;"><a href="#info10" aria-controls="profile" style=" width: 50px; height: 35px;;"
role="tab" data-toggle="tab" class="glyphicon glyphicon-user"></a></li>





<li role="presentation" style="width: 55px; height: 30px; left: 400px; bottom:

-4px; ;"><a href="#info17" aria-controls="profile" style=" width: 50px; height: 35px;;" role="tab"
data-toggle="tab" class="glyphicon glyphicon-user"></a></li>


</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="info8">
<div class="enai">
<img src="img/person.png" alt="Avatar" class="avatar">
<h3 style="margin-left:80px;">Prez Hernndez Cinthya</h3>
<h3 style="margin-left:100px;">Jefe de Departamento</h3>
<h3 style="margin-left:170px;">Telfono </h3>
<h3 style="margin-left:185px;">Email</h3>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="info9">
<div class="enai">
<h3 style="margin-left:90px;">Venegas Garca J.Jess</h3>
<h3 style="margin-left:165px;">Docente</h3>
<h3 style="margin-left:165px;">Telfono</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:100px;">Sibaja Cruz Miguel </h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:100px;">Snchez Salmorn Eloy</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:55px;">Gonzlez Lpez Marbeli Vivani </h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:100px;">Garca Cruz Antonio</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:100px;">Maldonado Cholula Jess</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:80px;">Espinal Montes Vronica</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:50px;">Lpez Vicente Eduardo Ren</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:60px;">Ruiz Vicente Marco Antonio</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Hernndez Aparicio Luis </h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:60px;">Vargas Ramrez Jos Antonio</h3>
</div>
</div>
<div class="modal" style="background-color:#f1f1f1; ">
</div>
</div>

</form>
</div>


-10px; bottom: -33px; ;"><a href="#info21" aria-controls="profile" style=" width: 50px; height:













</ul>
<div class="enai">
<h3 style="margin-left:40px;">Mendoza Gonzlez Maria Consepcin</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Santiago Ramos Daniel</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:60px;">Altamirano Zrate Ana Lidia</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:80px;">Garca Prez Jos Luis</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:75px;">Vsquez Silva Getsemani</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:55px;">Ortiz Galindo Juan Zenaido </h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:55px;">Venegas Rojas Karen Jessica</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:80px;">Santiago Palacios Itxel</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:80px;">Prez Salmorn Ulises</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:50px;">Guerrero Ibaez Lezly Victoria</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Hernndez Reyes Yalit</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Snchez Amaro Julio</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Ramrez Gonzlez Omar</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:100px;">Marquez Ferrer Elisa</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:100px;">Cruz Prez Jacsiel</h3>
</div>
</div>
</div>
</div>

</form>
</div>



5px; bottom: -33px; ;"><a href="#info36" aria-controls="profile" style=" width: 50px; height:







<li role="presentation" style="width: 55px; height: 30px; left:440px; bottom:

</ul>
<div class="enai">
<h3 style="margin-left:60px;">Guzmn Audelo Alberto Carlos</h3>
<h3 style="margin-left:85px;">Jefe de Departamento </h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:60px;">Cano Lpez Norberto Carlos</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Prez Gmez Alfredo</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Jurez Martnez Sabino</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Salinas Cruz Aarn David</h3>

</div>
</div>
<div class="enai">
<h3 style="margin-left:70px;">Laguna Corona Victor Hugo</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:70px;">Cruz Prez Noe Gamaliel</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:70px;">Ruz Hernrdez Cuauhtemoc</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:70px;">Prez Amaro Jos Alberto </h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:70px;">Canseco Zrate Viridiana Jessica</h3>

</div>
</div>
</div>
<div class="modal" style="background-color:#f1f1f1">
</div>

</form>
</div>











</ul>
<div class="enai">
<h3 style="margin-left:30px;">Martnez Montes Naxhielly Concepcin</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:70px;">Solorzano Prez Miriam</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:40px;">Santiago Luis Liliana Monserrat</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:70px;">Huerta Mecot Reyna Mara</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:80px;">Cruz Martnez Honorio</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Quiroz Prez Lizbeth</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Snchez Bautista Irma</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:100px;">Ortiz Ortiz Eleazar</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Chagala Ramrez Raquel</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:40px;">Ramrez Martnez Jse de Jess</h3>
</div>
</div>
<div class="enai">
<h3 style="margin-left:40px;">Garca Lpez Leticia Maribel </h3>
</div>
</div>
</div>
<div class="modal" style="background-color:#f1f1f1">
</div>

</form>
</div>


</ul>
<div class="enai">
<h3 style="margin-left:50px;">Garca Gonzlez Aida Veronica</h3>
</div>
</div>
<div class="enai">

<h3 style="margin-left:100px;">Chvez Prez Arely</h3>
</div>
</div>
</div>
</div>

</form>
</div>
<div class="enai">
<h3 style="margin-left:35px;">Normando Salvador Jurez Nieto</h3>
<h3 style="margin-left:78px;">Jefe. de Departamento</h3>
</div>
</form>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Moises Santiago Jos</h3>
</div>

</form>
</div>

<div class="enai">
<h3 style="margin-left:95px;">Zenn Lura Matas</h3>
</div>

</form>
</div>
<div class="enai">
<h3 style="margin-left:90px; font-weight: bold;">Neptali Lpez Lpez</h3>
</div>

</form>
</div>
<div class="enai">
<h3 style="margin-left:15px;">Esperanza Mercedes Amaya Chavez</h3>
</div>

</form>
</div>
<div class="enai">
<h3 style="margin-left:90px;">Margarita Ibarra Flores</h3>

</div>

</form>
</div>
<div class="enai">
<h3 style="margin-left:125px;">Elena Cruz Cruz</h3>
</div>

</form>
</div>
<div class="" style="margin:760px;">
<a href="index.php" class="btn btn-lg btn-primary"><i class="fa fa-mail-

reply"></i> Regresar a Pgina Principal</a>
</div>
</div>
<script>
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// Get the modal
var modal = document.getElementById('id01');
var modal1 = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}else if(event.target == modal1){
modal1.style.display = "none";
}else if(event.target == modal2){
}else if(event.target == modal3) {

</script>
</body>
</html>

CETis 102 Organizational Chart

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CETis 102 Organizational Chart

Uploaded by

Copyright:

Available Formats

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Organigrama CETis 102</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-

<link href="css/organigrama.css" rel="stylesheet">

var i,k,msg=" CENTRO DE ESTUDIOS TECNOLGICOS INDUSTRIAL Y DE

for(i=0;i<=k;i++) msg+=" "+msg;

padding: 12px 20px;

border: 1px solid #ccc;

/* Set a style for all buttons */

padding: 14px 20px;

/* Center the image and position the close button */

margin: 24px 0 12px 0;

/* The Modal (background) */

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

width: 40%; /* Could be more or less, depending on screen size */

/* The Close Button (x) */

/* Add Zoom Animation */

-webkit-animation: animatezoom 0.6s;

animation: animatezoom 0.6s

from {-webkit-transform: scale(0)}

from {transform: scale(0)}

@media screen and (max-width: 300px) {

<img src="img/dgeti.jpg" style="margin-left: 83px; margin-bottom: -95px;width: 11%;height:

<input type="text" name="scorrevole" size="90" class="enaii" style=" margin-

<div class="content" >

<h3 class="subtitulo" style="margin-left:400px; padding:-20px">ESTRUCTURA RGANICA</h3>

<figure class="org-chart cf">

<ul class="subdirector " ></ul>

<ul class="departments cf ">

<li ><a onclick="document.getElementById('id03').style.display='block'"href="#"

<li class="department dep-a">

<a href="#" onclick="document.getElementById('id12').style.display='block'"

<li class="section"><a onclick="document.getElementById('id12').style.display='block'"

<li class="section"><a onclick="document.getElementById('id11').style.display='block'"

<li class="section"><a onclick="document.getElementById('id09').style.display='block'"

<li class="department dep-b">

<a href="#" onclick="document.getElementById('id11').style.display='block'"

<li class="section"><a onclick="document.getElementById('id10').style.display='block'"

<li class="section"><a onclick="document.getElementById('id09').style.display='block'"

<li class="section"><a onclick="document.getElementById('id07').style.display='block'"

<li class="section"><a onclick="document.getElementById('id05').style.display='block'"

<li class="section"><a onclick="document.getElementById('id08').style.display='block'"

<li class="department dep-c">

<li class="section"><a onclick="document.getElementById('id14').style.display='block'"

<li class="section"><a onclick="document.getElementById('id15').style.display='block'"

<li class="section"><a onclick="document.getElementById('id15').style.display='block'"

<div id="id01" class="modal" >

<form class="modal-content animate" style=" background-color:skyblue;">

<h3 style="margin-left:60px;font-weight: bold;;">Intruccin para interactuar :</h3>

<h4 style="margin-left:90px;">Dar click en los recuardros !!!</h4>