Career section style update

licenciaturas/assets/css/licenciaturas.css

@@ -27,6 +27,37 @@ main
   gap: 40px;
   margin-bottom: 20px;
 }
+
+.time-line{
+  list-style: none;
+  position: relative;
+}
+.time-line::before{
+  content: '';
+  background: #bb8800;
+  display: inline-block;
+  position: absolute;
+  width: 5px;
+  height: 100%;
+  left: 20px;
+  z-index: 400;
+}
+.time-line > li::before{
+  content: '';
+  background: #fff;
+  display: inline-block;
+  position: absolute;
+  border-radius: 50%;
+  left: 15px;
+  width: 15px;
+  height: 15px;
+  z-index: 400;
+}
+.enfasis{
+  color: #bb8800;
+  font-weight: bold;
+}
+
 .dropdowm{
   max-width: 200px;
 }
@@ -64,4 +95,4 @@ main
     font-size: 18px;
     line-height: 36px;
   }
-}
+}

licenciaturas/index.html

@@ -84,34 +84,53 @@
     <main id="main">
       <div class="container" data-aos="fade-up">
 
+        <!-- Carrera - Objetivo -->
         <div
-        class=" justify-content-center"
+        class=" justify-content-center col-6"
         data-aos="fade-up"
         data-aos-delay="150"
-      >
-        <div class="col-12 bg-opacity-50 rounded-3 text-start text-white">
-          <h4 class="mb-3"><strong>Actuaria</strong></h5>
+        >
+          <div class="col-12 bg-opacity-50 rounded-3 text-start text-white">
+          <h4 class="mb-3"><strong>Actuaria</strong></h4>
 
-          <i>
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut
-            obcaecati reiciendis sequi similique at unde voluptas odit atque
-            excepturi et!
-          </i>
+          <ul class="time-line">
+            <li class="ps-2">
+              <strong class="d-flex gap-1"> 
+                <p class="enfasis">Clave de carrera:</p>   
+                203
+              </strong>
+              <strong class="d-flex gap-1"> 
+                <p class="enfasis">Duración:</p> 
+                4 años / 8 Semestres 
+              </strong>
+            </li>
+          </ul>
 
-          <h4>ipsum dolor sit.</h4>
-          <b>
-            Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat,
-            laborum
-          </b>
+          <h5 class="text-white d-flex align-items-center gap-1 pt-3">
+            <i class='bx bx-book-reader bx-flip-horizontal bx-md'></i>
+            Objetivo
+          </h5>
+          <ul class="time-line">
+            <li class="ps-2 text-start">
+              Desarrollar un razonamiento analítico mediante la aplicación
+              creativa de los principios cientificos, siendo capaz de estudiar,
+              plantear, formular, aplicar modelos de contenido matemático, con el fin
+              de proveer información para la planeación, previsión y toma de decisiones;
+              además de desarrollar y aplicar conocimientos y herramientas matemáticas para
+              analizar, evaluar y resolver problemas económicos y sociales que involucran riesgos.
+            </li>
+          </ul>
+
+          </div>
         </div>
-      </div>
 
+        <!-- Contacto -->
         <div
-          class="justify-content-center"
+          class="justify-content-center col-11"
           data-aos="fade-up"
           data-aos-delay="150"
         >
-          <div class="col-12 bg-light bg-opacity-50 rounded-3 text-start p-5">
+          <div class="col-6 bg-light bg-opacity-50 rounded-3 text-start p-5">
             <h5 class="mb-3"><strong>Contacto</strong></h5>
             <ul class="style-none">
               <li>Lorem, ipsum dolor.</li>
@@ -123,18 +142,17 @@
             <h6><strong> ipsum dolor sit amet.</strong></h6>
             <i>
               Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut
-              obcaecati reiciendis sequi similique at unde voluptas odit atque
-              excepturi et!
             </i>
 
             <h6><strong> ipsum dolor sit.</strong></h6>
             <i>
-              Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat,
-              laborum.
+              Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet consectetur
             </i>
           </div>
         </div>
+
       </div>
+
       <div class="mainfooter">
 
         <div class="info">