Ajuste de la página con boostrap y cambio de las extensiones de las i…

…mágenes por webp
jorgemar73 · Apr 22, 2024 · e8d1b4e · e8d1b4e
1 parent 7eb3e28
commit e8d1b4e
Show file tree

Hide file tree

Showing 99 changed files with 93 additions and 41 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -82,4 +82,4 @@ footer {
     .redes-sociales, .medios-pago {
         margin-top: 10px;
     }
-}
+}
diff --git a/img/carrusel/chicas1.JPG b/img/carrusel/chicas1.JPG
diff --git a/img/carrusel/chicas1.webp b/img/carrusel/chicas1.webp
diff --git a/img/carrusel/chicas2.jpg b/img/carrusel/chicas2.jpg
diff --git a/img/carrusel/chicas2.webp b/img/carrusel/chicas2.webp
diff --git a/img/carrusel/kids1.JPG b/img/carrusel/kids1.JPG
diff --git a/img/carrusel/kids1.webp b/img/carrusel/kids1.webp
diff --git a/img/carrusel/kids2.JPG b/img/carrusel/kids2.JPG
diff --git a/img/carrusel/kids2.webp b/img/carrusel/kids2.webp
diff --git a/img/carrusel/mma1.JPG b/img/carrusel/mma1.JPG
diff --git a/img/carrusel/mma1.webp b/img/carrusel/mma1.webp
diff --git a/img/carrusel/mma2.JPG b/img/carrusel/mma2.JPG
diff --git a/img/carrusel/mma2.webp b/img/carrusel/mma2.webp
diff --git a/img/clases/BJJ-kids.JPG b/img/clases/BJJ-kids.JPG
diff --git a/img/clases/BJJ-kids.webp b/img/clases/BJJ-kids.webp
diff --git a/img/clases/bjj-alcaldia.JPG b/img/clases/bjj-alcaldia.JPG
diff --git a/img/clases/bjj-alcaldia.webp b/img/clases/bjj-alcaldia.webp
diff --git a/img/clases/bjj-mañana.jpg b/img/clases/bjj-mañana.jpg
diff --git a/img/clases/bjj-mañana.webp b/img/clases/bjj-mañana.webp
diff --git a/img/clases/mma.JPG b/img/clases/mma.JPG
diff --git a/img/clases/mma.webp b/img/clases/mma.webp
diff --git a/img/equipo/Alison-Vargas.webp b/img/equipo/Alison-Vargas.webp
diff --git a/img/equipo/Danilo-Rodrigez.webp b/img/equipo/Danilo-Rodrigez.webp
diff --git a/img/equipo/Esperanza-Martinez.webp b/img/equipo/Esperanza-Martinez.webp
diff --git a/img/equipo/bjj-profe.JPG b/img/equipo/bjj-profe.JPG
diff --git a/img/equipo/foto-alison.JPG b/img/equipo/foto-alison.JPG
diff --git a/img/equipo/foto-esperanza.JPG b/img/equipo/foto-esperanza.JPG
diff --git a/img/equipo/foto-valentina.JPG b/img/equipo/foto-valentina.JPG
diff --git a/img/equipo/foto-valentina.webp b/img/equipo/foto-valentina.webp
diff --git a/img/eventos/podio-esperanza.jpg b/img/eventos/podio-esperanza.jpg
diff --git a/img/eventos/podio-juan.JPG b/img/eventos/podio-juan.JPG
diff --git a/img/eventos/seminario-joharez.JPG b/img/eventos/seminario-joharez.JPG
diff --git a/img/eventos/seminario-joharez2.JPG b/img/eventos/seminario-joharez2.JPG
diff --git a/img/logos/Jeimmy-villamil.JPG b/img/logos/Jeimmy-villamil.JPG
diff --git a/img/logos/Jeimmy-villamil.webp b/img/logos/Jeimmy-villamil.webp
diff --git a/img/logos/Logo-CIMA.jpg b/img/logos/Logo-CIMA.jpg
diff --git a/img/logos/Logo-CIMA.webp b/img/logos/Logo-CIMA.webp
diff --git a/img/logos/McGreBurger.jpg b/img/logos/McGreBurger.jpg
diff --git a/img/logos/McGreBurger.webp b/img/logos/McGreBurger.webp
diff --git a/img/logos/Mr-Chicken-Funza.jpg b/img/logos/Mr-Chicken-Funza.jpg
diff --git a/img/logos/Mr-Chicken-Funza.webp b/img/logos/Mr-Chicken-Funza.webp
diff --git a/img/logos/Qamis-ld.jpg b/img/logos/Qamis-ld.jpg
diff --git a/img/logos/Qamis-ld.webp b/img/logos/Qamis-ld.webp
diff --git a/img/logos/Zaisberg.png b/img/logos/Zaisberg.png
diff --git a/img/logos/Zaisberg.webp b/img/logos/Zaisberg.webp
diff --git a/img/logos/cibologrup-colombia-sas.jpg b/img/logos/cibologrup-colombia-sas.jpg
diff --git a/img/logos/cibologrup-colombia-sas.webp b/img/logos/cibologrup-colombia-sas.webp
diff --git a/img/logos/motos-arley-c.jpg b/img/logos/motos-arley-c.jpg
diff --git a/img/logos/motos-arley-c.webp b/img/logos/motos-arley-c.webp
diff --git a/img/logos/panaderia_marisol.jpg b/img/logos/panaderia_marisol.jpg
diff --git a/img/logos/panaderia_marisol.webp b/img/logos/panaderia_marisol.webp
diff --git a/img/logos/raul_agudelo.jpg b/img/logos/raul_agudelo.jpg
diff --git a/img/logos/raul_agudelo.webp b/img/logos/raul_agudelo.webp
diff --git a/img/medios-pago/daviplata.jpg b/img/medios-pago/daviplata.jpg
diff --git a/img/medios-pago/daviplata.webp b/img/medios-pago/daviplata.webp
diff --git a/img/medios-pago/nequi.jpeg b/img/medios-pago/nequi.jpeg
diff --git a/img/medios-pago/nequi.webp b/img/medios-pago/nequi.webp
diff --git a/img/productos/IMG-20240417-WA0002.jpg b/img/productos/IMG-20240417-WA0002.jpg
diff --git a/img/productos/IMG-20240417-WA0002.webp b/img/productos/IMG-20240417-WA0002.webp
diff --git a/img/productos/IMG-20240417-WA0004.jpg b/img/productos/IMG-20240417-WA0004.jpg
diff --git a/img/productos/IMG-20240417-WA0004.webp b/img/productos/IMG-20240417-WA0004.webp
diff --git a/img/productos/IMG-20240417-WA0005.jpg b/img/productos/IMG-20240417-WA0005.jpg
diff --git a/img/productos/IMG-20240417-WA0005.webp b/img/productos/IMG-20240417-WA0005.webp
diff --git a/img/productos/IMG-20240417-WA0008.jpg b/img/productos/IMG-20240417-WA0008.jpg
diff --git a/img/productos/IMG-20240417-WA0008.webp b/img/productos/IMG-20240417-WA0008.webp
diff --git a/img/productos/IMG-20240417-WA0009.jpg b/img/productos/IMG-20240417-WA0009.jpg
diff --git a/img/productos/IMG-20240417-WA0009.webp b/img/productos/IMG-20240417-WA0009.webp
diff --git a/img/productos/IMG-20240417-WA0011.jpg b/img/productos/IMG-20240417-WA0011.jpg
diff --git a/img/productos/IMG-20240417-WA0011.webp b/img/productos/IMG-20240417-WA0011.webp
diff --git a/img/productos/bolsa.jpg b/img/productos/bolsa.jpg
diff --git a/img/productos/bolsa.webp b/img/productos/bolsa.webp
diff --git a/img/productos/buso1.jpg b/img/productos/buso1.jpg
diff --git a/img/productos/buso1.webp b/img/productos/buso1.webp
diff --git a/img/productos/buso2.jpg b/img/productos/buso2.jpg
diff --git a/img/productos/buso2.webp b/img/productos/buso2.webp
diff --git a/img/productos/busocapucha1.jpg b/img/productos/busocapucha1.jpg
diff --git a/img/productos/busocapucha1.webp b/img/productos/busocapucha1.webp
diff --git a/img/productos/busocapucha2.jpg b/img/productos/busocapucha2.jpg
diff --git a/img/productos/busocapucha2.webp b/img/productos/busocapucha2.webp
diff --git a/img/productos/buzo-naranja.jpg b/img/productos/buzo-naranja.jpg
diff --git a/img/productos/buzo-naranja.webp b/img/productos/buzo-naranja.webp
diff --git a/img/productos/conjunto.jpg b/img/productos/conjunto.jpg
diff --git a/img/productos/conjunto.webp b/img/productos/conjunto.webp
diff --git a/img/productos/pantaloneta.jpg b/img/productos/pantaloneta.jpg
diff --git a/img/productos/pantaloneta.webp b/img/productos/pantaloneta.webp
diff --git a/img/redes/facebook.svg b/img/redes/facebook.svg
diff --git a/img/redes/facebook.webp b/img/redes/facebook.webp
diff --git a/img/redes/instagram.svg b/img/redes/instagram.svg
diff --git a/img/redes/instagram.webp b/img/redes/instagram.webp
diff --git a/img/redes/whatsapp.png b/img/redes/whatsapp.png
diff --git a/img/redes/whatsapp.webp b/img/redes/whatsapp.webp
diff --git a/index.html b/index.html
@@ -20,6 +20,9 @@
     <!-- Clases section -->
     <div id="clases"></div>
 
