Compare commits
29 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 80e12d9316 | |||
| 257bb8a704 | |||
| acdd833fb7 | |||
| d90b35cfbd | |||
| 4b9f65632b | |||
| 192c5d5255 | |||
| c56e94ee07 | |||
| 0a95a6f0a8 | |||
| 2d64d00c5f | |||
| 0806b5169d | |||
| cbd8244eaf | |||
| 19eeed6e99 | |||
| 19e3d0ce14 | |||
| 36b4c2c310 | |||
| 0c0dc586a6 | |||
| df83db8d95 | |||
| e60e653954 | |||
| 020aac961d | |||
| 3ea00e5c3e | |||
| 47776749f9 | |||
| 7559d5be43 | |||
| e49f5ddb02 | |||
| 5bd8497f37 | |||
| 0a0b242da7 | |||
| 3fe21702ca | |||
| c7903fdec8 | |||
| 19fcc1131f | |||
| dc85314ead | |||
| 73d8b2f592 |
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 339 KiB |
@@ -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);
|
||||
});
|
||||
@@ -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,959 +0,0 @@
|
||||
/* Variables */
|
||||
/* ==========
|
||||
General
|
||||
========== */
|
||||
body {
|
||||
color: #cccccc;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
/* ==========
|
||||
|
||||
========== */
|
||||
/* ==========
|
||||
Back to top button
|
||||
========== */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
display: none;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
z-index: 99999;
|
||||
text-decoration: none;
|
||||
}
|
||||
.back-to-top i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #bb8800;
|
||||
color: #1e3c70;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.back-to-top i:hover {
|
||||
background-color: #1e3c70;
|
||||
color: #bb8800;
|
||||
}
|
||||
/* ==========
|
||||
aos animation delay mobile
|
||||
========== */
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-aos-delay] {
|
||||
transition-delay: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
Header
|
||||
========== */
|
||||
#header {
|
||||
transition: all 0.5s;
|
||||
z-index: 997;
|
||||
padding: 8px 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: rgba(20, 30, 48, 0.8);
|
||||
}
|
||||
#header .logo {
|
||||
max-height: 68px;
|
||||
margin: 3px 4px 0 0;
|
||||
}
|
||||
#header .logo-unam {
|
||||
max-height: 55px;
|
||||
}
|
||||
#header h1 {
|
||||
color: #1e3c70;
|
||||
font-weight: 900;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
#header h1 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#header {
|
||||
position: fixed;
|
||||
}
|
||||
#header .logo {
|
||||
max-height: 40px;
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
#header .logo-unam {
|
||||
max-height: 40px;
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
#header h1 {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
Nav Menu
|
||||
========== */
|
||||
/* Desktop */
|
||||
.nav-menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-menu > ul {
|
||||
display: flex;
|
||||
}
|
||||
.nav-menu > ul > li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding: 10px 0 10px 28px;
|
||||
}
|
||||
.nav-menu a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
transition: 0.3s;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-menu a:hover {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu li:hover > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: calc(100% + 30px);
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.nav-menu .drop-down ul a {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
color: #151515;
|
||||
}
|
||||
.nav-menu .drop-down ul a:hover {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down ul .active > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down ul li:hover > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-menu .drop-down li {
|
||||
min-width: 180px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-menu .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down ul {
|
||||
top: 0;
|
||||
left: calc(100% - 30px);
|
||||
}
|
||||
.nav-menu .drop-down .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down > a:after {
|
||||
content: "\eaa0";
|
||||
font-family: IcoFont;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
@media (max-width: 1366px) {
|
||||
.nav-menu .drop-down .drop-down ul {
|
||||
left: -90%;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down:hover > ul {
|
||||
left: -100%;
|
||||
}
|
||||
.nav-menu .drop-down .drop-down > a:after {
|
||||
content: "\ea9d";
|
||||
}
|
||||
}
|
||||
/* Mobile Navigation */
|
||||
.mobile-nav-toggle {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
z-index: 9998;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 24px;
|
||||
transition: all 0.4s;
|
||||
outline: none !important;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
.mobile-nav-toggle i {
|
||||
color: #bb8800;
|
||||
}
|
||||
.mobile-nav {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 55px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: 9999;
|
||||
overflow-y: auto;
|
||||
background: rgba(30, 60, 112, 0.9);
|
||||
transition: ease-in-out 0.2s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-nav * {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.mobile-nav a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #bb8800;
|
||||
padding: 10px 20px;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mobile-nav a:hover {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav .active a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav li:hover a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.mobile-nav .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
.mobile-nav .drop-down ul {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav .drop-down li {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.mobile-nav .active.drop-down a:after {
|
||||
content: "\eaa1";
|
||||
}
|
||||
.mobile-nav-overly {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9997;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
transition: ease-in-out 0.2s;
|
||||
}
|
||||
.mobile-nav-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav-active .mobile-nav {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.mobile-nav-active .mobile-nav-toggle i {
|
||||
color: #fff;
|
||||
}
|
||||
/* ==========
|
||||
Nav Menu Sec
|
||||
========== */
|
||||
/* Desktop */
|
||||
.navbar-2 {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.navbar-2 a {
|
||||
transition: 0.3s;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.navbar-2 .dropdown-menu a:hover {
|
||||
background-color: #1e3c70;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-2 .dropdown-item i:hover {
|
||||
color: goldenrod !important;
|
||||
}
|
||||
.navbar-2 i {
|
||||
color: goldenrod;
|
||||
font-size: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nav-menu-2 ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-menu-2 > ul {
|
||||
display: flex;
|
||||
}
|
||||
.nav-menu-2 > ul > li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding: 10px 0 10px 28px;
|
||||
}
|
||||
.nav-menu-2 a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
transition: 0.3s;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-menu-2 a:hover {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .active > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu-2 li:hover > a {
|
||||
color: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: calc(100% + 30px);
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul a {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
color: #151515;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul a:hover {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul .active > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down ul li:hover > a {
|
||||
color: #151515;
|
||||
background: #ffc451;
|
||||
}
|
||||
.nav-menu-2 .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
.nav-menu-2 .drop-down li {
|
||||
min-width: 180px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-menu-2 .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down ul {
|
||||
top: 0;
|
||||
left: calc(100% - 30px);
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down:hover > ul {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down > a:after {
|
||||
content: "\eaa0";
|
||||
font-family: IcoFont;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
@media (max-width: 1366px) {
|
||||
.nav-menu-2 .drop-down .drop-down ul {
|
||||
left: -90%;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down:hover > ul {
|
||||
left: -100%;
|
||||
}
|
||||
.nav-menu-2 .drop-down .drop-down > a:after {
|
||||
content: "\ea9d";
|
||||
}
|
||||
}
|
||||
/* Mobile */
|
||||
.mobile-nav-2-toggle {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 8px;
|
||||
z-index: 9998;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 24px;
|
||||
transition: all 0.4s;
|
||||
outline: none !important;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
background-color: #1e3c70;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mobile-nav-2-toggle i {
|
||||
color: #bb8800;
|
||||
}
|
||||
.mobile-nav-2 {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 55px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: 9999;
|
||||
overflow-y: auto;
|
||||
background: rgba(30, 60, 112, 0.9);
|
||||
transition: ease-in-out 0.2s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
padding: 10px 0;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
.mobile-nav-2 * {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.mobile-nav-2 a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: #bb8800;
|
||||
padding: 10px 20px;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
.mobile-nav-2 a:hover {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav-2 .active > a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav-2 li:hover > a {
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
background: #ffc451;
|
||||
}
|
||||
.mobile-nav-2 .drop-down > a {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.mobile-nav-2 .drop-down > a:after {
|
||||
content: "\ea99";
|
||||
font-family: IcoFont;
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
.mobile-nav-2 .drop-down ul {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav-2 .drop-down li {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.mobile-nav-2 .active.drop-down > a:after {
|
||||
content: "\eaa1";
|
||||
}
|
||||
.mobile-nav-2-overly {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9997;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
transition: ease-in-out 0.2s;
|
||||
}
|
||||
.mobile-nav-2-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
.mobile-nav-2-active .mobile-nav-2 {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.mobile-nav-2-active .mobile-nav-2-toggle i {
|
||||
color: #fff;
|
||||
}
|
||||
/* ==========
|
||||
Hero
|
||||
========== */
|
||||
#hero {
|
||||
min-height: 100vh;
|
||||
background: url('../img/_DSC2981.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
#hero::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
#hero #hero_container {
|
||||
min-height: 70vh;
|
||||
z-index: 3;
|
||||
padding: 30px;
|
||||
z-index: 10;
|
||||
margin-top: 120px;
|
||||
}
|
||||
#hero #hero_container h2 {
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
color: #bb8800;
|
||||
margin-bottom: 25px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 20px;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 25px 0;
|
||||
text-align: justify;
|
||||
}
|
||||
#hero #hero_container #container_btn {
|
||||
width: 60%;
|
||||
height: 150px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
transition: all ease 0.3s;
|
||||
background: #1e3c70;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#hero #hero_container #container_btn a:hover {
|
||||
background: #bb8800;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
#hero #hero_container {
|
||||
margin-top: 150px;
|
||||
}
|
||||
#hero #hero_container h2 {
|
||||
font-size: 43px;
|
||||
width: 100%;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
#hero #hero_container h2 {
|
||||
font-size: 35px;
|
||||
width: 100%;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 23px;
|
||||
}
|
||||
#hero #hero_container #container_btn {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 40%;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 60%;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 350px) {
|
||||
#hero #hero_container h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
#hero #hero_container p {
|
||||
font-size: 15px;
|
||||
}
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 50%;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 591px) {
|
||||
#hero #hero_container #container_btn a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
End hero
|
||||
========== */
|
||||
/* ==========
|
||||
Section
|
||||
========== */
|
||||
#courses {
|
||||
min-height: 82vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 82vh;
|
||||
}
|
||||
#courses #courses_content h2 {
|
||||
margin: 30px 0 10px 0;
|
||||
width: 55%;
|
||||
border-bottom: solid 3px #bb8800;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
color: #1e3c70;
|
||||
font-weight: 700;
|
||||
}
|
||||
#courses #courses_content h2 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 82vh;
|
||||
margin: 40px 0;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 82vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
width: 85%;
|
||||
min-height: 45vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.5rem;
|
||||
width: 80%;
|
||||
margin: 10px auto;
|
||||
min-height: 90px;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-weight: 600;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 100px;
|
||||
width: 85%;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules p {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-weight: 500;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn {
|
||||
width: 50%;
|
||||
min-height: 10vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn a {
|
||||
background: #1e3c70;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
transition: all ease 0.5s;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn a:hover {
|
||||
color: #bb8800;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
#courses #courses_content h2 {
|
||||
width: 80%;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
min-height: 30vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
#courses {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content h2 {
|
||||
width: 85%;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 50vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
min-height: 20vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.5rem;
|
||||
min-height: 135px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 120px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn {
|
||||
width: 100%;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #card_btn a {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 769px) {
|
||||
#courses {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 60vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
min-height: 85px;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content #content_schedules {
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 508px) {
|
||||
#courses #courses_content h2 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 390px) {
|
||||
#courses {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content h2 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#courses #courses_content #courses_column {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card {
|
||||
min-height: 70vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_img {
|
||||
min-height: 26vh;
|
||||
}
|
||||
#courses #courses_content #courses_column #courses_card #card_content h3 {
|
||||
font-size: 1.1rem;
|
||||
min-height: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
/* ==========
|
||||
End Section
|
||||
========== */
|
||||
/* ==========
|
||||
Footer
|
||||
========== */
|
||||
#footer {
|
||||
background-color: black;
|
||||
padding: 0 0 30px 0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
#footer .footer-top {
|
||||
background: linear-gradient(rgba(2, 2, 2, 0.9), rgba(20, 30, 48, 0.9)), url("../img/bg/_DSC3031.jpg") fixed top;
|
||||
background-size: cover;
|
||||
border-bottom: 1px solid #222222;
|
||||
padding: 60px 0 30px 0;
|
||||
}
|
||||
#footer .footer-top .footer-info {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#footer .footer-top .footer-info h3 {
|
||||
font-size: 28px;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 2px 0 2px 0;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
#footer .footer-top .footer-info h3 span {
|
||||
color: #bb8800;
|
||||
}
|
||||
#footer .footer-top .footer-info p {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
font-family: "Raleway", sans-serif;
|
||||
color: #fff;
|
||||
text-align: justify;
|
||||
}
|
||||
#footer .footer-top .social-links a {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
background: #292929;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8px 0;
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
#footer .footer-top .social-links a:hover {
|
||||
background: #ffc451;
|
||||
color: #151515;
|
||||
text-decoration: none;
|
||||
}
|
||||
#footer .footer-top h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
#footer .footer-top .footer-links {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#footer .footer-top .footer-links ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#footer .footer-top .footer-links ul i {
|
||||
padding-right: 2px;
|
||||
color: #ffc451;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
#footer .footer-top .footer-links ul li {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#footer .footer-top .footer-links ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
#footer .footer-top .footer-links ul a {
|
||||
color: #fff;
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
#footer .footer-top .footer-links ul a:hover {
|
||||
color: #ffc451;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 12 MiB |
|
Before Width: | Height: | Size: 13 MiB |
|
Before Width: | Height: | Size: 12 MiB |
|
Before Width: | Height: | Size: 13 MiB |
|
Before Width: | Height: | Size: 4.0 MiB |
|
Before Width: | Height: | Size: 6.9 MiB |
|
Before Width: | Height: | Size: 686 KiB |
|
Before Width: | Height: | Size: 5.1 MiB |
|
Before Width: | Height: | Size: 784 KiB |
|
Before Width: | Height: | Size: 311 KiB |
|
Before Width: | Height: | Size: 515 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
@@ -1,265 +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/educacion.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../assets/Ext/bootstrap-icons/bootstrap-icons.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">
|
||||
<div class="container-lg" id="hero_container" data-aos="fade-up"
|
||||
data-aos-duration="1500">
|
||||
<div id="container_content">
|
||||
<h2>centro de educación continua</h2>
|
||||
<p>El Centro de Educación Continua ofrece actividades académicas de calidad permitan atender y ofrecer soluciones integrales a las necesidades del entorno para la formación académica, actualización, capacitación y superación de profesionistas en distintas áreas del conocimiento tanto de la comunidad universitaria como a la comunidad externa.</p>
|
||||
|
||||
<p>Contamos con una oferta multidisciplinaria de cursos, diplomados y seminarios con contenidos actuales y de calidad; impartidos por destacados especialistas y docentes, en un ambiente de aprendizaje óptimo y de vanguardia. Cubriendo así las necesidades profesionales de ampliación y profundización de conocimientos, actualización, capacitación, especialización y superación académica de los profesionistas.</p>
|
||||
</div>
|
||||
<div id="container_btn">
|
||||
<a href="#">Cursos</a>
|
||||
<a href="#">Diplomados</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section><!-- End Hero -->
|
||||
|
||||
|
||||
<!---Section-->
|
||||
|
||||
<section id="courses" data-aos="zoom-out-down">
|
||||
<div class="container-lg" id="courses_content">
|
||||
<h2>EDUCACION CONTINUA - <span>DIPLOMADOS</span></h2>
|
||||
<div class="row flex-row" id="courses_column">
|
||||
<div class="col-md-6 col-12" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/especializaciones-1.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>Estrategias de Inversión Bursátil y Gestión del Riesgo Financiero</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 20 de Septiembre de 2024</p>
|
||||
<p>Horario: Viernes de 18:00 a 21:00 y Sábado de 08:00 a 13:00</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/banner-licenciaturas.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>Arquitectura Contemporánea: Factores Geométricos, Estructura y Diseño Sustentable</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 21 de septiembre de 2024</p>
|
||||
<p>Horario: viernes de 18:00 a 21:00 horas y se deberá cubrir 5 horas de trabajo en plataforma moodle (CETED).</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="courses" data-aos="zoom-out-down">
|
||||
<div class="container-lg" id="courses_content">
|
||||
<h2>EDUCACION CONTINUA - <span>CURSOS</span></h2>
|
||||
<div class="row flex-row" id="courses_column">
|
||||
<div class="col-md-6 col-12" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/especializaciones-1.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>Curso Intensivo de inglés básico PG1,PG2,PG3, PG4, PG5, PG6</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 20 de septiembre de 2024</p>
|
||||
<p>Horario: viernes de 17:00 a 20:00 horas y sábados de 9:00 a 14:00 horas</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col" id="courses_card">
|
||||
<div id="card_img">
|
||||
<img src="./assets/img/banner-licenciaturas.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div id="card_content">
|
||||
<h3>El Rol de Consultor: la Comunicación Política como Campo Disciplinario y Actividad Profesional</h3>
|
||||
|
||||
<div id="content_schedules">
|
||||
<p>Inicio: 21 de septiembre de 2024</p>
|
||||
<p>Horario: viernes de 18:00 a 21:00 horas y se deberá cubrir 5 horas de trabajo en plataforma moodle (CETED).</p>
|
||||
</div>
|
||||
|
||||
<div id="card_btn">
|
||||
<a href="">Ver más</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!---End section-->
|
||||
<!-- ======= 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>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
|
Before Width: | Height: | Size: 1.7 MiB |
@@ -1,22 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const parentDivs = document.querySelectorAll('#parentDiv > div');
|
||||
const infoDivs = document.querySelectorAll('#infoDiv > div');
|
||||
|
||||
function setActiveDiv(index) {
|
||||
parentDivs.forEach(div => div.classList.remove('active'));
|
||||
infoDivs.forEach(div => div.classList.remove('active'));
|
||||
|
||||
if (parentDivs[index]) {
|
||||
parentDivs[index].classList.add('active');
|
||||
}
|
||||
if (infoDivs[index]) {
|
||||
infoDivs[index].classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
parentDivs.forEach((parentDiv, index) => {
|
||||
parentDiv.addEventListener('click', () => setActiveDiv(index));
|
||||
});
|
||||
|
||||
setActiveDiv(0);
|
||||
});
|
||||
@@ -20,14 +20,13 @@
|
||||
<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="../assets/Ext/bootstrap-icons/bootstrap-icons.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||
/>
|
||||
|
||||
<!-- Main CSS -->
|
||||
<link href="./assets/css/posgrados.css" rel="stylesheet">
|
||||
<link href="../assets/css/main.css" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
@@ -69,211 +68,46 @@
|
||||
</header><!-- End Header -->
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero">
|
||||
<div class="container-lg" id="hero_container">
|
||||
<div class="row flex-row" id="information">
|
||||
<section id="hero" class="d-flex align-items-center justify-content-center">
|
||||
<div class="container" data-aos="fade-up">
|
||||
|
||||
<div class="col-lg-6 col-12" id="box-information1" data-aos="zoom-in-right">
|
||||
|
||||
<h2>Doctorado en Artes y Diseño</h2>
|
||||
<div id="line-information">
|
||||
<p>La <span>Facultad de Estudios Superiores Acatlán</span> participa como Sede Alterna en este Programa conformado por las siguientes entidades academicas participantes:</p>
|
||||
|
||||
<ul>
|
||||
<li><i class="bi bi-chevron-right"></i> Escuela Nacional De Artes Cinematográficas</li>
|
||||
<li><i class="bi bi-chevron-right"></i> Facultad de Arquitecturas</li>
|
||||
<li><i class="bi bi-chevron-right"></i> Facultad de Artes y Diseño</li>
|
||||
<li><i class="bi bi-chevron-right"></i> Instituto de Investigación Estéticas</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<h3><i class='bx bx-book-reader bx-flip-horizontal bx-md'></i> Objetivo</h3>
|
||||
<div id="line-information">
|
||||
<p>Preparar al alumno para realizar investigaciones originales y de alto nivel, en tomo a un problema o problemas específicos propios de algúnos de los campos de conocimiento del Programa con base en el dominio de conocimientos teóricos, metodológicos y sobre procedimentales</p>
|
||||
<p>Que el alumno adquiera una sólida formación disciplinaria teórica, técnica y metodológica, para la realización de investigaciones teórico-prácticas originales, que le permita ejercer la profresión tanto a nivel</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col " id="box-information2" data-aos="zoom-in-left">
|
||||
|
||||
<div id="information-2-card">
|
||||
<h2><span><i class="bi bi-file-person-fill"></i> Contacto</span></h2>
|
||||
|
||||
<div>
|
||||
<p><strong>Responsable del posgrado en Artes y Diseño (FES Acatlán): <br>Dr. Omar Lezáma Galindo</strong></p>
|
||||
<p><strong>Teléfono y fax:</strong> 56-23-17-50 ext.38860. Cubículo 36 primer piso del edifcio de Posgrado</p>
|
||||
<p><strong>Correo Electrónico: <br></strong> <a href="">pada@acatlan.unam.mx</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><strong>Grado que se otorga:</strong> <br>Doctor en Artes y Diseño</p>
|
||||
</div>
|
||||
<div>
|
||||
<p><strong>Plan de estudios</strong></p>
|
||||
<p>Consulta el <a href="">Plan de estudios</a> para obtener información acerca de la estructura curricular y de las actividades académicas correspondientes</p>
|
||||
<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>
|
||||
<p><strong>Normas operativas</strong></p>
|
||||
<p>Consulta las <a href="">Normas Operativas</a> para obtener información acerca de la operación del Programa de Posgrado en Artes y Diseño</p>
|
||||
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
</div>
|
||||
</section><!-- End Hero -->
|
||||
|
||||
<main id="main">
|
||||
<div class="container-md" id="main_container">
|
||||
<div class="row flex-row" id="main_information">
|
||||
<div class="col-lg-6 col-12" id="main_information_box1" data-aos="fade-up"
|
||||
data-aos-duration="2000">
|
||||
|
||||
<h2><i class='bx bx-book-reader bx-flip-horizontal bx-md'></i> <span>Dirigido a:</span> </h2>
|
||||
|
||||
<div id="main_box-line1">
|
||||
<p>Profesionales ya titulados con formación en torno a la imágen estática o en movimiento, las artes y artes visuales así como disciplinas afines con la educación y desarrollos plásticos en tercera dimensión</p>
|
||||
</div>
|
||||
|
||||
<div id="main_box-line1">
|
||||
|
||||
<p>El plan de estudios de doctorado busca cubrir los requerimientos que plantea un nuevo entorno cultural en donde la participación de los productores de imágenes visuales es cada vez más importantes. En este sentido, el plan de estudios tiende a una reverberación de la actividad del artista visual, el diseñador, el comunicador visual, el docente en artes y diseño, y el documentalista cinematográfico, manteniendo un equilibrio entre las artes, las humanidades y las cientas. Así mismo, pretende que el egresado del doctorado, a través de sus manifestaciones plásticas(producción) ofrezca el material para que otras disciplinas como la historia del arte, la filosofía, ciencias políticas, estudios latinoamericanos, continúen desarrollando investigaciones teóricas sobre lenguajes y el hecho artístico realizado en un momento determinado</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col" id="main_information_box2" data-aos="fade-up"
|
||||
data-aos-duration="2000">
|
||||
|
||||
<h2><i class='bx bx-book-reader bx-flip-horizontal bx-md'></i> <span>Campo laboral</span></h2>
|
||||
<div id="main_box-line2">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="bi bi-chevron-right"></i> El ejercicio profesional, individual y grupal y su representación en espacios de exhibición públicos o privados
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-chevron-right"></i> La participación en centros de Investigación y producción artística, con financiamiento público o privado
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-chevron-right"></i> La realización de actividades docentes en el campo de las artes, el diseño y la comunicación visual, la docencia en artes y diseño, y el cine documental en centros educativos, públicos y privados
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-chevron-right"></i> La presentación de servicios especializados de asesoría, consultoría y gestión en los campos de conocimientos del programa
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-chevron-right"></i> La colaboración en publicaciones especializadas en el ámbito de la investigación en los campos de conocimiento del programa
|
||||
</li>
|
||||
<li>
|
||||
<i class="bi bi-chevron-right"></i> El intercambio de información en los campos de conocimiento del Programa, en foros y modalidades afines en el país y en el extranjero
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main><!-- End #main -->
|
||||
|
||||
|
||||
<section id="section">
|
||||
<div class="container-md" id="section_container">
|
||||
<div class="row flex-row" id="section_container_col">
|
||||
<div class="col-lg-3 col-12" id="degree1" data-aos="flip-left">
|
||||
|
||||
<div id="parentDiv">
|
||||
<div id="div1" class="active"><p>Líneas de investigación</p></div>
|
||||
<div id="div2"><p>Perfiles</p></div>
|
||||
<div id="div3"><p>Requisitos de ingreso</p></div>
|
||||
<div id="div4"><p>Obtención de grado</p></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col" id="degree2" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1000">
|
||||
|
||||
<div id="infoDiv">
|
||||
|
||||
<div id="info1" class="active">
|
||||
<h2>Líneas de investigación</h2>
|
||||
<h3>Grado que se otorga:</h3>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Doctor en artes y diseño</li>
|
||||
</ul>
|
||||
<h4>Para obtener el grado en Doctor en Artes y Diseño se requiere cubrir lo siguiente: </h4>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Haber acreditado las actividades académicas previstas en los planes de trabajo semestrales en los plazos establecidos.</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Haber recibido evaluaciones semestrales favorables de parte del comité tutor al plan de trabajo.</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Haber obtenido la candidatura al grado de Doctor, emitida por el Comité Academico.</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Presentar la tesis y aprobar el exámen de grado, de acuerdo con lo que estipulen las Normas Operativas del Programa y en la normatividad vigente.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="info2">
|
||||
<h2>Perfiles</h2>
|
||||
<h3>Subtítulo 2</h3>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 1</li>
|
||||
</ul>
|
||||
<h4>Subtítulo 2</h4>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 2</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 3</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 4</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="info3">
|
||||
<h2>Requisitos de ingreso</h2>
|
||||
<h3>Subtítulo 3</h3>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 1</li>
|
||||
</ul>
|
||||
<h4>Subtítulo 3</h4>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 2</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 3</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 4</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="info4">
|
||||
<h2>Obtención de grado</h2>
|
||||
<h3>Subtítulo 4</h3>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 1</li>
|
||||
</ul>
|
||||
<h4>Subtítulo 4</h4>
|
||||
<ul>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 2</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 3</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 4</li>
|
||||
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!--End #last section-->
|
||||
|
||||
|
||||
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer">
|
||||
<div class="footer-top">
|
||||
@@ -346,7 +180,6 @@
|
||||
<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="./assets/js/bar.js"></script>
|
||||
|
||||
<!-- Main JS -->
|
||||
<script src="../assets/js/main.js"></script>
|
||||
|
||||