Plantilla web fotógrafo HTML y CSS con galería adaptable, pies de foto y contacto. Funciona sin bibliotecas ni imágenes externas.
Una galería que deja espacio a cada fotografía
La plantilla web fotógrafo HTML presenta una selección breve y ordenada, sin carruseles que oculten trabajo detrás de controles pequeños. La página empieza con una descripción del enfoque, muestra la galería y explica cómo se prepara una sesión. Los bloques de color son marcadores deliberados: permiten estudiar la composición sin utilizar fotografías ajenas ni simular un portfolio real. Reemplázalos por imágenes propias o por material que tengas autorización para publicar.
Elegir una selección y darle contexto
Una galería no necesita mostrar todos los archivos de tu carrera. Elige fotografías que representen el servicio que quieres ofrecer y ordena la secuencia con intención. Un retrato, un espacio y un trabajo editorial requieren explicaciones diferentes. Añade contexto suficiente para que el visitante entienda tu papel, especialmente si hubo estilismo, dirección artística o edición compartida. No presentes una práctica como un encargo comercial ni atribuyas autoría sobre elementos que resolvió otro profesional.
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>Luz Serena — Mirar de otra forma</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:#f2efe8;color:#292924}.brand{font:1.8rem Georgia;letter-spacing:-.07em}.hero{padding:80px 0 65px}.hero h1{font:clamp(4.3rem,10.7vw,9rem)/.9 Georgia;letter-spacing:-.065em;margin:30px 0 50px}.hero em{font-weight:400;color:#8b796a}.hero-bottom{display:flex;justify-content:space-between;gap:40px;align-items:start}.hero-number{font-size:.9rem;border-bottom:1px solid #292924;padding-bottom:8px}.hero-bottom p{max-width:350px;font-size:.9rem;color:#726b62}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:70px 50px;align-items:start}.photo{margin:0}.photo button{display:block;width:100%;padding:0;border:0;background:transparent;overflow:hidden}.photo svg{width:100%;display:block;transition:transform .6s}.photo button:hover svg{transform:scale(1.035)}.photo.p1{margin-top:170px}.photo.p2{margin-top:-60px}.photo.p3{margin-top:110px}.photo.p0 svg{aspect-ratio:4/5}.photo.p1 svg{aspect-ratio:5/6}.photo.p2 svg{aspect-ratio:1/1;object-fit:cover}.photo.p3 svg{aspect-ratio:4/5}.photo figcaption{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #29292440;align-items:center}.photo figcaption span{font-size:.55rem;letter-spacing:.1em;color:#726b62}.photo figcaption b{font:1.1rem Georgia;font-weight:400}.gallery+.demo{margin-top:35px;color:#726b62}.about{padding:100px 0}.about>div{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about h2{font:clamp(3rem,5vw,5rem)/1 Georgia;margin:25px 0}.about em{color:#8b796a}.about>div>div{color:#726b62;max-width:430px}.about .button{margin-top:15px;color:#292924;font-size:.85rem}.contact{background:#292924;color:#f2efe8;padding:80px 0}.contact h2{font:clamp(3.5rem,7vw,6rem)/.95 Georgia;margin:30px 0}.contact p{color:#c7c0b7}#photo-dialog{background:#f2efe8;color:#292924;max-height:90vh;overflow:auto}#photo-dialog h2{font:1.5rem Georgia}#photo-large svg{max-height:65vh;width:100%}#photo-dialog p{font-size:.8rem;margin:15px 0 0}@media(max-width:700px){.hero{padding:45px 0}.hero-bottom{display:block}.hero-bottom p{margin-top:25px}.gallery{grid-template-columns:1fr;gap:35px}.photo.p1,.photo.p2,.photo.p3{margin:0}.photo svg{max-height:520px}.about>div{grid-template-columns:1fr;gap:20px}.about{padding:65px 0}.photo figcaption{padding:12px 0}}
</style>
</head>
<body>
<header class="wrap nav"><a class="brand" href="#">luz serena.</a><nav class="links" aria-label="Principal"><a href="#galeria">Selección</a><a href="#mirada">Mi mirada</a><a href="#contacto">Contacto ↗</a></nav></header>
<main><section class="wrap hero reveal"><p class="eyebrow">Fotografía & narrativa visual</p><h1>No es solo<br><em>lo que ves.</em></h1><div class="hero-bottom"><span class="hero-number">Es lo que permanece.</span><p>Una selección de momentos, espacios y pequeñas historias que merecen otra mirada.</p></div></section>
<section id="galeria" class="wrap gallery"><figure class="photo p0"><button type="button" class="open-photo" aria-label="Ampliar paisaje de muestra 1"><svg viewBox="0 0 600 740" role="img" aria-label="Paisaje ilustrado de muestra 1"><rect width="600" height="740" fill="#efd4b3"/><circle cx="435" cy="170" r="78" fill="#fff8e4"/><path d="M0 470 220 200 440 490 600 350V740H0Z" fill="#af8172"/><path d="M0 540 310 320 600 600V740H0Z" fill="#4b6c61"/><path d="M0 650Q180 500 390 660T600 590V740H0Z" fill="#243c37"/></svg></button><figcaption><span>01 / ESTUDIO DE LUZ</span><b>La pausa</b></figcaption></figure><figure class="photo p1"><button type="button" class="open-photo" aria-label="Ampliar paisaje de muestra 2"><svg viewBox="0 0 600 740" role="img" aria-label="Paisaje ilustrado de muestra 2"><rect width="600" height="740" fill="#cedce2"/><circle cx="435" cy="170" r="78" fill="#fff8e4"/><path d="M0 470 220 200 440 490 600 350V740H0Z" fill="#88a7b7"/><path d="M0 540 310 320 600 600V740H0Z" fill="#3c6579"/><path d="M0 650Q180 500 390 660T600 590V740H0Z" fill="#203645"/></svg></button><figcaption><span>02 / ESTUDIO DE LUZ</span><b>Entre montañas</b></figcaption></figure><figure class="photo p2"><button type="button" class="open-photo" aria-label="Ampliar paisaje de muestra 3"><svg viewBox="0 0 600 740" role="img" aria-label="Paisaje ilustrado de muestra 3"><rect width="600" height="740" fill="#e9b9b1"/><circle cx="435" cy="170" r="78" fill="#fff8e4"/><path d="M0 470 220 200 440 490 600 350V740H0Z" fill="#c88878"/><path d="M0 540 310 320 600 600V740H0Z" fill="#6b6d8a"/><path d="M0 650Q180 500 390 660T600 590V740H0Z" fill="#3c3c60"/></svg></button><figcaption><span>03 / ESTUDIO DE LUZ</span><b>Última luz</b></figcaption></figure><figure class="photo p3"><button type="button" class="open-photo" aria-label="Ampliar paisaje de muestra 4"><svg viewBox="0 0 600 740" role="img" aria-label="Paisaje ilustrado de muestra 4"><rect width="600" height="740" fill="#efd4b3"/><circle cx="435" cy="170" r="78" fill="#fff8e4"/><path d="M0 470 220 200 440 490 600 350V740H0Z" fill="#af8172"/><path d="M0 540 310 320 600 600V740H0Z" fill="#4b6c61"/><path d="M0 650Q180 500 390 660T600 590V740H0Z" fill="#243c37"/></svg></button><figcaption><span>04 / ESTUDIO DE LUZ</span><b>Lo cercano</b></figcaption></figure></section><p class="wrap demo">Las imágenes son ilustraciones de muestra. Sustitúyelas por fotografías propias autorizadas.</p>
<section id="mirada" class="wrap about"><p class="eyebrow">Detrás de la cámara</p><div><h2>Buscar la luz.<br>Encontrar<br><em>una historia.</em></h2><div><p>No busco llenar una galería. Busco imágenes que tengan algo que decir.</p><p>Este espacio está pensado para explicar tu enfoque, tus servicios y cómo se prepara una sesión contigo.</p><a class="button" href="#contacto">Hablemos de tu idea ↗</a></div></div></section>
<section id="contacto" class="contact"><div class="wrap"><p class="eyebrow">Lo próximo empieza con una conversación</p><h2>¿Qué historia<br>quieres contar?</h2><p>Configura tu correo profesional, zona de trabajo y forma real de solicitar una sesión.</p></div></section></main><footer class="wrap">Luz Serena · Portfolio de demostración · Imágenes ilustrativas.</footer>
<dialog id="photo-dialog" aria-labelledby="photo-title"><button class="close" type="button" aria-label="Cerrar imagen">×</button><h2 id="photo-title">Imagen de muestra</h2><div id="photo-large"></div><p>Ilustración de ejemplo para visualizar la composición de la galería.</p></dialog>
<script>
const photoDialog=document.querySelector('#photo-dialog');
document.querySelectorAll('.open-photo').forEach(button=>button.addEventListener('click',()=>{
const image=button.querySelector('svg').cloneNode(true);
document.querySelector('#photo-large').replaceChildren(image);
document.querySelector('#photo-title').textContent=button.closest('figure').querySelector('figcaption b').textContent;
photoDialog.showModal();
}));
photoDialog.querySelector('.close').addEventListener('click',()=>photoDialog.close());
</script>
</body>
</html>
Sustituir los marcadores por imágenes reales
Dentro de cada figure cambia el div decorativo por una etiqueta img con ruta, ancho, alto y texto alternativo apropiados. Puedes conservar aspect-ratio y utilizar object-fit si deseas un encuadre uniforme. Revisa cada recorte: una regla automática puede cortar una cara o un detalle importante. Si necesitas mostrar la composición completa, permite que la altura siga la proporción original. Elige el sistema según el contenido fotográfico, no solamente por la simetría de las tarjetas.
Preparar archivos para una web rápida
Exporta versiones ajustadas al tamaño de presentación y comprueba su calidad visual antes de subirlas. No utilices originales de cámara enormes para miniaturas pequeñas. Para varias resoluciones puedes incorporar srcset y sizes, manteniendo rutas que existan realmente. loading lazy suele ser apropiado para imágenes alejadas del inicio, mientras que la primera imagen relevante necesita una decisión más cuidadosa. Reserva dimensiones para que la galería no salte durante la carga y prueba el resultado con una conexión lenta.
Texto alternativo y pies de foto
El texto alternativo comunica la información visual relevante cuando no se ve la imagen; el pie aporta contexto editorial visible para todos. No tienen que repetir exactamente lo mismo. Describe la escena o el detalle que hace significativa la fotografía sin convertir el atributo alt en una lista de palabras clave. Si una imagen es puramente decorativa, un alt vacío puede ser adecuado. Evita incluir información personal de modelos o clientes que no deba publicarse.
Contacto con información útil para presupuestar
El apartado final debe indicar un canal real, la zona de trabajo y qué necesita saber el fotógrafo para valorar una sesión. Fecha aproximada, tipo de proyecto y uso previsto de las imágenes pueden ser más útiles que un formulario muy largo. No publiques tarifas universales si tu servicio depende de condiciones que todavía no has definido. Explica cómo se confirma una reserva y qué pasos siguen después de la primera consulta, utilizando la operativa que realmente puedas cumplir.
Una experiencia táctil sin funciones escondidas
La versión inicial no depende de hover para revelar nombres o enlaces. En móviles, esa información debe permanecer disponible sin ratón. Si añades una ampliación de fotografías, diseña un diálogo con cierre visible, manejo de foco y teclado. Un lightbox no se resuelve solamente oscureciendo el fondo y colocando una imagen encima. Antes de incorporarlo, valora si una página de proyecto con imágenes amplias y explicación aporta una experiencia más clara y fácil de mantener.
Revisar el portfolio como una secuencia editorial
Comprueba la galería desde móvil, escritorio y con zoom. Verifica que cada imagen carga, conserva su encuadre y tiene un pie que aporta información. Recorre la navegación con teclado y confirma el foco visible. Después lee los textos de sesión para detectar promesas o condiciones ambiguas. La página está lista cuando permite entender tu enfoque y contactar sin dudas, además de mostrar un conjunto visual cuidado. Mantén una revisión periódica de enlaces, disponibilidad y selección fotográfica.
Ordenar la galería con una intención reconocible
Puedes agrupar por tipo de servicio, proyecto o serie, pero evita mezclar criterios sin una explicación. Una secuencia de retratos puede mostrar coherencia de enfoque; varios géneros pueden demostrar amplitud si el visitante entiende cómo se relacionan. No uses filtros como sustituto de una selección editorial inicial. Si añades categorías, asegúrate de que el contenido esencial sigue disponible cuando el script falla. Para una primera versión, unas pocas fotografías bien elegidas y con contexto suelen ofrecer un recorrido más claro que una biblioteca extensa sin jerarquía.
Color y nitidez en diferentes pantallas
La misma fotografía puede verse distinta según pantalla, brillo y gestión de color. Exporta con un flujo apropiado para web y revisa varios dispositivos, sin prometer una reproducción idéntica en todos. Comprueba especialmente imágenes oscuras y detalles finos después de comprimir. Una reducción de peso excesiva puede generar artefactos visibles justo donde quieres mostrar calidad. No añadas filtros CSS globales a las fotografías para que combinen con la paleta del sitio: el portfolio debe representar el trabajo con la mayor fidelidad razonable.
Separar selección pública y entrega al cliente
La galería de presentación no debería convertirse accidentalmente en una entrega de archivos privados. Si necesitas acceso restringido, utiliza un sistema que gestione permisos de verdad; ocultar un enlace o escribir una contraseña solamente en JavaScript no protege los archivos. Mantén la página pública dedicada a trabajos autorizados y describe por separado cómo recibe el cliente su selección. Esa separación también facilita optimizar las imágenes para la web sin confundirlas con versiones de impresión o archivos finales de una sesión contratada.
Comprobar nombres de archivo y rutas publicadas
Las imágenes pueden funcionar localmente y fallar al subirlas si cambia una mayúscula o una carpeta. Utiliza nombres claros, evita referencias a rutas privadas de tu equipo y prueba la página publicada. Revisa la pestaña de red para localizar solicitudes fallidas antes de atribuir el problema a la galería. Si reemplazas una fotografía, confirma que el pie y el texto alternativo siguen describiendo la nueva imagen. No mantengas una descripción antigua solamente porque el archivo conserva el mismo nombre. La coherencia editorial también se comprueba en los detalles que no siempre aparecen en la composición visual.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Controlar el encuadre con object-fit y Optimizar imágenes para web.
