CIDWA/fes_acatlan
14
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

merge into: CIDWA/fes_acatlan:david
Branches Tags
CIDWA/fes_acatlan:main CIDWA/fes_acatlan:katto CIDWA/fes_acatlan:Aldair CIDWA/fes_acatlan:duncan CIDWA/fes_acatlan:Lino CIDWA/fes_acatlan:david CIDWA/fes_acatlan:Moctezuma CIDWA/fes_acatlan:Sam
...
pull from: CIDWA/fes_acatlan:Sam
Branches Tags
CIDWA/fes_acatlan:katto CIDWA/fes_acatlan:Aldair CIDWA/fes_acatlan:duncan CIDWA/fes_acatlan:Lino CIDWA/fes_acatlan:david CIDWA/fes_acatlan:Moctezuma CIDWA/fes_acatlan:Sam CIDWA/fes_acatlan:main

8 Commits
david ... Sam

Author SHA1 Message Date
TioSam77 c8bbee9258 Tiping final 1 2024-09-03 16:45:50 -06:00
TioSam77 aedc77bf6b Intento de texto typing 3 2024-08-27 17:05:53 -06:00
TioSam77 dae3728994 Intento de texto typing 2 2024-08-27 15:46:20 -06:00
TioSam77 6b88c00816 Intento de texto typing 1 2024-08-21 16:32:10 -06:00
TioSam77 730c0efd80 Resposivo Posgrado 3 2024-08-20 21:32:19 -06:00
TioSam77 65f5af9aed Resposivo Posgrado 3 2024-08-20 21:31:20 -06:00
TioSam77 d16a6636f2 Resposivo Posgrado 2 2024-08-19 20:35:50 -06:00
TioSam77 c4d7a17a21 Resposivo Posgrado 1 2024-08-19 13:28:31 -06:00
4 changed files with 285 additions and 175 deletions
Expand all files Collapse all files
posgrados/assets/css/posgrados.css
+55 -4
View File
@@ -678,6 +678,7 @@ Main
#main {
min-height: 90vh;
}
#main #main_container {
min-height: 90vh;
display: flex;
@@ -685,21 +686,26 @@ Main
justify-content: end;
align-items: center;
}
#main #main_container #main_information {
min-height: 80vh;
color: rgba(0, 0, 0, 0.6);
text-align: justify;
}
#main #main_container #main_information #main_information_box1 {
padding-top: 2.5rem;
}
#main #main_container #main_information #main_information_box1 h2 {
font-weight: 700;
font-size: 2rem;
}
#main #main_container #main_information #main_information_box1 span {
color: #bb8800;
}
#main #main_container #main_information #main_information_box1 #main_box-line1 {
border-left: 0.3rem solid #bb8800;
padding-left: 1.7rem;
@@ -707,6 +713,7 @@ Main
margin-top: 2rem;
padding-bottom: 0.5rem;
}
#main #main_container #main_information #main_information_box1 #main_box-line1::before {
content: '';
height: 0.9rem;
@@ -718,19 +725,24 @@ Main
top: -8px;
left: -9px;
}
#main #main_container #main_information #main_information_box2 {
padding-top: 2.5rem;
}
#main #main_container #main_information #main_information_box2 h2 {
font-weight: 700;
font-size: 2rem;
}
#main #main_container #main_information #main_information_box2 span {
color: #bb8800;
}
#main #main_container #main_information #main_information_box2 li {
list-style: none;
}
#main #main_container #main_information #main_information_box2 #main_box-line2 {
border-left: 0.3rem solid #bb8800;
padding-left: 0.5rem;
@@ -738,6 +750,7 @@ Main
margin-top: 2rem;
padding-bottom: 0.5rem;
}
#main #main_container #main_information #main_information_box2 #main_box-line2::before {
content: '';
height: 0.9rem;
@@ -749,34 +762,72 @@ Main
top: -8px;
left: -9px;
}
/* Typing effect */
/* Incluir aquí el CSS ajustado */
.typing-effect {
display: inline-block;
white-space: nowrap;
overflow: hidden;
border-right: 0.15em solid; /* Cursor de tipeo */
animation: typing 1.5s steps(20, end) forwards, blink-caret 0.75s step-end infinite;
visibility: hidden; /* Oculta inicialmente */
animation-play-state: paused; /* Pausa la animación hasta activarse */
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
0%, 100% {
border-color: transparent;
}
50% {
border-color: black; /* Ajustar color del cursor de tipeo */
}
}
/* Nueva clase para ocultar el cursor después de la animación */
.typing-effect.typing-finished {
border-right: none; /* Remueve el cursor después de terminar */
}
@media (max-width: 300px) {
#main #main_container #main_information {
margin-bottom: 2rem;
word-wrap: break-word;
}
#main #main_container #main_information #main_information_box1 h2 {
font-size: 1.5rem;
}
#main #main_container #main_information #main_information_box1 h2,
#main #main_container #main_information #main_information_box2 h2 {
font-size: 1.5rem;
}
}
@media (max-width: 764px) {
#main #main_container #main_information {
margin-bottom: 2rem;
word-wrap: break-word;
}
}
@media (max-width: 1414px) {
#hero {
padding-top: 150px;
}
}
@media (max-width: 1270px) {
#hero {
padding-top: 10px ;
padding-top: 10px;
}
}
/* ==========
Last section
========== */
posgrados/assets/css/posgrados.less
+159 -114
View File
@@ -676,6 +676,16 @@ Nav Menu Sec
}
}
}
/* ==========
Variables
========== */
@color-prin: #ff6600; // Cambia estos colores por los que necesites
@color-sec: #333333;
/* Variables for colors */
@color-prin: #bb8800;
@color-sec: #1e3c70;
@bg-color: rgba(255, 255, 255, 0.6);
/* ==========
Hero
@@ -838,129 +848,99 @@ Hero
Main
========== */
#main{
min-height: 90vh;
#main_container{
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
#main_information{
min-height: 80vh;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: rgba(0,0,0,0.7);
color: rgba(0, 0, 0, 0.6);
text-align: justify;
#main_information_box1{
padding-top: 2.5rem;
h2{
font-weight: 700;
font-size: 2rem;
}
span{
color: @color-prin;
}
#main_box-line1{
border-left: 0.3rem solid @color-prin;
padding-left: 1.7rem;
position: relative;
margin-top: 2rem;
padding-bottom: 0.5rem;
li{
list-style: none;
}
&::before{
content: '';
height: 0.9rem;
width: 0.9rem;
background: white;
border-radius: 50%;
position: absolute;
border: solid 2px @color-sec;
top: -8px;
left: -9px;
}
}
}
#main_information_box2{
padding-top: 2.5rem;
h2{
font-weight: 700;
font-size: 2rem;
}
span{
color: @color-prin;
}
li{
list-style: none;
}
.main-container{
width: 85%;
height: 85%;
display: flex;
gap: 40px;
margin-bottom: 30px;
#main_box-line2{
border-left: 0.3rem solid @color-prin;
padding-left: 0.5rem;
position: relative;
margin-top: 2rem;
padding-bottom: 0.5rem;
h2{
margin-bottom: 40px;
}
.box1,.box2{
width: 50%;
height: 100%;
&::before{
content: '';
height: 0.9rem;
width: 0.9rem;
background: white;
border-radius: 50%;
position: absolute;
border: solid 2px @color-sec;
top: -8px;
left: -9px;
}
}
}
}
}
h2{
font-weight: 600;
font-size: 30px;
}
span{
color: @color-prin;
}
ul,li{
margin: 13px 0;
}
}
.box-line1{
border-left: 4px solid @color-prin;
padding-left: 20px;
position: relative;
padding-bottom: 40px;
&::before{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: white;
border: solid 3px @color-sec;
border-radius: 50%;
top:0px;
left: -9px;
}
&::after{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: white;
border: solid 3px @color-sec;
border-radius: 50%;
top: 88px;
left: -9px;
}
}
.box-line2{
border-left: 4px solid @color-prin;
padding-left: 20px;
position: relative;
&::before{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: white;
border: solid 3px @color-sec;
border-radius: 50%;
top:0px;
left: -9px;
}
}
}
}
@media(max-width:300px){
#main{
#main_container{
#main_information{
margin-bottom: 2rem;
word-wrap: break-word;
#main_information_box1{
h2{
font-size: 1.5rem;
}
}
#main_information_box2{
h2{
font-size: 1.5rem;
}
}
}
}
}
}
@media(max-width:764px){
#main{
#main_container{
#main_information{
margin-bottom: 2rem;
word-wrap: break-word;
}
}
}
}
@media(max-width:1414px){
#hero{
padding-top:150px;
}
}
@media(max-width:1270px){
#hero{
padding-top:10px ;
}
}
/* ==========
@@ -1168,23 +1148,28 @@ Footer
padding: 0 0 30px 0;
color: #fff;
font-size: 14px;
.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-info {
margin-bottom: 30px;
h3 {
font-size: 28px;
margin: 0 0 20px 0;
padding: 2px 0 2px 0;
line-height: 1;
font-weight: 700;
span {
color: #bb8800;
}
}
p {
font-size: 14px;
line-height: 24px;
@@ -1194,6 +1179,7 @@ Footer
text-align: justify;
}
}
.social-links {
a {
font-size: 18px;
@@ -1208,6 +1194,7 @@ Footer
width: 36px;
height: 36px;
transition: 0.3s;
&:hover {
background: #ffc451;
color: #151515;
@@ -1215,6 +1202,7 @@ Footer
}
}
}
h4 {
font-size: 16px;
font-weight: 600;
@@ -1222,31 +1210,38 @@ Footer
position: relative;
padding-bottom: 12px;
}
.footer-links {
margin-bottom: 30px;
ul {
list-style: none;
padding: 0;
margin: 0;
i {
padding-right: 2px;
color: #ffc451;
font-size: 18px;
line-height: 1;
}
li {
padding: 10px 0;
display: flex;
align-items: center;
&:first-child {
padding-top: 0;
}
}
a {
color: #fff;
transition: 0.3s;
display: inline-block;
line-height: 1;
&:hover {
color: #ffc451;
}
@@ -1254,4 +1249,54 @@ Footer
}
}
}
}
@media (max-width: 768px) {
.footer-top {
padding: 30px 0 15px 0;
.footer-info h3 {
font-size: 24px;
}
.footer-info p {
font-size: 12px;
line-height: 22px;
}
.social-links a {
font-size: 16px;
width: 30px;
height: 30px;
padding: 6px 0;
}
.footer-links h4 {
font-size: 14px;
}
.footer-links ul li {
padding: 8px 0;
}
}
}
@media (max-width: 480px) {
.footer-top {
padding: 20px 0 10px 0;
.footer-info h3 {
font-size: 20px;
}
.footer-info p {
font-size: 10px;
line-height: 20px;
}
.social-links a {
font-size: 14px;
width: 28px;
height: 28px;
padding: 5px 0;
}
.footer-links h4 {
font-size: 12px;
}
.footer-links ul li {
padding: 6px 0;
}
}
}
}
posgrados/assets/js/main.js
+14
View File
@@ -0,0 +1,14 @@
document.addEventListener('DOMContentLoaded', function() {
const lines = document.querySelectorAll('.typing-effect');
lines.forEach((line, index) => {
setTimeout(() => {
line.style.visibility = 'visible'; // Muestra la línea
line.style.animationPlayState = 'running'; // Inicia la animación
// Espera a que la animación termine y luego oculta el cursor
line.addEventListener('animationend', () => {
line.classList.add('typing-finished');
}, { once: true });
}, index * 1500); // 1.5s de retraso entre cada línea
});
});
posgrados/index.html
+57 -57
View File
@@ -35,12 +35,11 @@
<body>
<!-- ======= Header ======= -->
<!--<header id="header" class="fixed-top ">-->
<header id="header">
<div class="container d-flex align-items-center justify-content-between">
<div class="">
<a href="https://www.unam.mx/" target="_blank"><img src="../assets/img/escudos/logo_unam-b.png" alt="" class="img-fluid logo"></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"><img src="../assets/img/escudos/escudo-b2.png" alt="" class="img-fluid logo-unam"></a>
<a href="https://www.unam.mx/" target="_blank"><img src="assets/img/escudos/logo_unam-b.png" alt="" class="img-fluid logo"></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"><img src="assets/img/escudos/escudo-b2.png" alt="" class="img-fluid logo-unam"></a>
</div>
<h1>FES <span>Acatlán</span></h1>
@@ -66,7 +65,7 @@
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
</header><!-- Termina Header -->
<!-- ======= Hero Section ======= -->
<section id="hero">
@@ -130,62 +129,63 @@
</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="bi bi-book" style="color: #1e3c70;"></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="bi bi-book" style="color: #1e3c70;"></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>
<!--Main-->
<main id="main">
<div class="container-md" id="main_container">
<div class="row flex-row" id="main_information">
<div class="col-12 col-md-6" id="main_information_box1" data-aos="fade-up" data-aos-duration="2000">
<h2><i class="bi bi-book" style="color: #1e3c70;"></i> <span>Dirigido a:</span> </h2>
<div id="main_box-line1">
<p>
<span class="typing-effect">Profesionales ya titulados con formación</span><br>
<span class="typing-effect">en torno a la imagen estática o en movimiento,</span><br>
<span class="typing-effect">las artes y artes visuales así como disciplinas</span><br>
<span class="typing-effect">afines con la educación</span><br>
<span class="typing-effect">y desarrollos plásticos en tercera dimensión</span><br>
</p>
</div>
</div>
<div id="main_box-line1">
<p>
<span class="typing-effect">El plan de estudios de doctorado busca</span><br>
<span class="typing-effect">cubrir los requerimientos que plantea un</span><br>
<span class="typing-effect">nuevo entorno cultural en donde la participación</span><br>
<span class="typing-effect">de los productores de imágenes visuales</span><br>
<span class="typing-effect">es cada vez más importantes. En este sentido,</span><br>
<span class="typing-effect">el plan de estudios tiende a una reverberación</span><br>
<span class="typing-effect">de la actividad del artista visual, el diseñador,</span><br>
<span class="typing-effect">el comunicador visual, el docente en artes y</span><br>
<span class="typing-effect">y el documentalista cinematográfico,</span><br>
<span class="typing-effect">diseño,manteniendo un equilibrio entre las artes,</span><br>
<span class="typing-effect">las humanidades y las ciencias. Así mismo,</span><br>
<span class="typing-effect">pretende que el egresado del doctorado,</span><br>
<span class="typing-effect">a través de sus manifestaciones</span><br>
<span class="typing-effect">plásticas (producción)ofrezca el material</span><br>
<span class="typing-effect">para que otras disciplinascomo la historia del arte,</span><br>
<span class="typing-effect">la filosofía,ciencias políticas, estudios</span><br>
<span class="typing-effect">latinoamericanos,continúen desarrollando</span><br>
<span class="typing-effect">investigaciones teóricas sobre lenguajes y</span><br>
<span class="typing-effect">el hecho artísticorealizado</span><br>
<span class="typing-effect">en un momento determinado.</span>
</p>
</div>
</div>
</main><!-- End #main -->
<div class="col" id="main_information_box2" data-aos="fade-up" data-aos-duration="2000">
<h2><i class="bi bi-book" style="color: #1e3c70;"></i> <span>Campo laboral</span></h2>
<div id="main_box-line2">
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> El ejercicio profesional, individual y grupal</span><br>
<span class="typing-effect">y su representación en espacios de exhibición</span><br>
<span class="typing-effect">públicos o privados</span><br>
</p>
<!-- Más contenido aquí... -->
</div>
</div>
</div>
</div>
</main><!-- End #main -->
<section id="section">
@@ -347,7 +347,7 @@
<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>
<script src="./assets/js/main.js"></script>
<!-- Main JS -->
<script src="../assets/js/main.js"></script>