Avance diseño desktop
This commit is contained in:
Mikitl
@@ -1,195 +1,50 @@
|
||||
/* ==========
|
||||
main
|
||||
========== */
|
||||
#main {
|
||||
main{
|
||||
color: #0000;
|
||||
}
|
||||
main h2{
|
||||
color: #1e3c70;
|
||||
}
|
||||
#hero {
|
||||
width: 100%;
|
||||
background: url("../../../assets/img/bg/alt-1.jpg") fixed top center;
|
||||
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;
|
||||
}
|
||||
.container-image-sorjuana {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 1.5rem;
|
||||
position: relative;
|
||||
left: -40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.image-sorjuana {
|
||||
width: 700px;
|
||||
transform: rotate(270deg) translateX(-125px) translateY(-220px);
|
||||
object-fit: cover;
|
||||
}
|
||||
#main:before {
|
||||
#hero:before {
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
#main .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
gap: 20px;
|
||||
}
|
||||
#main h1 {
|
||||
#hero h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 40px;
|
||||
color: #1e3c70;
|
||||
}
|
||||
.header {
|
||||
margin-top: 15%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.header .title {
|
||||
text-align: start;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.header .title h4 {
|
||||
color: darkgoldenrod;
|
||||
}
|
||||
.information {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
.floating-list {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
max-width: 50%;
|
||||
z-index: 9;
|
||||
}
|
||||
.floating-list li {
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.historia {
|
||||
border-radius: 1rem;
|
||||
width: 90%;
|
||||
background-color: #ffffff6b;
|
||||
color: black;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
}
|
||||
.juramento {
|
||||
border-radius: 1rem;
|
||||
width: 90%;
|
||||
background-color: #ffffff6b;
|
||||
color: black;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mision {
|
||||
border-radius: 1rem;
|
||||
width: 90%;
|
||||
background-color: #ffffff6b;
|
||||
color: black;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
}
|
||||
.vision {
|
||||
border-radius: 1rem;
|
||||
width: 90%;
|
||||
background-color: #ffffff6b;
|
||||
color: black;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
}
|
||||
.valores {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
padding: 40px;
|
||||
z-index: 10;
|
||||
}
|
||||
.ideario-institucional {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#ideario {
|
||||
width: 100%;
|
||||
background: url("../../../assets/img/bg/_DSC2981.jpg") fixed top center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
}
|
||||
#ideario:before {
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.ideario-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#main {
|
||||
#hero {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.ideario-institucional {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#main {
|
||||
#hero {
|
||||
height: 80vh;
|
||||
}
|
||||
#main h1 {
|
||||
#hero h1 {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
}
|
||||
#main h2 {
|
||||
#hero h2 {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.container-image-sorjuana {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.image-sorjuana {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
/* Banner */
|
||||
.banner{
|
||||
overflow: visible;
|
||||
|
||||
&-container{
|
||||
padding-top: 20vh;
|
||||
}
|
||||
|
||||
&-img{
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
|
||||
border-radius: 2rem;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
& img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Historia */
|
||||
.historia{
|
||||
h2{
|
||||
width: 40%;
|
||||
border-bottom: 5px solid darkgoldenrod;
|
||||
}
|
||||
|
||||
&-info{
|
||||
gap: 10rem;
|
||||
}
|
||||
|
||||
&-imagenes{
|
||||
position: relative;
|
||||
|
||||
#imgUno{
|
||||
max-width: 25vw;
|
||||
min-height: 70vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
#imgDos{
|
||||
max-width: 20vw;
|
||||
height: 30vh;
|
||||
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
left: -20%;
|
||||
bottom: -15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 339 KiB |
+30
-150
@@ -32,6 +32,7 @@
|
||||
<!-- 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>
|
||||
@@ -81,160 +82,38 @@
|
||||
<!-- End Header -->
|
||||
|
||||
<!-- ======= Main Section ======= -->
|
||||
<main id="main">
|
||||
<div class="container" data-aos="fade-up">
|
||||
<div class="header ">
|
||||
<div class="container-image-sorjuana">
|
||||
<img
|
||||
class="image-sorjuana"
|
||||
src="https://www.acatlan.unam.mx/images/fes_02.jpg"
|
||||
alt=""
|
||||
/>
|
||||
<main class="pb-5">
|
||||
<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">
|
||||
<img src="./assets/img/sorjuana.png" alt="">
|
||||
</div>
|
||||
<div class="title">
|
||||
<h1>Conoce la</h1>
|
||||
<h4>Facultad de estudios Superiores Acatlan</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<ul class="floating-list">
|
||||
<li>Historia de la FES Acatlán</li>
|
||||
<li>Juramento</li>
|
||||
</ul>
|
||||
|
||||
<div class="historia">
|
||||
<h1 class="row justify-content-center">Historia de la FES Acatlán</h1>
|
||||
|
||||
<p>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
<div id="ideario">
|
||||
<div class="ideario-container container">
|
||||
<h1 class="d-flex justify-content-center">Ideario Institucional</h1>
|
||||
|
||||
<div class="ideario-institucional">
|
||||
<div class="mision" data-aos="fade-up" data-aos-delay="150">
|
||||
<h1 class="row justify-content-center">Mision</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="vision" data-aos="fade-up" data-aos-delay="150">
|
||||
<h1 class="row justify-content-center">Vision</h1>
|
||||
|
||||
<p>
|
||||
Convertir a la FES Acatlán en una Facultad de excelencia e
|
||||
innovación por su oferta académica actualizada y de calidad en
|
||||
las licenciaturas, posgrados y extensión universitaria; ser
|
||||
referente formativo y de solución a los desafíos y problemáticas
|
||||
actuales y emergentes, a través de la investigación conjunta con
|
||||
los ámbitos social, empresarial y productivo, que aprovecha las
|
||||
tecnologías para desarrollar, difundir y apoyar al conocimiento
|
||||
y a la cultura, bajo ideales humanistas y sociales propios de
|
||||
una Universidad del Siglo XXI.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="valores">
|
||||
<h1 class="d-flex justify-content-center">Valores</h1>
|
||||
|
||||
<div class="valores-container">
|
||||
<div>
|
||||
<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>
|
||||
<li>
|
||||
Respeto a la autonomía universitaria y a los principios que de
|
||||
ella emanan.
|
||||
</li>
|
||||
<li>Gestión eficiente, transparente y participativa.</li>
|
||||
<li>
|
||||
Honestidad y responsabilidad en el uso y aprovechamiento del
|
||||
patrimonio universitario en beneficio de toda la comunidad.
|
||||
</li>
|
||||
<li>
|
||||
Responsabilidad social y ambiental en las actividades
|
||||
cotidianas.
|
||||
</li>
|
||||
<li>
|
||||
Compromiso social y nacional para contribuir al desarrollo y
|
||||
mejoramiento de las condiciones de vida.
|
||||
</li>
|
||||
<li>Evaluación y mejoramiento institucional permanente.</li>
|
||||
<li>
|
||||
Posicionamiento del alumnado y el personal docente como actores
|
||||
centrales de la actividad universitaria.
|
||||
</li>
|
||||
<li>
|
||||
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>
|
||||
Reconocimiento de la diversidad humana y la pluralidad como
|
||||
agentes que otorgan dinamismo y revitalizan la vida
|
||||
universitaria.
|
||||
</li>
|
||||
<li>
|
||||
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>
|
||||
<h1 class="text-white fs-1 fw-bold">Conoce la</h1>
|
||||
<h1 class="fs-2">Facultad de Estudios Superiores Acatlán</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<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">
|
||||
<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. 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>
|
||||
</main>
|
||||
<!-- End #main -->
|
||||
|
||||
@@ -332,6 +211,7 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user