Se ajusta el carrusel de los logos de los patrocinadores y los datos …

…de contacto en los archivos patrocinadores.html y contacto.html
jorgemar73 · Apr 23, 2024 · b1c40f4 · b1c40f4
1 parent 1b73cd5
commit b1c40f4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 25 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -13,35 +13,40 @@
     font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
+/* Define los estilos para el contenedor del carrusel */
 .carrusel {
-    overflow: hidden;
+    overflow: hidden; /* Oculta los logos que se salen del contenedor */
+    white-space: nowrap; /* Evita que los logos se desplacen a la siguiente línea */
 }
 
+/* Aplica la animación al contenedor del carrusel */
 .logos-container {
     display: flex;
-    animation: 5s infinite running slidein;
+    animation: desplazamiento 20s linear infinite; /* Ajusta la duración y la repetición */
 }
 
-.logo {
+.logo-patro {
     margin-left: 36px;
     margin-right: 60px;
     /* Espacio entre logos */
 }
 
-.logo img {
-    max-width: 50px;
-    height: auto;
-    width: auto\9;
+/* Define los estilos para cada logo */
+.logo-patro img {
+    margin-right: 45px; /* Espacio entre los logos */
+    height: 90px; /* Altura de los logos */
+    width: 90px; /* Ancho de los logos */
+    display: inline-block; /* Alinea los logos horizontalmente */
     /* Para IE8 y versiones anteriores */
 }
 
-@keyframes slidein {
+/* Define la animación */
+@keyframes desplazamiento {
     0% {
-        transform: translateX(0);
+        transform: translateX(0); /* Inicia sin desplazamiento */
     }
-
     100% {
-        transform: translateX(297);
+        transform: translateX(-150%); /* Desplaza completamente hacia la izquierda */
     }
 }
 
@@ -83,3 +88,7 @@ footer {
         margin-top: 10px;
     }
 }
+
+iframe {
+    max-width: 100%;
+}
diff --git a/partials/contacto.html b/partials/contacto.html
@@ -4,16 +4,16 @@
         <div class="col-md-6">
             <h2>Información de contacto</h2>
             <ul>
-                <li><strong>Dirección:</strong> 123 Calle Principal, Ciudad</li>
-                <li><strong>Teléfono:</strong> +1234567890</li>
-                <li><strong>Correo electrónico:</strong> correo@example.com</li>
+                <li><strong>Dirección:</strong> Calle 13 #9a - 15, Segundo Piso, Funza</li>
+                <li><strong>Teléfono:</strong> +57 321 390 8712</li>
+                <li><strong>Correo electrónico:</strong> cima@cima.com</li>
             </ul>
         </div>
         <div class="col-md-6">
             <!-- Aquí incrusta el mapa de Google -->
             <iframe
                 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3976.3273892021757!2d-74.21404282546841!3d4.713076441551076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e3f83a28cf1c30f%3A0x9c6a5fe9c262beed!2sCima%20Jiu%20Jitsu%20Funza.!5e0!3m2!1ses-419!2sco!4v1713232441715!5m2!1ses-419!2sco"
-                width="630" height="360" title="CIMA Jiu-Jitsu" style="border:0;" allowfullscreen=""
+                width="702" height="360" title="CIMA Jiu-Jitsu" style="border:0;" allowfullscreen=""
                 loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
         </div>
     </div>

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.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>
+        <div class="logo-patro"><img src="img/logos/cibologrup-colombia-sas.webp" alt="Logo 1"></div>
+        <div class="logo-patro"><img src="img/logos/Jeimmy-villamil.webp" alt="Logo 2"></div>
+        <div class="logo-patro"><img src="img/logos/Logo-CIMA.webp" alt="Logo 3"></div>
+        <div class="logo-patro"><img src="img/logos/McGreBurger.webp" alt="Logo 4"></div>
+        <div class="logo-patro"><img src="img/logos/motos-arley-c.webp" alt="Logo 4"></div>
+        <div class="logo-patro"><img src="img/logos/Mr-Chicken-Funza.webp" alt="Logo 4"></div>
+        <div class="logo-patro"><img src="img/logos/panaderia_marisol.webp" alt="Logo 4"></div>
+        <div class="logo-patro"><img src="img/logos/Qamis-ld.webp" alt="Logo 4"></div>
+        <div class="logo-patro"><img src="img/logos/raul_agudelo.webp" alt="Logo 4"></div>
+        <div class="logo-patro"><img src="img/logos/Zaisberg.webp" alt="Logo 4"></div>
         <!-- Añadir más logos aquí según sea necesario -->
     </div>
 </div>