29 Commits

Author SHA1 Message Date
IO 80e12d9316 justify text and fixed gap 2024-09-24 13:56:56 -06:00
IO 257bb8a704 fixed image 2024-09-10 15:24:29 -06:00
IO acdd833fb7 fixed responsive 2024-09-10 15:10:04 -06:00
Mikitl d90b35cfbd Prototipo diseño desktop 2024-09-08 12:29:05 -06:00
Mikitl 4b9f65632b Avance diseño desktop 2024-09-08 00:06:10 -06:00
IO 192c5d5255 add image sorjuana 2024-09-06 11:24:42 -06:00
IO c56e94ee07 add header} 2024-09-05 17:35:45 -06:00
IO 0a95a6f0a8 add conoce la fes 2024-09-03 18:04:23 -06:00
IO 2d64d00c5f add conoce la fes 2024-09-03 18:03:36 -06:00
IO 0806b5169d add conoce la fes 2024-09-03 18:01:15 -06:00
Diego Moctezuma cbd8244eaf styles update 2024-09-01 17:26:54 -06:00
IO 19eeed6e99 video call change 2024-08-27 18:22:13 -06:00
IO 19e3d0ce14 update info campo, scroll 2024-08-27 14:37:59 -06:00
Diego Moctezuma 36b4c2c310 styles and animations update 2024-08-23 21:26:09 -06:00
IO 0c0dc586a6 i tried to fix the responsiveness 2024-08-22 16:36:41 -06:00
IO df83db8d95 style i don't know 2024-08-22 15:12:18 -06:00
Diego Moctezuma e60e653954 Adding animations 2024-08-19 22:27:17 -06:00
Diego Moctezuma 020aac961d Changes in syllabus styles 2024-08-19 15:44:31 -06:00
IO 3ea00e5c3e add responsive 2024-08-19 11:49:04 -06:00
Diego Moctezuma 47776749f9 dynamic information base 2024-08-18 21:31:09 -06:00
Diego Moctezuma 7559d5be43 syllabus 2006 styles 2024-08-18 16:52:27 -06:00
Diego Moctezuma e49f5ddb02 Work field and study plan styles update 2024-08-17 23:12:24 -06:00
Diego Moctezuma 5bd8497f37 student profile styles update 2024-08-17 20:56:33 -06:00
Diego Moctezuma 0a0b242da7 Contact career style update 2024-08-17 20:03:08 -06:00
Diego Moctezuma 3fe21702ca Career section style update 2024-08-17 17:56:23 -06:00
IO c7903fdec8 fixing style and arranged text 2024-08-16 10:59:17 -06:00
IO 19fcc1131f add campo laboral 2024-08-15 16:10:51 -06:00
IO dc85314ead fixed responsive and add profile 2024-08-15 11:01:26 -06:00
IO 73d8b2f592 start design 2024-08-14 10:53:12 -06:00
18 changed files with 2257 additions and 2772 deletions
Vendored
BIN
View File
Binary file not shown.
@@ -0,0 +1,70 @@
/* ==========
main
========== */
main{
color: #0000;
}
main h2{
color: #1e3c70;
}
#hero {
width: 100%;
min-height: 430px;
max-height: 80vh;
background: linear-gradient(rgba(38, 42, 93, 0.4), rgba(0, 0, 0, 0.7)), url("../../../assets/img/bg/solid.png") fixed center;
background-size: cover;
position: relative;
padding: 20px;
}
#hero:before {
content: "";
background: rgba(255, 255, 255, 0.03);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#hero h1 {
font-size: 36px;
font-weight: 700;
line-height: 40px;
color: darkgoldenrod;
}
#idearioJuramento{
width: 100%;
min-height: 80vh;
background: linear-gradient(rgba(38, 42, 93, 0.4), rgba(0, 0, 0, 0.7)), url("../../../assets/img/bg/alt-2.jpg") fixed center;
background-size: cover;
position: relative;
overflow: visible;
}
#idearioJuramento:before {
content: "";
background: rgba(255, 255, 255, 0.01);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
@media (max-width: 548px) {
#hero {
height: 60vh;
}
#hero h1 {
font-size: 28px;
line-height: 36px;
}
#hero h2 {
font-size: 20px;
line-height: 24px;
}
}
+158
View File
@@ -0,0 +1,158 @@
/* Banner */
.banner{
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
&-container{
margin-top: 10%;
gap: 70px;
justify-content: end;
}
&-img{
width: 25%;
height: auto;
max-width: 50%;
border-radius: 2rem;
transform: rotate(-45deg);
overflow: hidden;
& img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
& .text{
max-width: 50%;
}
}
/* Historia */
.historia{
h2{
width: 40%;
border-bottom: 5px solid darkgoldenrod;
}
&-info{
gap: 10rem;
text-align: justify;
}
&-imagenes{
position: relative;
justify-content: center;
#imgUno{
min-height: 70vh;
object-fit: cover;
}
#imgDos{
max-width: 20vw;
height: 30vh;
object-fit: cover;
position: absolute;
left: -20%;
bottom: -15%;
}
}
}
/* Ideario - Juramento */
.idearioJuramento{
.floating-list {
max-height: 8vh;
position: absolute;
top: -2%;
padding: 20px;
background-color: white;
border-radius: 8px;
gap: 10px;
list-style: none;
& li {
cursor: pointer;
transition: all 0.3s ease-in;
&:hover{
color: darkgoldenrod;
}
}
.opcion{
color: #1e3c70;
}
.select{
color: darkgoldenrod;
border-bottom: 3px solid darkgoldenrod;
}
}
.info-block{
h3{
width: 20%;
border-bottom: 5px solid darkgoldenrod;
}
p{
width: 90%;
text-align: justify;
}
&-list{
list-style: none;
li{
display: flex;
align-items: center;
i{
color: darkgoldenrod;
}
}
}
}
}
@media(max-width:991px){
.banner{
overflow: visible;
display: flex;
&-container{
flex-direction: column;
text-align: center;
}
&-img{
width: 70%;
height: auto;
}
& .text{
max-width: 100%;
}
}
.historia{
&-info{
gap: 4rem;
flex-direction: column;
}
&-imagenes{
position: relative;
width: 100%;
justify-content: center;
#imgDos{
max-width: 70vw;
height: 30vh;
left: 5%;
bottom: -10%;
}
}
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 339 KiB

+32
View File
@@ -0,0 +1,32 @@
let opcionIdeario = document.getElementById('idearioOpcion');
let opcionJuramento = document.getElementById('juramentoOpcion');
let infoIdeario = document.getElementById('idearioInfo');
let infoJuramento = document.getElementById('juramentoInfo');
function actualizarVista(seleccionado, infoMostrar) {
// hide all information elements
infoIdeario.className = 'd-none';
infoJuramento.className = 'd-none';
// show selected items
infoMostrar.className = 'container';
// resets button classes
opcionIdeario.className = 'opcion';
opcionJuramento.className = 'opcion';
// set active on selected button
seleccionado.className = 'opcion select';
//animation
window.scrollBy(0,1);
}
opcionIdeario.addEventListener('click', () => {
actualizarVista(opcionIdeario, infoIdeario);
});
opcionJuramento.addEventListener('click', () => {
actualizarVista(opcionJuramento, infoJuramento);
});
+352
View File
@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>FES Acatlán</title>
<meta content="" name="descriptison" />
<meta content="" name="keywords" />
<!-- Favicons -->
<link href="../assets/img/icon/icon.png" rel="icon" />
<link href="../assets/img/icon/icon.png" rel="apple-touch-icon" />
<!-- Ext CSS -->
<link
href="../assets/Ext/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="../assets/Ext/icofont/icofont.min.css" rel="stylesheet" />
<link href="../assets/Ext/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="../assets/Ext/owl.carousel/assets/owl.carousel.min.css"
rel="stylesheet"
/>
<link href="../assets/Ext/aos/aos.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- Main CSS -->
<link href="../assets/css/main.css" rel="stylesheet" />
<link href="./assets/css/conoce-la-fes.css" rel="stylesheet" />
<link href="./assets/css/conoce-la-fes.less" rel="stylesheet/less" />
</head>
<body>
<!-- ======= Header ======= -->
<!--<header id="header" class="fixed-top ">-->
<header id="header">
<div class="container d-flex align-items-center justify-content-between">
<div class="">
<a href="https://www.unam.mx/" target="_blank"
><img
src="../assets/img/escudos/logo_unam-b.png"
alt=""
class="img-fluid logo"
/></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"
><img
src="../assets/img/escudos/escudo-b2.png"
alt=""
class="img-fluid logo-unam"
/></a>
</div>
<h1>FES <span>Acatlán</span></h1>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="#">Normatividad</a></li>
<li><a href="#">Tienda Acatlán</a></li>
</ul>
</nav>
<!-- .nav-menu -->
</div>
<div class="container">
<nav class="nav-menu-2 d-none d-lg-block">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Licenciaturas</a></li>
<li><a href="#">Posgrados</a></li>
<li><a href="#">Investigación</a></li>
<li><a href="#">Cursos y Diplomados</a></li>
<li><a href="#">Otros</a></li>
</ul>
</nav>
<!-- .nav-menu -->
</div>
</header>
<!-- End Header -->
<!-- ======= Main Section ======= -->
<main>
<!-- Banner -->
<section class="banner" id="hero">
<div class="banner-container d-flex align-items-center" data-aos="fade-up">
<div class="banner-img">
<img src="./assets/img/sorjuana.png" alt="">
</div>
<div class="text">
<h1 class="text-white fs-1 fw-bold">Conoce la</h1>
<h1 class="fs-2">Facultad de Estudios Superiores Acatlán</h1>
</div>
</div>
</section>
<!-- Historia -->
<section class="historia container mt-4">
<div class="historia-info d-flex justify-content-evenly align-items-center">
<div class="historia-texto text-dark">
<h2 class="fs-1 fw-bold">Historia</h2>
<p class="lh-base pt-3">
El 17 de marzo de 1975, la Escuela Nacional de Estudios Profesionales (ENEP) Acatlán abrió sus puertas en el municipio de Naucalpan, Estado de México, para responder a la necesidad de la Universidad Nacional Autónoma de México de beneficiar a mayor número de estudiantes con la educación universitaria; introducir innovaciones educativas; impulsar la interdisciplina y la multidisciplina; vincular la investigación y la docencia; integrar la teoría y la práctica y vincularse con el entorno. Hoy, convertida en Facultad de Estudios Superiores, Acatlán ha logrado consolidarse como una entidad universitaria tanto en lo académico, como en lo cultural y deportivo.
</p>
<p class="lh-base">
A través de estos años de quehacer universitario, no sólo ha tenido avances en lo cuantitativo, sino sobre todo en lo cualitativo. El aumento de su matrícula, de su planta de profesores, así como el crecimiento de su infraestructura, han ido a la par con la calidad educativa que imparte, lo que la ha posicionado como una de las mejores instituciones de educación superior de la zona noroeste del área metropolitana, gracias al trabajo comprometido de toda la comunidad que la conforma.
</p>
<p class="lh-base">
El Consejo Universitario de la UNAM le reconoció a la ENEP Acatlán la consolidación académica y cultural alcanzada durante su existencia, por lo que el 5 de marzo de 2004 le otorgó el rango y denominación de Facultad de Estudios Superiores.
</p>
<p class="lh-base">
En consecuencia, la Facultad de Estudios Superiores Acatlán está considerada como uno de los centros educativos más importantes de la zona noroeste del área metropolitana y uno de los espacios alternativos a Ciudad Universitaria. Actualmente cuenta con una comunidad cercana a 20,000 universitarios.
</p>
</div>
<div class="historia-imagenes col-5">
<img id="imgUno" class="img-fluid rounded-3" src="../assets/img/bg/placa-acatlan.jpg" alt="">
<img id="imgDos" class="img-fluid rounded-3 border border-3 border-white" src="../assets/img/bg/_DSC2981.jpg" alt="">
</div>
</div>
</section>
<!-- Iedario - Juramento -->
<section id="idearioJuramento" class="idearioJuramento mt-5 d-flex flex-column align-items-center">
<ul class="floating-list d-flex justify-content-evenly align-items-end fs-4 fw-semibold">
<li id="idearioOpcion" class="opcion select">Ideario</li>
<li id="juramentoOpcion" class="opcion">Juramento</li>
</ul>
<!-- Ideario -->
<section id="idearioInfo" class="container" data-aos="fade-up" data-aos-delay="100">
<!-- Misión -->
<div class="info-block text-white">
<h3 class="fs-2 fw-bold mb-3">Misión</h3>
<p>
Ser una Facultad que desarrolle las capacidades integrales de su comunidad con carácter plural, integral, crítico y propositivo que propicie una concepción educativa con articulación de los aprendizajes, la docencia, la investigación y la cultura; acorde a los principios y valores universitarios y a la identidad colectiva para contribuir al crecimiento y bienestar de la sociedad con énfasis en el entorno donde se inserta y desenvuelve.
</p>
</div>
<!-- Visión -->
<div class="info-block text-white text-end d-flex flex-column align-items-end mt-5">
<h3 class="fs-2 fw-bold mb-3">Visión</h3>
<p>
Ser una Facultad que desarrolle las capacidades integrales de su comunidad con carácter plural, integral, crítico y propositivo que propicie una concepción educativa con articulación de los aprendizajes, la docencia, la investigación y la cultura; acorde a los principios y valores universitarios y a la identidad colectiva para contribuir al crecimiento y bienestar de la sociedad con énfasis en el entorno donde se inserta y desenvuelve.
</p>
</div>
<!-- Valores -->
<div class="info-block text-white mt-5">
<h3 class="fs-2 fw-bold mb-3">Valores</h3>
<p>
El Plan de Desarrollo Institucional de nuestra Facultad se erige sobre un conjunto de principios y valores que caracterizan el quehacer universitario:
</p>
<ul class="info-block-list d-flex flex-column gap-2">
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Respeto a la autonomía universitaria y a los principios que de ella emanan.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Gestión eficiente, transparente y participativa.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Honestidad y responsabilidad en el uso y aprovechamiento del patrimonio universitario en beneficio de toda la comunidad.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Responsabilidad social y ambiental en las actividades cotidianas.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Compromiso social y nacional para contribuir al desarrollo y mejoramiento de las condiciones de vida.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Evaluación y mejoramiento institucional permanente.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Posicionamiento del alumnado y el personal docente como actores centrales de la actividad universitaria.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Promoción de la convivencia mediante el ejercicio del diálogo, el respeto y la libertad, tanto dentro como fuera de la Universidad.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Reconocimiento de la diversidad humana y la pluralidad como agentes que otorgan dinamismo y revitalizan la vida universitaria.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Aprovechamiento asiduo de los avances tecnológicos en beneficio de la gestión institucional y las actividades de docencia, investigación y extensión de la cultura.
</li>
</ul>
</div>
</section>
<!-- Juramento -->
<section id="juramentoInfo" class="container d-none" data-aos="fade-up" data-aos-delay="100">
<div class="info-block text-white mt-5">
<h3 class="fs-2 fw-bold mb-3">Juramento</h3>
<p>
Como parte de la Universidad Nacional Autónoma de México en la Facultad de Estudios Superiores Acatlán, me comprometo a:
</p>
<ul class="info-block-list d-flex flex-column gap-2">
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Querer, proteger y defender a mi Universidad y a mi Facultad.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Cumplir en todo momento con las normas, principios y reglamentos establecidos en la UNAM y en mi Facultad.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Actuar hoy y siempre acorde con los valores universitarios: libertad, solidaridad, verdad, justicia y respeto.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Mantener un comportamiento ejemplar que siempre contribuya al desarrollo de la docencia, la investigación y la extensión de la cultura en el marco institucional.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Sentir orgullo, en todo momento y espacio, de formar parte de la Máxima Casa de Estudios, la mejor Universidad del país y una de las más reconocidas del mundo.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Enaltecer el prestigio de la UNAM, construido a lo largo de más de 450 años.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Portar con orgullo y respeto mis colores azul y oro, símbolos de la identidad universitaria.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Aprovechar el gran privilegio que significa ser parte de la Facultad de Estudios Superiores Acatlán y de la Universidad Nacional Autónoma de México, ya que en ellas encontraré una formación integral.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Asumir el compromiso y la responsabilidad de retribuir a la sociedad mexicana y a mi Universidad los conocimientos y el apoyo que me brindan.
</li>
<li>
<i class='bx bx-chevrons-right bx-sm'></i>
Apoyar a mi Universidad para mantener la formación de futuras generaciones.
</li>
</ul>
<p class="fs-6 fw-bold mt-5">Por mi raza hablará el espíritu</p>
</div>
</section>
</section>
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 footer-newsletter">
<h4>Redes Sociales</h4>
Siguenos en:
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"
><i class="bx bxl-instagram"></i
></a>
<a href="#" class="google-plus"
><i class="bx bxl-youtube"></i
></a>
</div>
<img
src="../assets/img/escudos/unam-nacion-blanco.png"
style="width: 150px; margin: 15px auto"
/>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Sitios de Interes</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-1</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-2</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-3</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-4</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-5</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-6</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Conoce más</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-1</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-2</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-3</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-4</a>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-6">
<div class="footer-info">
<h3>FES <span>Acatlán</span></h3>
<p>
Hecho en México, todos los derechos reservados 2021.
<br /><br />
Esta página puede ser reproducida con fines no lucrativos,
siempre y cuando no se mutile, se cite la fuente completa y su
dirección electrónica. De otra forma, requiere permiso previo
por escrito de la institución.
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-swoosh-up"></i></a>
<!-- Ext JS -->
<script src="../assets/Ext/jquery/jquery.min.js"></script>
<script src="../assets/Ext/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/Ext/jquery.easing/jquery.easing.min.js"></script>
<script src="../assets/Ext/owl.carousel/owl.carousel.min.js"></script>
<script src="../assets/Ext/aos/aos.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js" ></script>
<!-- Main JS -->
<script src="../assets/js/main.js"></script>
<script src="./assets/main.js"></script>
</body>
</html>
@@ -1,105 +0,0 @@
#hero {
width: 100%;
height: 93vh;
background: linear-gradient(rgba(255, 217, 0, 0.1), rgba(255, 247, 0, 0.096)), url("../css/img/cedetec.jpeg") top center;
background-size: cover;
position: relative;
}
#Center div .contenido-centrado {
text-align: center;
}
#hero .transparent-cart {
padding: 1.7rem;
background: rgba(112, 112, 112, 0.027);
border-radius: 5px;
height: 100%;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.082);
position: relative;
}
#hero .transparent-cart ::after {
content: "";
width: 40px;
height: 40px;
position: absolute;
bottom: 10px;
right: 10px;
border-right: 6px solid #bb8800;
border-bottom: 6px solid #bb8800;
border-radius: 3px;
}
#hero .transparent-cart ::before {
content: "";
width: 40px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
border-left: 6px solid #bb8800;
border-top: 6px solid #bb8800;
border-radius: 3px;
}
#hero .carousel h3 {
color: #1e3c70;
font-size: xx-large;
font-weight: bold;
}
#hero .carousel h4 {
color: #1e3c70;
font-size: xx-large;
font-weight: bold;
}
#hero .carousel p {
color: black;
}
#Center ul li a {
color: #bb8800;
}
#Center .div-flex .active {
color: #1e3c70;
border-bottom: 2px solid #bb8800;
}
#Center .nav-tabs .active {
color: #1e3c70;
background-color: #ffff;
}
#Center .b-ground {
background: url("../../../assets/img/bg/solid.png");
padding: 0;
margin: 0;
}
#Center table thead {
color: #ffff;
font-size: medium;
}
#Center .tab-pane p {
color: #000;
}
@media (max-width: 992px) {
#Center .div-flex {
display: block;
}
}
@media (min-width: 993px) {
#Center .div-flex {
display: flex;
}
}
@media (max-width: 992px) {
#Center .normal {
height: 47px;
overflow-x: auto !important;
flex-direction: column;
column-gap: 20px;
}
#Center .normal .nav-link {
border: 0;
padding: 10px;
}
}
#avisos .contenido-centrado {
text-align: center;
border-bottom: 2px solid #bb8800;
margin: 35px 0px;
border-top: 2px solid #bb8800;
padding: 10px 0px;
}
@@ -1,124 +0,0 @@
#hero {
width: 100%;
height: 93vh;
background: linear-gradient(rgba(255, 217, 0, 0.1), rgba(255, 247, 0, 0.096)),
url("../css/img/cedetec.jpeg") top center;
background-size: cover;
position: relative;
}
#Center div .contenido-centrado {
text-align: center;
}
#hero .transparent-cart {
padding: 1.7rem;
background: rgba(112, 112, 112, 0.027);
border-radius: 5px;
height: 100%;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.082);
position: relative;
}
#hero .transparent-cart ::after {
content: "";
width: 40px;
height: 40px;
position: absolute;
bottom: 10px;
right: 10px;
border-right: 6px solid #bb8800;
border-bottom: 6px solid #bb8800;
border-radius: 3px;
}
#hero .transparent-cart ::before {
content: "";
width: 40px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
border-left: 6px solid #bb8800;
border-top: 6px solid #bb8800;
border-radius: 3px;
}
#hero .carousel h3 {
color: #1e3c70;
font-size: xx-large;
font-weight: bold;
}
#hero .carousel h4 {
color: #1e3c70;
font-size: xx-large;
font-weight: bold;
}
#hero .carousel p {
color: black;
}
#Center ul li a {
color: #bb8800;
}
#Center .div-flex .active {
color: #1e3c70;
border-bottom: 2px solid #bb8800;
}
#Center .nav-tabs .active {
color: #1e3c70;
background-color: #ffff;
}
#Center .b-ground {
background: url("../../../assets/img/bg/solid.png");
padding: 0;
margin: 0;
}
#Center table thead {
color: #ffff;
font-size: medium;
}
#Center .tab-pane p {
color: #000;
}
@media (max-width: 992px) {
#Center .div-flex {
display: block;
}
}
@media (min-width: 993px) {
#Center .div-flex {
display: flex;
}
}
@media (max-width: 992px) {
#Center .normal {
height: 47px;
overflow-x: auto !important;
flex-direction: column;
column-gap: 20px;
}
#Center .normal .nav-link {
border: 0;
padding: 10px;
}
}
#avisos .contenido-centrado {
text-align: center;
border-bottom: 2px solid #bb8800;
margin: 35px 0px;
border-top: 2px solid #bb8800;
padding: 10px 0px;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 286 KiB

