Inicio de logotipos y arreglos

assets/css/main.css

@@ -130,6 +130,37 @@ section .section-h h2:after {
     width: 650px;
   }
 }
+.home .cont-prin .div-flex .active {
+  color: #bb8800;
+}
+@media (max-width: 992px) {
+  .home .cont-prin .div-flex {
+    display: block;
+  }
+  .home .cont-prin .div-flex .active {
+    border-bottom: 2px solid #bb8800;
+  }
+}
+@media (min-width: 993px) {
+  .home .cont-prin .div-flex {
+    display: flex;
+  }
+  .home .cont-prin .div-flex .line {
+    border-bottom: 2px solid #bb8800;
+  }
+  .home .cont-prin .div-flex .boxx nav .nav-item {
+    margin-top: 10px;
+  }
+  .home .cont-prin .div-flex .boxx .nav {
+    width: 170px;
+  }
+}
+@media (max-width: 992px) {
+  .home .cont-prin .div-flex .normal .nav-link {
+    border: 0;
+    padding: 10px;
+  }
+}
 /* Globales */
 .nav-g a {
   color: #bb8800;
@@ -229,6 +260,7 @@ section .section-h h2:after {
   transition: 0.3s;
   display: inline-block;
   line-height: 1;
+  text-decoration: none;
 }
 #footer .footer-top .footer-links ul a:hover {
   color: #ffc451;

assets/css/main.less

@@ -95,7 +95,7 @@ section {
             color: #bb8800;
           }
         }
-      } 
+      }
     }
     .content-galery {
       padding: 0;
@@ -129,17 +129,46 @@ section {
         border-radius: 5px;
       }
       div audio {
-        padding: 10vh 0 !important; 
+        padding: 10vh 0 !important;
       }
       div img {
         border-radius: 5px;
       }
-      @media(width>992px){
+      @media (width>992px) {
         div audio {
           width: 650px;
         }
       }
     }
+    .div-flex {
+      .active {
+        color: #bb8800;
+      }
+      @media (max-width: 992px) {
+        display: block;
+        .active {
+          border-bottom: 2px solid #bb8800;
+        }
+      }
+      @media (min-width: 993px) {
+          display: flex;
+         .line {
+          border-bottom: 2px solid #bb8800;
+        }
+         .boxx nav .nav-item {
+          margin-top: 10px;
+        }
+         .boxx .nav {
+          width: 170px;
+        }
+      }
+      @media (max-width: 992px) {
+       .normal .nav-link {
+          border: 0;
+          padding: 10px;
+        }
+      }
+    }
   }
 }
 
@@ -249,6 +278,7 @@ section {
   transition: 0.3s;
   display: inline-block;
   line-height: 1;
+  text-decoration: none;
 }
 #footer .footer-top .footer-links ul a:hover {
   color: #ffc451;

himno-D.html

@@ -130,7 +130,7 @@
               Himno Deportivo
             </h2>
           </div>
-          <div class="row">
+          <div class="row cont-center">
             <div class="col-4">
               <p>
                 ¡Oh Universidad! <br>

logotipos.html

@@ -20,8 +20,12 @@
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-    /> 
-    <link rel="stylesheet" href="assets/Ext/glightbox/css/glightbox.min.css">
+    />
+    <link rel="stylesheet" href="assets/Ext/glightbox/css/glightbox.min.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
 
     <!-- Main CSS  -->
     <link rel="stylesheet" href="./assets/css/main.css" />
@@ -131,6 +135,67 @@
               Logotipos
             </h2>
           </div>
+          <div class="div-flex">
+            <div class="col-12 col-md-4">
+              <ul class="nav nav-tabs" id="myTab" role="tablist">
+                <li class="nav-item" role="presentation">
+                  <a
+                    class="nav-link active"
+                    id="logotipos-tab"
+                    data-bs-toggle="tab"
+                    href="#logotipos"
+                    role="tab"
+                    aria-controls="logotipos"
+                    aria-selected="true"
+                    >Logotipos</a
+                  >
+                </li>
+                <li class="nav-item" role="presentation">
+                  <a
+                    class="nav-link"
+                    id="escudos-tab"
+                    data-bs-toggle="tab"
+                    href="#escudos"
+                    role="tab"
+                    aria-controls="escudos"
+                    aria-selected="false"
+                    >Escudos</a
+                  >
+                </li>
+              </ul>
+            </div>
+            <div class="col-12 col-md-8">
+              <div class="tab-content" id="myTabContent">
+                <!-- Contenido de la pestaña Inicio -->
+                <div
+                  class="tab-pane fade show active"
+                  id="logotipos"
+                  role="tabpanel"
+                  aria-labelledby="home-tab"
+                >
+                  <h5>Contenido de la pestaña "Inicio"</h5>
+                  <p>
+                    Este es el contenido de la pestaña "Inicio". Puedes agregar
+                    cualquier tipo de contenido aquí.
+                  </p>
+                </div>
+                <!-- Contenido de la pestaña Perfil -->
+                <div
+                  class="tab-pane fade"
+                  id="escudos"
+                  role="tabpanel"
+                  aria-labelledby="profile-tab"
+                >
+                  <h5>Contenido de la pestaña "Perfil"</h5>
+                  <p>
+                    Este es el contenido de la pestaña "Perfil". Aquí puedes
+                    agregar información sobre el perfil del usuario o lo que
+                    desees.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
     </main>
@@ -230,5 +295,6 @@
     </script>
     <script src="assets/js/main.js"></script>
     <script src="assets/Ext/glightbox/js/glightbox.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
   </body>
 </html>