Plantilla web de restaurante en HTML y CSS responsive

Plantilla web de restaurante en HTML y CSS con carta legible, horarios, ubicación y una llamada a reservar que puedes adaptar.

La información que busca una persona con hambre

Una plantilla web restaurante HTML debe resolver preguntas concretas: qué se puede comer, cuánto cuesta, dónde está el local y cómo reservar. Esta propuesta da prioridad a esos datos antes de añadir fotografías o animaciones. La carta permanece como texto legible en la página. El visitante no necesita descargar un archivo, ampliar una imagen ni buscar un menú escondido para decidir si el establecimiento encaja con su plan.

Preparar la primera versión

Guarda el documento completo como index.html y ábrelo localmente. Empieza sustituyendo el nombre comercial y los textos de demostración. Después introduce una carta corta pero representativa, con precios revisados por el restaurante. No publiques la maqueta con platos inventados como si estuvieran disponibles. Si el menú cambia a diario, establece una forma de actualizarlo y una persona responsable. Una web sencilla y mantenida informa mejor que una página extensa con datos antiguos.

Código completo para probar en tu navegador

Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. Los nombres y datos de demostración se deben sustituir antes de publicarlo.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Oliva — Cocina de estación</title>
<style>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}img,svg{max-width:100%}button{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.links{display:flex;gap:24px;flex-wrap:wrap}.links a{text-decoration:none;font-size:.88rem}.brand{font-weight:900;letter-spacing:-.06em;font-size:1.65rem;text-decoration:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 23px;border:1px solid currentColor;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}h1,h2,h3,p{margin-top:0}h1,h2{line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(3rem,7.5vw,6.5rem)}h2{font-size:clamp(2rem,4vw,3.7rem)}h3{line-height:1.2}p{max-width:64ch}.section{padding:88px 0}footer{padding:32px 0;font-size:.8rem}.demo{font-size:.72rem;opacity:.75}details{border-top:1px solid #8885;padding:18px 0}summary{cursor:pointer;font-weight:700}summary+p{margin:16px 0 0}dialog{border:0;border-radius:20px;width:min(760px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#000b}.close{float:right;border:1px solid #8885;border-radius:50%;background:transparent;width:40px;height:40px}section[id]{scroll-margin-top:24px}[hidden]{display:none!important}.reveal{animation:arrive .6s both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.nav{align-items:flex-start}.links{gap:14px}.section{padding:56px 0}h1{font-size:clamp(2.6rem,13vw,4.5rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

body{background:#f5f1e8;color:#263b2d}.brand{font-family:Georgia,serif;font-size:2.6rem;font-weight:400;line-height:.8}.brand span{display:block;font:9px/2.7 Arial;letter-spacing:.2em}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding-top:45px;padding-bottom:80px}.hero h1{font:clamp(3.4rem,6.4vw,6rem)/.98 Georgia;letter-spacing:-.055em;margin:25px 0}.hero h1 em{font-weight:400;color:#a44c33}.hero-copy>p:not(.eyebrow){max-width:400px;color:#646c5c}.hero .demo{margin:22px 0 0}.dark{background:#263b2d;color:#fff;border-color:#263b2d}.food-art{position:relative;height:570px;background:#d9dfc8;border-radius:200px 200px 12px 12px;display:grid;place-items:center;overflow:hidden}.art-label{position:absolute;top:45px;left:0;right:0;text-align:center;font-size:.58rem;letter-spacing:.13em}.plate{position:relative;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,#e8dfca 0 55%,#faf8f0 56% 64%,#ded7c5 65% 66%,#fffdf5 67%);box-shadow:20px 30px 35px #4b563c40;transform:rotate(-15deg)}.leaf{position:absolute;display:block;width:105px;height:53px;background:linear-gradient(165deg,#3e6842,#6a8c48);border-radius:0 90% 0 90%;left:90px;top:70px;box-shadow:inset 0 2px #c3cf8b66}.l2{transform:rotate(70deg);left:142px;top:130px}.l3{transform:rotate(140deg);left:65px;top:175px}.tomato{position:absolute;width:42px;height:42px;background:radial-gradient(circle at 35% 30%,#efb190,#c05033 50%,#a64229);border-radius:50%;left:70px;top:120px}.t2{left:180px;top:78px}.t3{left:190px;top:205px}.bread{position:absolute;left:120px;top:144px;width:100px;height:60px;border-radius:40%;background:repeating-linear-gradient(145deg,transparent 0 13px,#82432188 14px 18px),#d99f5e;transform:rotate(-20deg)}.oil{position:absolute;left:100px;top:235px;width:16px;height:9px;border-radius:50%;background:#a8a152}.o2{left:225px;top:135px;width:11px}.round-seal{position:absolute;bottom:18px;right:18px;display:grid;place-items:center;text-align:center;width:120px;height:120px;border:1px solid #263b2d;border-radius:50%;font-size:.6rem;line-height:1.6;transform:rotate(12deg)}.ribbon{background:#a44c33;color:#f5f1e8;padding:17px;white-space:nowrap;overflow:hidden;text-align:center;letter-spacing:.12em;font-size:.8rem}.menu-head{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:end}.menu-head h2{font-family:Georgia;font-weight:400}.menu-head>p{color:#646c5c}.menu-filter{display:flex;gap:10px;margin:25px 0 40px;flex-wrap:wrap}.menu-filter button{background:transparent;border:1px solid #263b2d40;border-radius:30px;padding:10px 18px;font-size:.85rem}.menu-filter [aria-pressed=true]{background:#263b2d;color:#f5f1e8}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}.dish{border-top:1px solid #263b2d40;padding:25px 0}.dish>span{font-size:.62rem;letter-spacing:.1em;color:#a44c33}.dish>div{display:flex;justify-content:space-between;gap:20px;margin-top:12px}.dish h3{font:1.5rem/1.2 Georgia;margin:0}.dish b{white-space:nowrap;font-weight:400}.dish p{color:#646c5c;font-size:.9rem;margin:12px 0 0}.house{background:#263b2d;color:#f5f1e8;padding:85px 0}.house-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.house h2{font-family:Georgia;font-weight:400;margin:25px 0 0}.visit-info>div{padding:20px 0;border-bottom:1px solid #ffffff35}.visit-info span{font-size:.65rem;letter-spacing:.15em;color:#c5cfb7}.visit-info p{margin:10px 0;color:#e0e5d7}.reservation{text-align:center;padding:95px 0}.reservation h2{font:clamp(3rem,7vw,6rem)/1 Georgia}.reservation em{color:#a44c33}.reservation p{margin:0 auto 28px;max-width:500px}.reservation .eyebrow{margin-bottom:25px}footer{border-top:1px solid #263b2d30;color:#646c5c}@media(max-width:800px){.hero{grid-template-columns:1fr;gap:40px}.food-art{height:420px}.plate{width:290px;height:290px}.menu-head,.house-grid{grid-template-columns:1fr;gap:25px}.menu-grid{grid-template-columns:1fr}.house{padding:55px 0}}

</style>
</head>
<body>

<header class="wrap nav"><a class="brand" href="#">oliva<span>cocina de estación</span></a><nav class="links" aria-label="Principal"><a href="#carta">La carta</a><a href="#visita">La casa</a><a href="#reservas">Tu mesa ↗</a></nav></header>
<main><section class="wrap hero reveal"><div class="hero-copy"><p class="eyebrow">Lo sencillo, cuando está bien hecho.</p><h1>El gusto<br>de quedarse<br><em>un poco más.</em></h1><p>Producto de temporada, conversaciones largas y una cocina que empieza en lo cercano.</p><a class="button dark" href="#carta">Descubre la carta <span>↘</span></a><p class="demo">Restaurante de demostración · Datos y platos editables</p></div><div class="food-art" role="img" aria-label="Ilustración de un plato mediterráneo de muestra"><span class="art-label">A FUEGO LENTO / DESDE LA HUERTA</span><div class="plate"><i class="leaf l1"></i><i class="leaf l2"></i><i class="leaf l3"></i><i class="tomato t1"></i><i class="tomato t2"></i><i class="tomato t3"></i><div class="bread"></div><span class="oil o1"></span><span class="oil o2"></span></div><span class="round-seal">BUENA MESA<br>BUENA COMPAÑÍA<br>✳</span></div></section>
<div class="ribbon" aria-hidden="true">TEMPORADA &nbsp; ✳ &nbsp; CERCANÍA &nbsp; ✳ &nbsp; SOBREMESA &nbsp; ✳ &nbsp; TEMPORADA &nbsp; ✳ &nbsp; CERCANÍA</div>
<section id="carta" class="wrap section"><div class="menu-head"><div><p class="eyebrow">Para compartir. O para ti.</p><h2>Una carta corta.<br>Mucho que contar.</h2></div><p>Una selección ilustrativa que cambia contigo y con la estación. Consulta siempre ingredientes y alérgenos.</p></div><div class="menu-filter" role="group" aria-label="Categorías de la carta"><button data-menu="todos" aria-pressed="true">Toda la carta</button><button data-menu="entrantes" aria-pressed="false">Para empezar</button><button data-menu="principales" aria-pressed="false">Principales</button></div><div class="menu-grid"><article class="dish" data-kind="entrantes"><span>01 / DE LA HUERTA</span><div><h3>Ensalada de temporada</h3><b>9 €</b></div><p>Hortalizas, hojas frescas y el aliño de la casa.</p></article><article class="dish" data-kind="entrantes"><span>02 / CUCHARA</span><div><h3>Crema de verduras</h3><b>8 €</b></div><p>Una preparación vegetal al ritmo de la estación.</p></article><article class="dish" data-kind="principales"><span>03 / A FUEGO LENTO</span><div><h3>Arroz de huerta</h3><b>15 €</b></div><p>Verduras asadas y un arroz para disfrutar sin prisa.</p></article><article class="dish" data-kind="principales"><span>04 / DEL MAR</span><div><h3>Pescado del día</h3><b>19 €</b></div><p>Consulta la variedad, la guarnición y la disponibilidad.</p></article></div><p class="demo" role="status" id="menu-status">Platos y precios de ejemplo. No representan una oferta real.</p></section>
<section id="visita" class="house"><div class="wrap house-grid"><div><p class="eyebrow">Un lugar para volver</p><h2>La mesa está<br>en el centro<br>de todo.</h2></div><div class="visit-info"><div><span>CUÁNDO</span><p>Añade los días y el horario real de cocina.</p></div><div><span>DÓNDE</span><p>Introduce la dirección y el acceso comprobado al local.</p></div><div><span>CÓMO</span><p>Explica las opciones de reserva y las necesidades de acceso.</p></div></div></div></section>
<section id="reservas" class="wrap reservation"><p class="eyebrow">La próxima sobremesa empieza aquí</p><h2>¿Nos vemos<br><em>a la mesa?</em></h2><p>Configura tu teléfono o sistema real de reservas. Una consulta no confirma una mesa hasta que el restaurante la acepte.</p><a class="button" href="#visita">Planifica tu visita ↗</a></section></main><footer class="wrap">oliva — Maqueta editorial · Sin reservas ni pagos integrados.</footer>

<script>

document.querySelectorAll('[data-menu]').forEach(button=>button.addEventListener('click',()=>{
 document.querySelectorAll('[data-menu]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));
 document.querySelectorAll('[data-kind]').forEach(d=>d.hidden=button.dataset.menu!=='todos'&&d.dataset.kind!==button.dataset.menu);
 document.querySelector('#menu-status').textContent='Selección actualizada. Platos y precios de demostración.';
}));

</script>
</body>
</html>

Organizar una carta en HTML

El ejemplo agrupa platos por categorías y utiliza términos y descripciones para relacionar cada nombre con su detalle. Puedes añadir entrantes, principales y postres sin cambiar la estructura general. Mantén visible el precio junto al plato. Si existen tamaños o suplementos, explícalos con palabras y cantidades concretas. Evita alinear importes usando cadenas de espacios: se romperán al cambiar de fuente o pantalla. Si necesitas columnas, resuélvelas con CSS y conserva un orden de lectura lógico.

Alérgenos y disponibilidad con información comprobada

No deduzcas alérgenos solamente a partir del nombre de una receta. La cocina debe confirmar ingredientes, procesos y posibles variaciones antes de publicar información específica. El aviso de demostración recuerda esa revisión, pero no sustituye el trabajo del establecimiento. Si añades iconos, acompáñalos de una leyenda legible. Una persona no debería interpretar dibujos ambiguos para tomar una decisión sobre su comida. También conviene explicar cómo consultar cambios del plato del día.

Reservar sin prometer una confirmación inexistente

La plantilla dirige a un apartado de reservas, no a un formulario ficticio que confirme mesas. Sustituye ese bloque por el teléfono o el sistema que realmente utiliza el negocio. Si incorporas un servicio externo, prueba todo el recorrido y distingue solicitud de confirmación. Revisa número de personas, fecha, horario y condiciones relevantes. No muestres disponibilidad inventada para hacer la maqueta más convincente: la coherencia con la operativa del restaurante es parte del diseño.

Fotografías que ayudan a decidir

Puedes añadir una imagen del espacio y otra de un plato representativo. Optimízalas y conserva dimensiones o proporciones para evitar saltos al cargar. No utilices fotografías de un local ajeno que puedan confundir al cliente sobre el lugar. El texto alternativo debe describir la información de la imagen cuando resulte útil, sin repetir toda la carta. La página de ejemplo funciona sin archivos externos, por lo que puedes practicar la estructura antes de preparar material fotográfico.

Horario, dirección y acceso

Separa horario de apertura y horario de cocina si no coinciden. Añade una dirección completa y comprueba cualquier enlace de mapa antes de publicarlo. Si informas sobre acceso sin escalones, aseos o terrazas, verifica que la descripción sea exacta y suficientemente concreta. No basta con un icono genérico de accesibilidad. Incluye también cómo preguntar por necesidades particulares. Estos detalles reducen llamadas repetidas y ayudan a planificar una visita con menos incertidumbre.

Revisar la página desde la calle

Prueba la carta en un móvil con brillo reducido y una conexión lenta. El texto debe seguir siendo legible y el teléfono fácil de activar. Comprueba que la navegación llega al apartado correcto y que los encabezados no quedan tapados. Después pide a alguien que encuentre el horario y el precio de un plato sin instrucciones. Si tarda demasiado, cambia la jerarquía. El objetivo de esta plantilla es facilitar una visita, no obligar a explorar un catálogo de efectos.

Una carta actualizable sin rediseñar la página

Separa la revisión de platos del ajuste visual. Quien mantiene el contenido debería poder cambiar un nombre, descripción o precio sin tocar reglas de distribución. Mantén categorías consistentes y revisa si un plato retirado aparece también en promociones o fotografías con texto. Si hay dos idiomas, actualiza ambos en el mismo momento. No dejes una versión traducida con importes anteriores. Para negocios con cambios frecuentes puede convenir un sistema de contenidos, aunque la estructura HTML de esta plantilla siga sirviendo como referencia para la presentación.

Contacto directo y apertura de aplicaciones

Un enlace telefónico puede facilitar la llamada desde móvil, pero debe mostrar el número para quien necesita anotarlo o usar otro dispositivo. Un enlace de mapa debe corresponder a la entrada correcta del local. Evita que todos los botones abran aplicaciones diferentes sin avisar. Reserva Ver ubicación para un destino de ubicación y Llamar para iniciar una llamada. Esa coherencia permite decidir antes de pulsar. Si el restaurante recibe reservas por varios canales, explica cuál confirma la mesa y cómo se comunica esa confirmación.

Una revisión después de cada cambio de temporada

Cuando actualices la carta, comprueba también horarios especiales, festivos y disponibilidad de terraza u otros espacios. Revisa que las fotografías sigan representando platos que se ofrecen. No es necesario rediseñar toda la web para mantenerla útil; una rutina breve de comprobación evita gran parte de la información contradictoria. Puedes conservar una lista de datos que el responsable del restaurante debe aprobar. La página estará mejor preparada para una visita real cuando contenido, llamada telefónica y experiencia en el local cuenten la misma historia.

Un siguiente paso reconocible al terminar de leer

Después de consultar la carta y el horario, el visitante debe poder reservar, llamar o localizar el restaurante sin volver a buscar el comienzo. Puedes repetir un enlace de reserva al final si conserva el mismo destino y nombre. No añadas varias acciones con igual peso que compitan entre sí. Comprueba que una llamada no se confunde con una reserva confirmada y que un enlace de mapa no sustituye la dirección escrita. Cuando cada control describe su efecto, la página facilita una decisión rápida sin exigir conocimiento previo de cómo trabaja el establecimiento.

Guías relacionadas para seguir practicando

Puedes ampliar esta práctica con Estructurar listas en HTML y Añadir imágenes correctamente.