Invitación · Cumplimos 100 · Guillermina y Fernando

Página de invitación (una sola pantalla de scroll) para el aniversario de Guillermina y Fernando. Construida en HTML/CSS/JS puro, sin frameworks ni build: se abre directamente en el navegador y se puede hostear en cualquier lado.

Estructura

Invitacion/
├── index.html            # Marcado de todas las secciones
├── css/
│   ├── reset.css         # Reset mínimo
│   └── styles.css        # Estilos + "design tokens" (variables CSS)
├── js/
│   ├── countdown.js      # Cuenta regresiva + datos del evento (window.INVITE_EVENT)
│   └── main.js           # Link de calendario + animaciones de scroll
└── assets/
    ├── design-ref/       # Referencia de diseño (Figma export) — NO se publica
    ├── images/           # Fotos, logos y decoraciones
    └── fonts/            # (vacío) fuentes propias si se usan

Previsualizar localmente

Se puede abrir index.html directo, pero para que las fuentes carguen sin bloqueos conviene servirlo con un server estático:

# Con Python (ya instalado en la mayoría de los sistemas)
python3 -m http.server 8000
# luego abrir http://localhost:8000

Confirmación de asistencia (RSVP)

El botón "Confirmar asistencia" abre directamente un Google Form en una pestaña nueva. Para cambiarlo, editar el atributo href del enlace #rsvp-open en index.html.

Editar los datos del evento

• Fecha / hora / lugar del contador y del botón de calendario: en js/countdown.js, objeto EVENT (usa zona horaria Argentina, -03:00).
• Textos visibles: directamente en index.html.
• Colores y tipografías: variables CSS en :root dentro de css/styles.css.
• Dirección del botón "Cómo llegar": atributo href de #maps-btn en index.html.

Tipografías

Se cargan desde Google Fonts: Cormorant Garamond (serif) y Great Vibes (firma manuscrita), elegidas para aproximar el diseño. Si el cliente entrega las fuentes exactas, dejarlas en assets/fonts/, declararlas con @font-face en styles.css y actualizar las variables --font-serif / --font-script.

Publicar (hosting gratuito)

Al ser un sitio estático, cualquiera de estas opciones funciona:

• Netlify (más simple): arrastrar la carpeta del proyecto a https://app.netlify.com/drop.
• Vercel: vercel en la carpeta, o conectar el repo de GitHub.
• GitHub Pages: subir el repo y activar Pages sobre la rama main.