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

se genero todos los apartados, se agrega responsive, unicamente falta colocar la informacion

Browse Source
This commit is contained in:
David19735
2024-08-20 03:32:25 -06:00
parent 28afe466bc
commit 732ea45319
4 changed files with 302 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
posgrados/assets/css/posgrados.css
+80
View File
@@ -640,6 +640,7 @@ Hero
top: 15px;
left: 8px;
border-radius: 5px;
opacity: 0.7;
}
#hero #hero_container #information #box-information2 #information-2-card::after {
content: '';
@@ -651,6 +652,7 @@ Hero
bottom: 15px;
right: 8px;
border-radius: 5px;
opacity: 0.7;
}
@media (max-width: 768px) {
#hero #hero_container {
@@ -782,6 +784,84 @@ Main
}
}
/* ==========
Last section
========== */
#section {
min-height: 70vh;
}
#section #section_container {
min-height: 65vh;
}
#section #section_container #section_container_col {
min-height: 65vh;
}
#section #section_container #section_container_col #degree1 {
display: flex;
justify-content: center;
align-items: center;
}
#section #section_container #section_container_col #degree1 .vertical-bar {
width: 100%;
/* Aumentado para acomodar el texto y 4 items */
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
}
#section #section_container #section_container_col #degree1 .vertical-bar .bar-item {
flex: 1;
cursor: pointer;
position: relative;
border-right: 3px solid rgba(35, 70, 131, 0.5);
/* Opacidad por defecto del borde derecho */
transition: border-right-color 0.3s ease, color 0.3s ease;
/* Transición para borde y texto */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
#section #section_container #section_container_col #degree1 .vertical-bar .bar-item .bar-item:last-child {
border-bottom: none;
}
#section #section_container #section_container_col #degree1 .vertical-bar .bar-item .bar-item:last-child .bar-item p {
margin: 0;
color: rgba(35, 70, 131, 0.5);
/* Color del texto por defecto */
transition: color 0.3s ease;
/* Transición para el color del texto */
}
#section #section_container #section_container_col #degree2 .info-display {
padding: 20px;
background-color: #fff;
flex: 1;
min-height: 100%;
}
#section #section_container #section_container_col #degree2 .info-display #info-title {
padding: 1rem 0;
border-bottom: 0.3rem solid #bb8800;
width: 70%;
color: #234683;
/* Color del título */
}
#section #section_container #section_container_col #degree2 .info-display #info-text {
color: #234683;
/* Color del texto */
}
#section #section_container #section_container_col #degree2 .info-display ul {
padding-left: 20px;
margin: 2rem 0;
color: #234683;
/* Color de la lista */
}
#section #section_container #section_container_col #degree2 .info-display ul li {
margin: 1rem 0;
/* Espaciado entre elementos de la lista */
}
/* ==========
Last section
========== */
/* ==========
Footer
========== */
#footer {
posgrados/assets/css/posgrados.less
+86
View File
@@ -766,6 +766,7 @@ Hero
top: 15px;
left: 8px;
border-radius: 5px;
opacity: 0.7;
}
&::after{
@@ -778,6 +779,7 @@ Hero
bottom: 15px;
right: 8px;
border-radius: 5px;
opacity: 0.7;
}
}
@@ -967,6 +969,90 @@ Main
}
/* ==========
Last section
========== */
#section{
min-height: 70vh;
#section_container{
min-height: 65vh;
#section_container_col{
min-height: 65vh;
#degree1{
display: flex;
justify-content: center;
align-items: center;
.vertical-bar {
width: 100%; /* Aumentado para acomodar el texto y 4 items */
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
.bar-item {
flex: 1;
cursor: pointer;
position: relative;
border-right: 3px solid rgba(35, 70, 131, 0.5); /* Opacidad por defecto del borde derecho */
transition: border-right-color 0.3s ease, color 0.3s ease; /* Transición para borde y texto */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
.bar-item:last-child {
border-bottom: none;
.bar-item p {
margin: 0;
color: rgba(35, 70, 131, 0.5); /* Color del texto por defecto */
transition: color 0.3s ease; /* Transición para el color del texto */
}
}
}
}
}
#degree2{
.info-display {
padding: 20px;
background-color: #fff;
flex: 1;
min-height: 100%;
#info-title {
padding: 1rem 0;
border-bottom: 0.3rem solid @color-prin;
width: 70%;
color: #234683; /* Color del título */
}
#info-text {
color: #234683; /* Color del texto */
}
ul {
padding-left: 20px;
margin: 2rem 0;
color: #234683; /* Color de la lista */
}
ul li {
margin: 1rem 0; /* Espaciado entre elementos de la lista */
}
}
}
}
}
}
/* ==========
Last section
========== */
/* ==========
Footer
========== */
posgrados/assets/js/bar.js
+74
View File
@@ -0,0 +1,74 @@
document.querySelectorAll('.bar-item').forEach((item, index) => {
item.addEventListener('click', function() {
// Eliminar la opacidad de 0.9 de todos los elementos y aplicar opacidad 0.5 por defecto
document.querySelectorAll('.bar-item').forEach(el => {
el.style.borderRightColor = 'rgba(35, 70, 131, 0.5)'; // Restablecer opacidad del borde a 0.5
el.querySelector('p').style.color = 'rgba(35, 70, 131, 0.5)'; // Restablecer color del texto a 0.5
});
// Cambiar la opacidad del borde derecho del elemento clicado a 0.9
const selectedOpacity = this.getAttribute('data-opacity');
this.style.borderRightColor = `rgba(35, 70, 131, ${selectedOpacity})`;
// Cambiar el color del texto del elemento clicado
this.querySelector('p').style.color = `rgba(35, 70, 131, ${selectedOpacity})`;
// Actualizar la información en el div de la derecha
const title = this.getAttribute('data-title');
const info = this.getAttribute('data-info');
const list1 = this.getAttribute('data-list1').split(', ');
const list2 = this.getAttribute('data-list2').split(', ');
document.getElementById('info-title').innerText = title;
document.getElementById('info-text').innerText = info;
// Actualizar la primera lista
const infoList1 = document.getElementById('info-list1');
infoList1.innerHTML = ''; // Limpiar lista
list1.forEach(item => {
const li = document.createElement('li');
li.innerText = item;
infoList1.appendChild(li);
});
// Actualizar la segunda lista
const infoList2 = document.getElementById('info-list2');
infoList2.innerHTML = ''; // Limpiar lista
list2.forEach(item => {
const li = document.createElement('li');
li.innerText = item;
infoList2.appendChild(li);
});
});
// Inicializar el primer elemento con color sin opacidad y agregar la clase activa
if (index === 0) {
item.style.borderRightColor = 'rgba(35, 70, 131, 0.9)'; // Primer div con opacidad 0.9
item.querySelector('p').style.color = 'rgba(35, 70, 131, 0.9)'; // Primer div con color 0.9
// Inicializar la información en el div de la derecha
const title = item.getAttribute('data-title');
const info = item.getAttribute('data-info');
const list1 = item.getAttribute('data-list1').split(', ');
const list2 = item.getAttribute('data-list2').split(', ');
document.getElementById('info-title').innerText = title;
document.getElementById('info-text').innerText = info;
// Actualizar la primera lista
const infoList1 = document.getElementById('info-list1');
list1.forEach(item => {
const li = document.createElement('li');
li.innerText = item;
infoList1.appendChild(li);
});
// Actualizar la segunda lista
const infoList2 = document.getElementById('info-list2');
list2.forEach(item => {
const li = document.createElement('li');
li.innerText = item;
infoList2.appendChild(li);
});
}
});
posgrados/index.html
+62 -2
View File
@@ -103,8 +103,7 @@
<h2><span><i class="bi bi-file-person-fill"></i> Contacto</span></h2>
<div>
<p><strong>Responsable del posgrado en Artes y Diseño (FES Acatlán)</strong></p>
<p><strong>Dr. Omar Lezáma Galindo</strong></p>
<p><strong>Responsable del posgrado en Artes y Diseño (FES Acatlán): <br>Dr. Omar Lezáma Galindo</strong></p>
<p><strong>Teléfono y fax:</strong> 56-23-17-50 ext.38860. Cubículo 36 primer piso del edifcio de Posgrado</p>
<p><strong>Correo Electrónico: <br></strong> <a href="">pada@acatlan.unam.mx</a></p>
</div>
@@ -188,6 +187,66 @@
</main><!-- End #main -->
<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="vertical-bar">
<div class="bar-item" data-opacity="0.9"
data-title="Línea de investigación"
data-info="Información sobre Item 1"
data-list1="Elemento 1A, Elemento 1B"
data-list2="Elemento 1C, Elemento 1D, Elemento 1E">
<p>Línea de investigación</p>
</div>
<div class="bar-item" data-opacity="0.9"
data-title="Perfiles"
data-info="Información sobre Item 2"
data-list1="Elemento 2A, Elemento 2B"
data-list2="Elemento 2C, Elemento 2D, Elemento 2E, Elemento 2F">
<p>Perfiles</p>
</div>
<div class="bar-item" data-opacity="0.9"
data-title="Requisitos de ingreso"
data-info="Información sobre Item 3"
data-list1="Elemento 3A, Elemento 3B"
data-list2="Elemento 3C, Elemento 3D, Elemento 3E, Elemento 3F">
<p>Requisitos de ingreso</p>
</div>
<div class="bar-item" data-opacity="0.9"
data-title="Obtención del grado"
data-info="Información sobre Item 4"
data-list1="Elemento 4A, Elemento 4B"
data-list2="Elemento 4C, Elemento 4D, Elemento 4E, Elemento 4F">
<p>Obtención del grado</p>
</div>
</div>
</div>
<div class="col" id="degree2" data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="1000">
<div class="info-display">
<h2 id="info-title">Item 1</h2>
<ul id="info-list1">
<!-- Lista 1 -->
</ul>
<p id="info-text">Información sobre Item 1</p>
<ul id="info-list2">
<!-- Lista 2 -->
</ul>
</div>
</div>
</div>
</div>
</section>
<!--End #last section-->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
@@ -260,6 +319,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="./assets/js/bar.js"></script>
<!-- Main JS -->
<script src="../assets/js/main.js"></script>