+    <!-- Team section -->
+    <div id="equipo"></div>
+
     <!-- Products section -->
     <div id="productos"></div>
 
@@ -44,6 +47,7 @@
             $("#navbar").load("./partials/navbar.html");
             $("#hero").load("./partials/hero.html");
             $("#clases").load("./partials/clases.html");
+            $("#equipo").load("./partials/team.html");
             $("#productos").load("./partials/productos.html");
             $("#patrocinadores").load("./partials/patrocinadores.html");
             $("#contacto").load("./partials/contacto.html");

diff --git a/partials/clases.html b/partials/clases.html
@@ -4,7 +4,7 @@ <h1 class="display-4">Clases de Jiu Jitsu para todos los niveles y edades</h1>
 <div class="row row-cols-1 row-cols-md-3 g-4">
     <div class="col">
         <div class="card h-100">
-            <img src="/img/clases/BJJ-kids.JPG" class="card-img-top" style="height: 300px; object-fit: contain;" alt="Clases Niños">
+            <img src="/img/clases/BJJ-kids.webp" class="card-img-top" style="height: 300px; object-fit: contain;" alt="Clases Niños">
             <div class="card-body">
                 <h5 class="card-title">Clases especializadas de BJJ acorde a tus necesidades</h5>
                 <p class="card-text">Nuestros clases de BJJ están enfocados en los diferentes niveles de nuestros estudiantes y de sus objetivos dentro del BJJ.</p>
