Sarmiento - Restaurant HTML Landing Page

Sarmiento es una plantilla HTML de una sola página diseñada para restaurantes, bistrós, cafeterías, bares de vinos y empresas de catering.

Su implementación es deliberadamente sencilla: un archivo HTML, una hoja de estilos y un script. Sin pasos de compilación, sin npm, sin framework, sin jQuery. Descomprímelo, abre index.html y listo.

El formulario de reserva no necesita un servidor ni un servicio de formularios de pago. Genera un mensaje de WhatsApp prellenado con el nombre, teléfono, fecha, hora, número de comensales y notas del cliente, y abre el chat. Para los restaurantes locales, esto funciona mucho mejor que un formulario de correo electrónico que nadie revisa.

No se incluyen fotografías. Cada área de imagen es un marcador de posición de degradado CSS, por lo que no hay que preocuparse por licencias de imágenes de terceros ni atribuciones. Puedes reemplazar tus propias fotos con una sola línea de CSS. Las fotos que se muestran en la demostración en vivo no están incluidas en la descarga.

La plantilla también funciona con JavaScript deshabilitado. El contenido es visible por defecto y la animación de desplazamiento se superpone, por lo que un error en el script nunca deja al visitante mirando una página en blanco.

Features

Totalmente adaptable, probado desde 320px en adelante Menú con pestañas y cuatro categorías, fácil de ampliar Sección de historias, galería estilo mampostería y tarjetas de reseñas Formulario de reserva que abre WhatsApp con todos los campos prellenados Encabezado fijo con un menú móvil fuera del lienzo Animaciones de revelación de desplazamiento mediante IntersectionObserver Botón flotante de WhatsApp Siete espacios independientes para fotos, ninguna imagen se reutiliza dos veces Etiquetas meta SEO y etiquetas Open Graph incluidas Compatibilidad con prefers-reduced-motion Colores controlados por propiedades personalizadas CSS en un único bloque :root Código limpio y comentado con un bloque de configuración en inglés Documentación HTML completa incluida Alrededor de 30KB en total, sin bibliotecas externas

Requirements

Cualquier editor de texto. Sin herramientas de compilación, sin npm, sin compilador, sin lenguaje del lado del servidor. Un navegador moderno: Chrome, Firefox, Edge o Safari. Internet Explorer no es compatible. Conexión a internet para cargar Google Fonts o alojar las dos familias de fuentes en tu propio servidor. Un número de WhatsApp si deseas usar el formulario de reserva tal como se envía.

Instructions

1. Descomprime el archivo y abre index.html en un navegador. Esa es toda la configuración. 2. Abre js/main.js y establece tu número en el bloque CONFIG en la parte superior. Escríbelo en formato internacional sin signo más, sin espacios y sin guiones. 3. Abre css/style.css y cambia los colores en el bloque :root. La variable --gold controla el acento en toda la plantilla. 4. Para usar tus propias fotos, colócalas en la carpeta img/ y edita las reglas .photo-1 a .photo-7 en css/style.css, reemplazando el degradado con url('../img/your-photo.jpg'). 5. Edita el texto directamente en index.html, incluyendo el título y la meta descripción en el encabezado.

La documentación completa, con formatos telefónicos para cada país, cómo cambiar la fuente y cómo enviar los formularios por correo electrónico en lugar de por WhatsApp, se encuentra en documentation/index.html.