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

Intento de texto typing 3

Browse Source
This commit is contained in:
TioSam77
2024-08-27 17:05:53 -06:00
parent dae3728994 d329ec3651
commit aedc77bf6b
4 changed files with 372 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files
posgrados/assets/css/posgrados.css
+127 -89
View File
@@ -605,9 +605,8 @@ Hero
#hero #hero_container #information #box-information2 {
padding-top: 5.6rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
align-items: flex-start;
}
#hero #hero_container #information #box-information2 #information-2-card {
width: 95%;
@@ -625,11 +624,6 @@ Hero
#hero #hero_container #information #box-information2 #information-2-card span {
color: #bb8800;
}
#hero #hero_container #information #box-information2 #information-2-card:hover {
background: rgba(255, 255, 255, 0.7);
color: rgba(0, 0, 0, 0.8);
transform: scale(1.02);
}
#hero #hero_container #information #box-information2 #information-2-card::before {
content: '';
width: 60px;
@@ -830,100 +824,144 @@ Main
Last section
========== */
#section {
min-height: 70vh;
min-height: 60vh;
display: flex;
align-items: end;
}
#section #section_container {
min-height: 60vh;
border: solid 1px red;
}
#section #section_container #section_container_col {
min-height: 60vh;
}
#section #section_container #section_container_col #degree1 {
min-height: 60vh;
}
#section #section_container #section_container_col #degree1 .interactive-divs {
display: flex;
flex-direction: column;
justify-content: center;
}
#section #section_container #section_container_col #degree1 .interactive-div {
border-right: 3px solid rgba(0, 0, 255, 0.5);
padding: 20px;
margin: 0;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
#section #section_container #section_container_col #degree1 .interactive-div:not(:last-child) {
border-bottom: none;
}
#section #section_container #section_container_col #degree1 .interactive-div p {
color: rgba(0, 0, 255, 0.5);
font-size: 1.3rem;
}
#section #section_container #section_container_col #degree1 .active {
border-right-color: #0000ff;
}
#section #section_container #section_container_col #degree1 .active p {
color: #0000ff;
}
#section #section_container #section_container_col #degree2 {
min-height: 60vh;
}
#section #section_container #section_container_col #degree2 .display-divs {
display: flex;
flex-direction: column;
flex-grow: 1;
}
#section #section_container #section_container_col #degree2 .display-div {
padding-left: 2rem;
padding-top: 2rem;
background-color: #f9f9f9;
margin-bottom: 10px;
display: none;
}
#section #section_container #section_container_col #degree2 .display-div.active-display {
display: block;
}
#section #section_container #section_container_col #degree2 .display-div h2 {
font-size: 2rem;
border-bottom: 3px solid #bb8800;
width: 50%;
color: rgba(0, 0, 255, 0.9);
padding-bottom: 1.2rem;
}
#section #section_container #section_container_col #degree2 .display-div h3 {
font-size: 1.5rem;
font-weight: 700;
color: rgba(0, 0, 255, 0.7);
margin-top: 2rem;
}
#section #section_container #section_container_col #degree2 .display-div h4 {
color: rgba(0, 0, 0, 0.8);
font-size: 1.1rem;
margin: 0.8rem 0;
}
#section #section_container #section_container_col #degree2 .display-div ul {
list-style-type: disc;
padding-left: 20px;
}
#section #section_container #section_container_col #degree2 .display-div ul li {
font-size: 1rem;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 5px;
list-style: none;
}
#section #section_container #section_container_col #degree2 .display-div ul span {
color: #bb8800;
}
@media (max-width: 722px) {
#section #section_container #section_container_col #degree2 .display-div h2 {
font-size: 1.4rem;
@media (max-width: 991px) {
#section #section_container #section_container_col #degree1 {
min-height: 15vh;
}
#section #section_container #section_container_col #degree2 {
min-height: 45vh;
}
}
/* ==========
Last section
========== */
#section {
min-height: 60vh;
display: flex;
align-items: end;
}
#section #section_container {
border: none;
min-height: 55vh;
}
#section #section_container #section_container_col {
min-height: 55vh;
}
#section #section_container #section_container_col #degree1 #parentDiv {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
overflow-x: auto;
}
#section #section_container #section_container_col #degree1 #parentDiv > div {
padding: 10px;
cursor: pointer;
position: relative;
transition: border-right-color 0.3s ease, color 0.3s ease;
border-right: 3px solid rgba(30, 60, 112, 0.6);
}
#section #section_container #section_container_col #degree1 #parentDiv > div p {
color: rgba(30, 60, 112, 0.6);
}
#section #section_container #section_container_col #degree1 #parentDiv > div.active {
border-right-color: #1e3c70;
}
#section #section_container #section_container_col #degree1 #parentDiv > div.active p {
color: #1e3c70;
}
#section #section_container #section_container_col #degree2 {
padding: 15px 0 0 5px;
}
#section #section_container #section_container_col #degree2 #infoDiv {
margin-left: 20px;
min-height: 100%;
background: none;
}
#section #section_container #section_container_col #degree2 #infoDiv > div {
display: none;
}
#section #section_container #section_container_col #degree2 #infoDiv > div.active {
display: block;
}
#section #section_container #section_container_col #degree2 #infoDiv > div h2 {
color: #1e3c70;
font-weight: 600;
border-bottom: 3px solid #bb8800;
width: 50%;
padding-bottom: 2px;
}
#section #section_container #section_container_col #degree2 #infoDiv > div h3 {
color: #1e3c70;
font-weight: 500;
opacity: 0.9;
}
#section #section_container #section_container_col #degree2 #infoDiv > div h4 {
color: rgba(0, 0, 0, 0.85);
margin: 2rem 0;
font-size: 1.2rem;
}
#section #section_container #section_container_col #degree2 #infoDiv > div li {
list-style: none;
color: rgba(0, 0, 0, 0.85);
}
#section #section_container #section_container_col #degree2 #infoDiv > div span {
color: #bb8800;
}
@media (max-width: 991px) {
#section #section_container #section_container_col #degree1 {
margin-top: 40px;
}
#section #section_container #section_container_col #degree1 #parentDiv {
width: auto;
height: auto;
flex-direction: row;
border: 3px solid #bb8900b2;
padding: 15px;
}
#section #section_container #section_container_col #degree1 #parentDiv > div {
flex: 0 0 auto;
width: 25%;
min-width: 200px;
margin-right: 15px;
padding: 15px;
box-sizing: border-box;
border: 3px solid rgba(30, 60, 112, 0.6);
border-radius: 1rem;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
#section #section_container #section_container_col #degree1 #parentDiv > div p {
color: rgba(30, 60, 112, 0.6);
}
#section #section_container #section_container_col #degree1 #parentDiv > div.active {
background-color: #1e3c70;
border-color: #1e3c70;
}
#section #section_container #section_container_col #degree1 #parentDiv > div.active p {
color: #fff;
}
}
@media (max-width: 540px) {
#section #section_container #section_container_col #degree2 #infoDiv > div h2 {
width: 90%;
margin-bottom: 2rem;
padding-bottom: 1rem;
}
}
/* ==========
Footer
========== */
posgrados/assets/css/posgrados.less
+148 -87
View File
@@ -742,9 +742,8 @@ Hero
#box-information2{
padding-top: 5.6rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
align-items: flex-start;
#information-2-card{
width: 95%;
@@ -761,11 +760,6 @@ Hero
span{
color: @color-prin;
}
&:hover{
background: rgba(255, 255, 255, 0.7);
color: rgba(0, 0, 0, 0.8);
transform: scale(1.02);
}
&::before{
content: '';
width: 60px;
@@ -953,99 +947,117 @@ Main
Last section
========== */
#section{
min-height: 70vh;
min-height: 60vh;
display: flex;
align-items: end;
#section_container{
min-height: 60vh;
border: solid 1px red;
#section_container_col{
min-height: 60vh;
}
}
}
@media(max-width:991px){
#section{
#section_container{
#section_container_col{
#degree1{
min-height: 15vh;
}
#degree2{
min-height: 45vh;
}
}
}
}
}
/* ==========
Last section
========== */
#section{
min-height: 60vh;
display: flex;
align-items: end;
#section_container{
border: none;
min-height: 55vh;
#section_container_col{
min-height: 55vh;
#degree1{
min-height: 60vh;
.interactive-divs {
#parentDiv {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
overflow-x: auto;
.interactive-div {
border-right: 3px solid rgba(0, 0, 255, 0.5);
padding: 20px;
margin: 0;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
&:not(:last-child) {
border-bottom: none;
}
> div {
padding: 10px;
cursor: pointer;
position: relative;
transition: border-right-color 0.3s ease, color 0.3s ease;
border-right: 3px solid rgba(30, 60, 112, 0.6);
p {
color: rgba(0, 0, 255, 0.5);
font-size: 1.3rem;
p {
color: rgba(30, 60, 112, 0.6);
}
&.active {
border-right-color: rgba(30, 60, 112, 1);
p {
color: rgba(30, 60, 112, 1);
}
}
}
}
.active {
border-right-color: rgba(0, 0, 255, 1);
p {
color: rgba(0, 0, 255, 1);
}
}
}
#degree2{
min-height: 60vh;
.display-divs {
display: flex;
flex-direction: column;
flex-grow: 1;
}
padding: 15px 0 0 5px;
#infoDiv {
margin-left: 20px;
min-height: 100%; // Ajusta según sea necesario
background: none;
.display-div {
padding-left: 2rem;
padding-top: 2rem;
background-color: #f9f9f9;
margin-bottom: 10px;
display: none;
> div {
display: none;
&.active-display {
display: block;
}
h2 {
font-size: 2rem;
border-bottom: 3px solid @color-prin;
width: 50%;
color: rgba(0, 0, 255, 0.9);
padding-bottom: 1.2rem;
}
h3 {
font-size: 1.5rem;
font-weight: 700;
color: rgba(0, 0, 255, 0.7);
margin-top: 2rem;
&.active {
display: block;
}
h2{
color: @color-sec;
font-weight: 600;
border-bottom: 3px solid @color-prin;
width: 50%;
padding-bottom: 2px;
}
h3{
color: @color-sec;
font-weight: 500;
opacity: 0.9;
}
h4{
color: rgba(0, 0, 0, 0.85);
margin: 2rem 0;
font-size: 1.2rem;
}
}
h4{
color: rgba(0, 0, 0, 0.8);
font-size: 1.1rem;
margin: 0.8rem 0;
}
ul {
list-style-type: disc;
padding-left: 20px;
li {
font-size: 1rem;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 5px;
li{
list-style: none;
color: rgba(0, 0, 0, 0.85);
}
span{
color: @color-prin;
@@ -1057,15 +1069,68 @@ Last section
}
}
@media(max-width:991px){
#section{
#section_container{
#section_container_col{
#degree1{
margin-top: 40px;
#parentDiv {
width: auto;
height: auto;
flex-direction: row;
border: 3px solid #bb8900b2;
padding: 15px;
> div {
flex: 0 0 auto;
width: 25%;
min-width: 200px;
margin-right: 15px;
padding: 15px;
box-sizing: border-box;
border: 3px solid rgba(30, 60, 112, 0.6);
border-radius: 1rem;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
p {
color: rgba(30, 60, 112, 0.6);
}
&.active {
background-color: #1e3c70;
border-color: rgba(30, 60, 112, 1);
p {
color: #fff;
}
}
}
}
}
@media(max-width:722px){
#degree2{
}
}
}
}
}
@media(max-width:540px){
#section{
#section_container{
#section_container_col{
#degree2{
.display-div{
h2{
font-size: 1.4rem;
#infoDiv{
> div{
h2{
width: 90%;
margin-bottom: 2rem;
padding-bottom: 1rem;
}
}
}
}
@@ -1075,10 +1140,6 @@ Last section
}
/* ==========
Last section
========== */
/* ==========
Footer
========== */
posgrados/assets/js/bar.js
+18 -14
View File
@@ -1,21 +1,25 @@
document.addEventListener('DOMContentLoaded', () => {
const divs = document.querySelectorAll('.interactive-div');
const displayDivs = document.querySelectorAll('.display-div');
const parentDivs = document.querySelectorAll('#parentDiv > div');
const infoDivs = document.querySelectorAll('#infoDiv > div');
function updateDisplay(index) {
divs.forEach(d => d.classList.remove('active'));
displayDivs.forEach(dd => dd.classList.remove('active-display'));
function setActiveDiv(index) {
// Remove active class from all parent divs and info divs
parentDivs.forEach(div => div.classList.remove('active'));
infoDivs.forEach(div => div.classList.remove('active'));
divs[index].classList.add('active');
displayDivs[index].classList.add('active-display');
displayDivs[index].querySelector('h2').textContent = divs[index].querySelector('p').textContent;
// Add active class to the corresponding parent div and info div
if (parentDivs[index]) {
parentDivs[index].classList.add('active');
}
if (infoDivs[index]) {
infoDivs[index].classList.add('active');
}
}
updateDisplay(0);
divs.forEach((div, index) => {
div.addEventListener('click', () => updateDisplay(index));
parentDivs.forEach((parentDiv, index) => {
parentDiv.addEventListener('click', () => setActiveDiv(index));
});
// Set the first div as active on page load
setActiveDiv(0);
});
posgrados/index.html
+79 -82
View File
@@ -68,11 +68,11 @@
</header><!-- Termina Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" data-aos="zoom-in">
<div class="container-md" id="hero_container">
<section id="hero">
<div class="container-lg" id="hero_container">
<div class="row flex-row" id="information">
<div class="col-12 col-md-6" id="box-information1" data-aos="zoom-in-right">
<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">
@@ -96,7 +96,7 @@
</div>
<div class="col" id="box-information2" data-aos="zoom-in-left">
<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>
@@ -136,7 +136,11 @@
<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>
<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">
<div id="main_box-line1">
<p>
@@ -218,96 +222,89 @@
<section id="section">
<div class="container-md" id="section_container">
<div class="row flex-row" id="section_container_col">
<div class="col-md-4 " id="degree1" data-aos="flip-left">
<div class="col-lg-3 col-12" id="degree1" data-aos="flip-left">
<div class="interactive-divs">
<div class="interactive-div active" id="div1">
<p>Líneas de investigación</p>
</div>
<div class="interactive-div" id="div2">
<p>Perfiles</p>
</div>
<div class="interactive-div" id="div3">
<p>Requisitos de Ingreso</p>
</div>
<div class="interactive-div" id="div4">
<p>Obtención de grado</p>
</div>
<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 class="col" id="degree2" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1000">
<div id="infoDiv">
<div class="display-divs">
<div class="display-div active-display" id="display1">
<h2 id="display-title1">Líneas de investigación</h2>
<h3>Grado que se ortoga:</h3>
<ul id="list1">
<li><span><i class="bi bi-chevron-double-right"></i></span> Doctor en artes y diseño</li>
</ul>
<h4>Para obtener el grado de Doctor en Artes y Diseño se requiere cubir lo siguiente: </h4>
<ul id="list2">
<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 o 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>
<div class="display-div" id="display2">
<h2 id="display-title2">Perfiles</h2>
<h3>Subtítulo 1</h3>
<ul id="list1">
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 1</li>
</ul>
<h3>Subtítulo 2</h3>
<ul id="list2">
<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>
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 6</li>
</ul>
</div>
<div class="display-div" id="display3">
<h2 id="display-title3">Requisitos de ingreso</h2>
<h3>Subtítulo 1</h3>
<ul id="list1">
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 1 </li>
</ul>
<h3>Subtítulo 2</h3>
<ul id="list2">
<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>
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 6</li>
</ul>
</div>
<div class="display-div" id="display4">
<h2 id="display-title4">Obtención de grado</h2>
<h3>Subtítulo 1</h3>
<ul id="list1">
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 1</li>
</ul>
<h3>Subtítulo 2</h3>
<ul id="list2">
<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>
<li><span><i class="bi bi-chevron-double-right"></i></span> Elemento 6</li>
</ul>
</div>
<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">