<!– Este código está diseñado para ser insertado dentro del editor de WordPress (modo "Texto" o "HTML personalizado").
No incluye las etiquetas , o ya que WordPress las proporciona automáticamente. –>
https://cdn.tailwindcss.com
/* Estilos generales para el contenido dentro de WordPress, complementando Tailwind */
body {
font-family: ‘Roboto’, sans-serif;
background-color: #ffffff; /* Fondo blanco */
color: #4a5568; /* Color de texto base, un gris oscuro suave */
}
h1, h2, h3, h4, h5, h6 {
font-family: ‘Poppins’, sans-serif; /* Fuentes impactantes para encabezados */
color: #2d3748; /* Color de encabezados más oscuro */
}
/* Estilo de la tarjeta de producto */
.product-card {
background-color: #ffffff;
border-radius: 0.75rem; /* Bordes redondeados */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Sombra suave y limpia */
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
border: 1px solid #edf2f7; /* Borde sutil */
}
.product-card:hover {
transform: translateY(-6px); /* Efecto de elevación al pasar el ratón */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* Sombra más pronunciada al hover */
}
.product-card-image {
width: 100%;
height: 250px; /* Tamaño de imagen generoso */
object-fit: cover;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.product-card h2 {
font-size: 1.4rem; /* Títulos de producto */
font-weight: 700;
line-height: 1.3;
color: #2d3748;
}
.product-card p {
font-size: 0.9rem;
color: #718096; /* Color de descripción suave */
line-height: 1.4;
}
.product-card .price {
font-family: ‘Poppins’, sans-serif;
font-size: 1.6rem; /* Precio destacado */
font-weight: 800;
color: #20c997; /* Color de precio vibrante (turquesa) */
}
.product-tag {
background-color: #e6fffa; /* Fondo suave para el tag */
color: #319795; /* Color de texto del tag */
font-weight: 600;
padding: 0.3rem 0.9rem;
border-radius: 9999px; /* Completamente redondeado */
font-size: 0.75rem;
border: 1px solid #b2f5ea;
}
.contact-btn {
background-color: #6f42c1; /* Púrpura primario para CTA */
color: white;
padding: 0.7rem 1.4rem;
border-radius: 0.6rem; /* Botón redondeado */
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.contact-btn:hover {
background-color: #5b36a1; /* Púrpura más oscuro al hover */
transform: translateY(-2px);
}
/* Estilos del Carrusel */
.carousel-container {
position: relative;
width: 100%;
max-width: 1000px; /* Ancho amplio */
height: 480px; /* Altura generosa */
overflow: hidden;
margin: 0 auto 3.5rem auto; /* Márgenes ajustados */
border-radius: 1rem; /* Bordes redondeados */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra prominente */
}
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
padding: 30px;
color: white; /* Texto blanco para contraste */
}
.carousel-slide.active {
opacity: 1;
}
.carousel-slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
filter: brightness(0.5); /* Oscurecer más la imagen de fondo */
}
.carousel-slide-overlay {
position: relative;
z-index: 2;
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6)); /* Degradado sutil */
padding: 2.5rem 2rem;
border-radius: 1rem;
max-width: 80%;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px); /* Desenfoque sutil */
}
.carousel-slide-overlay h2 {
font-size: 2.8rem; /* Título del carrusel grande y audaz */
font-weight: 800;
margin-bottom: 1rem;
line-height: 1.2;
color: white; /* Asegurar color blanco */
}
.carousel-slide-overlay p {
font-size: 1.25rem;
margin-bottom: 1.5rem;
font-weight: 500;
color: #e2e8f0; /* Color de párrafo ligeramente apagado */
}
.carousel-slide-overlay a {
background-color: #20c997; /* Turquesa vibrante para CTA en carrusel */
padding: 0.9rem 2.2rem;
border-radius: 0.6rem;
font-weight: 700;
box-shadow: 0 4px 12px rgba(32, 201, 151, 0.4);
}
.carousel-slide-overlay a:hover {
background-color: #1aa079; /* Turquesa más oscuro al hover */
transform: scale(1.03);
}
.carousel-button {
background-color: rgba(0, 0, 0, 0.4); /* Botones de navegación semi-transparentes */
color: white;
padding: 12px 18px;
font-size: 2rem;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.carousel-button:hover {
background-color: rgba(0, 0, 0, 0.6);
}
.carousel-button.prev { left: 20px; }
.carousel-button.next { right: 20px; }
.carousel-dots {
bottom: 20px;
gap: 12px;
}
.carousel-dot {
width: 14px;
height: 14px;
background-color: rgba(255, 255, 255, 0.6);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.carousel-dot.active {
background-color: white;
border-color: #6f42c1; /* Borde de color de acento púrpura */
}
/* Estilos para la sección de filtros/búsqueda */
.filter-section {
background-color: #ffffff;
border-radius: 0.75rem;
padding: 1.8rem;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
margin-bottom: 3.5rem;
border: 1px solid #e2e8f0;
}
.filter-section input, .filter-section select {
border-color: #e2e8f0; /* Borde suave */
border-width: 1px;
border-radius: 0.5rem;
padding: 0.7rem 1rem;
font-size: 0.95rem;
color: #4a5568;
}
.filter-section input:focus, .filter-section select:focus {
border-color: #6f42c1; /* Borde de enfoque púrpura */
box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.2); /* Anillo de enfoque */
outline: none; /* Eliminar el outline por defecto */
}
/* Pie de página */
footer {
border-top: 1px solid #edf2f7; /* Borde superior más suave */
color: #a0aec0; /* Color de texto más tenue */
font-size: 0.85rem;
padding-top: 1.5rem;
}
Mercado de Emprendedores Migrantes y sus Colectividades
Una iniciativa de InfoColectividades en **Córdoba Capital** para conectar con propuestas únicas de diversas colectividades y personas migrantes.
Todos los rubros
Alimenticios
Ropa
Artesanías
Instrumentos Musicales
Objetos Culturales
Servicios
Región
Latinoamérica
Europa
Asia
África
Norteamérica
Países
Argentina
Armenia
Bolivia
Chile
China
Colombia
Cuba
Eslovaquia
España
Grecia
Haití
Hungría
Irlanda
Italia
Japón
Líbano
Lituania
México
Montenegro
Países Árabes
Paraguay
Perú
Polonia
República Checa
San Marino
Senegal
Siria
Suiza
Turquía
Ucrania
Venezuela
Colectividades
Al Sharaf (Siria – Líbano – Palestina)
Asociacion Bella Sicilia (Italia)
Asociación Cultural Israelita de Córdoba
Asociación Familia Piamontesa de Córdoba
Asociación Folklorica Retablo Perú
Asociación Japonesa de la provincia de Córdoba
Asociación Molisana de Córdoba
Asociación Polaca de Córdoba
ASOCIACIÓN SANMARINENSE DE CÓRDOBA CAPITAL
Casal Catalá de Córdoba (España)
Casa Paraguaya de Córdoba
Centro Murciano en Córdoba
Centro Vasco Argentino Gure Txokoa de Córdoba
Colectividad Helénica de Córdoba (Grecia)
Comunidad Haitiana de Córdoba COHACOR
Comunidad Mexicana en Córdoba
CORDOBAI MAGYAR KÖR (Hungría)
Federación de Asociaciones Italianas de la Circunscripción Consular Córdoba (FAIC)
Fundación Fidus
Asociación Inca Garcilaso de la Vega
Instituto de presencia Afro en Córdoba
La Protectora Menorquina Balear
Liga Italiana de Deporte Amateur (LIDA)
SINPECAF
Sociedad Árabe Musulmana de Córdoba
Sociedad Helvecia de Socorros Mutuos de Córdoba
Sociedad Sirio Libanesa de Córdoba
Personas (Migrantes)
Juan Pérez (Colombia)
María Gómez (Perú)
Ahmed Khan (Siria)
Descubre Sabores Ancestrales
Un viaje culinario a través de las recetas más auténticas de la colectividad armenia.
document.addEventListener(‘DOMContentLoaded’, function() {
const slides = document.querySelectorAll(‘.carousel-slide’);
const dots = document.querySelectorAll(‘.carousel-dot’);
const prevButton = document.querySelector(‘.carousel-button.prev’);
const nextButton = document.querySelector(‘.carousel-button.next’);
let currentSlide = 0;
let slideInterval;
// Función para mostrar la diapositiva actual
function showSlide(index) {
// Oculta todas las diapositivas y desactiva todos los puntos
slides.forEach((slide, i) => {
slide.classList.remove(‘active’);
dots[i].classList.remove(‘active’);
});
// Muestra la diapositiva en el índice dado y activa el punto correspondiente
slides[index].classList.add(‘active’);
dots[index].classList.add(‘active’);
currentSlide = index;
}
// Función para avanzar a la siguiente diapositiva
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
// Función para retroceder a la diapositiva anterior
function prevSlide() {
currentSlide = (currentSlide – 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
// Iniciar el carrusel automáticamente
function startCarousel() {
slideInterval = setInterval(nextSlide, 5000); // Cambia de diapositiva cada 5 segundos
}
// Detener el carrusel
function stopCarousel() {
clearInterval(slideInterval);
}
// Event listeners para los botones de navegación
prevButton.addEventListener(‘click’, () => {
stopCarousel();
prevSlide();
startCarousel(); // Reiniciar el intervalo después de la interacción manual
});
nextButton.addEventListener(‘click’, () => {
stopCarousel();
nextSlide();
startCarousel(); // Reiniciar el intervalo después de la interacción manual
});
// Event listeners para los puntos de navegación
dots.forEach(dot => {
dot.addEventListener(‘click’, (event) => {
const index = parseInt(event.target.dataset.slideIndex);
stopCarousel();
showSlide(index);
startCarousel(); // Reiniciar el intervalo después de la interacción manual
});
});
// Mostrar la primera diapositiva al cargar
showSlide(currentSlide);
// Iniciar el carrusel
startCarousel();
});
INFOCOLECTIVIDADES 