Plantilla de página de evento en HTML y CSS: agenda, ubicación, accesibilidad y registro con datos fáciles de encontrar en móvil.
Una página que permite planificar la asistencia
Esta plantilla página evento HTML organiza los datos que una persona necesita antes de registrarse: propósito, fecha, horario, lugar, requisitos y condiciones. La maqueta no publica una fecha futura inventada ni muestra plazas disponibles sin un sistema que las gestione. Los horarios están identificados como ilustrativos. Sustitúyelos por el programa confirmado antes de compartir la página. La claridad de esos datos importa tanto como la composición del encabezado.
Fecha, zona horaria y modalidad
Un evento online puede reunir personas de lugares distintos. Indica la zona horaria de referencia y comprueba que cualquier enlace de calendario coincide. En un encuentro presencial, añade dirección y detalles prácticos de llegada. Si es híbrido, explica qué actividades puede seguir cada modalidad. No utilices únicamente un cartel para comunicar esa información: mantenla también como texto HTML para que pueda ampliarse, copiarse y consultarse desde tecnologías de asistencia.
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.
Así se ve esta plantilla · Diseño de muestra interactivo
La vista previa está aislada del artículo. Copia el código de debajo para personalizarla.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Futuro — Encuentro de ideas</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:#f3f0e6;color:#20221f}.brand{font-size:1.55rem;letter-spacing:-.07em}.brand span{color:#e44b2e;margin-left:6px}.nav .links{font-size:.8rem}.poster{background:#e44b2e;padding:38px 0 0;color:#171c19;overflow:hidden}.poster-top{display:flex;justify-content:space-between;gap:20px}.poster-top>span{font-size:.55rem;border:1px solid #20221f;padding:7px 10px;height:max-content}.poster h1{position:relative;font:900 clamp(4.4rem,12vw,11rem)/.84 Arial;letter-spacing:-.09em;margin:55px 0}.poster em{font-style:normal;-webkit-text-stroke:1.5px #20221f;color:transparent}.poster h1>span{position:absolute;right:0;bottom:0;font-size:15rem;color:#e8ed8a;font-weight:400}.poster-bottom{display:flex;justify-content:space-between;gap:40px;align-items:center;margin-bottom:45px}.poster-bottom p{font-size:1rem;max-width:420px}.poster .button{border-radius:0;background:#e8ed8a;border-color:#e8ed8a;color:#20221f;font-size:.8rem;flex-shrink:0}.event-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #20221f60}.event-facts>div{padding:24px 20px;border-right:1px solid #20221f60}.event-facts>div:first-child{padding-left:0}.event-facts>div:last-child{border:0}.event-facts small,.event-facts b{display:block}.event-facts small{font-size:.5rem;letter-spacing:.15em}.event-facts b{font-size:.8rem;margin-top:10px}.agenda-head{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:40px}.agenda-head h2{margin:0}.days{display:flex;gap:8px}.days button{border:1px solid #20221f;border-radius:0;background:transparent;padding:12px 18px;font-size:.75rem}.days [aria-pressed=true]{background:#20221f;color:#f3f0e6}.sessions article{display:grid;grid-template-columns:110px 1fr 60px;gap:30px;align-items:start;border-top:1px solid #20221f60;padding:30px 0}.sessions article>span{font-size:.9rem}.sessions small{font-size:.55rem;letter-spacing:.13em;color:#b53c25}.sessions h3{font-size:1.5rem;margin:12px 0}.sessions p{font-size:.85rem;color:#72776a;margin-bottom:0}.sessions article>b{font:3rem/1 Georgia;color:#aaa895}.experience-band{background:#20221f;color:#f3f0e6;padding:80px 0}.experience-band h2{font-size:clamp(2.8rem,5.7vw,5rem);margin:35px 0 50px}.experience-band h2 span{color:#e8ed8a}.experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;color:#b5bdac;font-size:.9rem}.registration{padding:100px 0}.registration h2{font-size:clamp(2.5rem,5vw,4.6rem)}.registration>p{max-width:580px;color:#72776a}.registration .eyebrow{color:#b53c25}.registration .button{background:#e44b2e;border-color:#e44b2e;color:#fff;border-radius:0;font-size:.8rem;margin-top:15px}footer{border-top:1px solid #20221f30;color:#72776a}@media(max-width:750px){.poster-top{display:block}.poster-top>span{display:inline-block}.poster h1>span{font-size:7rem;right:-10px;bottom:8px}.poster-bottom{display:block}.poster-bottom .button{margin-top:15px}.event-facts{grid-template-columns:1fr}.event-facts>div,.event-facts>div:first-child{padding:15px 0;border-right:0;border-bottom:1px solid #20221f40}.agenda-head{display:block}.days{margin-top:25px}.sessions article{grid-template-columns:60px 1fr;gap:18px}.sessions article>b{display:none}.sessions h3{font-size:1.2rem}.experience-grid{grid-template-columns:1fr;gap:10px}}
</style>
</head>
<body>
<header class="wrap nav"><a class="brand" href="#">FUTURO<span>↗</span></a><nav class="links" aria-label="Principal"><a href="#agenda">Programa</a><a href="#experiencia">El encuentro</a><a href="#registro">Participa</a></nav></header>
<main><section class="poster reveal"><div class="wrap"><div class="poster-top"><p class="eyebrow">Diseño / Tecnología / Conversaciones</p><span>EDICIÓN DE MUESTRA</span></div><h1>LAS IDEAS<br>NO SE<br><em>QUEDAN</em><br>QUIETAS<span>↗</span></h1><div class="poster-bottom"><p>Un encuentro para pensar en voz alta, probar cosas nuevas y volver con otra perspectiva.</p><a class="button" href="#agenda">Explora el programa ↘</a></div><div class="event-facts"><div><small>CUÁNDO</small><b>Fecha por confirmar</b></div><div><small>DÓNDE</small><b>Configura lugar y modalidad</b></div><div><small>CÓMO</small><b>Registro de demostración</b></div></div></div></section>
<section id="agenda" class="wrap section"><div class="agenda-head"><h2>Un programa<br>para abrir caminos.</h2><div class="days" role="group" aria-label="Seleccionar jornada"><button data-day="uno" aria-pressed="true">Jornada 01</button><button data-day="dos" aria-pressed="false">Jornada 02</button></div></div><div class="sessions"><article data-session="uno"><span>09:30</span><div><small>BIENVENIDA</small><h3>Antes de empezar, conectemos.</h3><p>Presentación y orientación del encuentro.</p></div><b>01</b></article><article data-session="uno"><span>10:00</span><div><small>TALLER / DISEÑO</small><h3>Del problema a la primera idea.</h3><p>Una sesión práctica de estructura, contenido y accesibilidad.</p></div><b>02</b></article><article data-session="uno"><span>11:30</span><div><small>CONVERSACIÓN</small><h3>Lo que aprendemos al probar.</h3><p>Preguntas y decisiones compartidas.</p></div><b>03</b></article><article data-session="dos" hidden><span>10:00</span><div><small>LABORATORIO</small><h3>Construir juntos, pensar distinto.</h3><p>Actividad colaborativa de demostración.</p></div><b>04</b></article><article data-session="dos" hidden><span>12:00</span><div><small>CIERRE</small><h3>La próxima idea empieza fuera.</h3><p>Conclusiones, recursos y siguientes pasos.</p></div><b>05</b></article></div><p id="agenda-status" role="status" class="demo">Programa y horarios ilustrativos. No existe una convocatoria abierta.</p></section>
<section id="experiencia" class="experience-band"><div class="wrap"><p class="eyebrow">Más que una agenda</p><h2>Gente curiosa.<br>Ideas en movimiento.<br><span>Nuevas conexiones.</span></h2><div class="experience-grid"><p>Explica la modalidad, dirección, requisitos de material y cómo se comunicará cualquier cambio.</p><p>Describe las medidas de acceso comprobadas y un canal para consultar ajustes o necesidades particulares.</p></div></div></section><section id="registro" class="wrap registration"><p class="eyebrow">Hay sitio para otra mirada</p><h2>Trae tus preguntas.<br>Encuentra lo próximo.</h2><p>Configura fecha, precio final, condiciones y enlace al sistema real de inscripción. Esta página de muestra no reserva plazas.</p><a class="button" href="#agenda">Vuelve al programa ↑</a></section></main><footer class="wrap">FUTURO ↗ · Evento de demostración · Sustituye todos los datos antes de difundirlo.</footer>
<script>
document.querySelectorAll('[data-day]').forEach(button=>button.addEventListener('click',()=>{
document.querySelectorAll('[data-day]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));
document.querySelectorAll('[data-session]').forEach(s=>s.hidden=s.dataset.session!==button.dataset.day);
document.querySelector('#agenda-status').textContent=button.textContent+' seleccionada. Programa y horarios de muestra.';
}));
</script>
</body>
</html>
Una agenda que se entiende desde el móvil
La lista ordenada presenta hora, título y una descripción breve. Este formato evita una tabla demasiado ancha cuando hay varias columnas de ponentes y salas. Si el evento tiene itinerarios paralelos, separa las sesiones por sala o franja con encabezados claros. Indica descansos y cambios de ubicación cuando afecten a la asistencia. No llenes la agenda con descripciones largas de cada ponente si eso oculta el orden de las actividades.
Registro y confirmación son pasos diferentes
El bloque final debe enlazar al servicio que realmente procesa las inscripciones. Comprueba que recoge los datos necesarios y que comunica qué ocurre después. Si requiere pago, revisa precio, condiciones y confirmación. Una consulta por correo no equivale automáticamente a una plaza reservada. Evita añadir un botón con un contador ficticio para aumentar la urgencia. Si existe un límite real de aforo, su disponibilidad debe venir del sistema responsable de mantenerla.
Acceso con información concreta
No escribas solamente Evento accesible si no has definido qué significa. Describe las medidas comprobadas: recorrido sin escalones, subtitulado, interpretación u otras condiciones relevantes. Facilita un canal para consultar necesidades particulares y explica con cuánta antelación conviene hacerlo. En actividades online también importa el funcionamiento de la plataforma. Revisa el acceso con teclado, las instrucciones para entrar y las alternativas cuando una persona no puede usar una función prevista.
Comunicar cambios sin confundir versiones
Fecha, sala y programa pueden cambiar. Decide quién actualiza la página y cómo se avisa a las personas inscritas. Si hay una modificación relevante, indícala claramente en el lugar donde se consulta el dato, en lugar de dejar un aviso escondido al final. Mantén coherencia con el sistema de registro y cualquier documento descargable. Una página y un cartel con horarios diferentes obligan al asistente a elegir qué fuente creer.
Fotografías y nombres de participantes
Añade imágenes solamente cuando tengas permiso para utilizarlas. Los nombres, cargos y biografías deben ser revisados por quienes corresponda. No uses fotografías de un evento anterior sin aclarar su contexto si pueden confundirse con la edición actual. Para una página ligera puedes empezar sin imágenes, como hace el ejemplo. Después incorpora material que ayude a reconocer el espacio o a entender la actividad, sin desplazar la información de fecha y acceso fuera del primer recorrido de lectura.
Qué hacer cuando el evento termina
Una página de evento también necesita una decisión posterior: conservar una crónica, publicar recursos o indicar que la edición ya finalizó. Retira llamadas a un registro cerrado y evita que un visitante crea que todavía puede reservar. Si compartes grabaciones, confirma permisos y condiciones. Antes de abrir la edición siguiente, revisa todos los datos en lugar de cambiar solamente el año del título. La plantilla es una base reutilizable, pero cada convocatoria necesita una revisión completa de su información.
Enlaces de calendario con datos confirmados
Si añades una descarga de calendario, revisa fecha, hora, duración, zona horaria y ubicación. No basta con que el archivo se abra: debe registrar la actividad correcta. Comprueba también qué ocurre si el horario cambia después de que alguien lo haya guardado. La página debería seguir siendo una fuente clara para consultar novedades. Evita generar un recordatorio con una fecha de ejemplo y dejarlo disponible en producción. Un detalle incorrecto en el calendario puede afectar a la asistencia aunque el resto de la landing esté bien explicado.
Ponentes, sesiones y material posterior
Relaciona cada participante con su sesión y distingue la biografía del contenido de la actividad. Si habrá material posterior, indica qué se compartirá y con quién, sin prometer grabaciones que todavía no están autorizadas. Para un taller práctico, explica si se necesita equipo propio y qué se puede hacer sin él. Los asistentes deben poder prepararse antes de llegar. Esta información también ayuda a soporte a responder consultas de forma consistente y evita que cada persona reciba instrucciones diferentes según el canal utilizado.
Revisar el registro desde fuera del equipo
El organizador suele tener permisos, cuentas y contexto que un asistente nuevo no tiene. Prueba la inscripción sin depender de esas ventajas. Comprueba campos, mensajes de error y confirmación. Si existe una lista de espera, explica cómo funciona y qué no garantiza. Revisa también qué ocurre cuando se cierra el registro. El botón de la página debe cambiar o informar del estado actual, en lugar de enviar a un formulario inaccesible. Una revisión externa descubre barreras que no aparecen al hacer la prueba con la cuenta del organizador.
Distinguir una maqueta de una convocatoria abierta
Mientras preparas la página, conserva los avisos que identifican los datos ilustrativos y no difundas un registro sin configurar. Cuando la convocatoria esté confirmada, sustituye esas instrucciones por información aprobada y prueba otra vez el recorrido completo. No retires los avisos antes de tener fecha, modalidad y canal de inscripción reales. Una página visualmente terminada puede seguir incompleta desde el punto de vista del asistente. El momento de compartirla debería depender de que permita planificar y registrarse correctamente, además de verse bien desde el móvil de una persona que llega por primera vez.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Organizar la agenda con listas y Entender los formularios HTML.
