Pachu y Marcos wedding invitation #3
Description
<title>¡Nos Casamos! Pachu & Marcos</title>
<script src="https://cdn.tailwindcss.com/"></script>
<style>
/* Estilo de fuente personalizado con la nueva selección elegante */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
/* Definición de la paleta de colores (se mantiene) */
:root {
--color-primary: #6B8B66;
--color-secondary: #ACB3A1;
--color-tertiary: #CCB49C;
--color-accent: #EDA479;
--color-background-light: #F2F1EC;
--color-heading-1: #9B672F;
--color-heading-2: #C2A176;
--color-heading-3: #5E7952;
}
/* Aplicación de las nuevas fuentes */
body {
font-family: 'Playfair Display', serif; /* Fuente principal para el cuerpo */
background-color: var(--color-background-light);
color: #4a4a4a;
}
html {
scroll-behavior: smooth;
}
.nav-link {
font-family: 'Cinzel', serif; /* Fuente para la navegación */
transition: color 0.3s ease;
}
.nav-link:hover {
color: var(--color-accent);
}
.btn-primary {
font-family: 'Playfair Display', serif; /* Fuente para botones */
background-color: var(--color-primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
background-color: var(--color-accent);
transform: translateY(-2px);
}
.section-title {
font-family: 'Cinzel', serif; /* Fuente para títulos de sección */
font-size: 3rem; /* Ajuste de tamaño para Cinzel */
font-weight: 700;
margin-bottom: 2rem;
text-align: center;
}
/* Estilos específicos para la sección de inicio con Great Vibes */
#inicio h1, #inicio .names, #inicio .date {
font-family: 'Great Vibes', cursive; /* Fuente cursiva y fluida */
color: black;
}
#inicio h1 {
font-weight: normal;
font-size: 6.5rem; /* Tamaño aumentado para Great Vibes */
}
#inicio .names {
font-size: 5rem;
}
#inicio .date {
font-size: 3rem;
}
/* Mensaje de bienvenida con Playfair Display para legibilidad */
#inicio .welcome-message {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.5rem;
line-height: 1.6;
color: #333;
}
/* Títulos de sección con Cinzel y colores definidos */
#historia .section-title, #regalos .section-title {
color: var(--color-heading-1);
}
#evento .section-title, #info-util .section-title {
color: var(--color-heading-2);
}
#confirmacion .section-title {
color: var(--color-heading-3);
}
/* Subtítulos (h3) con Cinzel para unificar jerarquía */
h3 {
font-family: 'Cinzel', serif;
font-weight: 700;
}
#evento h3, #info-util h3, #confirmacion h3.text-2xl.font-semibold {
color: var(--color-heading-3);
}
#regalos p.font-semibold {
color: var(--color-heading-1);
}
#info-util p.font-semibold {
color: var(--color-heading-3);
}
</style>
<nav class="bg-white shadow-lg py-4 fixed w-full z-10 top-0">
<div class="container mx-auto flex justify-center space-x-8 text-lg font-medium">
<a href="#inicio" class="nav-link">Inicio</a>
<a href="#historia" class="nav-link">Nuestra Historia</a>
<a href="#evento" class="nav-link">El Evento</a>
<a href="#confirmacion" class="nav-link">Confirmación</a>
<a href="#regalos" class="nav-link">Nuestro Deseo</a>
<a href="#info-util" class="nav-link">Información Útil</a>
</div>
</nav>
<section id="inicio" class="min-h-screen flex flex-col justify-center items-center text-center p-8 bg-cover bg-center" style="background-image: url('**URL_IMAGEN_FONDO_FOLLAJE_MIXTO_AQUI**'); background-size: cover; background-position: center;">
<div class="bg-white bg-opacity-80 p-10 rounded-2xl shadow-xl max-w-2xl transform hover:scale-105 transition-transform duration-300">
<h1>¡Nos Casamos!</h1>
<p class="names mb-6">Pachu & Marcos</p>
<p class="date mb-8">20 de Diciembre de 2025</p>
<p class="welcome-message text-lg">Nos haría inmensamente felices que nos acompañen en este día tan especial.</p>
</div>
</section>
<section id="historia" class="py-20 px-8" style="background-color: var(--color-secondary);">
<div class="container mx-auto max-w-5xl">
<h2 class="section-title">Nuestra Historia</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center justify-center">
<div class="md:w-full">
<p class="text-lg mb-4 text-center md:text-left">Nuestra historia, la de Pachu y Marcos, comenzó a florecer en tiempos inciertos, en plena pandemia. Las primeras citas fueron simples y hermosas: paseos con nuestros perros por las plazas vacías de Rosario, mientras el mundo se detenía.</p>
<p class="text-lg mb-4 text-center md:text-left">Pachu avanzaba con cautela, sabiendo que Marcos debía regresar a Suiza. Pero, aunque el COVID-19 trajo muchos desafíos, también nos regaló la oportunidad de conocernos de verdad y enamorarnos.</p>
<p class="text-lg mb-4 text-center md:text-left">Mientras el mundo se cerraba, nuestro amor se abría camino. La situación nos empujó a tomar decisiones importantes: vernos implicaba compartir nuestras casas y convivir con las familias del otro. Lo inesperado nos dio dos años juntos en Rosario, llenos de complicidad, mates y amor.</p>
<p class="text-lg mb-4 text-center md:text-left">En 2022 llegó una etapa difícil: un océano nos separaba. Pero la distancia no pudo con nosotros. En 2023 volvimos a encontrarnos, esta vez en Suiza, para comenzar una nueva aventura. Nos sumergimos en paisajes de ensueño, trenes y aviones, montañas, lagos y playas. Aprendimos a construir un hogar entre culturas, abrazando los cambios y celebrando cada instante compartido.</p>
<p class="text-lg text-center md:text-left">Hoy estamos listos para dar el "sí", rodeados de quienes más amamos, con la certeza de querer formar una familia juntos.</p>
</div>
<div class="grid grid-cols-2 gap-4">
<img src="**URL_IMAGEN_1_HISTORIA_AQUI**" alt="Pachu y Marcos con mascarillas" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_2_HISTORIA_AQUI**" alt="Pachu y Marcos en el sofá" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_3_HISTORIA_AQUI**" alt="Pachu y Marcos en el jardín" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_4_HISTORIA_AQUI**" alt="Pachu y Marcos en el avión" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_5_HISTORIA_AQUI**" alt="Pachu y Marcos en el tren" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_6_HISTORIA_AQUI**" alt="Pachu y Marcos junto al lago" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_7_HISTORIA_AQUI**" alt="Pachu y Marcos en la chocolatería Lindt" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_8_HISTORIA_AQUI**" alt="Pachu y Marcos cenando con vista a la ciudad" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_9_HISTORIA_AQUI**" alt="Pachu y Marcos cenando fondue" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_10_HISTORIA_AQUI**" alt="Pachu y Marcos en un lago de montaña" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_11_HISTORIA_AQUI**" alt="Pachu y Marcos en un paisaje de montaña con un lago" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_12_HISTORIA_AQUI**" alt="Silueta de Pachu y Marcos besándose en un túnel" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_13_HISTORIA_AQUI**" alt="Pachu y Marcos besándose junto a una puerta con flores" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_14_HISTORIA_AQUI**" alt="Mano sosteniendo un dulce con el Matterhorn de fondo" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_15_HISTORIA_AQUI**" alt="Villa con vista al lago" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
<img src="**URL_IMAGEN_16_HISTORIA_AQUI**" alt="Pachu y Marcos en la cima de una montaña" class="rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300 w-full h-auto object-cover aspect-video">
</div>
</div>
</div>
</section>
<section id="evento" class="py-20 px-8" style="background-color: var(--color-background-light);">
<div class="container mx-auto max-w-4xl">
<h2 class="section-title">El Evento</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="bg-white p-8 rounded-2xl shadow-lg text-center transform hover:scale-105 transition-transform duration-300">
<h3 class="text-3xl font-semibold mb-4">La Ceremonia</h3>
<p class="text-lg mb-2">Sábado, 20 de Diciembre de 2025</p>
<p class="text-lg mb-2">17:30 hs</p>
<p class="text-xl font-medium mb-4">Iglesia del Buen Pastor</p>
<p class="text-md mb-4">Laprida 2747 Sur, S2001RTA Rosario, Santa Fe, Argentina</p>
<a href="https://www.google.com/maps/place/Iglesia+del+Buen+Pastor/@-32.9529513,-60.6559567,17z/data=!3m1!4b1!4m6!3m5!1s0x95b7abaf595e92d1:0x8cd5cb473ea1aac9!8m2!3d-32.9700494!4d-60.6398632!16s%2Fg%2F11b6p93z25?entry=ttu&g_ep=EgoyMDI1MDYyMy4yIKXMDSoASAFQAw%3D%3D" target="_blank" class="btn-primary inline-block">Ver en Mapa</a>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg text-center transform hover:scale-105 transition-transform duration-300">
<h3 class="text-3xl font-semibold mb-4">La Celebración</h3>
<p class="text-lg mb-2">Sábado, 20 de Diciembre de 2025</p>
<p class="text-lg mb-2">Directamente después de la ceremonia</p>
<p class="text-xl font-medium mb-4">Campos de Ibarlucea</p>
<p class="text-md mb-4">Ruta Nacional 34 KM 15.5 S2000 Rosario, Santa Fe, Argentina</p>
<a href="https://www.google.com/maps/place/Campos+de+Ibarlucea./@-32.853163,-60.7632909,17z/data=!3m1!4b1!4m6!3m5!1s0x95b651e73eac728b:0x96d38fa9f42ccf70!8m2!3d-32.853163!4d-60.760716!16s%2Fg%2F11cs17bxjl?entry=ttu&g_ep=EgoyMDI1MDYyMy4yIKXMDSoASAFQAw%3D%3D" target="_blank" class="btn-primary inline-block">Ver en Mapa</a>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-lg font-semibold text-[var(--color-primary)]">Código de Vestimenta:</p>
<p class="text-md">Formal. ¡Vestite para celebrar!</p>
<p class="text-md italic mt-2">Y no te olvides de traer zapatos cómodos para bailar toda la noche.</p>
</div>
</div>
</section>
<section id="confirmacion" class="py-20 px-8" style="background-color: var(--color-secondary);">
<div class="container mx-auto max-w-2xl">
<h2 class="section-title">Confirmá Tu Asistencia</h2>
<div class="bg-white p-8 rounded-2xl shadow-lg">
<p class="text-center text-lg mb-6">Por favor, confirmá tu asistencia antes del 1 de Octubre de 2025. ¡Esperamos verte ahí!</p>
<form id="rsvpForm" name="contact" data-netlify="true" class="space-y-6">
<div>
<label for="nombre" class="block text-lg font-medium text-gray-700 mb-2">Nombre completo:</label>
<input type="text" id="nombre" name="nombre" required class="w-full p-3 border border-gray-300 rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)]">
</div>
<div>
<label for="asistencia" class="block text-lg font-medium text-gray-700 mb-2">¿Asistirás?</label>
<select id="asistencia" name="asistencia" required class="w-full p-3 border border-gray-300 rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)]">
<option value="">Seleccioná una opción</option>
<option value="si">Sí, asistiré</option>
<option value="no">No podré asistir</option>
</select>
</div>
<div>
<label class="block text-lg font-medium text-gray-700 mb-2">Opciones de menú especiales:</label>
<div class="grid grid-cols-2 gap-y-2 mb-4">
<div class="flex items-center">
<input type="checkbox" id="vegetariano" name="menu_options" value="vegetariano" class="h-4 w-4 text-[var(--color-primary)] border-gray-300 rounded focus:ring-[var(--color-primary)]">
<label for="vegetariano" class="ml-2 text-md text-gray-700">Vegetariano</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="vegano" name="menu_options" value="vegano" class="h-4 w-4 text-[var(--color-primary)] border-gray-300 rounded focus:ring-[var(--color-primary)]">
<label for="vegano" class="ml-2 text-md text-gray-700">Vegano</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="celiaco" name="menu_options" value="celiaco" class="h-4 w-4 text-[var(--color-primary)] border-gray-300 rounded focus:ring-[var(--color-primary)]">
<label for="celiaco" class="ml-2 text-md text-gray-700">Celíaco</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="diabetico" name="menu_options" value="diabetico" class="h-4 w-4 text-[var(--color-primary)] border-gray-300 rounded focus:ring-[var(--color-primary)]">
<label for="diabetico" class="ml-2 text-md text-gray-700">Diabético</label>
</div>
</div>
</div>
<div>
<label for="alergias_especificaciones" class="block text-lg font-medium text-gray-700 mb-2">Alergia a... u otras especificaciones:</label>
<textarea id="alergias_especificaciones" name="alergias_especificaciones" rows="3" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)]" placeholder="Ej: Alergia a los frutos secos, etc."></textarea>
</div>
<div>
<label class="block text-lg font-medium text-gray-700 mb-2">Transporte:</label>
<div class="space-y-2">
<div class="flex items-center">
<input type="checkbox" id="transporte_ida" name="transporte_ida" class="h-4 w-4 text-[var(--color-primary)] border-gray-300 rounded focus:ring-[var(--color-primary)]">
<label for="transporte_ida" class="ml-2 text-md text-gray-700">Sí, me interesa el transporte de la Iglesia al Salón.</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="transporte_vuelta" name="transporte_vuelta" class="h-4 w-4 text-[var(--color-primary)] border-gray-300 rounded focus:ring-[var(--color-primary)]">
<label for="transporte_vuelta" class="ml-2 text-md text-gray-700">Sí, me interesa el transporte al final de la fiesta de vuelta a mi domicilio.</label>
</div>
<div id="direccion_vuelta_container" class="hidden mt-4">
<label for="direccion_vuelta" class="block text-md font-medium text-gray-700 mb-2">Domicilio en Rosario para el transporte de vuelta:</label>
<textarea id="direccion_vuelta" name="direccion_vuelta" rows="2" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)]" placeholder="Tu calle, número, piso, departamento, etc."></textarea>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn-primary">Enviar Confirmación</button>
</div>
</form>
<div id="messageBox" class="mt-6 p-4 rounded-lg text-center hidden"></div>
</div>
</div>
</section>
<section id="regalos" class="py-20 px-8" style="background-color: var(--color-background-light);">
<div class="container mx-auto max-w-3xl text-center">
<h2 class="section-title">Nuestro Deseo</h2>
<div class="bg-white p-8 rounded-2xl shadow-lg">
<p class="text-lg mb-6">Lo más importante para nosotros es tu presencia en nuestro gran día. Sin embargo, si querés hacernos un regalo, podés colaborar con nuestra luna de miel.</p>
<div class="space-y-4">
<p class="text-xl font-semibold">Alias de la Cuenta Bancaria:</p>
<p class="text-2xl font-bold mb-4">PachuyMarcos2025</p>
<p class="text-lg">Cuenta en pesos en Banco Galicia de M.P. Vittone</p>
</div>
</div>
</div>
</section>
<section id="info-util" class="py-20 px-8" style="background-color: var(--color-secondary);">
<div class="container mx-auto max-w-4xl">
<h2 class="section-title">Información Útil</h2>
<div class="grid grid-cols-1 gap-12">
<div class="bg-white p-8 rounded-2xl shadow-lg transform hover:scale-105 transition-transform duration-300">
<h3 class="text-3xl font-semibold mb-4">Transporte</h3>
<p class="text-lg mb-4">Para su comodidad, hemos contratado unas vans que realizarán el traslado desde la Iglesia al Salón. Al finalizar la fiesta, estas vans también los llevarán de regreso a sus domicilios particulares.</p>
<p class="text-md italic">Por favor, indicá en el formulario de confirmación si te interesa hacer uso de este servicio.</p>
<p class="text-md font-semibold">Contacto para dudas sobre el transporte:</p>
<p class="text-md">Alejandro Vittone: 3415066351</p>
</div>
</div>
</div>
</section>
<footer class="py-8 text-center" style="background-color: var(--color-primary); color: white;">
<p class="text-lg">© 2025 Pachu & Marcos. ¡Gracias por formar parte de nuestra historia!</p>
</footer>
<script>
// Este script solo maneja el mostrar/ocultar el campo de dirección de vuelta.
// La lógica de envío del formulario ahora la manejará el servicio de hosting (ej: Netlify Forms).
document.getElementById('transporte_vuelta').addEventListener('change', function() {
const direccionVueltaContainer = document.getElementById('direccion_vuelta_container');
if (this.checked) {
direccionVueltaContainer.classList.remove('hidden');
} else {
direccionVueltaContainer.classList.add('hidden');
document.getElementById('direccion_vuelta').value = ''; // Limpiar campo si se desmarca
}
});
</script>