-842
View File
@@ -1,842 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>FES Acatlán</title>
<meta content="" name="descriptison" />
<meta content="" name="keywords" />
<!-- Favicons -->
<link href="../assets/img/icon/icon.png" rel="icon" />
<link href="../assets/img/icon/icon.png" rel="apple-touch-icon" />
<!-- Ext CSS -->
<link
href="../assets/Ext/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="../assets/Ext/icofont/icofont.min.css" rel="stylesheet" />
<link href="../assets/Ext/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="../assets/Ext/owl.carousel/assets/owl.carousel.min.css"
rel="stylesheet"
/>
<link href="../assets/Ext/aos/aos.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- Main CSS -->
<link href="../assets/css/main.css" rel="stylesheet" />
<link
rel="stylesheet"
href="../cursos-de-computo/assets/css/cursos-de-computo.css"
/>
</head>
<body>
<!-- ======= Header ======= -->
<!--<header id="header" class="fixed-top ">-->
<header id="header">
<div class="container d-flex align-items-center justify-content-between">
<div class="">
<a href="https://www.unam.mx/" target="_blank"
><img
src="../assets/img/escudos/logo_unam-b.png"
alt=""
class="img-fluid logo"
/></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"
><img
src="../assets/img/escudos/escudo-b2.png"
alt=""
class="img-fluid logo-unam"
/></a>
</div>
<h1>FES <span>Acatlán</span></h1>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="#">Normatividad</a></li>
<li><a href="#">Tienda Acatlán</a></li>
</ul>
</nav>
<!-- .nav-menu -->
</div>
<div class="container">
<nav class="nav-menu-2 d-none d-lg-block">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Licenciaturas</a></li>
<li><a href="#">Posgrados</a></li>
<li><a href="#">Investigación</a></li>
<li><a href="#">Cursos y Diplomados</a></li>
<li><a href="#">Otros</a></li>
</ul>
</nav>
<!-- .nav-menu -->
</div>
</header>
<!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center justify-content-center">
<div class="container" data-aos="fade-up">
<div
class="row justify-content-center align-items-center"
data-aos="fade-up"
data-aos-delay="150"
>
<div class="col-12 col-md-6 transparent-cart">
<h1 style="font-size: 4vh">Cursos de Computo</h1>
</div>
<div class="col-12 col-md-6">
<div
id="carouselExampleControls"
class="carousel slide"
data-bs-ride="carousel"
style="font-size: medium"
>
<div class="carousel-inner">
<div class="carousel-item active">
<h3>¿Quiénes somos?</h3>
<p>
El Área de Cursos del Centro de Desarrollo Tecnológico, se
distingue por ser una de las más importantes y
representativas en la Zona Norte del Área Metropolitana,
como proveedora de conocimiento tecnológico y actualizado
en: software, capacitación y certificaciones. La producción
de los materiales, así como de los conocimientos que se
manejan por parte del personal que labora en esta área es de
consideración primordial para ofrecer un servicio de calidad
y alto índice de satisfacción de acuerdo a las expectativas
de los participantes, en cada una de sus actividades. Es de
mencionar que el área tiene más de 15 años ofreciendo con
renovado y constante servicio de capacitación, obteniendo
logros alcanzados que pueden observarse en las diferentes
certificaciones en las que ha participado como digno ejemplo
de tecnología para apoyo a las diversas carreras de la
Facultad, acuerdos de certificación en empresas que apoyan a
los alumnos a lograr un mejor nivel laboral dadas las
características del campo de aplicación de su licenciatura.
</p>
</div>
<div class="carousel-item">
<h4>Misión</h4>
<p>
Preparar a los usuarios en el uso correcto de las
Tecnologías de la Información y Comunicación para que a
través de ellas logren superarse y distinguirse de entre los
demás al conjuntarlas con el conocimiento de su propia área
de experiencia.
</p>
</div>
<div class="carousel-item">
<h4>Visión</h4>
<p>
Lograr una alfabetización digital que reduzca la brecha
generacional entre los novicios y los expertos en el uso de
las Tecnologías de la Información y Comunicación.
</p>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- End Hero -->
<main id="main">
<section
id="Center"
class="d-flex align-items-center justify-content-center flex-column pt-0"
>
<div class="container-fluid b-ground">
<ul class="nav nav-tabs d-flex justify-content-around w-100 normal">
<li class="nav-item">
<a
id="convocatoria-tab"
data-toggle="tab"
role="tab"
href="#convocatoria"
class="nav-link active"
aria-controls="convocatoria"
aria-selected="true"
>
Convocatoria
</a>
</li>
<li class="nav-item">
<a
id="temario-tab"
data-toggle="tab"
role="tab"
href="#temario"
class="nav-link"
aria-controls="temario"
aria-selected="false"
>
Temario
</a>
</li>
<li class="nav-item">
<a
id="registro-tab"
data-toggle="tab"
role="tab"
href="#registro"
class="nav-link"
aria-controls="registro"
aria-selected="false"
>
Registro
</a>
</li>
<li class="nav-item">
<a
id="avisos-tab"
data-toggle="tab"
role="tab"
href="#avisos"
class="nav-link"
aria-controls="avisos"
aria-selected="false"
>
Avisos e informes
</a>
</li>
</ul>
</div>
<div class="container">
<div class="row">
<!-- Inicio de los tabs del nav -->
<div class="tab-content mt-3" id="mainTab">
<!-- Incio del primer Tab -->
<div
class="tab-pane fade show active"
id="convocatoria"
role="tabpanel"
aria-labelledby="convocatoria-tab"
>
<div class="div-flex">
<!-- Nav de cursos -->
<div class="col-12 col-md-4">
<ul class="nav d-lg-block">
<li class="nav-item">
<a
id="regulares-tab"
data-toggle="tab"
role="tablist"
href="#regulares"
class="nav-link active"
aria-controls="regulares"
aria-selected="true"
>
Cursos Regulares</a
>
</li>
<li class="nav-item">
<a
id="sabatinos-tab"
data-toggle="tab"
role="tablist"
href="#sabatinos"
class="nav-link"
aria-controls="sabatinos"
aria-selected="false"
>Cursos Sabatinos</a
>
</li>
</ul>
</div>
<!-- Contenido de tab de cursos -->
<div class="col-12 col-md-8 tab-content" id="cursosTab">
<div
class="tab-pane fade show active contenido-centrado"
id="regulares"
role="tablist"
aria-labelledby="regulares-tab"
>
<div class="pt-2">
<p
class="mb-0 justify-content-center"
style="color: #fff; background-color: #1e3c70"
>
LUNES A VIERNES: Del 30 de septiembre al 12 de octubre
2024 <br />
2 hrs diarias
</p>
</div>
<table class="table justify-content-center">
<thead style="background-color: #1e3c70">
<th scope="col">CURSO Y HORARIO</th>
<th scope="col">APORTACIÓN</th>
</thead>
<tbody>
<tr>
<td>
Intro. a la computación para 3era edad <br />20
hrs.
<br />
09 a 11 hrs (Presencial)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Word básico <br />20 hrs. <br />
09 a 11 hrs (Presencial)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Excel básico <br />25 hrs. <br />
09 a 11 hrs (Presencial) <br />
19 a 21 hrs (en línea)
</td>
<td>
UNAM: $ 2,150.00 <br />EXUNAM: $ 2,870.00
<br />EXTERNO: $ 3,587.00
</td>
</tr>
<tr>
<td>
Excel avanzado <br />25 hrs. <br />
09 a 11 hrs (Presencial) <br />
19 a 21 hrs (en línea)
</td>
<td>
UNAM: $ 2,150.00 <br />EXUNAM: $ 2,870.00
<br />EXTERNO: $ 3,587.00
</td>
</tr>
<tr>
<td>
Power Query y Power Pivot en Excel <br />20 hrs.
<br />
19 a 21 hrs. (Presencial)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Base de datos con SQL server básico <br />20 hrs.
<br />
10 a 12 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Python básico intermedio <br />20 hrs. <br />
19 a 21 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Ciberdelitos ¡Para todos! <br />10 hrs. <br />
17 a 19 hrs (en línea)
</td>
<td>
UNAM: $ 860.00 <br />EXUNAM: $ 1,147.50
<br />EXTERNO: $ 1,435.00
</td>
</tr>
<tr>
<td>
Introducción a la programación <br />20 hrs.
<br />
19 a 21 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00<br />
EXUNAM: $ 2,295.00 <br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Análisis de datos con Python <br />20 hrs. <br />
19 a 21 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Manejo de R en Python <br />20 hrs. <br />19 a 21
hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Niñas, niños y adolescentes en Ciberriesgo<br />
10 hrs.
<br />
19 a 21 hrs (10 hrs en línea)
</td>
<td>
UNAM: $ 860.00 <br />EXUNAM: $ 1,147.50
<br />EXTERNO: $ 1,435.00
</td>
</tr>
</tbody>
</table>
</div>
<div
class="tab-pane fade contenido-centrado"
id="sabatinos"
role="tablist"
aria-labelledby="sabatinos-tab"
>
<div>
<p
class="mb-0 justify-content-center"
style="color: #fff; background-color: #1e3c70"
>
SABATINOS: Del 19 de octubre al 16 de noviembre 2024
<br />
5 hrs por sesión
</p>
</div>
<table class="table">
<thead style="background-color: #1e3c70">
<th scope="col">CURSO Y HORARIO</th>
<th scope="col">APORTACIÓN</th>
</thead>
<tbody>
<tr>
<td>
AutoCAD <br />
20 hrs. <br />
09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />
EXUNAM: $ 2,295.00 <br />
EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Excel básico<br />
25 hrs. <br />09 a 14 hrs (Presencial o en línea)
</td>
<td>
UNAM: $ 2,150.00 <br />EXUNAM: $ 2,870.00<br />
EXTERNO: $ 3,587.00
</td>
</tr>
<tr>
<td>
Excel avanzado <br />25 hrs. <br />09 a 14 hrs
(Presencial o en línea)
</td>
<td>
UNAM: $ 2,150.00 <br />EXUNAM: $ 2,870.00
<br />EXTERNO: $ 3,587.00
</td>
</tr>
<tr>
<td>
Power Query y Power Pivot en Excel <br />20 hrs.
<br />09 a 14 hrs (Presencial o en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Base de datos con SQL server básico<br />
20 hrs. <br />09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Base de datos con SQL server avanzado <br />20
hrs.<br />
09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Programación de Macros con Excel <br />20 hrs.<br />
09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Seguridad de la información <br />20 hrs.<br />
09 a 14 hrs (Presencial)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Introducción a la Ciberseguridad <br />10 hrs.
<br />09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 860.00 <br />EXUNAM: $ 1,147.50
<br />EXTERNO: $ 1,435.00
</td>
</tr>
<tr>
<td>
Ataques y defensas en Aplicaciones Web <br />20
hrs. <br />09 a 14 hrs (Presencial)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Introducción a la programación <br />20 hrs.<br />
09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00<br />
EXUNAM: $ 2,295.00 <br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Python básico intermedio <br />20 hrs. <br />09
a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Análisis de datos con Python<br />
20 hrs. <br />09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
<tr>
<td>
Programación interactiva para videojuegos con
JOGL<br />
20 hrs. <br />09 a 14 hrs (en línea)
</td>
<td>
UNAM: $ 1,720.00 <br />EXUNAM: $ 2,295.00
<br />EXTERNO: $ 2,870.00
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Inicio del Tab de temario -->
<div
class="tab-pane fade"
id="temario"
role="tabpanel"
aria-labelledby="temario-tab"
>
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne"
aria-expanded="true"
aria-controls="panelsStayOpen-collapseOne"
>
Excel
</button>
</h2>
<div
id="panelsStayOpen-collapseOne"
class="accordion-collapse collapse show"
>
<div class="accordion-body">Temarios</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo"
>
Bases de Datos (SQL)
</button>
</h2>
<div
id="panelsStayOpen-collapseTwo"
class="accordion-collapse collapse"
>
<div class="accordion-body">
<p>
<a
href="files/temarios-cursos-computo/Base-de-datos-SQL-Avanzado-20-hrs.pdf"
target="_blank"
>Base de datos</a
>
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseThree"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseThree"
>
Programción
</button>
</h2>
<div
id="panelsStayOpen-collapseThree"
class="accordion-collapse collapse"
>
<div class="accordion-body">Temario</div>
</div>
</div>
</div>
</div>
<!-- Inicio del Tab de registro -->
<div
class="tab-pane fade"
id="registro"
role="tabpanel"
aria-labelledby="registro-tab"
>
<p>Contenido de registro</p>
</div>
<!-- Inicio del Tab de avisos e informes -->
<div
class="tab-pane fade"
id="avisos"
role="tabpanel"
aria-labelledby="avisos-tab"
>
<div class="justify-content-center contenido-centrado">
<p>
<strong>Importante</strong>
</p>
<p>Para aplicar la aportación UNAM o EXALUMNO UNAM</p>
<p>Únicamente se recibirán los siguientes documentos:</p>
<p><strong>INAPAM:</strong> Credencial INAPAM</p>
<p>
<strong>UNAM:</strong> Tira de materias del semestre vigente
y credencial UNAM o INE
</p>
<p>
<strong>EXALUMNO-UNAM:</strong> Credencial EXALUMNO UNAM,
para tramitarla consulte:
https://www.pveu.unam.mx/credencial.php
</p>
<p><strong>tel.:</strong> 55-5622-6186 o 55-5622-6057</p>
</div>
<div>
<p><strong>FES Acatlán</strong></p>
<a href="#">Centro de Desarrollo Tecnológico </a>
<p>
Av. Alcanfores y San Juan Totoltepec s/n Naucalpan, Edo. de
México <br />
<strong>e-mail:</strong> cursos@acatlan.unam.mx <br />
<strong>Tels:</strong> 5623 1761 y 5623 1509
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 footer-newsletter">
<h4>Redes Sociales</h4>
Siguenos en:
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"
><i class="bx bxl-instagram"></i
></a>
<a href="#" class="google-plus"
><i class="bx bxl-youtube"></i
></a>
</div>
<img
src="../assets/img/escudos/unam-nacion-blanco.png"
style="width: 150px; margin: 15px auto"
/>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Sitios de Interes</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-1</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-2</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-3</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-4</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-5</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-6</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Conoce más</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-1</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-2</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-3</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-4</a>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-6">
<div class="footer-info">
<h3>FES <span>Acatlán</span></h3>
<p>
Hecho en México, todos los derechos reservados 2021.
<br /><br />
Esta página puede ser reproducida con fines no lucrativos,
siempre y cuando no se mutile, se cite la fuente completa y su
dirección electrónica. De otra forma, requiere permiso previo
por escrito de la institución.
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-swoosh-up"></i></a>
<!-- Ext JS -->
<script src="../assets/Ext/jquery/jquery.min.js"></script>
<script src="../assets/Ext/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/Ext/jquery.easing/jquery.easing.min.js"></script>
<script src="../assets/Ext/owl.carousel/owl.carousel.min.js"></script>
<script src="../assets/Ext/aos/aos.js"></script>
<!-- Main JS -->
<script src="../assets/js/main.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
-292
View File
@@ -1,292 +0,0 @@
#idioma {
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("../../../assets/img/bg/alt-2.jpg") top center;
background-size: cover;
position: relative;
}
#idioma:before {
content: "";
background: rgba(255, 255, 255, 0.3);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#idioma .container {
position: relative;
padding-top: 10%;
text-align: center;
}
#idioma h1 {
font-size: 36px;
font-weight: 700;
line-height: 40px;
color: #1e3c70;
}
#idioma h1 span {
color: #bb8800;
}
#idioma h2 {
color: rgba(255, 255, 255, 0.9);
/* background-color: rgba(30, 60, 112, 0.8); */
margin: 10px 0 0 0;
font-size: 22px;
padding: 4px;
}
#idioma h2 span {
color: #ffc451;
}
#idioma .icon-box {
/*padding: ;*/
transition: ease-in-out 0.3s;
border: 1px solid rgba(255, 255, 255, 0.3);
text-align: center;
height: 250px;
}
#idioma .icon-box i {
font-size: 32px;
line-height: 1;
color: #ffc451;
}
#idioma .icon-box h3 {
font-weight: 700;
margin-top: auto;
padding: 0;
line-height: 1;
font-size: 20px;
line-height: 26px;
background-color: rgba(187, 136, 0, 0.8);
}
#idioma .icon-box h3 a {
color: #fff;
transition: ease-in-out 0.3s;
}
#idioma .icon-box h3 a:hover {
color: #1e3c70;
}
#idioma .icon-box:hover {
border-color: #1e3c70;
}
@media (min-width: 1024px) {
#idiomas {
background-attachment: fixed;
}
}
@media (max-width: 768px) {
#idiomas {
height: 80vh;
}
#idiomas h1 {
font-size: 28px;
line-height: 36px;
}
#idiomas h2 {
font-size: 20px;
line-height: 24px;
}
#idiomas .navbar-toggler {
font-size: 13px;
padding: 0px;
border: none;
padding: 8px;
}
}
#idioma .text-container {
padding: 3rem;
}
#idioma .transparent-cart {
padding: 1.7rem;
background: rgba(255, 255, 255, 0.08);
border-radius: 5px;
height: 100%;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
position: relative;
}
#idioma .transparent-cart::before {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 10px;
left: 10px;
border-left: 2px solid #1e3c70;
border-top: 2px solid #1e3c70;
border-radius: 3px;
}
#idioma .transparent-cart::after {
content: "";
width: 60px;
height: 60px;
position: absolute;
bottom: 10px;
right: 10px;
border-right: 2px solid #1e3c70;
border-bottom: 2px solid #1e3c70;
border-radius: 3px;
}
#idioma .cta-btn {
font-weight: 600;
font-size: 12px;
letter-spacing: 1px;
padding: 4px 18px;
display: inline-flex;
border-radius: 18px;
transition: 0.2s;
margin-top: 10px;
border: 2px solid #bb8800;
color: #bb8800;
}
#Centro ul li a {
color: #1e3c70;
}
#idioma .cta-btn:hover {
background: #1e3c70;
border-color: #1e3c70;
color: #fff;
}
#myTab .active {
color: #bb8800;
border-bottom: 1px solid #bb8800;
}
#Contacto .table th {
text-align: center;
background-color: #1e3c70;
color: rgb(255, 255, 255);
}
#Contacto .table tr td {
color: #1e3c70;
text-align: center;
}
#Contacto .container {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
#Contacto .contenedor {
padding: 10px;
overflow-x: scroll !important;
height: fit-content;
flex-wrap: nowrap !important;
}
#Contacto ul li {
width: auto;
}
#Contacto ul li a {
text-decoration: none;
padding: 5px;
/* border: 1px solid #000; */
width: auto;
padding: 10px !important;
color: #bb8800;
}
#tab-Contacto .active {
color: #1e3c70;
}
@media (max-width: 991px) {
#Contacto div .contendor {
overflow-x: hidden;
}
#Contacto .normal1 .nav-link {
border: 0;
padding: 15px;
}
#Contacto .normal .nav-link.active {
color: #fff;
background: #048ad6;
}
#Contacto .normal1 {
display: ;
height: 70px;
overflow: auto;
}
}
.line {
position: relative;
}
.line ::before {
content: "";
background-color: #bb8800;
display: inline-block;
width: 3px;
height: 100%;
left: -1rem;
position: absolute;
padding-top: 1rem;
z-index: 400;
}
.line ::after {
content: "";
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 0;
left: -19px;
width: 10px;
height: 10px;
z-index: 999;
border: 1px solid #1e3c70;
}
.pr {
padding-right: 30px;
}
.pr p {
text-align: justify;
}
#Centro .pr p {
text-align: justify;
padding: 4px 8px;
}
#idioma .pr h3 i {
font-size: 28px;
vertical-align: middle;
margin-right: 8px;
}
View File
View File
+161 -771
View File
@@ -1,799 +1,189 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>FES Acatlán</title>
<meta content="" name="descriptison" />
<meta content="" name="keywords" />
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Favicons -->
<link href="../assets/img/icon/icon.png" rel="icon" />
<link href="../assets/img/icon/icon.png" rel="apple-touch-icon" />
<title>FES Acatlán</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Ext CSS -->
<link
href="../assets/Ext/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="../assets/Ext/icofont/icofont.min.css" rel="stylesheet" />
<link href="../assets/Ext/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="../assets/Ext/owl.carousel/assets/owl.carousel.min.css"
rel="stylesheet"
/>
<link href="../assets/Ext/aos/aos.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- Favicons -->
<link href="../assets/img/icon/icon.png" rel="icon">
<link href="../assets/img/icon/icon.png" rel="apple-touch-icon">
<!-- Main CSS -->
<link href="../assets/css/main.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/idiomas.css" />
</head>
<!-- Ext CSS -->
<link href="../assets/Ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/Ext/icofont/icofont.min.css" rel="stylesheet">
<link href="../assets/Ext/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="../assets/Ext/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="../assets/Ext/aos/aos.css" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<body>
<!-- ======= Header ======= -->
<!--<header id="header" class="fixed-top ">-->
<header id="header">
<div class="container d-flex align-items-center justify-content-between">
<!-- Main CSS -->
<link href="../assets/css/main.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<!--<header id="header" class="fixed-top ">-->
<header id="header">
<div class="container d-flex align-items-center justify-content-between">
<div class="">
<a href="https://www.unam.mx/" target="_blank"
><img
src="../assets/img/escudos/logo_unam-b.png"
alt=""
class="img-fluid logo"
/></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"
><img
src="../assets/img/escudos/escudo-b2.png"
alt=""
class="img-fluid logo-unam"
/></a>
<a href="https://www.unam.mx/" target="_blank"><img src="../assets/img/escudos/logo_unam-b.png" alt="" class="img-fluid logo"></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"><img src="../assets/img/escudos/escudo-b2.png" alt="" class="img-fluid logo-unam"></a>
</div>
<h1>FES <span>Acatlán</span></h1>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="#">Normatividad</a></li>
<li><a href="#">Tienda Acatlán</a></li>
</ul>
</nav><!-- .nav-menu -->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="#">Normatividad</a></li>
<li><a href="#">Tienda Acatlán</a></li>
</ul>
</nav>
<!-- .nav-menu -->
</div>
<div class="container ">
<nav class="nav-menu-2 d-none d-lg-block">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Licenciaturas</a></li>
<li><a href="#">Posgrados</a></li>
<li><a href="#">Investigación</a></li>
<li><a href="#">Cursos y Diplomados</a></li>
<li><a href="#">Otros</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center justify-content-center">
<div class="container" data-aos="fade-up">
<div class="row justify-content-center" data-aos="fade-up" data-aos-delay="150">
<div class="col-12">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.acatlan.unam.mx/images/1981.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.acatlan.unam.mx/images/1953.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.acatlan.unam.mx/images/1939.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<nav class="nav-menu-2 d-none d-lg-block">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Licenciaturas</a></li>
<li><a href="#">Posgrados</a></li>
<li><a href="#">Investigación</a></li>
<li><a href="#">Cursos y Diplomados</a></li>
<li><a href="#">Otros</a></li>
</ul>
</nav>
<!-- .nav-menu -->
</div>
</header>
<!-- End Header -->
<main id="main">
<!-- ======= Idioma Section ======= -->
<section
id="idioma"
class="d-flex align-items-center justify-content-center"
>
<div class="container" data-aos="fade-up">
<div
class="row justify-content-between"
data-aos="fade-up"
data-aos-delay="150"
>
<div class="col-lg-6 col-sm-12 pr">
<h1 class="" style="text-align: justify; color: white">
Idiomas Acatlán
</h1>
<h2 style="text-align: justify">
<span>Cursos Regulares y Cursos Sabatinos</span>
</h2>
<h3
class="text-white d-flex aling-items-center gap_1 pt-3"
style="color: rgba(255, 255, 255); text-align: justify"
>
<i class="bx bx-book-reader bx-flip-horizontal"></i>
Objetivo
</h3>
<div class="line ms-3">
<p
style="
color: rgba(255, 255, 255);
text-align: justify;
font-size: medium;
"
>
El centro de enseñanzas de idiomas (CEI) de la FES Acatlán
tiene como obejtivo contribuir a la formación integral de la
comunidad interna y externa de la Facultad a través de la
enseñanza de idiomas. En esta labor, se incorporan actividades
culturales en la lengua meta; en ella los alumnos practican el
idioma y conocen la cultura de estos pueblos mientras
disfrutan de las expresiones artisticas como danza, música,
literatura, teatro, cine y muestras gastronómicas.
</p>
</div>
</div>
<div class="col-lg-6 col-sm-12 justify-content-center">
<div class="transparent-cart">
<h5 style="color: #1e3c70; text-align: left">
<i class="bx bx-world"></i>
Convocatoria
</h5>
<div class="border-top">
<h6 style="color: rgb(255, 255, 255); text-align: justify">
<i class="bx bxs-time-five" style="color: #ffc115"></i>
INSCRIPCIONES Y REINSCRIPCIONES CURSOS SABATINOS
</h6>
<p class="m-0" style="color: #ffc115; text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipinscing elit.
</p>
<p style="text-align: right">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
<div class="border-top">
<h6 style="color: rgb(255, 255, 255); text-align: justify">
<i class="bx bxs-time-five" style="color: #ffc115"></i>
Ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis auteirure dolor in reprehenderit in voluptate
</h6>
<p
class=""
style="
color: #ffc115;
font-size: medium;
text-align: justify;
"
>
Lorem ipsum dolor sit amet, consectetur adipinscing elit.
</p>
<p style="text-align: right">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- =========== Fin Idioma =========== -->
<!-- =========== Centro Section =========== -->
<section
id="Centro"
class="d-flex align-items-center justify-content-center"
>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-12 line pr ms-4">
<h5 style="color: #bb8800; font-weight: 700">
<i class="bx bx-world" style="color: #111110"></i>
Centro de Enseñanzas de Idiomas
</h5>
<h6 style="color: #1e3c70; font-weight: 600">
Correo de Contacto
</h6>
<h6 style="color: #1e3c70; font-weight: 600">
Secretaria Auxiliar:
</h6>
<h6 style="color: #1e3c70; font-weight: 600">Registro CEI:</h6>
<p style="color: #1e3c70">
El CEI lleva acabo estudios e investigaciones en la enseñanza de
lenguas, para ello cuenta con el Seminario de Lingüistica
Teórica y Aplicada (SELITA) formado por los docentes de los
diversos departamentos. <br />
Además, para apoyar la movilidad estudiantil, el CEI es sede
aplicadora de exámenes de certificación internacional, entre
ellos: el OSD de alemán, el CAPLE de portugués, el DELF de
francés , el CILS de italiano y el TOELF, el FCE, el CAE, el
TOYEC y el IELTS en inglés.
</p>
<h6 style="color: #1e3c70; font-weight: 600">Modalidades:</h6>
<h6 style="color: #1e3c70; font-weight: 500">
Comprensión de lectura (CL):
</h6>
<p style="color: #1e3c70">
Si necesitas cumplir con el requisito de idioma que pide tu
carrera, esta opción es para ti. Los cursos se enfocan al
desarrollo de estrategias y comprensión de textos. consulta tus
requisitos de idioma en tu licencitura.
</p>
<h6 style="color: #1e3c70; font-weight: 500">
Plan Global (PG):
</h6>
<p style="color: #1e3c70">
Si te interesa aprender las cutro habilidades básicas de un
idioma: hablar, escribir, escuchar y leer, esta modalidad es tu
opción.
</p>
</div>
<div class="col-lg-6 col-sm-12 ps-4">
<p style="color: #1e3c70">
El CEI ofrece cursos regulares (entre semana) y sabatinos, en
ellos puedes estudiar las siguientes lenguas:
</p>
<!-- nav de cursos -->
<ul
class="nav tabs justify-content-center"
id="myTab"
role="tablist"
>
<li class="nav-item">
<a
class="nav-link active"
id="home-tab"
data-toggle="tab"
href="#home"
role="tab"
aria-controls="home"
aria-selected="true"
>
Cursos Regulares
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile-tab"
data-toggle="tab"
href="#profile"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Sabatinos
</a>
</li>
</ul>
<!-- Fin del nav de cursos -->
<!-- Inicio de los tabs para cursos -->
<div class="tab-content mt-2" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<p style="color: black">
<b>
alemán, árabe, chino, español para extranjeros, francés,
griego clásico, Hñähñu (otomí), inglés, italiano, japonés,
latín, náhuatl, portugués, ruso.
</b>
</p>
<p style="color: rgb(43, 42, 42)">
Se abren dos convocatorias al año cercanas a las siguientes
fechas:
</p>
<ul>
<li style="color: black">
<p style="color: rgb(43, 42, 42)">
<b>Cursos de febrero:</b> se publica a mediados del mes
de enero.
</p>
</li>
<li style="color: black">
<p style="color: rgb(43, 42, 42)">
<b>Cursos de agosto:</b> se publica a finales del mes de
junio.
</p>
</li>
</ul>
<p style="color: rgb(43, 42, 42)">
Se imparten cursos de Plan Global, Comprensión Lectora y
algunos cursos de cultura y aspectos de la Lengua.
<br />
<br />
Generalmente se imparten cuatro horas de clase a la semana,
dividida en dos días; o bien, el día viernes cuatro horas
(PG) o seis horas (CL).
<br />
<br />
<b>
Para mayor información, revisa la convocatoria en la
sección Isncripción Cursos Regulares.
</b>
</p>
</div>
<!-- Fin del primer tab para cursos -->
<!-- Inicio del segundo tab para cursos -->
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<p style="color: black">
<b>
alemán, chino, coreano, finés, francés, inglés, italiano,
japonés, latín, portugués y ruso.
</b>
</p>
<p style="color: rgb(43, 42, 42)">
Se abren tres convocatorias al año cercanas a las siguientes
fechas:
</p>
<ul>
<li style="color: black">
<p style="color: rgb(43, 42, 42)">
<b>Cursos en enero:</b> se publica a finales del mes de
noviembre.
</p>
</li>
<li style="color: black">
<p style="color: rgb(43, 42, 42)">
<b>Cursos en abril:</b> se publica a mediados del mes de
marzo.
</p>
</li>
<li style="color: black">
<p style="color: rgb(43, 42, 42)">
<b>Cursos en agosto:</b> se publica a finales del mes de
junio.
</p>
</li>
</ul>
<br />
<p style="color: rgb(43, 42, 42)">Generalmente son:</p>
<ul style="color: black">
<li>
<p style="color: rgb(43, 42, 42)">
Cursos de 12 sábados:
</p>
<ul>
<li>
<p style="color: rgb(43, 42, 42)">
Matutinos de 9:00 a 13:00 horas.
</p>
</li>
<li>
<p style="color: rgb(43, 42, 42)">
Vespertinos de 14:00 a 18:00 horas.
</p>
</li>
<li>
<p style="color: rgb(43, 42, 42)">
CL intensivo: 9:00 a 16:00 hrs.
</p>
</li>
</ul>
</li>
</ul>
<ul style="color: black">
<li>
<p style="color: rgb(43, 42, 42)">
Cursos de 11 sábados:
</p>
<ul>
<li>
<p style="color: rgb(43, 42, 42)">
Matutinos de 9:00 a 13:30 horas.
</p>
</li>
<li>
<p style="color: rgb(43, 42, 42)">
Vespertinos de 14:00 a 18:30 horas.
</p>
</li>
<li>
<p style="color: rgb(43, 42, 42)">
CL intensivo: 9:00 a 16:30 hrs.
</p>
</li>
</ul>
</li>
</ul>
<p style="color: rgb(43, 42, 42)">
<b>
Para mayor información, revisa la convocatoria en la
sección Isncripción Cursos Sabatinos.
</b>
</p>
</div>
<!-- Fin del segundo tab para cursos -->
</div>
<!-- Fin de los tabs para cursos -->
</div>
</div>
</div>
</section>
<!-- ========== Section Contacto ========== -->
<secion
id="Contacto"
class="d-flex align-items-center justify-content-center"
>
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul
id="tab-Contacto"
class="nav nav-tabs flex-column normal1"
>
<li class="nav-item">
<a
class="nav-link active"
id="home2-tab"
data-toggle="tab"
href="#home2"
role="tab"
aria-controls="home2"
aria-selected="true"
>
Contacto
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile2-tab"
data-toggle="tab"
href="#profile2"
role="tab"
aria-controls="profile2"
aria-selected="false"
>
Nuestros Idiomas
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile3-tab"
data-toggle="tab"
href="#profile3"
role="tab"
aria-controls="profile3"
aria-selected="false"
>
Cuotas
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile4-tab"
data-toggle="tab"
href="#profile4"
role="tab"
aria-controls="profile4"
aria-selected="false"
>
Excención y Cuota Preferenciales
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile5-tab"
data-toggle="tab"
href="#profile5"
role="tab"
aria-controls="profile5"
aria-selected="false"
>
Trámites
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile6-tab"
data-toggle="tab"
href="#profile6"
role="tab"
aria-controls="profile6"
aria-selected="false"
>
Exámen de Requisito
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
id="profile7-tab"
data-toggle="tab"
href="#profile7"
role="tab"
aria-controls="profile7"
aria-selected="false"
>
Traducciones
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<!-- Inicio de los tabs -->
<div class="tab-content mt-2" id="myTabContent">
<!-- Inicio del primer tab -->
<div
class="tab-pane fade show active"
id="home2"
role="tabpanel"
aria-labelledby="home2-tab"
>
<div class="border-bottom">
<h3 style="color: #1e3c70">Contacto</h3>
</div>
<p style="color: #1e3c70">
En caso de duadas o más información relacionados con tu
idioma, contacta con con el área de tu interés:
</p>
<table class="table">
<thead>
<tr>
<th scope="col">Área</th>
<th scope="col">Contacto</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<td>Alemán y Ruso</td>
<td>aleman@acatlan.unam.mx</td>
</tr>
<tr>
<td>Árabe, Chino, Coreano y Japonés</td>
<td>espanol@acatlan.unam.mx</td>
</tr>
<tr>
<td>Francés</td>
<td>
frances@acatlan.unam.mx
<br />
WhatsApp: 5540936804
</td>
</tr>
<tr>
<td>Inglés</td>
<td>
ingles@acatlan.unam.mx
<br />
deptoingles@acatlan.unam.mx
</td>
</tr>
<tr>
<td>Italiano y Latín</td>
<td>
italiano@acatlan.unam.mx
<br />
WhatsApp: 5549266745
</td>
</tr>
<tr>
<td>Finés y Portugués</td>
<td>portugues@acatlan.unam.mx</td>
</tr>
<tr>
<td>
Registro y Certificación del
<br />
Centro de Enseñanzas de Idiomas
</td>
<td>registro@acatlan.unam.mx</td>
</tr>
</tbody>
</table>
</div>
<!-- Fin del primer tab -->
<!-- Inicio del segundo tab -->
<div
class="tab-pane fade"
id="profile2"
role="tabpanel"
aria-labelledby="profile2-tab"
>
<p>Contenido del segundo tab</p>
</div>
<!-- Fin del segundo tab -->
<!-- Inicio de tercer tab -->
<div
class="tab-pane fade"
id="profile3"
role="tabpanel"
aria-labelledby="profile3-tab"
>
<p>Contenido del tercer tab</p>
</div>
<!-- Fin del tercer tab -->
<!-- Inicio del cuarto tab -->
<div
class="tab-pane fade"
id="profile4"
role="tabpanel"
aria-labelledby="profile4-tab"
>
<p>Contenido del segundo tab</p>
</div>
<!-- Fin del cuarto tab -->
<!-- Inicio de quinto tab -->
<div
class="tab-pane fade"
id="profile5"
role="tabpanel"
aria-labelledby="profile5-tab"
>
<p>Contenido del tercer tab</p>
</div>
<!-- Fin del quinto tab -->
<!-- Inicio del sexto tab -->
<div
class="tab-pane fade"
id="profile6"
role="tabpanel"
aria-labelledby="profile6-tab"
>
<p>Contenido del segundo tab</p>
</div>
<!-- Fin del sexto tab -->
<!-- Inicio de septimo tab -->
<div
class="tab-pane fade"
id="profile7"
role="tabpanel"
aria-labelledby="profile7-tab"
>
<p>Contenido del tercer tab</p>
</div>
<!-- Fin del septimo tab -->
</div>
<!-- Fin de los tabs -->
</div>
</div>
</div>
</secion>
<!-- ========== Fin Contacto ========== -->
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 footer-newsletter">
<h4>Redes Sociales</h4>
Siguenos en:
<div class="social-links mt-3">
<div class="row">
<div class="col-lg-4 col-md-6 footer-newsletter">
<h4>Redes Sociales</h4>
Siguenos en:
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"
><i class="bx bxl-instagram"></i
></a>
<a href="#" class="google-plus"
><i class="bx bxl-youtube"></i
></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class='bx bxl-youtube' ></i></a>
</div>
<img src="../assets/img/escudos/unam-nacion-blanco.png" style="width: 150px;; margin: 15px auto;">
</div>
<img
src="../assets/img/escudos/unam-nacion-blanco.png"
style="width: 150px; margin: 15px auto"
/>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Sitios de Interes</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-1</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-2</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-3</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-4</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-5</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-6</a></li>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Sitios de Interes</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-1</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-2</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-3</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-4</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-5</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-6</a>
</li>
</ul>
</div>
</ul>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Conoce más</h4>
<ul>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-1</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-2</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-3</a>
</li>
<li>
<i class="bx bx-chevron-right"></i> <a href="#">Link-4</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Conoce más</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-1</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-2</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-3</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-4</a></li>
<div class="col-lg-4 col-md-6">
<div class="footer-info">
<h3>FES <span>Acatlán</span></h3>
<p>
Hecho en México, todos los derechos reservados 2021.
<br /><br />
Esta página puede ser reproducida con fines no lucrativos,
siempre y cuando no se mutile, se cite la fuente completa y su
dirección electrónica. De otra forma, requiere permiso previo
por escrito de la institución.
</p>
</div>
</ul>
</div>
<div class="col-lg-4 col-md-6">
<div class="footer-info">
<h3>FES <span>Acatlán</span></h3>
<p>
Hecho en México, todos los derechos reservados 2021.
<br><br> Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-swoosh-up"></i></a>
<!-- Ext JS -->
<script src="../assets/Ext/jquery/jquery.min.js"></script>
<script src="../assets/Ext/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/Ext/jquery.easing/jquery.easing.min.js"></script>
<script src="../assets/Ext/owl.carousel/owl.carousel.min.js"></script>
<script src="../assets/Ext/aos/aos.js"></script>
<!-- Main JS -->
<script src="../assets/js/main.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<!-- <section class="container">
<div class="row">
<div class="col-12 col-lg-6"></div>
<div class="col-12 col-lg-6">
<ul class="nav tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
aria-selected="true">Cursos Regulares</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="false">Sabatinos</a>
</li>
</ul>
<div class="tab-content mt-2" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h4>Contenido de Tab 1</h4>
<p>Este es el contenido que aparece cuando seleccionas la primera pestaña.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h4>Contenido de Tab 2</h4>
<p>Este es el contenido que aparece cuando seleccionas la segunda pestaña.</p>
</div>
</div>
</div>
</div>
</section> -->
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-swoosh-up"></i></a>
<!-- Ext JS -->
<script src="../assets/Ext/jquery/jquery.min.js"></script>
<script src="../assets/Ext/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/Ext/jquery.easing/jquery.easing.min.js"></script>
<script src="../assets/Ext/owl.carousel/owl.carousel.min.js"></script>
<script src="../assets/Ext/aos/aos.js"></script>
<!-- Main JS -->
<script src="../assets/js/main.js"></script>
</body>
</html>
+246
View File
@@ -0,0 +1,246 @@
/* ==========
main
========== */
#main {
width: 100%;
background: linear-gradient(rgba(38, 42, 93, 0.4), rgba(0, 0, 0, 0.7)), url("../../../assets/img/bg/solid.png") fixed top center;
background-size: cover;
position: relative;
color: #000;
padding-top: 160px;
}
#main:before {
content: "";
background: rgba(255, 255, 255, 0.05);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#main .header {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
#main .container {
display: flex;
gap: 10px;
position: relative;
text-align: start;
margin-bottom: 30px;
}
/* Time line */
.time-line{
list-style: none;
position: relative;
}
.time-line > li{
max-width: 95%;
}
.time-line::before{
content: '';
background: #bb8800;
display: inline-block;
position: absolute;
width: 5px;
height: 100%;
left: 20px;
z-index: 400;
}
.time-line > li::before{
content: '';
background: #fff;
border: 3px solid #252d3f;
display: inline-block;
position: absolute;
border-radius: 50%;
left: 13px;
width: 20px;
height: 20px;
z-index: 400;
}
.enfasis{
color: #bb8800;
font-weight: bold;
}
/* Contact */
.contact{
position: relative;
}
.contact p{
max-width: 95%;
}
.contact-wrapper::before{
content: '';
display: inline-block;
border-top: 3px solid #252d3f;
border-left: 3px solid #252d3f;
width: 50px;
height: 50px;
position: absolute;
top: 10px;
left: 10px;
}
.contact-wrapper::after{
content: '';
display: inline-block;
position: absolute;
border-bottom: 3px solid #252d3f;
border-right: 3px solid #252d3f;
width: 50px;
height: 50px;
bottom: 10px;
right: 10px;
}
.dropdowm{
max-width: 200px;
}
.mainfooter {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background-color: white;
}
/* Info estudiante / profesional */
.ul-points{
text-align: start;
list-style: none;
}
.ul-points li{
display: flex;
align-items: flex-start;
font-weight: normal;
max-width: 95%;
}
.ul-points li i{
color: #bb8800;
}
/* Info - Campo laboral / Plan de estudios */
.campo-plan-opcion{
cursor: pointer;
position: relative;
transition: .4s;
width: auto;
}
.campo-plan-opcion:hover{
color: #bb8800;
}
.campo-plan-opcion::after{
content: '';
display: inline-block;
position: absolute;
height: 200%;
border: 2px solid #b0b0b9;
top: -10px;
right: 1rem;
}
.select{
color: #1e3c6f;
font-weight: bold;
}
.select::after{
content: '';
display: inline-block;
position: absolute;
height: 200%;
border: 2px solid #1e3c6f;
top: -10px;
right: 1rem;
}
.header-campo-plan h3{
color: #1e3c6f;
font-weight: bold;
position: relative;
}
.header-campo-plan h3::before{
content: '';
display: inline-block;
position: absolute;
width: 50%;
border: 1px solid #bb8800;
bottom: 0;
}
.header-campo-plan h4{
color: #1e3c6f;
font-weight: bold;
font-size: large;
}
.list-campo-plan{
list-style: none;
}
.list-plan > li{
color: #bb8800;
font-weight: bold;
min-width: 50vw;
}
.nav-campo-plan ul{
margin: 0;
}
#main .style-none {
padding-left: 0;
list-style: none;
}
#main h5 {
color: #bb8800;
font-size: 20px;
}
@media (max-width: 991px) {
#main{
padding-top: 100px;
}
#main .container {
flex-wrap: wrap;
gap: 10px;
}
#main .container div{
width: 100%;
}
.info {
flex-wrap: wrap;
}
#main h1 {
font-size: 18px;
line-height: 36px;
}
.list-plan > li{
max-width: 100%;
}
.col-3 .ul-points{
flex-direction: row !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
height: 40px;
scrollbar-color: #bb8800 #b0b0b9;
}
.col-3 .ul-points li {
flex: 0 0 auto;
padding: 0 10px;
}
.campo-plan-opcion::after{
width: 100%;
height: 0%;
top: 30px;
right: 0;
}
.select::after{
width: 100%;
height: 0;
top: 30px;
right: 0;
}
.nav-campo-plan ul{
height: auto !important;
padding-bottom: 30px;
padding-right: 30px;
}
}
+41
View File
@@ -0,0 +1,41 @@
//nav of change manager
let opcionUno = document.getElementById('opcionUno');
let opcionDos = document.getElementById('opcionDos');
let opcionTres = document.getElementById('opcionTres');
let infoUno = document.getElementById('campoUno');
let infoDos = document.getElementById('campoDos');
let infoTres = document.getElementById('campoTres');
function actualizarVista(seleccionado, infoMostrar) {
// hide all information elements
infoUno.className = 'd-none';
infoDos.className = 'd-none';
infoTres.className = 'd-none';
// show selected items
infoMostrar.className = 'col-9 contact ms-3 d-block';
// resets button classes
opcionDos.className = 'campo-plan-opcion';
opcionTres.className = 'campo-plan-opcion';
opcionUno.className = 'campo-plan-opcion';
// set active on selected button
seleccionado.className = 'select campo-plan-opcion';
//animation
window.scrollBy(0,1);
}
opcionDos.addEventListener('click', () => {
actualizarVista(opcionDos, infoDos);
});
opcionTres.addEventListener('click', () => {
actualizarVista(opcionTres, infoTres);
});
opcionUno.addEventListener('click', () => {
actualizarVista(opcionUno, infoUno);
});
+1197 -153
View File
File diff suppressed because it is too large Load Diff
-485
View File
@@ -1,485 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>FES Acatlán</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/icon/icon.png" rel="icon">
<link href="assets/img/icon/icon.png" rel="apple-touch-icon">
<!-- Ext CSS -->
<link href="assets/Ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/Ext/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/Ext/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/Ext/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/Ext/aos/aos.css" rel="stylesheet">
<!-- Main CSS -->
<link href="assets/css/main.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
<div class="container d-flex align-items-center justify-content-between">
<div class="">
<a href="https://www.unam.mx/" target="_blank"><img src="assets/img/escudos/logo_unam-b.png" alt="" class="img-fluid logo"></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"><img src="assets/img/escudos/escudo-b2.png" alt="" class="img-fluid logo-unam"></a>
</div>
<h1>FES <span>Acatlán</span></h1>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="#">Normatividad</a></li>
<li><a href="#">Tienda Acatlán</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
<div class="container ">
<nav class="nav-menu-2 d-none d-lg-block">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Licenciaturas</a></li>
<li><a href="#">Posgrados</a></li>
<li><a href="#">Investigación</a></li>
<li><a href="#">Cursos y Diplomados</a></li>
<li><a href="#">Otros</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- Termina Header -->
<!-- ======= Hero ======= -->
<section id="hero" class="d-flex align-items-center justify-content-center">
<div class="container" data-aos="fade-up">
<div class="row justify-content-center" data-aos="fade-up" data-aos-delay="150">
<div class="col-12">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.acatlan.unam.mx/images/1981.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.acatlan.unam.mx/images/1953.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.acatlan.unam.mx/images/1939.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</section><!-- Termina Hero -->
<main id="main">
<!-- ======= Notices Section ======= -->
<section id="notices" class="notices">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-6 order-2 order-lg-2 mt-2 mt-lg-0" data-aos="fade-left" data-aos-delay="100">
<div class="section-title">
<h2>Eventos Acatlán</h2>
</div>
<div class="row">
<div class="col-6 align-items-stretch mt-4 mt-lg-0 bot-area" data-aos="zoom-in" data-aos-delay="300">
<img src="assets/img/menu-areas/galery-idiomas.jpg" class="img-fluid">
</div>
<div class="col-6 align-items-stretch mt-4 mt-lg-0 bot-area" data-aos="zoom-in" data-aos-delay="300">
<img src="assets/img/menu-areas/galery-eventos.jpg" class="img-fluid">
</div>
<div class="col-6 align-items-stretch mt-4 mt-lg-0 bot-area" data-aos="zoom-in" data-aos-delay="300">
<img src="assets/img/menu-areas/galery-cultura.jpg" class="img-fluid">
</div>
<div class="col-6 align-items-stretch mt-4 mt-lg-0 bot-area" data-aos="zoom-in" data-aos-delay="300">
<img src="assets/img/menu-areas/galery-deportes.jpg" class="img-fluid">
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 order-1 order-lg-1 content" data-aos="fade-right" data-aos-delay="100">
<div class="section-title">
<h2>Avisos Acatlán</h2>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
</div>
</div>
</div>
</section><!-- Termina Notices section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Tramites y Servicios</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box" style="background-image: url(assets/img/servicios/Talleres-2.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;">
<div class="accordion" id="accordion-alumno">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-bs-toggle="collapse" data-bs-target="#serv-alum" aria-expanded="true" aria-controls="collapseExample">
Alumnos <i class='bx bx-chevron-down'></i>
</button>
</h2>
</div>
<div id="serv-alum" class="collapse" aria-labelledby="serv-alum" data-parent="#serv-alum">
<div class="card-body">
<ul>
<li><i class='bx bx-chevrons-right'></i>Servicios Escolares</li>
<li><i class='bx bx-chevrons-right'></i>Servicio Social</li>
<li><i class='bx bx-chevrons-right'></i>Bolsa de Trabajo</li>
<li><i class='bx bx-chevrons-right'></i>Movilidad Estudiantil</li>
<li><i class='bx bx-chevrons-right'></i>Titulación Licensiatura</li>
<li><i class='bx bx-chevrons-right'></i>Titulación Posgrado</li>
<li><i class='bx bx-chevrons-right'></i>SIAE</li>
<li><i class='bx bx-chevrons-right'></i>Sitio Educativo Acatlán</li>
<li><i class='bx bx-chevrons-right'></i>SUAyED</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Desarrollo Tecnologico</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Información y Documentación</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Enseñanza de Idiomas Babel</li>
<li><i class='bx bx-chevrons-right'></i>Inscripcion de Laboratorios Ing. Civil</li>
<li><i class='bx bx-chevrons-right'></i>Departamento de Atención a la Comunidad Estudiantil</li>
<li><i class='bx bx-chevrons-right'></i>Cartilla de Seguridad</li>
<li><i class='bx bx-chevrons-right'></i>Academic Writing</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="zoom-in" data-aos-delay="200">
<div class="icon-box" style="background-image: url(assets/img/servicios/evaluacion.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;">
<div class="accordion" id="accordion-Academico">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-bs-toggle="collapse" data-bs-target="#serv-Academico" aria-expanded="true" aria-controls="serv-Academico">
Académicos <i class='bx bx-chevron-down'></i>
</button>
</h2>
</div>
<div id="serv-Academico" class="collapse" aria-labelledby="serv-Academico" data-parent="#serv-Academico">
<div class="card-body">
<ul>
<li><i class='bx bx-chevrons-right'></i>Servicios Escolares</li>
<li><i class='bx bx-chevrons-right'></i>Servicio Social</li>
<li><i class='bx bx-chevrons-right'></i>Bolsa de Trabajo</li>
<li><i class='bx bx-chevrons-right'></i>Movilidad Estudiantil</li>
<li><i class='bx bx-chevrons-right'></i>Titulación Licensiatura</li>
<li><i class='bx bx-chevrons-right'></i>Titulación Posgrado</li>
<li><i class='bx bx-chevrons-right'></i>SIAE</li>
<li><i class='bx bx-chevrons-right'></i>Sitio Educativo Acatlán</li>
<li><i class='bx bx-chevrons-right'></i>SUAyED</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Desarrollo Tecnologico</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Información y Documentación</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Enseñanza de Idiomas Babel</li>
<li><i class='bx bx-chevrons-right'></i>Inscripcion de Laboratorios Ing. Civil</li>
<li><i class='bx bx-chevrons-right'></i>Departamento de Atención a la Comunidad Estudiantil</li>
<li><i class='bx bx-chevrons-right'></i>Cartilla de Seguridad</li>
<li><i class='bx bx-chevrons-right'></i>Academic Writing</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box" style="background-image: url(assets/img/servicios/ejmplo1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;">
<div class="accordion" id="accordion-Admin">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-bs-toggle="collapse" data-bs-target="#serv-Admin" aria-expanded="true" aria-controls="serv-Admin">
Administrativos <i class='bx bx-chevron-down'></i>
</button>
</h2>
</div>
<div id="serv-Admin" class="collapse" aria-labelledby="serv-Admin" data-parent="#serv-Admin">
<div class="card-body">
<ul>
<li><i class='bx bx-chevrons-right'></i>Servicios Escolares</li>
<li><i class='bx bx-chevrons-right'></i>Servicio Social</li>
<li><i class='bx bx-chevrons-right'></i>Bolsa de Trabajo</li>
<li><i class='bx bx-chevrons-right'></i>Movilidad Estudiantil</li>
<li><i class='bx bx-chevrons-right'></i>Titulación Licensiatura</li>
<li><i class='bx bx-chevrons-right'></i>Titulación Posgrado</li>
<li><i class='bx bx-chevrons-right'></i>SIAE</li>
<li><i class='bx bx-chevrons-right'></i>Sitio Educativo Acatlán</li>
<li><i class='bx bx-chevrons-right'></i>SUAyED</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Desarrollo Tecnologico</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Información y Documentación</li>
<li><i class='bx bx-chevrons-right'></i>Centro de Enseñanza de Idiomas Babel</li>
<li><i class='bx bx-chevrons-right'></i>Inscripcion de Laboratorios Ing. Civil</li>
<li><i class='bx bx-chevrons-right'></i>Departamento de Atención a la Comunidad Estudiantil</li>
<li><i class='bx bx-chevrons-right'></i>Cartilla de Seguridad</li>
<li><i class='bx bx-chevrons-right'></i>Academic Writing</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- Termina Services Section -->
<!-- ======= Difusion Section ======= -->
<section id="notices" class="notices">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-6 order-2 order-lg-2" data-aos="fade-left" data-aos-delay="100">
<div class="section-title">
<h2>Difusión Acatlán</h2>
</div>
<div class="container" data-aos="zoom-in">
<div class="pub-avisos" style="border-top: none;">
<p style="text-align: center;">
<a class="cta-btn" href="#">Ver Publicaciones</a>
</p>
</div>
<div class="owl-carousel difusion-carousel">
<div><img src="assets/img/difusion/notifes-1.png" alt=""> <br> <p>NotiFES 01-02-2022</p></div>
<div><img src="assets/img/difusion/gaceta-1.jpg" alt=""> <br> <p>Gaceta - Enero</p></div>
<div><img src="assets/img/difusion/figuras-1.jpg" alt=""> <br> <p>Figuras Vol. 3</p></div>
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 order-1 order-lg-1 content" data-aos="fade-right" data-aos-delay="100">
<div class="section-title">
<h2>Sala de Prensa</h2>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
<div class="pub-avisos">
<p><i class='bx bx-time-five'></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
<span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </i></span>
<br>
<p style="text-align: right;">
<a class="cta-btn" href="#">Ver más</a>
</p>
</div>
</div>
</div>
</div>
</section><!-- Termina Difusion Section -->
<!-- ======= Pages Section ======= -->
<section id="pgint" class="pgint">
<div class="container" data-aos="zoom-in">
<div class="section-title">
<h2>Páginas de Interes</h2>
</div>
<div class="owl-carousel pagint-carousel">
<img src="assets/img/escudos/logo_pagina.png" alt="">
<img src="assets/img/escudos/logo_pagina.png" alt="">
<img src="assets/img/escudos/logo_pagina.png" alt="">
<img src="assets/img/escudos/logo_pagina.png" alt="">
</div>
</div>
</section><!-- Termina pages Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 footer-newsletter">
<h4>Redes Sociales</h4>
Siguenos en:
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class='bx bxl-youtube' ></i></a>
</div>
<img src="assets/img/escudos/unam-nacion-blanco.png" style="width: 150px;; margin: 15px auto;">
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Sitios de Interes</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-1</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-2</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-3</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-4</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-5</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-6</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 footer-links">
<h4>Conoce más</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-1</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-2</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-3</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Link-4</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-6">
<div class="footer-info">
<h3>FES <span>Acatlán</span></h3>
<p>
Hecho en México, todos los derechos reservados 2021.
<br><br> Esta página puede ser reproducida con fines no lucrativos, siempre y cuando no se mutile, se cite la fuente completa y su dirección electrónica. De otra forma, requiere permiso previo por escrito de la institución.
</p>
</div>
</div>
</div>
</div>
</div>
</footer><!-- Termina Footer -->
<a href="#" class="back-to-top"><i class="icofont-swoosh-up"></i></a>
<!-- Ext JS -->
<script src="assets/Ext/jquery/jquery.min.js"></script>
<script src="assets/Ext/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/Ext/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/Ext/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/Ext/aos/aos.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>
</body>
</html>