From f1afe160086b8e4edfcb2c1f445d1daa6c8c66e1 Mon Sep 17 00:00:00 2001
From: Duncan Zuriel Suriano <kattosg@localhost.localdomain>
Date: Thu, 29 Aug 2024 12:46:30 -0600
Subject: [PATCH] =?UTF-8?q?Agregaci=C3=B3n=20del=20tab-pane?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 idiomas/assets/css/idiomas.css |  59 +++++++++++++-----
 idiomas/index.html             | 105 ++++++++++++++++++++++-----------
 2 files changed, 117 insertions(+), 47 deletions(-)

diff --git a/idiomas/assets/css/idiomas.css b/idiomas/assets/css/idiomas.css
index 09e88e2..e40d708 100644
--- a/idiomas/assets/css/idiomas.css
+++ b/idiomas/assets/css/idiomas.css
@@ -108,19 +108,20 @@
         padding: 0px;
         border: none;
         padding: 8px;
-    } 
-    
-} 
+    }
+
+}
 
 #idioma .text-container {
-    padding: 3rem; 
-} 
+    padding: 3rem;
+}
+
 #idioma .transparent-cart {
     padding: 1rem;
-    background: rgba(109, 107, 107, 0.568); 
-    border-radius: 5px;   
-    height: 100%; 
-} 
+    background: rgba(109, 107, 107, 0.568);
+    border-radius: 5px;
+    height: 100%;
+}
 
 #idioma .cta-btn {
     font-weight: 600;
@@ -139,21 +140,51 @@
     background: #1e3c70;
     border-color: #1e3c70;
     color: #fff;
-} 
+}
 
 #Contacto .table th {
     text-align: center;
-    background-color: #1e3c70; 
+    background-color: #1e3c70;
     color: rgb(255, 255, 255);
 }
 
-#Contacto .table tr td{
-    color:#1e3c70; 
+#Contacto .table tr td {
+    color: #1e3c70;
     text-align: center;
-} 
+}
+
 #Contacto .container {
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
 }
+
+.line {
+    position: relative;
+}
+
+.line ::before {
+    content: "";
+    background-color: #bb8800;
+    display: inline-block;
+    width: 3px;
+    height: 100%;
+    left: -1rem;
+    position: absolute;
+    padding-top: 1rem;
+    z-index: 400;
+}
+
+.line ::after {
+    content: "";
+    background-color: #fff;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: -19px;
+    width: 10px;
+    height: 10px;
+    z-index: 999;
+    border: 1px solid #1e3c70;
+}
\ No newline at end of file
diff --git a/idiomas/index.html b/idiomas/index.html
index 41299b2..63ad973 100644
--- a/idiomas/index.html
+++ b/idiomas/index.html
@@ -74,14 +74,21 @@
         <div class="col-lg-6 col-sm-12">
           <h1 class="" style="text-align: justify; color: white;">Idiomas Acatlán</h1>
           <h2 style="text-align: justify;"><span>Cursos Regulares y Cursos Sabatinos</span></h2>
-          <h3 style="color: rgba(255, 255, 255); text-align: justify;">Objetivo</h3>
-          <p style="color: rgba(255, 255, 255); text-align: justify; font-size: medium;">
-            El centro de enseñanzas de idiomas (CEI) de la FES Acatlán tiene como obejtivo contribuir a la
-            formación integral de la comunidad interna y externa de la Facultad a través de la enseñanza de idiomas.
-            En esta labor, se incorporan actividades culturales en la lengua meta; en ella los alumnos practican
-            el idioma y conocen la cultura de estos pueblos mientras disfrutan de las expresiones artisticas como danza,
-            música, literatura, teatro, cine y muestras gastronómicas.
-          </p>
+          <h3 class="text-white d-flex aling-items-center gap_1 pt-3"
+            style="color: rgba(255, 255, 255); text-align: justify;">
+            <i class="bx bx-book-reader bx-flip-horizontal bx-md"></i>
+            Objetivo
+          </h3>
+          <div class="line">
+            <p style="color: rgba(255, 255, 255); text-align: justify; font-size: medium;">
+              El centro de enseñanzas de idiomas (CEI) de la FES Acatlán tiene como obejtivo contribuir a la
+              formación integral de la comunidad interna y externa de la Facultad a través de la enseñanza de idiomas.
+              En esta labor, se incorporan actividades culturales en la lengua meta; en ella los alumnos practican
+              el idioma y conocen la cultura de estos pueblos mientras disfrutan de las expresiones artisticas como
+              danza,
+              música, literatura, teatro, cine y muestras gastronómicas.
+            </p>
+          </div>
         </div>
         <div class="col-lg-6 col-sm-12 justify-content-center">
           <div class="transparent-cart">