@@ -13,7 +13,7 @@ <h5 class="card-title">Clases especializadas de BJJ acorde a tus necesidades</h5
     </div>
     <div class="col">
         <div class="card h-100">
-            <img src="/img/clases/bjj-alcaldia.JPG" class="card-img-top" style="height: 300px; object-fit: contain;" alt="Profesores">
+            <img src="/img/clases/bjj-alcaldia.webp" class="card-img-top" style="height: 300px; object-fit: contain;" alt="Profesores">
             <div class="card-body">
                 <h5 class="card-title">Instructores expertos con años de experiencia de práctica y docencia</h5>
                 <p class="card-text">Nuestros instructores están altamente capacitados y son ganadores de medallas tanto de BJJ como de MMA en sus diferentes categorías</p>
@@ -22,7 +22,7 @@ <h5 class="card-title">Instructores expertos con años de experiencia de prácti
     </div>
     <div class="col">
         <div class="card h-100">
-            <img src="/img/clases/bjj-mañana.jpg" class="card-img-top" style="height: 300px; object-fit: contain;" alt="Horarios">
+            <img src="/img/clases/bjj-mañana.webp" class="card-img-top" style="height: 300px; object-fit: contain;" alt="Horarios">
             <div class="card-body">
                 <h5 class="card-title">Horarios de entrenamiento flexibles para ajustarse a tu ritmo de vida</h5>
                 <p class="card-text">Ofrecemos diferentes horarios de entrenamiento en BJJ y MMA para aquellos con una agenda exigente.</p>

diff --git a/partials/footer.html b/partials/footer.html
@@ -3,16 +3,16 @@
 <footer>
     <div class="footer-content">
         <div class="logo-footer">
