Prototipo diseño desktop
This commit is contained in:
Mikitl
@@ -30,6 +30,24 @@ main h2{
|
||||
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;
|
||||
|
||||
@@ -25,6 +25,8 @@
|
||||
|
||||
/* Historia */
|
||||
.historia{
|
||||
margin-bottom: 10%;
|
||||
|
||||
h2{
|
||||
width: 40%;
|
||||
border-bottom: 5px solid darkgoldenrod;
|
||||
@@ -52,4 +54,60 @@
|
||||
bottom: -15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Ideario - Juramento */
|
||||
.idearioJuramento{
|
||||
.floating-list {
|
||||
width: 30%;
|
||||
max-height: 8vh;
|
||||
position: absolute;
|
||||
top: -2%;
|
||||
padding: 10px;
|
||||
|
||||
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%;
|
||||
}
|
||||
|
||||
&-list{
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i{
|
||||
color: darkgoldenrod;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
+135
-2
@@ -82,7 +82,8 @@
|
||||
<!-- End Header -->
|
||||
|
||||
<!-- ======= Main Section ======= -->
|
||||
<main class="pb-5">
|
||||
<main>
|
||||
<!-- Banner -->
|
||||
<section class="banner" id="hero">
|
||||
<div class="banner-container d-flex align-items-center justify-content-evenly" data-aos="fade-up">
|
||||
<div class="banner-img">
|
||||
@@ -94,6 +95,7 @@
|
||||
</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 col-7 text-dark">
|
||||
@@ -105,7 +107,10 @@
|
||||
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. 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.
|
||||
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">
|
||||
@@ -114,6 +119,133 @@
|
||||
</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 -->
|
||||
|
||||
@@ -215,5 +347,6 @@
|
||||
|
||||
<!-- Main JS -->
|
||||
<script src="../assets/js/main.js"></script>
|
||||
<script src="./assets/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user