@@ -144,7 +151,7 @@
   <section id="Centro" class="d-flex align-items-center justify-content-center">
     <div class="container">
       <div class="row">
-        <div class="col-lg-6 col-sm-12">
+        <div class="col-lg-6 col-sm-12 line">
           <h5 style="color: #bb8800; font-weight: 700;">Centro de Enseñanzas de Idiomas</h5>
           <h6 style="color: #1e3c70; font-weight: 600;">Correo de Contacto</h6>
           <h6 style="color: #1e3c70; font-weight: 600;">Secretaria Auxiliar:</h6>
@@ -175,26 +182,29 @@
             El CEI ofrece cursos regulares (entre semana) y sabatinos, en ellos puedes estudiar las siguientes
             lenguas:
           </p>
-          <div class="tab-content">
-            <ul class="nav justify-content-center">
-              <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="#" style="text-align: center;">
-                  Cursos Regulares
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#" style="text-align: center;">
-                  Cursos Sabatinos
-                </a>
-              </li>
-            </ul> 
-            <div class="tab-pane fade show active" id="home" role="tabpanel">
-              <p></p>
+          <ul class="nav tabs" id="myTab" role="tablist">
+            <li class="nav-item">
+              <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
+                aria-selected="true">
+                Cursos Regulares
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
+                aria-selected="false">
+                Sabatinos
+              </a>
+            </li>
+          </ul>
+          <div class="tab-content mt-2" id="myTabContent">
+            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+              <h4>Contenido de Tab 1</h4>
+              <p>Este es el contenido que aparece cuando seleccionas la primera pestaña.</p>
             </div>
-            <div class="tab-pane fade" id="profile" role="tabpanel">
-              <p></p>
+            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+              <h4>Contenido de Tab 2</h4>
+              <p>Este es el contenido que aparece cuando seleccionas la segunda pestaña.</p>
             </div>
-          
           </div>
         </div>
       </div>
@@ -227,7 +237,7 @@
             <li class="nav-item">
               <a class="nav-link active" data-toggle="tab" href="#tab-7">Contacto</a>
             </li>
-          </ul> 
+          </ul>
           <!-- <ul class="nav nav-pills">
             <nav class="nav nav-pills flex-column flex-sm-row">
               <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Nuestros Idiomas</a>
@@ -288,10 +298,10 @@
               <tr>
                 <td>Italiano y Latín</td>
                 <td>
-                  iatliano@acatlan.unam.mx
-                <br>
-                WhatsApp: 5549266745
-              </td>
+                  italiano@acatlan.unam.mx
+                  <br>
+                  WhatsApp: 5549266745
+                </td>
               </tr>
               <tr>
                 <td>Finés y Portugués</td>
@@ -395,7 +405,36 @@
 
   <!-- Main JS -->
   <script src="../assets/js/main.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
+
+<!-- <section class="container">
+  <div class="row">
+    <div class="col-12 col-lg-6"></div>
+    <div class="col-12 col-lg-6">
+      <ul class="nav tabs" id="myTab" role="tablist">
+        <li class="nav-item">
+          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
+            aria-selected="true">Cursos Regulares</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
+            aria-selected="false">Sabatinos</a>
+        </li>
+      </ul>
+      <div class="tab-content mt-2" id="myTabContent">
+        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+          <h4>Contenido de Tab 1</h4>
+          <p>Este es el contenido que aparece cuando seleccionas la primera pestaña.</p>
+        </div>
+        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+          <h4>Contenido de Tab 2</h4>
+          <p>Este es el contenido que aparece cuando seleccionas la segunda pestaña.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section> -->
\ No newline at end of file