-            <a href="#"><img src="/img/logos/Logo-CIMA.jpg" alt="Logo" style="max-width: 90px; max-height: 90px;"></a>
+            <a href="#"><img src="/img/logos/Logo-CIMA.webp" alt="Logo" style="max-width: 90px; max-height: 90px;"></a>
         </div>
         <div class="redes-sociales">
-            <a href="#"><img src="/img/redes/facebook.svg" alt="Facebook"></a>
-            <a href="#"><img src="/img/redes/instagram.svg" alt="Instagram"></a>
-            <a href="#"><img src="/img/redes/whatsapp.png" alt="Instagram"></a>
+            <a href="#"><img src="/img/redes/facebook.webp" alt="Facebook"></a>
+            <a href="#"><img src="/img/redes/instagram.webp" alt="Instagram"></a>
+            <a href="#"><img src="/img/redes/whatsapp.webp" alt="Instagram"></a>
         </div>
         <div class="medios-pago">
-            <img src="/img/medios-pago/daviplata.jpg" alt="Daviplata">
-            <img src="/img/medios-pago/nequi.jpeg" alt="Nequi">
+            <img src="/img/medios-pago/daviplata.webp" alt="Daviplata">
+            <img src="/img/medios-pago/nequi.webp" alt="Nequi">
         </div>
     </div>
     <div class="footer-info">

diff --git a/partials/hero.html b/partials/hero.html
@@ -17,27 +17,27 @@ <h1 class="display-4">Descubre el poder del Jiu-Jitsu Brasileño</h1>
             <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                 <div class="carousel-inner">
                     <div class="carousel-item active">
-                        <img src="../img/carrusel/chicas1.JPG" class="d-block w-100"
+                        <img src="../img/carrusel/chicas1.webp" class="d-block w-100"
                             style="height: 300px; object-fit: contain;" alt="Clase Girls">
                     </div>
                     <div class="carousel-item">
-                        <img src="../img/carrusel/chicas2.JPG" class="d-block w-100"
+                        <img src="../img/carrusel/chicas2.webp" class="d-block w-100"
                             style="height: 300px; object-fit: contain;" alt="Clase Girls">
                     </div>
                     <div class="carousel-item">
-                        <img src="../img/carrusel/kids1.JPG" class="d-block w-100"
+                        <img src="../img/carrusel/kids1.webp" class="d-block w-100"
                             style="height: 300px; object-fit: contain;" alt="Clase Kids">
                     </div>
                     <div class="carousel-item">
-                        <img src="../img/carrusel/kids2.JPG" class="d-block w-100"
+                        <img src="../img/carrusel/kids2.webp" class="d-block w-100"
                             style="height: 300px; object-fit: contain;" alt="Clase Kids">
                     </div>
                     <div class="carousel-item">
-                        <img src="../img/carrusel/mma1.JPG" class="d-block w-100"
+                        <img src="../img/carrusel/mma1.webp" class="d-block w-100"
                             style="height: 300px; object-fit: contain;" alt="Clase MMA">
                     </div>
                     <div class="carousel-item">
-                        <img src="../img/carrusel/mma2.JPG" class="d-block w-100"
+                        <img src="../img/carrusel/mma2.webp" class="d-block w-100"
                             style="height: 300px; object-fit: contain;" alt="Clase MMA">
                     </div>
                     <!-- Agrega más imágenes según sea necesario -->
@@ -61,7 +61,7 @@ <h1 class="display-4">Descubre el poder del Jiu-Jitsu Brasileño</h1>
 <div class="container-fluid mt-5">
     <div class="row align-items-center">
         <div class="col-md-6">
-            <img src="../img/clases/mma.JPG" class="img-fluid" style="height: 300px; object-fit: contain;" alt="Clase MMA">
+            <img src="../img/clases/mma.webp" class="img-fluid" style="height: 300px; object-fit: contain;" alt="Clase MMA">
         </div>
         <div class="col-md-6">
             <h1 class="display-4">Beneficios de la práctica del MMA</h1>

diff --git a/partials/navbar.html b/partials/navbar.html
@@ -2,7 +2,7 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">
         <a class="navbar-brand" href="#">
