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

add responsive

Browse Source
This commit is contained in:
Lino
2024-08-19 11:49:04 -06:00
parent 47776749f9
commit 3ea00e5c3e
3 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
licenciaturas/assets/css/licenciaturas.css
+8 -3
View File
@@ -23,11 +23,12 @@ main
display: flex;
justify-content: space-evenly;
position: relative;
text-align: center;
text-align: start;
gap: 40px;
margin-bottom: 20px;
}
/* Time line */
.time-line{
list-style: none;
@@ -99,6 +100,7 @@ main
/* Info estudiante / profesional */
.ul-points{
text-align: start;
list-style: none;
}
.ul-points li{
@@ -126,7 +128,7 @@ main
height: 200%;
border: 2px solid #b0b0b9;
top: -10px;
right: 50px;
right: 1rem;
}
.select{
color: #1e3c6f;
@@ -139,7 +141,7 @@ main
height: 200%;
border: 2px solid #1e3c6f;
top: -10px;
right: 50px;
right: 1rem;
}
.header-campo-plan h3{
@@ -181,6 +183,9 @@ main
#main .container {
flex-wrap: wrap;
}
#main .container div{
width: 100%;
}
.info {
flex-wrap: wrap;
}
licenciaturas/assets/licenciaturas.js
+38
View File
@@ -0,0 +1,38 @@
//nav of change manager
let opcionPlanEstudio06 = document.getElementById('opcionPlan06');
let opcionPlanEstudios14 = document.getElementById('opcionPlan14');
let opcionCampoLaboral = document.getElementById('opcionCampo');
let infoPlanEstudios06 = document.getElementById('planEstudios06');
let infoPlanEstudios14 = document.getElementById('planEstudios14');
let infoCampoLaboral = document.getElementById('campoLaboral');
function actualizarVista(seleccionado, infoMostrar) {
// hide all information elements
infoCampoLaboral.className = 'd-none';
infoPlanEstudios06.className = 'd-none';
infoPlanEstudios14.className = 'd-none';
// show selected items
infoMostrar.className = 'd-block';
// resets button classes
opcionPlanEstudio06.className = 'campo-plan-opcion';
opcionPlanEstudios14.className = 'campo-plan-opcion';
opcionCampoLaboral.className = 'campo-plan-opcion';
// set active on selected button
seleccionado.className = 'select campo-plan-opcion';
}
opcionPlanEstudio06.addEventListener('click', () => {
actualizarVista(opcionPlanEstudio06, infoPlanEstudios06);
});
opcionPlanEstudios14.addEventListener('click', () => {
actualizarVista(opcionPlanEstudios14, infoPlanEstudios14);
});
opcionCampoLaboral.addEventListener('click', () => {
actualizarVista(opcionCampoLaboral, infoCampoLaboral);
});
licenciaturas/index.html
+7 -48
View File
@@ -162,7 +162,7 @@
<div class="mainfooter">
<!-- Perfil - Caracteristicas -->
<div class="d-flex justify-content-evenly mt-5">
<div class="d-flex justify-content-evenly mt-5 container">
<!-- Perfil -->
<div class="col-5">
<h5 class="d-flex align-items-center gap-1">
@@ -224,9 +224,9 @@
</div>
<!-- Info - Campo laboral / Plan de estudios -->
<div class="d-flex mt-5 mb-5">
<div class="d-flex mt-5 mb-5 container">
<div class="col-3">
<ul class="ul-points ms-3 d-flex flex-column gap-4">
<ul class="ul-points d-flex flex-column gap-4">
<li id="opcionCampo" class="select campo-plan-opcion">Campo laboral</li>
<li id="opcionPlan06" class="campo-plan-opcion">Plan de Estudios 2006</li>
<li id="opcionPlan14" class="campo-plan-opcion">Plan de Estudios 2014</li>
@@ -389,7 +389,7 @@
Despachos de: consultoría actuarial, de estadística y de finanzas.
</li>
</ul>
<p class="mt-5 me-5 mb-5 pe-5">
<p class="d-flex mt-5">
El egresado de esta carrera tiene la posibilidad de crear su trabajo independiente, pero esto, como todo esfuerzo individual,
requiere de capital, tiempo y de una buena cartera de clientes. No obstante, la labor profesional en esta modalidad es frecuente
entre los actuarios.
@@ -401,7 +401,7 @@
<div class="header-campo-plan mb-3">
<h3 class="pb-2">Plan de Estudios 2006</h3>
</div>
<ul class="style-none d-flex flex-wrap gap-5 list-plan">
<ul class="style-none d-flex flex-wrap gap-5 list-plan justify-content-center">
<li>
Primer semestre
<ul class="text-dark style-none ul-points">
@@ -739,7 +739,7 @@
<div class="header-campo-plan mb-3">
<h3 class="pb-2">Plan de Estudios 2014</h3>
</div>
<ul class="style-none d-flex flex-wrap gap-5 list-plan">
<ul class="style-none d-flex flex-wrap gap-5 list-plan justify-content-center">
<li>
Primer semestre
<ul class="text-dark style-none ul-points">
@@ -1175,47 +1175,6 @@
<!-- Main JS -->
<script src="../assets/js/main.js"></script>
<script>
let opcionPlanEstudio06 = document.getElementById('opcionPlan06');
let opcionPlanEstudios14 = document.getElementById('opcionPlan14');
let opcionCampoLaboral = document.getElementById('opcionCampo');
let infoPlanEstudios06 = document.getElementById('planEstudios06');
let infoPlanEstudios14 = document.getElementById('planEstudios14');
let infoCampoLaboral = document.getElementById('campoLaboral');
function actualizarVista(seleccionado, infoMostrar) {
// Ocultar todos los elementos de información
infoCampoLaboral.className = 'd-none';
infoPlanEstudios06.className = 'd-none';
infoPlanEstudios14.className = 'd-none';
// Mostrar el elemento seleccionado
infoMostrar.className = 'd-block';
// Restablecer las clases de los botones
opcionPlanEstudio06.className = 'campo-plan-opcion';
opcionPlanEstudios14.className = 'campo-plan-opcion';
opcionCampoLaboral.className = 'campo-plan-opcion';
// Establecer la clase activa en el botón seleccionado
seleccionado.className = 'select campo-plan-opcion';
}
opcionPlanEstudio06.addEventListener('click', () => {
actualizarVista(opcionPlanEstudio06, infoPlanEstudios06);
});
opcionPlanEstudios14.addEventListener('click', () => {
actualizarVista(opcionPlanEstudios14, infoPlanEstudios14);
});
opcionCampoLaboral.addEventListener('click', () => {
actualizarVista(opcionCampoLaboral, infoCampoLaboral);
});
</script>
<script src="./assets/licenciaturas.js"></script>
</body>
</html>