From d329ec3651006308099d602199b0ce396efba2cc Mon Sep 17 00:00:00 2001 From: David19735 Date: Mon, 26 Aug 2024 20:09:38 -0600 Subject: [PATCH] =?UTF-8?q?Se=20cambia=20el=20dise=C3=B1o=20de=20responsiv?= =?UTF-8?q?e=20en=20la=20ultima=20seccion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- posgrados/assets/css/posgrados.css | 216 ++++++++++++++----------- posgrados/assets/css/posgrados.less | 235 ++++++++++++++++++---------- posgrados/assets/js/bar.js | 32 ++-- posgrados/index.html | 157 +++++++++---------- 4 files changed, 368 insertions(+), 272 deletions(-) diff --git a/posgrados/assets/css/posgrados.css b/posgrados/assets/css/posgrados.css index bf3bd36..601caf7 100644 --- a/posgrados/assets/css/posgrados.css +++ b/posgrados/assets/css/posgrados.css @@ -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; @@ -787,100 +781,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 ========== */ diff --git a/posgrados/assets/css/posgrados.less b/posgrados/assets/css/posgrados.less index a88cfc9..2b3c6ca 100644 --- a/posgrados/assets/css/posgrados.less +++ b/posgrados/assets/css/posgrados.less @@ -732,9 +732,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%; @@ -751,11 +750,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; @@ -973,99 +967,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; @@ -1077,15 +1089,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; + } } } } @@ -1095,10 +1160,6 @@ Last section } -/* ========== -Last section -========== */ - /* ========== Footer ========== */ diff --git a/posgrados/assets/js/bar.js b/posgrados/assets/js/bar.js index 92cc5ac..10a2ace 100644 --- a/posgrados/assets/js/bar.js +++ b/posgrados/assets/js/bar.js @@ -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); }); diff --git a/posgrados/index.html b/posgrados/index.html index 9a44cfe..2966cf6 100644 --- a/posgrados/index.html +++ b/posgrados/index.html @@ -69,11 +69,11 @@ -
-
+
+
-
+

Doctorado en Artes y Diseño

@@ -97,7 +97,7 @@
-
+

Contacto

@@ -134,7 +134,7 @@
-

Dirigido a:

@@ -191,96 +191,89 @@
-
+
-
-
-

Líneas de investigación

-
-
-

Perfiles

-
-
-

Requisitos de Ingreso

-
-
-

Obtención de grado

-
+
+

Líneas de investigación

+

Perfiles

+

Requisitos de ingreso

+

Obtención de grado

-
+
+ +
-
-
-

Líneas de investigación

-

Grado que se ortoga:

-
    -
  • Doctor en artes y diseño
    • -
-

Para obtener el grado de Doctor en Artes y Diseño se requiere cubir lo siguiente:

-
    -
  • Haber acreditado las actividades académicas previstas en los planes de trabajo semestrales en los plazos establecidos
    • -
  • Haber recibido evaluaciones semestrales favorables de parte del comité tutor o plan de trabajo
    • -
  • Haber obtenido la candidatura al grado de doctor, emitida por el comité academico
    • -
  • 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
    • -
-
-
- -
-

Perfiles

-

Subtítulo 1

-
    -
  • Elemento 1
    • -
-

Subtítulo 2

-
    -
  • Elemento 3
    • -
  • Elemento 4
    • -
  • Elemento 5
    • -
  • Elemento 6
    • -
-
-
-

Requisitos de ingreso

-

Subtítulo 1

-
    -
  • Elemento 1
    • -
-

Subtítulo 2

-
    -
  • Elemento 3
    • -
  • Elemento 4
    • -
  • Elemento 5
    • -
  • Elemento 6
    • -
-
-
-

Obtención de grado

-

Subtítulo 1

-
    -
  • Elemento 1
    • -
-

Subtítulo 2

-
    -
  • Elemento 3
    • -
  • Elemento 4
    • -
  • Elemento 5
    • -
  • Elemento 6
    • -
-
- +
+

Líneas de investigación

+

Grado que se otorga:

+
    +
  • Doctor en artes y diseño
    • +
+

Para obtener el grado en Doctor en Artes y Diseño se requiere cubrir lo siguiente:

+
    +
  • Haber acreditado las actividades académicas previstas en los planes de trabajo semestrales en los plazos establecidos.
    • +
  • Haber recibido evaluaciones semestrales favorables de parte del comité tutor al plan de trabajo.
    • +
  • Haber obtenido la candidatura al grado de Doctor, emitida por el Comité Academico.
    • +
  • 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.
    • +
+
+
+

Perfiles

+

Subtítulo 2

+
    +
  • Elemento 1
    • +
+

Subtítulo 2

+
    +
  • Elemento 2
    • +
  • Elemento 3
    • +
  • Elemento 4
    • +
  • Elemento 5
    • +
+
+
+

Requisitos de ingreso

+

Subtítulo 3

+
    +
  • Elemento 1
    • +
+

Subtítulo 3

+
    +
  • Elemento 2
    • +
  • Elemento 3
    • +
  • Elemento 4
    • +
  • Elemento 5
    • +
+
+
+

Obtención de grado

+

Subtítulo 4

+
    +
  • Elemento 1
    • +
+

Subtítulo 4

+
    +
  • Elemento 2
    • +
  • Elemento 3
    • +
  • Elemento 4
    • +
  • Elemento 5
    • +
+
+
+
+ + +