-            <img src="../img/logos/Logo-CIMA.jpg" alt="Logo" height="50"> <!--Ubicación del logo-->
+            <img src="../img/logos/Logo-CIMA.webp" alt="Logo" height="50"> <!--Ubicación del logo-->
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/partials/patrocinadores.html b/partials/patrocinadores.html
@@ -3,16 +3,16 @@
 <br>
 <div class="carrusel">
     <div class="logos-container">
-        <div class="logo"><img src="/img/logos/cibologrup-colombia-sas.jpg" alt="Logo 1"></div>
-        <div class="logo"><img src="/img/logos/Jeimmy-villamil.JPG" alt="Logo 2"></div>
-        <div class="logo"><img src="/img/logos/Logo-CIMA.jpg" alt="Logo 3"></div>
-        <div class="logo"><img src="/img/logos/McGreBurger.jpg" alt="Logo 4"></div>
-        <div class="logo"><img src="/img/logos/motos-arley-c.jpg" alt="Logo 4"></div>
-        <div class="logo"><img src="/img/logos/Mr-Chicken-Funza.jpg" alt="Logo 4"></div>
-        <div class="logo"><img src="/img/logos/panaderia_marisol.jpg" alt="Logo 4"></div>
-        <div class="logo"><img src="/img/logos/Qamis-ld.jpg" alt="Logo 4"></div>
-        <div class="logo"><img src="/img/logos/raul_agudelo.jpg" alt="Logo 4"></div>
-        <div class="logo"><img src="/img/logos/Zaisberg.png" alt="Logo 4"></div>
+        <div class="logo"><img src="/img/logos/cibologrup-colombia-sas.webp" alt="Logo 1"></div>
+        <div class="logo"><img src="/img/logos/Jeimmy-villamil.webp" alt="Logo 2"></div>
+        <div class="logo"><img src="/img/logos/Logo-CIMA.webp" alt="Logo 3"></div>
+        <div class="logo"><img src="/img/logos/McGreBurger.webp" alt="Logo 4"></div>
+        <div class="logo"><img src="/img/logos/motos-arley-c.webp" alt="Logo 4"></div>
+        <div class="logo"><img src="/img/logos/Mr-Chicken-Funza.webp" alt="Logo 4"></div>
+        <div class="logo"><img src="/img/logos/panaderia_marisol.webp" alt="Logo 4"></div>
+        <div class="logo"><img src="/img/logos/Qamis-ld.webp" alt="Logo 4"></div>
+        <div class="logo"><img src="/img/logos/raul_agudelo.webp" alt="Logo 4"></div>
+        <div class="logo"><img src="/img/logos/Zaisberg.webp" alt="Logo 4"></div>
         <!-- Añadir más logos aquí según sea necesario -->
     </div>
 </div>

diff --git a/partials/productos.html b/partials/productos.html
@@ -4,7 +4,7 @@ <h1 class="display-4">Productos</h1>
     <div class="row">
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/bolsa.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Mochila">
+                <img src="/img/productos/bolsa.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Mochila">
                 <div class="card-body">
                     <h5 class="card-title">Mochila CIMA</h5>
                     <p class="card-text">Mochila para llevar todo tu staff para practicar BJJ o MMA.</p>
@@ -15,7 +15,7 @@ <h5 class="card-title">Mochila CIMA</h5>
         </div>
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/buso1.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Camiseta MMA">
+                <img src="/img/productos/buso1.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Camiseta MMA">
                 <div class="card-body">
                     <h5 class="card-title">Camiseta MMA</h5>
                     <p class="card-text">Camiseta para práctica de MMA o No GI.</p>
@@ -27,7 +27,7 @@ <h5 class="card-title">Camiseta MMA</h5>
 
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/buso2.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Camiseta MMA">
+                <img src="/img/productos/buso2.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Camiseta MMA">
                 <div class="card-body">
                     <h5 class="card-title">Camiseta MMA</h5>
                     <p class="card-text">Camiseta para práctica de MMA o No GI.</p>
@@ -39,7 +39,7 @@ <h5 class="card-title">Camiseta MMA</h5>
 
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/conjunto.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Conjunto">
+                <img src="/img/productos/conjunto.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Conjunto">
                 <div class="card-body">
                     <h5 class="card-title">Conjunto práctica MMA</h5>
                     <p class="card-text">Conjunto de camiseta y pantaloneta para práctica de MMA o No GI.</p>
