styles update

licenciaturas/assets/css/licenciaturas.css

@@ -26,9 +26,10 @@ main
 }
 #main .container {
   display: flex;
+  gap: 10px;
+
   position: relative;
   text-align: start;
-  gap: 100px;
   margin-bottom: 30px;
 }
 /* Time line */
@@ -36,6 +37,9 @@ main
   list-style: none;
   position: relative;
 }
+.time-line > li{
+  max-width: 95%;
+}
 .time-line::before{
   content: '';
   background: #bb8800;
@@ -67,6 +71,9 @@ main
 .contact{
   position: relative;
 }
+.contact p{
+  max-width: 95%;
+}
 .contact-wrapper::before{
   content: '';
   display: inline-block;
@@ -96,7 +103,9 @@ main
 .mainfooter {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 10px;
+
   background-color: white;
 }
 
@@ -109,6 +118,7 @@ main
   display: flex;
   align-items: flex-start;
   font-weight: normal;
+  max-width: 95%;
 }
 .ul-points li i{
   color: #bb8800;
@@ -233,4 +243,4 @@ main
     padding-bottom: 30px;
     padding-right: 30px;
   }
-}
+}

licenciaturas/assets/licenciaturas.js

@@ -1,25 +1,25 @@
 //nav of change manager
-let opcionPlanEstudio06 = document.getElementById('opcionPlan06');
-let opcionPlanEstudios14 = document.getElementById('opcionPlan14');
-let opcionCampoLaboral = document.getElementById('opcionCampo');
+let opcionUno = document.getElementById('opcionUno');
+let opcionDos = document.getElementById('opcionDos');
+let opcionTres = document.getElementById('opcionTres');
 
-let infoPlanEstudios06 = document.getElementById('planEstudios06');
-let infoPlanEstudios14 = document.getElementById('planEstudios14');
-let infoCampoLaboral = document.getElementById('campoLaboral');
+let infoUno = document.getElementById('campoUno');
+let infoDos = document.getElementById('campoDos');
+let infoTres = document.getElementById('campoTres');
 
 function actualizarVista(seleccionado, infoMostrar) {
   // hide all information elements
-  infoCampoLaboral.className = 'd-none';
-  infoPlanEstudios06.className = 'd-none';
-  infoPlanEstudios14.className = 'd-none';
+  infoUno.className = 'd-none';
+  infoDos.className = 'd-none';
+  infoTres.className = 'd-none';
 
   // show selected items
-  infoMostrar.className = 'd-block';
+  infoMostrar.className = 'col-9 contact ms-3 d-block';
 
   // resets button classes
-  opcionPlanEstudio06.className = 'campo-plan-opcion';
-  opcionPlanEstudios14.className = 'campo-plan-opcion';
-  opcionCampoLaboral.className = 'campo-plan-opcion';
+  opcionDos.className = 'campo-plan-opcion';
+  opcionTres.className = 'campo-plan-opcion';
+  opcionUno.className = 'campo-plan-opcion';
 
   // set active on selected button
   seleccionado.className = 'select campo-plan-opcion';
@@ -28,14 +28,14 @@ function actualizarVista(seleccionado, infoMostrar) {
   window.scrollBy(0,1);
 }
 
-opcionPlanEstudio06.addEventListener('click', () => {
-  actualizarVista(opcionPlanEstudio06, infoPlanEstudios06);
+opcionDos.addEventListener('click', () => {
+  actualizarVista(opcionDos, infoDos);
 });
 
-opcionPlanEstudios14.addEventListener('click', () => {
-  actualizarVista(opcionPlanEstudios14, infoPlanEstudios14);
+opcionTres.addEventListener('click', () => {
+  actualizarVista(opcionTres, infoTres);
 });
 
-opcionCampoLaboral.addEventListener('click', () => {
-  actualizarVista(opcionCampoLaboral, infoCampoLaboral);
+opcionUno.addEventListener('click', () => {
+  actualizarVista(opcionUno, infoUno);
 });

licenciaturas/index.html

@@ -162,9 +162,9 @@
       <div class="mainfooter">
         
         <!-- Perfil - Caracteristicas -->
-        <div class="d-flex mt-5 container">
+        <section class="d-flex mt-5 container p-0">
           <!-- Perfil -->
-          <div class="col-5">
+          <div class="col-6">
             <h5 class="d-flex align-items-center gap-1">
               <i class='bx bx-book-reader bx-flip-horizontal bx-sm'></i>
               Perfil del profesionalista
@@ -186,7 +186,7 @@
           </div>
 
           <!-- Caracteristicas -->
-          <div class="col-5">
+          <div class="col-6">
             <h5 class="d-flex align-items-center gap-1">
               <i class='bx bx-book-reader bx-flip-horizontal bx-sm'></i>
               Características y habilidades del estudiante
@@ -194,7 +194,7 @@
             <ul class="time-line">
               <li class="ps-2">
                 Es importante que el aspirante posea:
-                <ul class="d-flex flex-column gap-2 mt-2">
+                <ul class="d-flex flex-column gap-2 mt-2 p-0">
                   <li class="ul-points d-flex align-items-start ">
                     <i class='bx bx-chevron-right bx-sm'></i>
                     Capacidad para la concentración y el trabajo durante largos periodos de tiempo.
@@ -221,24 +221,24 @@
 
           </div>
 
-        </div>
+        </section>
 
         <!-- Info - Campo laboral / Plan de estudios -->
-        <div class="d-flex mb-5 container ">
+        <section class="d-flex mb-5 container p-0 mt-5">
           <div class="col-3 nav-campo-plan">
             <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>
+              <li id="opcionUno" class="select campo-plan-opcion">Campo laboral</li>
+              <li id="opcionDos" class="campo-plan-opcion">Plan de Estudios 2006</li>
+              <li id="opcionTres" class="campo-plan-opcion">Plan de Estudios 2014</li>
             </ul>
           </div>
 
           <!-- Campo Laboral -->
           <div
-            class="col-9 contact"
+            class="col-9 contact ms-3"
             data-aos="fade-right"
             data-aos-delay="100"
-            id="campoLaboral"
+            id="campoUno"
           >
             <section class="p-0">
               <div class="header-campo-plan">
@@ -395,7 +395,7 @@
                     Despachos de: consultoría actuarial, de estadística y de finanzas.
                   </li>
               </ul>
-              <p class="d-flex mt-5">
+              <p class="mt-5 p-2">
                 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.
@@ -405,10 +405,10 @@
 
           <!-- Plan de estudios 2006 -->
           <div
-            class="col-9 contact d-none"
+            class="d-none"
             data-aos="fade-right"
             data-aos-delay="100"
-            id="planEstudios06"
+            id="campoDos"
           >
             <section class="p-0">
               <div class="header-campo-plan mb-3">
@@ -750,10 +750,10 @@
 
           <!-- Plan de estudios 2014 -->
           <div
-            class="col-9 contact d-none"
+            class="d-none"
             data-aos="fade-right"
             data-aos-delay="100"
-            id="planEstudios14"
+            id="campoTres"
           >
             <section class="p-0">
               <div class="header-campo-plan mb-3">
@@ -1125,7 +1125,7 @@
             </section>
           </div>
 
-        </div>
+        </section>
 
       </div>
     </main>