Intento de texto typing 1

This commit is contained in:
TioSam77
2024-08-21 16:32:10 -06:00
parent 730c0efd80
commit 6b88c00816
2 changed files with 152 additions and 52 deletions
+38 -1
View File
@@ -684,6 +684,7 @@ Main
#main {
min-height: 90vh;
}
#main #main_container {
min-height: 90vh;
display: flex;
@@ -691,21 +692,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;
@@ -713,6 +719,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;
@@ -724,19 +731,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;
@@ -744,6 +756,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;
@@ -755,6 +768,26 @@ Main
top: -8px;
left: -9px;
}
/* Typing effect */
.typing-effect {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid rgba(0, 0, 0, 0.75); /* Cursor effect */
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: rgba(0, 0, 0, 0.75); }
}
@media (max-width: 300px) {
#main #main_container #main_information {
margin-bottom: 2rem;
@@ -767,22 +800,26 @@ Main
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
========== */
+114 -51
View File
@@ -32,6 +32,41 @@
</head>
<body>
<!-- ======= Header ======= -->
<header id="header">
<div class="container d-flex align-items-center justify-content-between">
<div class="">
<a href="https://www.unam.mx/" target="_blank"><img src="assets/img/escudos/logo_unam-b.png" alt="" class="img-fluid logo"></a>
<a href="https://www.acatlan.unam.mx/" target="_blank" class="mr-auto"><img src="assets/img/escudos/escudo-b2.png" alt="" class="img-fluid logo-unam"></a>
</div>
<h1>FES <span>Acatlán</span></h1>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="#">Normatividad</a></li>
<li><a href="#">Tienda Acatlán</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
<div class="container ">
<nav class="nav-menu-2 d-none d-lg-block">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Licenciaturas</a></li>
<li><a href="#">Posgrados</a></li>
<li><a href="#">Investigación</a></li>
<li><a href="#">Cursos y Diplomados</a></li>
<li><a href="#">Otros</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- Termina Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" data-aos="zoom-in">
<div class="container-md" id="hero_container">
@@ -94,63 +129,91 @@
</div>
</section><!-- End Hero -->
<!--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">
<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>
<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>
<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>
<span class="typing-effect">y desarrollos plásticos en tercera dimensión</span>
</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 diseño,</span><br>
<span class="typing-effect">y el documentalista cinematográfico,</span><br>
<span class="typing-effect">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, a través</span><br>
<span class="typing-effect">de sus manifestaciones plásticas (producción)</span><br>
<span class="typing-effect">ofrezca el material para que otras disciplinas</span><br>
<span class="typing-effect">como la historia del arte, la filosofía,</span><br>
<span class="typing-effect">ciencias políticas, estudios latinoamericanos,</span><br>
<span class="typing-effect">continúen desarrollando investigaciones teóricas</span><br>
<span class="typing-effect">sobre lenguajes y el hecho artístico</span><br>
<span class="typing-effect">realizado 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>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La participación en centros de Investigación</span><br>
<span class="typing-effect">y producción artística, con financiamiento</span><br>
<span class="typing-effect">público o privado</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La realización de actividades docentes en</span><br>
<span class="typing-effect">el campo de las artes, el diseño y la comunicación</span><br>
<span class="typing-effect">visual, la docencia en artes y diseño,</span><br>
<span class="typing-effect">y el cine documental en centros educativos,</span><br>
<span class="typing-effect">públicos y privados</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La presentación de servicios especializados</span><br>
<span class="typing-effect">de asesoría, consultoría y gestión en los</span><br>
<span class="typing-effect">campos de conocimientos del programa</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La colaboración en publicaciones especializadas</span><br>
<span class="typing-effect">en el ámbito de la investigación en los</span><br>
<span class="typing-effect">campos de conocimiento del programa</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> El intercambio de información en los</span><br>
<span class="typing-effect">campos de conocimiento del Programa,</span><br>
<span class="typing-effect">en foros y modalidades afines en el</span><br>
<span class="typing-effect">país y en el extranjero</span><br>
</p>
</div>
</div>
</div>
</div>
</main><!-- End #main -->
<section id="section">
<div class="container-md" id="section_container">