@@ -51,7 +51,7 @@ <h5 class="card-title">Conjunto práctica MMA</h5>
 
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/busocapucha1.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Buzo Azul Celeste">
+                <img src="/img/productos/busocapucha1.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Buzo Azul Celeste">
                 <div class="card-body">
                     <h5 class="card-title">Buzo azul con capucha</h5>
                     <p class="card-text">Buzo con capucha para acompañar tus momentos de entrenamiento.</p>
@@ -63,7 +63,7 @@ <h5 class="card-title">Buzo azul con capucha</h5>
 
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/busocapucha2.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Buzo morado">
+                <img src="/img/productos/busocapucha2.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Buzo morado">
                 <div class="card-body">
                     <h5 class="card-title">Buzo Morado con capucha</h5>
                     <p class="card-text">Buzo con capucha para acompañar tus momentos de entrenamiento.</p>
@@ -75,7 +75,7 @@ <h5 class="card-title">Buzo Morado con capucha</h5>
 
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/buzo-naranja.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Buzo Naranja">
+                <img src="/img/productos/buzo-naranja.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Buzo Naranja">
                 <div class="card-body">
                     <h5 class="card-title">Buzo Naranja con capucha</h5>
                     <p class="card-text">Buzo con capucha para acompañar tus momentos de entrenamiento.</p>
@@ -87,7 +87,7 @@ <h5 class="card-title">Buzo Naranja con capucha</h5>
 
         <div class="col-md-3 mb-3">
             <div class="card">
-                <img src="/img/productos/pantaloneta.jpg" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Pantaloneta">
+                <img src="/img/productos/pantaloneta.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Pantaloneta">
                 <div class="card-body">
                     <h5 class="card-title">Pantaloneta</h5>
                     <p class="card-text">Pantaloneta tus entrenamientos en la academia.</p>

diff --git a/partials/team.html b/partials/team.html
@@ -0,0 +1,53 @@
+<!-- Equipo -->
+<br>
+<div class="container">
+    <h1 class="display-4">Equipo</h1>
+    <div class="row">
+        <div class="col-md-3 mb-3">
+            <div class="card">
+                <img src="/img/equipo/Alison-Vargas.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Alison Vargas">
+                <div class="card-body">
+                    <h5 class="card-title">Alison Vargas</h5>
+                    <p class="card-text">Profesor BJJ y MMA citurón Café</p>
+                    <p class="card-text">Encargada del equipo de chicas y de pasarle el carro a todos los que creen que por su estatura van a poder.</p>
+                    <!-- Otros detalles del producto, como precio, botón de compra, etc. -->
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 mb-3">
+            <div class="card">
+                <img src="/img/equipo/Danilo-Rodrigez.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Danilo Rodriguez">
+                <div class="card-body">
+                    <h5 class="card-title">Danilo Rodriguez</h5>
+                    <p class="card-text">Profesor BJJ y MMA citurón Café 3er Dan</p>
+                    <p class="card-text">Encargado del equipo de MMA y de pasarle el carro a todos los que se creen mucho.</p>
+                    <!-- Otros detalles del producto, como precio, botón de compra, etc. -->
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-3 mb-3">
+            <div class="card">
+                <img src="/img/equipo/Esperanza-Martinez.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Esperanza Martínez">
+                <div class="card-body">
+                    <h5 class="card-title">Esperanza Martínez</h5>
+                    <p class="card-text">Asistente de profesor BJJ y MMA citurón blanco 3er dan</p>
+                    <p class="card-text">Encargada del equipo de soportar a los profesores, parte del programa semillero.</p>
+                    <!-- Otros detalles del producto, como precio, botón de compra, etc. -->
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-3 mb-3">
+            <div class="card">
+                <img src="/img/equipo/foto-valentina.webp" class="card-img-top" style="height: 266px; object-fit: contain;" alt="Valentina Arias">
+                <div class="card-body">
+                    <h5 class="card-title">Valentina Arias</h5>
+                    <p class="card-text">Publicidad y redes sociales</p>
+                    <p class="card-text">Nos colabora para tener imágenes y videos de encanto en nuestras redes.</p>
+                    <!-- Otros detalles del producto, como precio, botón de compra, etc. -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>